@cntwg/html-helper 0.0.16 → 0.0.18

package/CHANGELOG.md

@@ -0,0 +1,165 @@
+#### *v0.0.18*
+
+Pre-release version.
+
+> - `html-helper-lib.md` updated;
+> - some fixes in `html-helper-lib.js` module;
+> - add `mod-hfunc.js` module;
+> - rename module `html-ctrls-list.js` to `html-ctrls/list.js`;
+> - some fixes in `list.js` module;
+> - rename module `html-ctrls-btn.js` to `html-ctrls/buttons.js`;
+> - some fixes in `buttons.js` module;
+> - some fixes in `lists-btn.js` module;
+> - some fixes in `lists-stubs.js` module;
+> - add function `readAsAttrValue` into `html-helper-lib.js` module;
+> - add settings `itemBaseClassID` to `THtmlItemsListContainer` class constructor `options` parameter;
+> - added 'component' property for module exports;
+> - deprecated  'classes' property for module exports (*use `component` instead*);
+
+#### *v0.0.17*
+
+Pre-release version.
+
+> improved event logic on items deletion for `THtmlItemsListController` class.
+
+#### *v0.0.16*
+
+Pre-release version.
+
+> improved items selection logic for `THtmlItemsListController` class.
+
+#### *v0.0.15*
+
+Pre-release version.
+
+> - `html-helper-lib.md` updated;
+> - `html-ctrls-list.md` updated;
+> - some fixes in `html-ctrls-btn.js` module;
+> - some fixes in `html-ctrls-list.js` module;
+> - alter behavior for the `srchIndexByAttr` method of a `THtmlItemsListContainer` class (*see docs for details*);
+> - add settings `markCurrentItem` to `THtmlItemsListContainer` class constructor `options` parameter;
+> - add function `valueToIDString` into `html-helper-lib.js` module;
+
+#### *v0.0.14*
+
+Pre-release version.
+
+> - `html-ctrls-list.md` updated;
+> - some fixes in `html-ctrls/list-stubs.js` module;
+> - alter behavior for the `loadItems` method of a `THtmlStubItemsSet` class in case when its `options` parameter is set to `boolean` (see `html-ctrls-list.md` for details);
+> - added method `rstDefItem` to `THtmlStubItemsSet` class;
+> - added `THtmlButtonsControllerARCSet` class.
+
+#### *v0.0.13*
+
+Pre-release version.
+
+> - `html-helper-lib.md` updated;
+> - `html-ctrls-btn.md` updated;
+> - `html-ctrls-list.md` updated;
+> - some fixes in `html-helper-lib.js` module;
+> - some fixes in `html-ctrls-btn.js` module;
+> - some fixes in `html-ctrls-list.js` module;
+> - move definition of `THtmlStubItemsSet` from `html-ctrls-list.js` module to `html-ctrls/lists-stubs.js` submodule;
+> - add function `valueToClassList` into `html-helper-lib.js` module;
+> - updated dependency on `@ygracs/bsfoc-lib-js` module to v0.1.2.
+
+#### *v0.0.12*
+
+Pre-release version.
+
+> - updated dependency on `@ygracs/bsfoc-lib-js` module to v0.1.1.
+
+#### *v0.0.11*
+
+Pre-release version.
+
+> - `html-ctrls-btn.md` updated;
+> - `html-ctrls-list.md` updated;
+> - some fixes in `html-ctrls-list.js` module;
+> - some fixes in `html-ctrls-btn.js` module.
+
+#### *v0.0.10*
+
+Pre-release version.
+
+> - `html-ctrls-btn.md` updated;
+> - added `THtmlListButtonsController` class;
+
+#### *v0.0.9*
+
+Pre-release version.
+
+> - switch dependency from `@cntwg/bsfoc-lib-js` module to `@ygracs/bsfoc-lib-js` module.
+
+#### *v0.0.8*
+
+Pre-release version.
+
+> - updated dependency on `@cntwg/bsfoc-lib-js` module to v0.0.11.
+
+#### *v0.0.7*
+
+Pre-release version.
+
+> - updated dependency on `@cntwg/bsfoc-lib-js` module to v0.0.10;
+> - some fixes in `html-helper-lib.js` module;
+> - some fixes in `html-ctrls-list.js` module.
+
+#### *v0.0.6*
+
+Pre-release version.
+
+> - `html-ctrls-btn.md` updated;
+> - `html-ctrls-list.md` updated;
+> - `html-helper-lib.md` updated;
+> - some fixes in `html-ctrls-btn.js` module;
+> - some fixes in `html-ctrls-list.js` module.
+
+#### *v0.0.5*
+
+Pre-release version.
+
+> - `$module/test/README.md` added;
+> - updated dependency on `@cntwg/bsfoc-lib-js` module to v0.0.8;
+> - `html-ctrls-list.md` updated;
+> - added `minIndex` property to `THtmlItemsListContainer` class;
+> - some fixes in `html-ctrls-list.js` module;
+> - added 'classes' property for module exports;
+> - MIT-license applied.
+
+#### *v0.0.4*
+
+Pre-release version.
+
+> - updated dependency on `@cntwg/bsfoc-lib-js` module to v0.0.5.
+
+#### *v0.0.3*
+
+Pre-release version.
+
+> - added `activateHTMLElements` function;
+> - added `inactivateHTMLElements` function;
+> - added `createNewHtmlElement` function (experimental);
+> - `html-helper-lib.md` updated;
+> - `html-ctrls-btn.md` updated;
+> - `html-ctrls-list.md` updated.
+
+#### *v0.0.2*
+
+Pre-release version.
+
+> - `README.md` added;
+> - `html-helper-lib.md` added to `doc`;
+> - `html-ctrls-btn.md` added to `doc`;
+> - `html-ctrls-list.md` added to `doc`;
+> - added `CSS_CLASS_ACTIVE` constant to `CSS_CLASS_STRING`;
+> - added `isActiveHTMLElement` function;
+> - added `markHtmlElementAsActive` function;
+> - added `unmarkActiveHtmlElement` function;
+> - `html-btn-ctrl.js` was renamed `html-ctrls-btn.js`;
+> - `html-list-ctrl.js` was renamed `html-ctrls-list.js`.
+
+#### *v0.0.1*
+
+Pre-release version.

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2019-2022 Yuri Grachev
+Copyright (c) 2019-2023 Yuri Grachev
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/README.md

