@cntwg/html-helper 0.0.21 → 0.0.22

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+#### *v0.0.22*
+
+Pre-release version.
+
+> - `html-helper-lib.md` updated;
+> - add functions `valueToElementID` into `html-helper-lib.js` module;
+> - improve behavior for `createNewHtmlElement` function.
+
 #### *v0.0.21*
 
 Pre-release version.
@@ -8,6 +16,7 @@ Pre-release version.
 > - updated dependency on `@ygracs/bsfoc-lib-js` module to v0.2.1;
 > - remove some deprecates (*see docs for details*);
 > - change behavior for `loadItems` method of `THtmlStubItemsSet` class in handling `options` parameter (*see docs for details*);
+> - add functions `readAsTagName` and `readAsAttrName` into `html-helper-lib.js` module;
 > - added 'components' property for module exports;
 > - some other fixes.
 

package/doc/html-helper-lib.md

@@ -1,6 +1,6 @@
->|***rev.*:**|0.1.11|
+>|***rev.*:**|0.1.12|
 >|:---|---:|
->|date:|2023-07-13|
+>|date:|2023-07-14|
 
 ## Introduction
 
@@ -148,3 +148,9 @@ This function tries to convert a given `value` to the value of type which is sui
 #### **readAsAttrValue(value)**
 
 This function tries to convert a given `value` to the value of type which is suitable for an HTML-element's attribute. If failed a `null` is returned.
+
+#### **valueToElementID(value)**
+
+> since: `v0.0.22`
+
+This function tries to convert a given `value` to the value of a valid identifier which is suitable for an HTML-element's ID-attribute. If failed an empty string is returned.

package/index.js

@@ -1,4 +1,4 @@
-// [v0.1.019-20240713]
+// [v0.1.021-20240714]
 
 // === module init block ===
 
@@ -62,6 +62,7 @@ module.exports.components = components;
 module.exports.readAsTagName = html_helper.readAsTagName;
 module.exports.readAsAttrName = html_helper.readAsAttrName;
 module.exports.readAsAttrValue = html_helper.readAsAttrValue;
+module.exports.valueToElementID = html_helper.valueToElementID;
 module.exports.createNewHtmlElement = html_helper.createNewHtmlElement;
 
 module.exports.THtmlInputField = html_flds.THtmlInputField;

package/lib/html-ctrls/list.js

@@ -1,4 +1,4 @@
-// [v0.1.062-20240705]
+// [v0.1.063-20240714]
 
 // === module init block ===
 
@@ -37,6 +37,16 @@ const ILC_SMODE_CTRL = 2;
 
 // === module extra block (helper functions) ===
 
+/**
+ * @function srchListElementByAttr
+ * @param {TItemsListEx}
+ * @param {string}
+ * @param {string}
+ * @returns {object}
+ * @inner
+ * @description Searches an element in a list by a given attributes
+ *              of that element.
+ */
 function srchListElementByAttr(list, name, value = '') {
   const _value = readAsAttrValue(value);
   let item = null;

package/lib/html-helper-lib.js

@@ -1,4 +1,4 @@
-// [v0.1.031-20240713]
+// [v0.1.033-20240714]
 
 // === module init block ===
 
@@ -261,7 +261,8 @@ function activateHtmlElements(...args) {
  */
 function readAsTagName(value) {
   let tagName = valueToIDString(value, { ignoreNumbers: true });
-  if (tagName !== null && tagName !== '') {
+  if (tagName === null) return '';
+  if (tagName !== '') {
     // // TODO: do extra checks
     const template = /[^\w]/;
     const trigger = tagName.match(template);
@@ -271,7 +272,7 @@ function readAsTagName(value) {
     };
     if (tagName !== '') tagName = tagName.toLowerCase();
   };
-  return tagName === null ? '' : tagName;
+  return tagName;
 };
 
 /**
@@ -284,7 +285,8 @@ function readAsTagName(value) {
  */
 function readAsAttrName(value) {
   let attrName = valueToIDString(value, { ignoreNumbers: true });
-  if (attrName !== null && attrName !== '') {
+  if (attrName === null) return '';
+  if (attrName !== '') {
     // // TODO: do extra checks
     const template = /[\s\/\\\"\'<>=]/;
     const trigger = attrName.match(template);
@@ -293,13 +295,14 @@ function readAsAttrName(value) {
       attrName = '';
     };
   };
-  return attrName === null ? '' : attrName;
+  return attrName;
 };
 
 /**
  * @function readAsAttrValue
  * @param {any}
  * @return {?string}
+ * @since v0.0.18
  * @description Tries to convert a given value to a valid "attribute value".
  */
 function readAsAttrValue(value) {
@@ -330,6 +333,7 @@ function readAsAttrValue(value) {
  * @param {any}
  * @param {bool} [opt]
  * @return {array}
+ * @since v0.0.13
  * @description Tries to convert a given value to a list of a valid
  *              "class attributes".
  */
@@ -352,6 +356,29 @@ function valueToClassList(value, opt) {
   return result;
 };
 
+/**
+ * @function valueToElementID
+ * @param {any}
+ * @return {string}
+ * @since v0.0.22
+ * @description Tries to convert a given value to a valid identifier
+ *              suitable as a value for an "ID-attribute" of an HTML-element.
+ */
+function valueToElementID(value) {
+  let id = valueToIDString(value);
+  if (id === null) return '';
+  if (id !== '') {
+    // // TODO: do extra checks
+    const template = /[\s\/\\\"\'<>=]/;
+    const trigger = id.match(template);
+    if (trigger) {
+      //console.log(trigger);
+      id = '';
+    };
+  };
+  return id;
+};
+
 /**
  * @function createNewHtmlElement
  * @param {string}
@@ -385,7 +412,7 @@ function createNewHtmlElement(tagName, opt) {
       data: dset,
     } = opt;
     // set an element id
-    if ((id = valueToIDString(id)) !== null) item.setAttribute('id', id);
+    if ((id = valueToElementID(id)) !== '') item.setAttribute('id', id);
     // set an element text context
     if (typeof text === 'string') {
       item.appendChild(document.createTextNode(text));
@@ -396,9 +423,20 @@ function createNewHtmlElement(tagName, opt) {
       for (let [ key, value ] of attr ) {
         if (
           ((key = readAsAttrName(key)) !== '')
-          && ((value = readAsAttrValue(value)) !== null)
         ) {
-          item.setAttribute(key.toLowerCase(), value);
+          key = key.toLowerCase();
+          if (key === 'id') {
+            if (
+              id === ''
+              && ((value = valueToElementID(value)) !== '')
+            ) {
+              item.setAttribute('id', value);
+            };
+          } else {
+            if ((value = readAsAttrValue(value)) !== null) {
+              item.setAttribute(key, value);
+            };
+          };
         };
       };
     };
@@ -464,6 +502,7 @@ module.exports.createNewHtmlElement = createNewHtmlElement;
 module.exports.readAsAttrValue = readAsAttrValue;
 module.exports.readAsTagName = readAsTagName;
 module.exports.readAsAttrName = readAsAttrName;
+module.exports.valueToElementID = valueToElementID;
 
 // re-exported
 module.exports.valueToIDString = valueToIDString;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntwg/html-helper",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "A base HTML-helper library for js",
   "author": "ygracs <cs70th-om@rambler.ru>",
   "license": "MIT",