@jeefo/jqlite - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

event_methods.js

 /* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.
 * File Name   : event_methods.js
 * Created at  : 2017-08-03
-* Updated at  : 2019-11-27
+* Updated at  : 2020-06-25
 * Author      : jeefo
@@ -103,9 +103,15 @@ * Purpose     :
 extend_member(JeefoElement, "trigger", function (event_name, options) {
-    // Deprecated for old browsers
-    // const event = document.createEvent("Event");
-    // event.initEvent(event_name, bubble, is_cancelable);
+    if (this.DOM_element) {
+        // Deprecated for old browsers
+        // const event = document.createEvent("Event");
+        // event.initEvent(event_name, bubble, is_cancelable);
 
-    // new way construct Event in 2019
-    const event = new Event(event_name, options);
-    if (this.DOM_element) {
+        // new way construct Event in 2019
+        const event = new Event(event_name, options);
+        if (options && options.data) {
+            event.data = options.data;
+        }
+        if (options && options.properties) {
+            Object.assign(event, options.properties);
+        }
         return this.DOM_element.dispatchEvent(event);
@@ -112,0 +118,0 @@ }

index.js

 /* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.
 * File Name   : index.js
 * Created at  : 2017-08-08
-* Updated at  : 2019-11-17
+* Updated at  : 2020-06-24
 * Author      : jeefo
@@ -17,32 +17,23 @@ * Purpose     :
 
-const JeefoElement  = require("./jeefo_element");
-const JeefoElements = require("./jeefo_elements");
+const JeefoElement   = require("./jeefo_element");
+const JeefoDOMParser = require("./dom_parser");
 
-const is_object = o => o !== null && typeof o === "object";
+const is_valid_node = n => n instanceof Element || n instanceof Comment;
 
-module.exports = function jqlite (element) {
-	if (JeefoElement.is_jeefo_element(element)) {
-		return element;
+module.exports = function (element) {
+	if (element instanceof JeefoElement) {
+        return new JeefoElement(element.DOM_element);
+    } else if (is_valid_node(element)) {
+        return new JeefoElement(element);
     } else if (typeof element === "string") {
         // Convert html text into DOM nodes
-        let wrapper = document.createElement("div");
-        wrapper.insertAdjacentHTML("afterbegin", element);
+        const elements = JeefoDOMParser.parse(element);
+        if (elements.length !== 1 || ! is_valid_node(elements[0])) {
+            throw new Error("Invalid HTML");
+        }
 
-        const elements = [];
-        while (wrapper.firstChild) {
-            elements.push(wrapper.firstChild);
-            wrapper.removeChild(wrapper.firstChild);
-        }
-        if (elements.length > 1) {
-            return new JeefoElements(elements);
-        } else if (elements.length === 1) {
-            element = elements[0];
-        }
+        return new JeefoElement(elements[0]);
 	}
 
-    if (is_object(element) && "nodeType" in element) {
-        return new JeefoElement(element);
-    }
-
     throw new Error("Invalid argument: jqlite(element)");
 };

jeefo_element.js

 /* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.
 * File Name   : jeefo_element.js
 * Created at  : 2017-01-06
-* Updated at  : 2019-12-28
+* Updated at  : 2020-06-24
 * Author      : jeefo
@@ -37,66 +37,9 @@ * Purpose     :
 
-const JEEFO_ELEMENT = 933603132357;
-
 //ignore:end
 
-const for_each  = require("@jeefo/utils/object/for_each");
-const Readonly  = require("@jeefo/utils/object/readonly");
 const dash_case = require("@jeefo/utils/string/dash_case");
+const {slice}   = Array.prototype;
 
-let JeefoElement;
-
-class JeefoElements {
-    constructor (elements) {
-        this.length = elements.length;
-        for (let i = 0; i < elements.length; ++i) {
-            this[i] = elements[i];
-        }
-    }
-
-	eq (index) {
-		return new JeefoElement(this[index]);
-	}
-
-	first (query) {
-        for (let i = 0; i < this.length; i += 1) {
-            const node = this[i].querySelector(query);
-            if (node) { return new JeefoElement(node); }
-        }
-        return null;
-	}
-
-	find (query) {
-        const elements = [];
-        for (let i = 0; i < this.length; i += 1) {
-            const nodes = this[i].querySelectorAll(query);
-            for (let j = 0; j < nodes.length; j += 1) {
-                elements.push(nodes[j]);
-            }
-        }
-        return new JeefoElements(elements);
-	}
-
-	remove () {
-		for (let i = 0; i < this.length; ++i) {
-			this[i].parentNode.removeChild(this[i]);
-		}
-	}
-
-	text (value) {
-		if (value === undefined) {
-			value = '';
-			for (let i = 0; i < this.length; ++i) {
-                // TODO: research about is textContent right?
-				value += this[i].textContent;
-			}
-			return value;
-		}
-		for (let i = 0; i < this.length; ++i) {
-			this[i].textContent = value;
-		}
-	}
-}
-
 // Constructor
-JeefoElement = class JeefoElement {
+class JeefoElement {
     constructor (element) {
@@ -106,22 +49,18 @@ this.DOM_element = element;
 
-    get value () {
-        return this.DOM_element.value;
-    }
-    set value (value) {
-        this.DOM_element.value = value;
-    }
-	get text ()      { return this.DOM_element.innerText; }
-	set text (value) { this.DOM_element.innerText = value; }
+    get value ()      { return this.DOM_element.value;  }
+    set value (value) { this.DOM_element.value = value; }
 
-    get name () {
-        return this.DOM_element.tagName;
-    }
+    // Don't use innerText here.
+    // Because innerText takes CSS styles into account, triggering reflow to
+    // up-to-date computes style and computationally expensive.
+	get text ()      { return this.DOM_element.textContent;  }
+	set text (value) { this.DOM_element.textContent = value; }
 
-    get child_element_length () {
-        return this.DOM_element.childElementCount;
-    }
+    get name () { return this.DOM_element.tagName; }
 
 	// DOM methods
+    is (node) {
+        return this.DOM_element === node;
+    }
 	remove () {
-        this.trigger("ditach");
         if (this.DOM_element && this.DOM_element.parentNode) {
@@ -131,12 +70,15 @@ this.DOM_element.parentNode.removeChild(this.DOM_element);
         this.DOM_element = null;
+        return this;
 	}
 	before (node) {
-        if (node.type === JEEFO_ELEMENT) { node = node.DOM_element; }
+        if (node instanceof JeefoElement) { node = node.DOM_element; }
 		this.DOM_element.parentNode.insertBefore(node, this.DOM_element);
+        return this;
 	}
 	after (node) {
-        if (node.type === JEEFO_ELEMENT) { node = node.DOM_element; }
+        if (node instanceof JeefoElement) { node = node.DOM_element; }
 		this.DOM_element.parentNode.insertBefore(
             node, this.DOM_element.nextSibling
         );
+        return this;
 	}
@@ -146,14 +88,15 @@ clone (is_deep) {
 	}
+    parent () {
+        if (this.DOM_element.parentNode) {
+            return new JeefoElement(this.DOM_element.parentNode);
+        }
+        return null;
+    }
 	append (node) {
-        if (node.type === JEEFO_ELEMENT) { node = node.DOM_element; }
+        if (node instanceof JeefoElement) { node = node.DOM_element; }
 		this.DOM_element.appendChild(node);
+        return this;
 	}
 	replace (node) {
-        if (node.type === JEEFO_ELEMENT) {
-            node.trigger("detach");
-            node = node.DOM_element;
-        } else {
-            const $node = new JeefoElement(node);
-            $node.trigger("detach");
-        }
+        if (node instanceof JeefoElement) { node = node.DOM_element; }
 		this.DOM_element.parentNode.replaceChild(node, this.DOM_element);
@@ -171,12 +114,13 @@ this.DOM_element = node;
         const elements = this.DOM_element.querySelectorAll(query);
-        return new JeefoElements(elements);
+        return slice.call(elements);
 	}
-	children (index) {
-		return new JeefoElement(this.DOM_element.childNodes[index]);
+	children (index, ...args) {
+        let result = this.DOM_element.children[index];
+        for (const i of args) {
+            result = result.children[i];
+        }
+		return new JeefoElement(result);
 	}
-    parent () {
-		return new JeefoElement(this.DOM_element.parentNode);
-    }
     prev () {
-		return new JeefoElement(this.DOM_element.previousSibling);
+		return new JeefoElement(this.DOM_element.previousElementSibling);
     }
@@ -189,34 +133,33 @@ next () {
 	get_attr (key, to_dash_case = true) {
-        if (to_dash_case) { key = dash_case(key); }
-		return this.DOM_element.getAttribute(key);
+		return this.DOM_element.getAttribute(
+            to_dash_case ? dash_case(key) : key
+        );
 	}
 	set_attr (key, value = '', to_dash_case = true) {
-        if (to_dash_case) { key = dash_case(key); }
-		this.DOM_element.setAttribute(key, value);
+		this.DOM_element.setAttribute(
+            to_dash_case ? dash_case(key) : key, value
+        );
+        return this;
 	}
 	has_attr (key, to_dash_case = true) {
-        if (to_dash_case) { key = dash_case(key); }
-		return this.DOM_element.hasAttribute(key);
+		return this.DOM_element.hasAttribute(
+            to_dash_case ? dash_case(key) : key
+        );
 	}
 	remove_attr (key, to_dash_case = true) {
-        if (to_dash_case) { key = dash_case(key); }
-		this.DOM_element.removeAttribute(key);
+		this.DOM_element.removeAttribute(
+            to_dash_case ? dash_case(key) : key
+        );
+        return this;
 	}
     attrs (attrs, to_dash_case = true) {
-        for_each(attrs, (key, value) => {
-            this.set_attr(key, value, to_dash_case);
-        });
+        for (const prop of Object.keys(attrs)) {
+            this.DOM_element.setAttribute(
+                to_dash_case ? dash_case(prop) : prop, attrs[prop]
+            );
+        }
+        return this;
     }
+}
 
-    static is_jeefo_element (element) {
-        return element.type === JEEFO_ELEMENT;
-    }
-};
-
-// Makes array like object
-//JeefoElement.prototype.length = 0;
-//JeefoElement.prototype.splice = [].splice;
-//JeefoElement.prototype.push = [].push;
-//JeefoElement.prototype.sort = [].sort;
-
 require("./event_methods")(JeefoElement);
@@ -226,5 +169,2 @@ require("./class_methods")(JeefoElement);
 
-const r = new Readonly(JeefoElement.prototype);
-r.prop("type", JEEFO_ELEMENT);
-
 module.exports = JeefoElement;

package.json

 {
     "name": "@jeefo/jqlite",
-    "version": "0.0.4",
+    "version": "0.0.5",
     "homepage": "https://github.com/je3f0o/jeefo_jqlite",
@@ -5,0 +5,0 @@ "copyright": "2018",

style_methods.js

 /* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.
 * File Name   : style_methods.js
 * Created at  : 2017-08-03
-* Updated at  : 2019-12-11
+* Updated at  : 2020-06-23
 * Author      : jeefo
@@ -23,4 +23,8 @@ * Purpose     :
 
+//const MS_HACK    = /^-ms-/;
+//const DASH_CASE  = /[_-]([a-z])/g;
+const CAMEL_CASE = /[A-Z]/g;
+
 // Camel case
-const camel_case_replace = (_, letter) => letter.toUpperCase();
+//const camel_case_replace = (_, letter) => letter.toUpperCase();
 
@@ -31,6 +35,2 @@ /**
  */