@@ -1,6 +1,6 @@
->|***rev.*:**|0.1.2|
+>|***rev.*:**|0.1.3|
 >|:---|---:|
->|date:|2022-09-12|
+>|date:|2023-04-09|
 
 ## Introduction
 
@@ -10,6 +10,10 @@ This module provide a base set of helpers for javascript. So your work can run a
 
 This module was make for use as a library in a development of a Web-apps based on [Electron](https://en.wikipedia.org/wiki/Electron_(software_framework)) as main target.
 
+### Installation
+
+`npm install @cntwg/html-helper`
+
 ## Description
 
 This module contains the following components:

package/doc/html-ctrls-list.md

@@ -1,6 +1,6 @@
->|***rev.*:**|0.1.11|
+>|***rev.*:**|0.1.14|
 >|:---|---:|
->|date:|2022-09-25|
+>|date:|2023-04-04|
 
 ## Introduction
 
@@ -27,6 +27,7 @@ The `options` structure has listed below:
 |:---|---|---:|:---|
 |`autoHideNewItems`|`boolean`|`false`|alters behavior of the `addItem` class method. If set to `true`, the item which was added to a container members will be automatically hidden|
 |`markCurrentItem`|`boolean`|`false`|alters behavior of the `setCurIndex` class method. If set to `true`, the item which was added to a container members will be automatically marked as current|
+|`itemBaseClassID`|`array`|---|alters behavior of the `addItem` class method. It accepts value of a string or an array of strings. For more see description of an `addItem` method|
 
 #### class properties
 
@@ -112,6 +113,8 @@ This method adds a given item to a container members and if succeed returns its
 
 If `options` parameter is given and is set to `true`, in case of success, the `curIndex` property is adjusted by the method.
 
+If `itemBaseClassID` option of the container is set, the method will applied a value given by this option as a `class` attribute of an item which was successfully added.
+
 ##### **delItem(index\[, options])**
 
 This method deletes an item addressed by the given `index` from a container members and if succeed `true` is returned.
@@ -161,8 +164,9 @@ The `options` structure has listed below:
 
 |option name|value type|default value|description|
 |:---|---|---:|:---|
-|`autoHideNewItems`|`boolean`|`false`|alters behavior of the `addItem` class method. If set to `true`, the item which was added to a container members will be automatically hidden|
-|`markCurrentItem`|`boolean`|`false`|alters behavior of the `setCurIndex` class method. If set to `true`, the item which was added to a container members will be automatically marked as current|
+|`autoHideNewItems`|`boolean`|`false`|for details see options on `THtmlItemsListContainer` class constructor section|
+|`markCurrentItem`|`boolean`|`false`|for details see options on `THtmlItemsListContainer` class constructor section|
+|`itemBaseClassID`|`array`|---|for details see options on `THtmlItemsListContainer` class constructor section|
 |`showStubsIfEmpty`|`boolean`|`false`|if set, in case of the empty list, the default stub-item will be displayed|
 |`allowGroupSelection`|`boolean`|`false`|if set the more than one element can be selected in the list|
 |`allowSelectionLocks`|`boolean`|`false`|<*reserved, experimental*>|

package/doc/html-helper-lib.md

@@ -1,6 +1,6 @@
->|***rev.*:**|0.1.4|
+>|***rev.*:**|0.1.5|
 >|:---|---:|
->|date:|2022-09-22|
+>|date:|2023-03-30|
 
 ## Introduction
 
@@ -120,3 +120,7 @@ This function make all the jobs under the hood. So there is no need to call DOM-
 #### **valueToIDString(value)**
 
 This function tries to convert a given `value` to `ID_STRING`. If failed an empty string is returned.
+
+#### **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.

package/index.js

@@ -1,12 +1,12 @@
-// [v0.1.010-20220922]
+// [v0.1.016-20230409]
 
 // === module init block ===
 
 const html_helper = require('./lib/html-helper-lib.js');
-const html_list = require('./lib/html-ctrls-list.js');
-const html_bts = require('./lib/html-ctrls-btn.js');
+const html_list = require('./lib/html-ctrls/list.js');
+const html_bts = require('./lib/html-ctrls/buttons.js');
 
-const html_list_btn = require('./lib/html-ctrls/lists-btns.js');
+const html_list_btn = require('./lib/html-ctrls/lists-btn.js');
 
 // === module extra block (helper functions) ===
 
@@ -44,9 +44,10 @@ exports.THtmlListButtonsController = html_list_btn.THtmlListButtonsController;
 
 // experimental
 exports.valueToIDString = html_helper.valueToIDString;
+exports.readAsAttrValue = html_helper.readAsAttrValue;
 exports.createNewHtmlElement = html_helper.createNewHtmlElement;
 
-exports.classes = {
+exports.component = {
   THtmlStubItemsSet: exports.THtmlStubItemsSet,
   THtmlItemsListContainer: exports.THtmlItemsListContainer,
   THtmlItemsListController: exports.THtmlItemsListController,
@@ -54,3 +55,5 @@ exports.classes = {
   THtmlListButtonsController: exports.THtmlListButtonsController,
   THtmlButtonsControllerARCSet: exports.THtmlButtonsControllerARCSet,
 };
+// will deprecate
+exports.classes = exports.component;

package/lib/{html-ctrls-btn.js → html-ctrls/buttons.js}

@@ -1,9 +1,11 @@
-// [v0.1.043-20220922]
+// [v0.1.047-20230408]
 
 // === module init block ===
 
 const {
-  readAsString, readAsNumber, isNotEmptyString,
+  //readAsString,
+  //readAsNumber,
+  isNotEmptyString,
   isPlainObject, valueToArray,
   TItemsICollection,
 } = require('@ygracs/bsfoc-lib-js');
@@ -11,7 +13,11 @@ const {
 const {
   isHTMLElement, CSS_CLASS_STRING,
   valueToIDString,
-} = require('./html-helper-lib.js');
+} = require('../html-helper-lib.js');
+
+const {
+  pushEventHandler, triggerEventHandler,
+} = require('./mod-hfunc.js');
 
 const {
   CSS_CLASS_SELECTED,
@@ -25,25 +31,54 @@ const etlHTagInputForBtn = new Set([
   'button', 'submit', 'reset', 'image',
 ]);
 
-// === module extra block (function definitions) ===
+// === module extra block (helper functions) ===
 
 function isHTMLButton(obj){
   let result = false;
   if (isHTMLElement(obj)) {
     switch (obj.tagName.toLowerCase()) {
-      case 'button':
+      case 'button': {
         result = true;
         break;
-      case 'input':
+      }
+      case 'input': {
         result = etlHTagInputForBtn.has(obj.type.toLowerCase());
         break;
-      default:
+      }
+      default: {
         break;
+      }
     };
   };
   return result;
 }
 
+function readOnClickEventInfo(e) {
+  let item = null;
+  //let on_click_num = readAsNumber(e.detail, 0);
+  const { eventPhase, detail: onClickNum } = e;
+  //console.log('CHECK: e => ditail:['+onClickNum+']');
+  //console.log('CHECK: e => phase:['+eventPhase+']');
+  switch (eventPhase) {
+    //*case 1:
+    //* // NOTE: currently on eventPhase = 2 and 3
+    case 2: {
+      /**/// capturing stage
+      item = e.target;
+      break;
+    }
+    case 3: {
+      /**/// bubblig stage
+      item = e.currentTarget;
+      break;
+    }
+    default: {
+      break;
+    }
+  };
+  return { item, onClickNum };
+};
+
 // === module main block (function definitions) ===
 
 // === module main block (class definitions) ===
@@ -54,7 +89,6 @@ class THtmlButtonsSet {
   constructor(){
     // define default functions for manipulators
     const __user_index_getter = (value) => {
-      //return readAsString(value, '', { useTrim: true, numberToString: true });
       return valueToIDString(value);
     };
     const __user_item_getter = (value) => {
@@ -206,28 +240,11 @@ class THtmlButtonsControllerARCSet {
   #_on_btn_apply_pressed = (e) => {
     //console.log('THtmlListButtonsController._on_btn_apply_pressed() ==> was called...');
     //e.preventDefault(); /* need to reconsider reason for use */
-    let curItem = null;
-    let on_click_num = readAsNumber(e.detail, 0);
-    //console.log('CHECK: e => ditail:['+on_click_num+']');
-    //console.log('CHECK: e => phase:['+e.eventPhase+']');
-    switch (e.eventPhase) {
-      //*case 1:
-      //* // NOTE: currently on eventPhase = 2 and 3
-      case 2:
-        /**/// capturing stage
-        curItem = e.target;
-        break;
-      case 3:
-        /**/// bubblig stage
-        curItem = e.currentTarget;
-        break;
-      default:
-        break;
-    };
+    const { item, onClickNum } = readOnClickEventInfo(e);
     if (
-      curItem instanceof HTMLElement
-      && (on_click_num === 0 || on_click_num === 1)
-      && !curItem.classList.contains(CSS_CLASS_DISABLED)
+      item instanceof HTMLElement
+      && (onClickNum === 0 || onClickNum === 1)
+      && !item.classList.contains(CSS_CLASS_DISABLED)
     ) {
       this.#_triggerEvent('btn-apply-pressed', e);
     };
@@ -236,28 +253,11 @@ class THtmlButtonsControllerARCSet {
   #_on_btn_reset_pressed = (e) => {
     //console.log('THtmlListButtonsController._on_btn_reset_pressed() ==> was called...');
     //e.preventDefault(); /* need to reconsider reason for use */
-    let curItem = null;
-    let on_click_num = readAsNumber(e.detail, 0);
-    //console.log('CHECK: e => ditail:['+on_click_num+']');
-    //console.log('CHECK: e => phase:['+e.eventPhase+']');
-    switch (e.eventPhase) {
-      //*case 1:
-      //* // NOTE: currently on eventPhase = 2 and 3
-      case 2:
-        /**/// capturing stage
-        curItem = e.target;
-        break;
-      case 3:
-        /**/// bubblig stage
-        curItem = e.currentTarget;
-        break;
-      default:
-        break;
-    };
+    const { item, onClickNum } = readOnClickEventInfo(e);
     if (
-      curItem instanceof HTMLElement
-      && (on_click_num === 0 || on_click_num === 1)
-      && !curItem.classList.contains(CSS_CLASS_DISABLED)
+      item instanceof HTMLElement
+      && (onClickNum === 0 || onClickNum === 1)
+      && !item.classList.contains(CSS_CLASS_DISABLED)
     ) {
       this.#_triggerEvent('btn-reset-pressed', e);
     };
@@ -266,39 +266,18 @@ class THtmlButtonsControllerARCSet {
   #_on_btn_cancel_pressed = (e) => {
     //console.log('THtmlListButtonsController._on_btn_cancel_pressed() ==> was called...');
     //e.preventDefault(); /* need to reconsider reason for use */
-    let curItem = null;
-    let on_click_num = readAsNumber(e.detail, 0);
-    //console.log('CHECK: e => ditail:['+on_click_num+']');
-    //console.log('CHECK: e => phase:['+e.eventPhase+']');
-    switch (e.eventPhase) {
-      //*case 1:
-      //* // NOTE: currently on eventPhase = 2 and 3
-      case 2:
-        /**/// capturing stage
-        curItem = e.target;
-        break;
-      case 3:
-        /**/// bubblig stage
-        curItem = e.currentTarget;
-        break;
-      default:
-        break;
-    };
+    const { item, onClickNum } = readOnClickEventInfo(e);
     if (
-      curItem instanceof HTMLElement
-      && (on_click_num === 0 || on_click_num === 1)
-      && !curItem.classList.contains(CSS_CLASS_DISABLED)
+      item instanceof HTMLElement
+      && (onClickNum === 0 || onClickNum === 1)
+      && !item.classList.contains(CSS_CLASS_DISABLED)
     ) {
       this.#_triggerEvent('btn-cancel-pressed', e);
     };
   }
 
   #_triggerEvent = (name, ...args) => {
-    const _name = typeof name === 'string' ? name.trim() : '';
-    if (_name !== '') {
-      const _events = this.#_events;
-      if (_events.has(_name)) _events.get(name)(...args);
-    };
+    triggerEventHandler(this.#_events, name, ...args);
   }
 
   disableMain(){
@@ -318,18 +297,7 @@ class THtmlButtonsControllerARCSet {
   }
 
   on(name, evnt){
-    const _name = typeof name === 'string' ? name.trim() : '';
-    if (_name !== '' && typeof evnt === 'function') {
-      const _events = this.#_events;
-      if (!_events.has(_name)) {
-        _events.set(_name, evnt);
-      } else {
-        /* NOTE:
-         *    for current you can't reset or set new one on the same event
-         */
-        //console.log('THtmlListButtonsController.on() ==> event:['+name+'] - already exists...');
-      };
-    };
+    pushEventHandler(this.#_events, name, evnt);
   }
 };
 
@@ -341,3 +309,5 @@ exports.THtmlButtonsControllerARCSet = THtmlButtonsControllerARCSet;
 exports.BTS_DEF_GROUP_NAME = BTS_DEF_GROUP_NAME;
 
 exports.isHTMLButton = isHTMLButton;
+
+exports.readOnClickEventInfo = readOnClickEventInfo;

package/lib/{html-ctrls-list.js → html-ctrls/list.js}

@@ -1,12 +1,9 @@
-// [v0.1.051-20221009]
+// [v0.1.060-20230408]
 
 // === module init block ===
 
 const {
-  //readAsBool,
   readAsNumber,
-  //valueToIndex,
-  //isArray, isObject,
   isPlainObject,
   TItemsListEx,
 } = require('@ygracs/bsfoc-lib-js');
@@ -16,10 +13,15 @@ const {
   showHtmlElement, hideHtmlElement,
   selectHtmlElement, unselectHtmlElement,
   markHtmlElementAsCurrent, unmarkCurrentHtmlElement,
+  readAsAttrValue, valueToClassList,
   CSS_CLASS_STRING,
-} = require('./html-helper-lib.js');
+} = require('../html-helper-lib.js');
 
-const { THtmlStubItemsSet } = require('./html-ctrls/lists-stubs.js');
+const { THtmlStubItemsSet } = require('./lists-stubs.js');
+
+const {
+  pushEventHandler, triggerEventHandler,
+} = require('./mod-hfunc.js');
 
 const {
   CSS_CLASS_SELECTED,
@@ -35,23 +37,28 @@ const ILC_SMODE_CTRL = 2;
 
 // === module extra block (helper functions) ===
 
-function readAsAttrValue(value){
-  let result = null;
-  switch (typeof value) {
-    case 'boolean':
-      result = value.toString();
-      break;
-    case 'number':
-      if (Number.isNaN(value)) break;
-      result = value.toString();
-      break;
-    case 'string':
-      result = value.trim();
-      break;
-    default:
-      break;
+function srchListElementByAttr(list, name, value = '') {
+  const _value = readAsAttrValue(value);
+  let item = null;
+  let index = -1;
+  let count = list.count;
+  let isACCEPTED = false;
+  if (count > 0 && name !== '' && _value !== null) {
+    const acceptAnyVal = _value === '';
+    for (let i = 0; i < count; i++) {
+      item = list.getItem(i);
+      if (
+        isHTMLElement(item)
+        && item.hasAttribute(name)
+        && (acceptAnyVal || item.getAttribute(name) === value)
+      ) {
+        index = i;
+        isACCEPTED = true;
+        break;
+      };
+    };
   };
-  return result;
+  return isACCEPTED ? { index, item } : { index, item: null };
 };
 
 // === module main block (function definitions) ===
@@ -75,6 +82,7 @@ class THtmlItemsListContainer {
     let {
       autoHideNewItems,
       markCurrentItem,
+      itemBaseClassID,
     } = _options;
     if (typeof autoHideNewItems !== 'boolean') {
       _options.autoHideNewItems = autoHideNewItems = false;
@@ -82,6 +90,8 @@ class THtmlItemsListContainer {
     if (typeof markCurrentItem !== 'boolean') {
       _options.markCurrentItem = markCurrentItem = false;
     };
+    itemBaseClassID = valueToClassList(itemBaseClassID, true);
+    _options.itemBaseClassID = itemBaseClassID;
     // init status
     const _status = {
       curIndex: _items.curIndex,
@@ -152,29 +162,13 @@ class THtmlItemsListContainer {
 
   srchIndexByAttr(name, value = ''){
     const _name = typeof name === 'string' ? name.trim() : '';
-    const _value = readAsAttrValue(value);
-    let index = -1;
-    if (_name !== '' && _value !== null) {
-      const acceptAnyVal = _value === '';
-      const _items = this.#_items;
-      let item = null;
-      for (let i = 0; i < _items.count; i++) {
-        item = _items.getItem(i);
-        if (
-          isHTMLElement(item)
-          && item.hasAttribute(_name)
-          && (acceptAnyVal || item.getAttribute(_name) === _value)
-        ) {
-          index = i;
-          break;
-        };
-      };
-    };
+    const { index } = srchListElementByAttr(this.#_items, _name, value);
     return index;
   };
 
   srchIndexByID(value){
-    return this.srchIndexByAttr('id', value);
+    const { index } = srchListElementByAttr(this.#_items, 'id', value);
+    return index;
   };
 
   setCurIndex(index){
@@ -208,12 +202,15 @@ class THtmlItemsListContainer {
     return isHTMLElement(item) ? item : null;
   }
 
-  getItemByAttr(...args){
-    return this.getItem(this.srchIndexByAttr(...args));
+  getItemByAttr(name, value = ''){
+    const _name = typeof name === 'string' ? name.trim() : '';
+    const { item } = srchListElementByAttr(this.#_items, _name, value);
+    return item;
   }
 
   getItemByID(value){
-    return this.getItem(this.srchIndexByID(value));
+    const { item } = srchListElementByAttr(this.#_items, 'id', value);
+    return item;
   }
 
   addItem(item, opt){
@@ -225,26 +222,31 @@ class THtmlItemsListContainer {
     );
     const isSUCCEED = index !== -1;
     if (isSUCCEED) {
-      if (this.#_options.autoHideNewItems) hideHtmlElement(item);
+      const { autoHideNewItems, itemBaseClassID } = this.#_options;
+      if (autoHideNewItems) hideHtmlElement(item);
+      if (itemBaseClassID.length > 0) item.classList.add(...itemBaseClassID);
       if (forceCI) this.setCurIndex(index);
-      if (this.#_host) this.#_host.append(item);
+      const _host = this.#_host;
+      if (_host) _host.append(item);
     };
     return isSUCCEED ? index : -1;
   }
 
-  delItem(index, opt){
-    const forceCI = typeof opt === 'boolean' ? opt : true;
+  delItem(index, opt, optEx){
     const _items = this.#_items;
-    const item = _items.delItemEx(index, forceCI);
-    const isSUCCEED = isHTMLElement(item);
+    const item = _items.delItemEx(index, opt);
+    const isSUCCEED = item !== undefined;
     if (isSUCCEED) {
-      const index = _items.curIndex;
-      if (index === -1) {
-        this.rstCurIndex();
-      } else {
-        this.setCurIndex(_items.curIndex);
+      if (this.#_host && isHTMLElement(item)) item.remove();
+      const doProcEx = typeof optEx === 'boolean' ? optEx : true;
+      if (doProcEx) {
+        const index = _items.curIndex;
+        if (index === -1) {
+          this.rstCurIndex();
+        } else {
+          this.setCurIndex(index);
+        };
       };
-      if (this.#_host) item.remove();
     };
     return isSUCCEED;
   }
@@ -298,6 +300,7 @@ class THtmlItemsListController extends THtmlItemsListContainer {
     let {
       //autoHideNewItems, // [*] processed by parent
       //markCurrentItem, // [*] processed by parent
+      //itemBaseClassID, // [*] processed by parent
       showStubsIfEmpty,
       allowGroupSelection,
       allowSelectionLocks,
@@ -362,16 +365,19 @@ class THtmlItemsListController extends THtmlItemsListContainer {
       //* // NOTE: currently on eventPhase = 2 and 3
       //*case 1:
         /**/// capturing stage
-      case 2:
+      case 2: {
         /**/// target stage
         if (target !== this.#_host) curItem = target;
         break;
-      case 3:
+      }
+      case 3: {
         /**/// bubblig stage
         curItem = catchEventOnHost ? target : currentTarget;
         break;
-      default:
+      }
+      default: {
         break;
+      }
     };
     if (
       !isSelectionLocked
@@ -389,11 +395,7 @@ class THtmlItemsListController extends THtmlItemsListContainer {
   };
 
   #_triggerEvent = (name, ...args) => {
-    const _name = typeof name === 'string' ? name.trim() : '';
-    if (_name !== '') {
-      const _events = this.#_events;
-      if (_events.has(_name)) _events.get(_name)(...args);
-    };
+    triggerEventHandler(this.#_events, name, ...args);
   };
 
   get SelectedItems(){
@@ -509,38 +511,44 @@ class THtmlItemsListController extends THtmlItemsListContainer {
 
   delItem(index, opt){
     const item = super.getItem(index);
+    let isSUCCEED = item !== undefined;
     const _status = this.#_status;
-    let isSUCCEED = isHTMLElement(item);
     if (isSUCCEED) {
       _status.execDelItem = true;
       _status.execDelItemCI = this.curIndex;
       _status.execDelItemDI = Number(index);
-      isSUCCEED = super.delItem(index, opt);
+      isSUCCEED = super.delItem(index, opt, false);
+      if (isSUCCEED) {
+        const _options = this.#_options;
+        if (!_status.catchEventOnHost && isHTMLElement(item)) {
+          // remove event handler on element if it was set by addItem()
+          item.removeEventListener('click', this.#_on_will_select_item);
+        };
+        if (this.isEmpty()) {
+          this.#_selects.clear();
+          if (_options.showStubsIfEmpty) {
+            // show default stub-item
+            _status.isStubItemShown = this.#_stubs.showDefItem();
+          };
+          this.#_triggerEvent('list-clear');
+        } else {
+          this.#_selects.delete(item);
+          this.#_triggerEvent('item-removed', {
+            index: Number(index),
+            item: item,
+          });
+          const current = this.curIndex;
+          if (current === -1) {
+            this.rstCurIndex();
+          } else {
+            this.setCurIndex(current);
+          };
+        };
+      };
       _status.execDelItemDI = -1;
       _status.execDelItemCI = -1;
       _status.execDelItem = false;
     };
-    if (isSUCCEED) {
-      const _options = this.#_options;
-      if (!_status.catchEventOnHost) {
-        // remove event handler on element if it was set by addItem()
-        item.removeEventListener('click', this.#_on_will_select_item);
-      };
-      if (this.isEmpty()) {
-        this.#_selects.clear();
-        if (_options.showStubsIfEmpty) {
-          // show default stub-item
-          _status.isStubItemShown = this.#_stubs.showDefItem();
-        };
-        this.#_triggerEvent('list-clear');
-      } else {
-        this.#_selects.delete(item);
-        this.#_triggerEvent('item-removed', {
-          index: Number(index),
-          item: item,
-        });
-      };
-    };
     return isSUCCEED;
   }
 
@@ -589,20 +597,23 @@ class THtmlItemsListController extends THtmlItemsListContainer {
       _selects.clear();
     };
     switch (mode) {
-      case ILC_SMODE_SHFT:
+      case ILC_SMODE_SHFT: {
         if (indexCI > indexNI) [ indexCI, indexNI ] = [ indexNI, indexCI ];
         for (let i = indexCI; i < indexNI + 1; i++) {
           this.#_selectItem(i);
         };
         break;
-      case ILC_SMODE_CTRL:
+      }
+      case ILC_SMODE_CTRL: {
         this.#_selectItem(this.srchIndex(item));
         break;
-      default:
+      }
+      default: {
         if (this.#_selectItem(this.srchIndex(item))) {
           if (forceCI) this.#_setCurIndex(indexNI);
         };
         break;
+      }
     };
   }
 
@@ -658,17 +669,7 @@ class THtmlItemsListController extends THtmlItemsListContainer {
   }
 
   on(name, evnt){
-    const _name = typeof name === 'string' ? name.trim() : '';
-    if (_name !== '' && typeof evnt === 'function') {
-      const _events = this.#_events;
-      if (!_events.has(_name)) {
-        _events.set(_name, evnt);
-      } else {
-        /* NOTE:
-         *    for current you can't reset or set new one on the same event
-         */
-      };
-    };
+    pushEventHandler(this.#_events, name, evnt);
   }
 
 };

package/lib/html-ctrls/{lists-btns.js → lists-btn.js}

@@ -1,14 +1,14 @@
-// [v0.1.042-20220912]
+// [v0.1.045-20230408]
 
 // === module init block ===
 
 const {
-  readAsString,
+  //readAsString,
   readAsNumber,
-  isNotEmptyString,
+  //isNotEmptyString,
   isPlainObject,
-  valueToArray,
-  TItemsICollection,
+  //valueToArray,
+  //TItemsICollection,
 } = require('@ygracs/bsfoc-lib-js');
 
 const {
@@ -19,7 +19,12 @@ const {
 const {
   isHTMLButton,
   THtmlButtonsSet,
-}  = require('../html-ctrls-btn');
+  readOnClickEventInfo,
+}  = require('./buttons.js');
+
+const {
+  pushEventHandler, triggerEventHandler,
+} = require('./mod-hfunc.js');
 
 const {
   CSS_CLASS_SELECTED,
@@ -101,28 +106,11 @@ class THtmlListButtonsController {
   #_on_btn_frst_pressed = (e) => {
     //console.log('THtmlListButtonsController._on_btn_frst_pressed() ==> was called...');
     //e.preventDefault(); /* need to reconsider reason for use */
-    let curItem = null;
-    let on_click_num = readAsNumber(e.detail, 0);
-    //console.log('CHECK: e => ditail:['+on_click_num+']');
-    //console.log('CHECK: e => phase:['+e.eventPhase+']');
-    switch (e.eventPhase) {
-      //*case 1:
-      //* // NOTE: currently on eventPhase = 2 and 3
-      case 2:
-        /**/// capturing stage
-        curItem = e.target;
-        break;
-      case 3:
-        /**/// bubblig stage
-        curItem = e.currentTarget;
-        break;
-      default:
-        break;
-    };
+    const { item, onClickNum } = readOnClickEventInfo(e);
     if (
-      curItem instanceof HTMLElement
-      && (on_click_num === 0 || on_click_num === 1)
-      && !curItem.classList.contains(CSS_CLASS_DISABLED)
+      item instanceof HTMLElement
+      && (onClickNum === 0 || onClickNum === 1)
+      && !item.classList.contains(CSS_CLASS_DISABLED)
     ) {
       this.#_triggerEvent('btn-first-pressed', e);
     };
@@ -131,28 +119,11 @@ class THtmlListButtonsController {
   #_on_btn_last_pressed = (e) => {
     //console.log('THtmlListButtonsController._on_btn_last_pressed() ==> was called...');
     //e.preventDefault(); /* need to reconsider reason for use */
-    let curItem = null;
-    let on_click_num = readAsNumber(e.detail, 0);
-    //console.log('CHECK: e => ditail:['+on_click_num+']');
-    //console.log('CHECK: e => phase:['+e.eventPhase+']');
-    switch (e.eventPhase) {
-      //*case 1:
-      //* // NOTE: currently on eventPhase = 2 and 3
-      case 2:
-        /**/// capturing stage
-        curItem = e.target;
-        break;
-      case 3:
-        /**/// bubblig stage
-        curItem = e.currentTarget;
-        break;
-      default:
-        break;
-    };
+    const { item, onClickNum } = readOnClickEventInfo(e);
     if (
-      curItem instanceof HTMLElement
-      && (on_click_num === 0 || on_click_num === 1)
-      && !curItem.classList.contains(CSS_CLASS_DISABLED)
+      item instanceof HTMLElement
+      && (onClickNum === 0 || onClickNum === 1)
+      && !item.classList.contains(CSS_CLASS_DISABLED)
     ) {
       this.#_triggerEvent('btn-last-pressed', e);
     };
@@ -161,28 +132,11 @@ class THtmlListButtonsController {
   #_on_btn_prev_pressed = (e) => {
     //console.log('THtmlListButtonsController._on_btn_prev_pressed() ==> was called...');
     //e.preventDefault(); /* need to reconsider reason for use */
-    let curItem = null;
-    let on_click_num = readAsNumber(e.detail, 0);
-    //console.log('CHECK: e => ditail:['+on_click_num+']');
-    //console.log('CHECK: e => phase:['+e.eventPhase+']');
-    switch (e.eventPhase) {
-      //*case 1:
-      //* // NOTE: currently on eventPhase = 2 and 3
-      case 2:
-        /**/// capturing stage
-        curItem = e.target;
-        break;
-      case 3:
-        /**/// bubblig stage
-        curItem = e.currentTarget;
-        break;
-      default:
-        break;
-    };
+    const { item, onClickNum } = readOnClickEventInfo(e);
     if (
-      curItem instanceof HTMLElement
-      && (on_click_num === 0 || on_click_num === 1)
-      && !curItem.classList.contains(CSS_CLASS_DISABLED)
+      item instanceof HTMLElement
+      && (onClickNum === 0 || onClickNum === 1)
+      && !item.classList.contains(CSS_CLASS_DISABLED)
     ) {
       this.#_triggerEvent('btn-prev-pressed', e);
     };
@@ -191,39 +145,18 @@ class THtmlListButtonsController {
   #_on_btn_next_pressed = (e) => {
     //console.log('THtmlListButtonsController._on_btn_next_pressed() ==> was called...');
     //e.preventDefault(); /* need to reconsider reason for use */
-    let curItem = null;
-    let on_click_num = readAsNumber(e.detail, 0);
-    //console.log('CHECK: e => ditail:['+on_click_num+']');
-    //console.log('CHECK: e => phase:['+e.eventPhase+']');
-    switch (e.eventPhase) {
-      //*case 1:
-      //* // NOTE: currently on eventPhase = 2 and 3
-      case 2:
-        /**/// capturing stage
-        curItem = e.target;
-        break;
-      case 3:
-        /**/// bubblig stage
-        curItem = e.currentTarget;
-        break;
-      default:
-        break;
-    };
+    const { item, onClickNum } = readOnClickEventInfo(e);
     if (
-      curItem instanceof HTMLElement
-      && (on_click_num === 0 || on_click_num === 1)
-      && !curItem.classList.contains(CSS_CLASS_DISABLED)
+      item instanceof HTMLElement
+      && (onClickNum === 0 || onClickNum === 1)
+      && !item.classList.contains(CSS_CLASS_DISABLED)
     ) {
       this.#_triggerEvent('btn-next-pressed', e);
     };
   }
 
   #_triggerEvent = (name, ...args) => {
-    const _name = typeof name === 'string' ? name.trim() : '';
-    if (_name !== '') {
-      const _events = this.#_events;
-      if (_events.has(_name)) _events.get(name)(...args);
-    };
+    triggerEventHandler(this.#_events, name, ...args);
   }
 
   disableAll(){
@@ -255,18 +188,7 @@ class THtmlListButtonsController {
   }
 
   on(name, evnt){
-    const _name = typeof name === 'string' ? name.trim() : '';
-    if (_name !== '' && typeof evnt === 'function') {
-      const _events = this.#_events;
-      if (!_events.has(_name)) {
-        _events.set(_name, evnt);
-      } else {
-        /* NOTE:
-         *    for current you can't reset or set new one on the same event
-         */
-        //console.log('THtmlListButtonsController.on() ==> event:['+name+'] - already exists...');
-      };
-    };
+    pushEventHandler(this.#_events, name, evnt);
   }
 };
 

package/lib/html-ctrls/lists-stubs.js

@@ -1,4 +1,4 @@
-// [v0.1.038-20220912]
+// [v0.1.039-20230409]
 
 // === module init block ===
 
@@ -6,7 +6,6 @@ const {
   //readAsBool, readAsNumber, readAsString,
   //isEmptyString, isNotEmptyString,
   isArray, isObject, isPlainObject,
-  //TItemsListEx,
 } = require('@ygracs/bsfoc-lib-js');
 
 const {
@@ -141,12 +140,9 @@ class THtmlStubItemsSet {
   }
 
   loadItems(list, opt){
-    let _options = {};
-    if (typeof opt === 'boolean') {
-      _options.useClear = opt;
-    } else if (isPlainObject(opt)) {
-      _options = opt;
-    };
+    let _options = opt;
+    if (typeof _options === 'boolean') _options = { useClear: _options };
+    if (!isPlainObject(_options)) _options = {};
     let {
       defaultItem,
       useClear,
@@ -154,8 +150,8 @@ class THtmlStubItemsSet {
       load_as_new, //* will deprecate
     } = _options;
     if (useClear === undefined) useClear = load_as_new;
-    useClear = typeof useClear === 'boolean' ? useClear : true;
-    force = typeof force === 'boolean' ? force : false;
+    if (typeof useClear !== 'boolean') useClear = true;
+    if (typeof force !== 'boolean') force = false;
     let _list = list;
     if (isPlainObject(_list)) {
       ({ items: _list, defaultItem } = _list);

package/lib/html-ctrls/mod-hfunc.js

@@ -0,0 +1,33 @@
+// [v0.1.059-20230408]
+
+// === module init block ===
+
+// === module extra block (helper functions) ===
+
+// === module main block (function definitions) ===
+
+function pushEventHandler(pool, name, evnt){
+  const _name = typeof name === 'string' ? name.trim() : '';
+  if (_name !== '' && typeof evnt === 'function') {
+    if (!pool.has(_name)) {
+      pool.set(_name, evnt);
+    } else {
+      /* NOTE:
+       *    for current you can't reset or set new one on the same event
+       */
+    };
+  };
+};
+
+function triggerEventHandler(pool, name, ...args){
+  const _name = typeof name === 'string' ? name.trim() : '';
+  if (_name !== '') {
+    if (pool.has(_name)) pool.get(_name)(...args);
+  };
+};
+// === module main block (class definitions) ===
+
+// === module exports block ===
+
+exports.pushEventHandler = pushEventHandler;
+exports.triggerEventHandler = triggerEventHandler;

package/lib/html-helper-lib.js

@@ -1,11 +1,9 @@
-// [v0.1.014-20220922]
+// [v0.1.016-20230330]
 
 // === module init block ===
 
 const {
-  //isEmptyString, isNotEmptyString,
   readAsString,
-  //readAsListS,
   isArray, isObject, isPlainObject, valueToArray,
 } = require('@ygracs/bsfoc-lib-js');
 
@@ -19,7 +17,9 @@ const CSS_CLASS_HIDDEN = 'hidden';
 
 // === module main block (function definitions) ===
 
-function isHTMLElement(obj){ return obj instanceof HTMLElement; };
+function isHTMLElement(obj){
+  return obj instanceof HTMLElement;
+};
 
 function isSelectedHTMLElement(obj){
   return isHTMLElement(obj) && obj.classList.contains(CSS_CLASS_SELECTED);
@@ -87,14 +87,17 @@ function unmarkActiveHtmlElement(obj){
 
 function inactivateHtmlElements(...args) {
   for (let item of args) {
-    if (item instanceof HTMLElement) {
+    if (isHTMLElement(item)) {
       item.classList.add(CSS_CLASS_DISABLED);
       switch (item.tagName.toLowerCase()) {
         case 'button':
-        case 'input':
-          item.disabled = true; break;
-        default:
+        case 'input': {
+          item.disabled = true;
+          break;
+        }
+        default: {
           break;
+        }
       };
     };
   };
@@ -102,19 +105,45 @@ function inactivateHtmlElements(...args) {
 
 function activateHtmlElements(...args) {
   for (let item of args) {
-    if (item instanceof HTMLElement) {
+    if (isHTMLElement(item)) {
       item.classList.remove(CSS_CLASS_DISABLED);
       switch (item.tagName.toLowerCase()) {
         case 'button':
-        case 'input':
-          item.disabled = false; break;
-        default:
+        case 'input': {
+          item.disabled = false;
           break;
+        }
+        default: {
+          break;
+        }
       };
     };
   };
 };
 
+function readAsAttrValue(value){
+  let result = null;
+  switch (typeof value) {
+    case 'boolean': {
+      result = value.toString();
+      break;
+    }
+    case 'number': {
+      if (Number.isNaN(value)) break;
+      result = value.toString();
+      break;
+    }
+    case 'string': {
+      result = value.trim();
+      break;
+    }
+    default: {
+      break;
+    }
+  };
+  return result;
+};
+
 function valueToClassList(value, opt){
   let result = [];
   let list = valueToArray(value);
@@ -137,16 +166,19 @@ function valueToClassList(value, opt){
 function valueToIDString(value){
   let result = '';
   switch (typeof value) {
-    case 'number':
+    case 'number': {
       if (Number.isNaN(value) || value < 0) break;
       if (Number.isInteger(value)) result = value.toString();
       break;
-    case 'string':
+    }
+    case 'string': {
       result = value.trim();
       // // TODO: check if a valid character sequencies
       break;
-    default:
+    }
+    default: {
       break;
+    }
   };
   return result;
 };
@@ -243,3 +275,4 @@ exports.valueToClassList = valueToClassList;
 // experimental
 exports.createNewHtmlElement = createNewHtmlElement;
 exports.valueToIDString = valueToIDString;
+exports.readAsAttrValue = readAsAttrValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntwg/html-helper",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "A base HTML-helper library for js",
   "author": "ygracs <cs70th-om@rambler.ru>",
   "license": "MIT",
@@ -15,14 +15,18 @@
     "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"
+    "lib/html-ctrls/lists-btn.js",
+    "lib/html-ctrls/list.js",
+    "lib/html-ctrls/buttons.js",
+    "lib/html-ctrls/mod-hfunc.js",
+    "index.js",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "test": "jest",
     "test-bs": "jest base/",
+    "test-bs:g1": "jest base/fg-1",
+    "test-bs:g2": "jest base/fg-2",
     "test-lc1": "jest THtmlItemsListContainer",
     "test-lc2": "jest THtmlItemsListController",
     "test-lc2:bs": "jest THtmlItemsListController/base",