@cntwg/html-helper 0.0.14

package/lib/html-helper-lib.js

@@ -0,0 +1,228 @@
+// [v0.1.013-20220903]
+
+// === module init block ===
+
+const {
+  //isEmptyString, isNotEmptyString,
+  readAsString,
+  //readAsListS,
+  isArray, isObject, isPlainObject, valueToArray,
+} = require('@ygracs/bsfoc-lib-js');
+
+const CSS_CLASS_CURRENT = 'current';
+const CSS_CLASS_SELECTED = 'selected';
+const CSS_CLASS_ACTIVE = 'active';
+const CSS_CLASS_DISABLED = 'disabled';
+const CSS_CLASS_HIDDEN = 'hidden';
+
+// === module extra block (helper functions) ===
+
+// === module main block (function definitions) ===
+
+function isHTMLElement(obj){ return obj instanceof HTMLElement; };
+
+function isSelectedHTMLElement(obj){
+  return isHTMLElement(obj) && obj.classList.contains(CSS_CLASS_SELECTED);
+};
+
+function isCurrentHTMLElement(obj){
+  return isHTMLElement(obj) && obj.classList.contains(CSS_CLASS_CURRENT);
+};
+
+function isActiveHTMLElement(obj){
+  return isHTMLElement(obj) && obj.classList.contains(CSS_CLASS_ACTIVE);
+};
+
+function isHiddenHTMLElement(obj){
+  return isHTMLElement(obj) && obj.classList.contains(CSS_CLASS_HIDDEN);
+};
+
+function hideHtmlElement(obj){
+  const isSUCCEED = isHTMLElement(obj);
+  if (isSUCCEED) obj.classList.add(CSS_CLASS_HIDDEN);
+  return isSUCCEED;
+};
+
+function showHtmlElement(obj){
+  const isSUCCEED = isHTMLElement(obj);
+  if (isSUCCEED) obj.classList.remove(CSS_CLASS_HIDDEN);
+  return isSUCCEED;
+};
+
+function selectHtmlElement(obj){
+  const isSUCCEED = isHTMLElement(obj);
+  if (isSUCCEED) obj.classList.add(CSS_CLASS_SELECTED);
+  return isSUCCEED;
+};
+
+function unselectHtmlElement(obj){
+  const isSUCCEED = isHTMLElement(obj);
+  if (isSUCCEED) obj.classList.remove(CSS_CLASS_SELECTED);
+  return isSUCCEED;
+};
+
+function markHtmlElementAsCurrent(obj){
+  const isSUCCEED = isHTMLElement(obj);
+  if (isSUCCEED) obj.classList.add(CSS_CLASS_CURRENT);
+  return isSUCCEED;
+};
+
+function unmarkCurrentHtmlElement(obj){
+  const isSUCCEED = isHTMLElement(obj);
+  if (isSUCCEED) obj.classList.remove(CSS_CLASS_CURRENT);
+  return isSUCCEED;
+};
+
+function markHtmlElementAsActive(obj){
+  const isSUCCEED = isHTMLElement(obj);
+  if (isSUCCEED) obj.classList.add(CSS_CLASS_ACTIVE);
+  return isSUCCEED;
+};
+
+function unmarkActiveHtmlElement(obj){
+  const isSUCCEED = isHTMLElement(obj);
+  if (isSUCCEED) obj.classList.remove(CSS_CLASS_ACTIVE);
+  return isSUCCEED;
+};
+
+function inactivateHtmlElements(...args) {
+  for (let item of args) {
+    if (item instanceof HTMLElement) {
+      item.classList.add(CSS_CLASS_DISABLED);
+      switch (item.tagName.toLowerCase()) {
+        case 'button':
+        case 'input':
+          item.disabled = true; break;
+        default:
+          break;
+      };
+    };
+  };
+};
+
+function activateHtmlElements(...args) {
+  for (let item of args) {
+    if (item instanceof HTMLElement) {
+      item.classList.remove(CSS_CLASS_DISABLED);
+      switch (item.tagName.toLowerCase()) {
+        case 'button':
+        case 'input':
+          item.disabled = false; break;
+        default:
+          break;
+      };
+    };
+  };
+};
+
+function valueToClassList(value, opt){
+  let result = [];
+  let list = valueToArray(value);
+  list.forEach((elem) => {
+    let value = '';
+    if (
+      typeof elem === 'string'
+      && ((value = elem.trim()) !== '')
+    ) {
+      value = value.split(/\s+/);
+      if (value.length > 0) result.push(...value);
+    };
+  });
+  if (result.length > 0 && typeof opt === 'boolean' && opt) {
+    result = [ ...(new Set(result)) ];
+  };
+  return result;
+};
+
+function createNewHtmlElement(tagName, opt){
+  let _tag = typeof tagName === 'string' ? tagName.trim() : '';
+  if (_tag === '') return null;
+  let item = document.createElement(_tag.toLowerCase());
+  if (isPlainObject(opt)) {
+    let {
+      id,
+      text,
+      attr,
+      class: _class,
+      data: dset,
+    } = opt;
+    // set an element id
+    id = typeof id === 'string' ? id.trim() : '';
+    if (id !== '') item.setAttribute('id', id);
+    // set an element text context
+    if (typeof text === 'string') {
+      item.appendChild(document.createTextNode(text));
+    };
+    // set an attributes of the element
+    if (isObject(attr)) {
+      attr = isArray(attr) ? attr : Object.entries(attr);
+      for (let [ key, value ] of attr ) {
+        key = (typeof key === 'string') ? key.trim() : '';
+        if (key !== '') {
+          value = readAsString(value, '', {
+            useTrim: true,
+            numberToString: true,
+            boolToString: true,
+          });
+          if (value !== '') item.setAttribute(key.toLowerCase(), value);
+        }
+      };
+    };
+    // set a class-attributes of the element
+    if (_class !== undefined) {
+      const cl = valueToClassList(_class, true);
+      if (cl.length > 0) item.classList.add(...cl);
+    };
+    // set a data-attributes of the element
+    if (isObject(dset)) {
+      dset = isArray(dset) ? dset : Object.entries(dset);
+      for (let [ key, value ] of dset ) {
+        key = (typeof key === 'string') ? key.trim() : '';
+        if (key !== '') {
+          value = readAsString(value, '', {
+            useTrim: true,
+            numberToString: true,
+            boolToString: true,
+          });
+          if (value !== '') item.dataset[key] = value;
+        }
+      };
+    };
+    // set an event handlers for the element
+    let evnt = null;
+  };
+  return item;
+};
+
+// === module main block (class definitions) ===
+
+// === module exports block ===
+
+exports.CSS_CLASS_STRING = /*function(){ return*/ {
+  CSS_CLASS_CURRENT: CSS_CLASS_CURRENT,
+  CSS_CLASS_SELECTED: CSS_CLASS_SELECTED,
+  CSS_CLASS_ACTIVE: CSS_CLASS_ACTIVE,
+  CSS_CLASS_DISABLED: CSS_CLASS_DISABLED,
+  CSS_CLASS_HIDDEN: CSS_CLASS_HIDDEN
+}/*}*/;
+
+exports.isHTMLElement = isHTMLElement;
+exports.isCurrentHTMLElement = isCurrentHTMLElement;
+exports.isSelectedHTMLElement = isSelectedHTMLElement;
+exports.isActiveHTMLElement = isActiveHTMLElement;
+exports.isHiddenHTMLElement = isHiddenHTMLElement;
+exports.showHtmlElement = showHtmlElement;
+exports.hideHtmlElement = hideHtmlElement;
+exports.selectHtmlElement = selectHtmlElement;
+exports.unselectHtmlElement = unselectHtmlElement;
+exports.markHtmlElementAsCurrent = markHtmlElementAsCurrent;
+exports.unmarkCurrentHtmlElement = unmarkCurrentHtmlElement;
+exports.markHtmlElementAsActive = markHtmlElementAsActive;
+exports.unmarkActiveHtmlElement = unmarkActiveHtmlElement;
+exports.activateHtmlElements = activateHtmlElements;
+exports.inactivateHtmlElements = inactivateHtmlElements;
+
+exports.valueToClassList = valueToClassList;
+
+// experimental
+exports.createNewHtmlElement = createNewHtmlElement;

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@cntwg/html-helper",
+  "version": "0.0.14",
+  "description": "A base HTML-helper library for js",
+  "author": "ygracs <cs70th-om@rambler.ru>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/cntwg/html-helper.git"
+  },
+  "main": "./index.js",
+  "files": [
+    "doc/html-helper-lib.md",
+    "doc/html-ctrls-list.md",
+    "doc/html-ctrls-btn.md",
+    "lib/html-helper-lib.js",
+    "lib/html-ctrls/lists-stubs.js",
+    "lib/html-ctrls/lists-btns.js",
+    "lib/html-ctrls-list.js",
+    "lib/html-ctrls-btn.js",
+    "index.js"
+  ],
+  "scripts": {
+    "test": "jest",
+    "test-bs": "jest base/",
+    "test-lc1": "jest THtmlItemsListContainer",
+    "test-lc2": "jest THtmlItemsListController",
+    "test-lc2:bs": "jest THtmlItemsListController/base",
+    "test-lc2:ec": "jest THtmlItemsListController/events",
+    "test-sis": "jest THtmlStubItemsSet",
+    "test-btn": "jest THtmlButtonsSet",
+    "test-lbc": "jest THtmlListButtonsController",
+    "test-lbc:bs": "jest THtmlListButtonsController/base",
+    "test-lbc:ec": "jest THtmlListButtonsController/events",
+    "test-bc1": "jest THtmlButtonsControllerARCSet",
+    "test-bc1:bs": "jest THtmlButtonsControllerARCSet/base",
+    "test-bc1:ec": "jest THtmlButtonsControllerARCSet/events"
+  },
+  "dependencies": {
+    "@ygracs/bsfoc-lib-js": "^0.1.2"
+  },
+  "devDependencies": {
+    "jest": "^27.5.1"
+  }
+}