-const kebab_to_camel = (() => {
-    const DASH_LOWERCASE_REGEXP = /[_-]([a-z])/g;
-    return name => name.replace(DASH_LOWERCASE_REGEXP, camel_case_replace);
-})();
 
@@ -41,8 +41,12 @@ /**
  * @param name Name to normalize
+const kebab_to_camel = name =>
+    name.replace(MS_HACK, "ms-").replace(DASH_CASE, camel_case_replace);
  */
-const css_kebab_to_camel = (() => {
-    const MS_HACK_REGEXP = /^-ms-/;
-    return name => kebab_to_camel(name.replace(MS_HACK_REGEXP, "ms-"));
-})();
 
+/**
+ * Converts camelCase to kebab-case.
+ * @param name - Name to normalize
+ */
+const camel_to_kebab = s => s.replace(CAMEL_CASE, m => `-${m.toLowerCase()}`);
+
 /*
@@ -101,28 +105,25 @@ // int parser
 
-extend_member(JeefoElement, "style", function (name, value) {
-    const property = css_kebab_to_camel(name);
-    if (value === undefined) {
-        return this.DOM_element.style[property];
-    /*
-    } else if (value === null) {
-        return this.DOM_element.style.removeProperty(property);
-    */
+extend_member(JeefoElement, "style", function (property, value, to_kebab=true) {
+    if (to_kebab) {
+        property = camel_to_kebab(property);
     }
-    this.DOM_element.style[property] = value;
+
+    switch (value) {
+        case undefined :
+            return this.DOM_element.style.getPropertyValue(property);
+        case null :
+            return this.DOM_element.style.removeProperty(property);
+    }
+    this.DOM_element.style.setProperty(property, value);
 });
 
-extend_member(JeefoElement, "css", (() => {
-    const object_keys = Object.keys;
+extend_member(JeefoElement, "css", function (styles, to_kebab = true) {
+    for (const prop of Object.keys(styles)) {
+        this.style(prop, styles[prop], to_kebab);
+    }
+});
 
-    return function (styles) {
-        const style_attribute = this.DOM_element.style;
-        for (let i = 0, props = object_keys(styles); i < props.length; ++i) {
-            const property = css_kebab_to_camel(props[i]);
-            style_attribute[property] = styles[props[i]];
-        }
-    };
-})());
-
 extend_member(JeefoElement, "trigger_reflow", function () {
-    this.DOM_element.offsetHeight; // jshint ignore:line
+    this.DOM_element.getBoundingClientRect();
+    //this.DOM_element.offsetHeight; // jshint ignore:line
 });
@@ -136,3 +137,3 @@
     set (value) {
-        if (typeof value === "number") { value = `${ value }px`; }
+        if (typeof value === "number") { value = `${value}px`; }
         this.DOM_element.style.width = value;
@@ -145,3 +146,3 @@ }
     set (value) {
-        if (typeof value === "number") { value = `${ value }px`; }
+        if (typeof value === "number") { value = `${value}px`; }
         this.DOM_element.style.height = value;
@@ -148,0 +149,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21481

increased by0.54%

Number of package files

10

increased by11.11%

Worsened metrics

Lines of code

611

decreased by-0.49%

No dependency changes