@cntwg/html-helper 0.0.14 → 0.0.16

package/doc/html-ctrls-list.md

@@ -1,6 +1,6 @@
->|***rev.*:**|0.1.9|
+>|***rev.*:**|0.1.11|
 >|:---|---:|
->|date:|2022-09-12|
+>|date:|2022-09-25|
 
 ## Introduction
 
@@ -26,6 +26,7 @@ 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|
 
 #### class properties
 
@@ -75,11 +76,15 @@ This method tries to find a given item in the list and if it is found returns it
 
 ##### **srchIndexByAttr(name, value)**
 
-This method tries to find an item by its given attribute in the list and if it is found returns its index.
+This method tries to find an item that has an attribute with a given `name` and `value` in the list and if it is found its index is returned.
+
+The `value` can be a `boolean`, `number` or a `string`. If it is not given the empty string value is used. In any other cases the method will failed.
+
+> Note: In case when a `value` is an empty string the method will accept any item with an attribute which name is equal to a given `name` regardless of a value such attribute has.
 
 ##### **srchIndexByID(value)**
 
-This method tries to find an item by its `ID`-attribute in the list and if it is found returns its index.
+This method tries to find an item by its `ID`-attribute in the list and if it is found returns its index (*see description of `srchIndexByAttr` method for details how a `value` parameter is used*).
 
 ##### **setCurIndex(value)**
 
@@ -95,11 +100,11 @@ This method returns an item addressed by a given `index`.
 
 ##### **getItemByAttr(name, value)**
 
-This method tries to find an item by its given attribute in the list and if found returns it.
+This method tries to find an item by its given attribute in the list and if found returns it (*see description of `srchIndexByAttr` method for details how a `value` parameter is used*).
 
 ##### **getItemByID(value)**
 
-This method tries to find an item by its `ID`-attribute in the list and if found returns it.
+This method tries to find an item by its `ID`-attribute in the list and if found returns it (*see description of `srchIndexByAttr` method for details how a `value` parameter is used*).
 
 ##### **addItem(item\[, options])**
 
@@ -141,7 +146,7 @@ This method checks whether or not an item addressed by an `index` is hidden and
 
 ### **THtmlItemsListController**
 
-This class implements a controller that provide mechanism for menaging a list container and its elements placed on an HTML-form.
+This class implements a controller that provide mechanism for managing a list container and its elements placed on an HTML-form.
 
 #### class constructor
 
@@ -157,6 +162,7 @@ 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|
 |`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*>|
@@ -277,7 +283,7 @@ This method checks whether or not an item addressed by an `index` is hidden and
 
 This method sets event handler for the list event addressed by `name` parameter.
 
-> Note: for current implementation you can't reset or set new event handler (especailly another one) if a hanlder with the same name exists already.
+> Note: for current implementation you can't reset or set new event handler (especially another one) if a handler with the same name exists already.
 
 #### class events
 
@@ -290,8 +296,8 @@ The class generates the events listed in the table bellow:
 |`item-added`|fired when an item was added to the list|
 |`item-removed`|fired when an item was deleted from the list. It will not occur in case the item is the last.|
 |`current-item-chosen`|fired when an item was choosen as current|
-|`item-selected`|fired when an item was marked as selested in the list|
-|`item-unselected`|fired when an item was marked as unselested in the list|
+|`item-selected`|fired when an item was marked as selected in the list|
+|`item-unselected`|fired when an item was unmarked as selected in the list|
 |`item-hidden`|fired when an item was marked as hidden in the list|
 |`item-shown`|fired when an item was marked as non-hidden in the list|
 
@@ -339,7 +345,7 @@ This class method tries to include a given `item` to a set members with a label
 
 The `actForce` parameter if given alters the method behaviour:
 
-- If set to `true` it force replacements of an existing item which label is qual to `name`;
+- If set to `true` it force replacements of an existing item which label is equal to `name`;
 - If set to `false` and item with the same label already exists the method will failed;
 - If parameter is not given or not of a `boolean` type its default value meant to be `false`.
 
@@ -400,6 +406,6 @@ The `options` parameter is an `object` that contains the following set of parame
 |:---|---|---:|:---|
 |`useClear`|`boolean`|`true`|if set to `true`, before the load of the items, the list is cleared|
 |`load_as_new`|`boolean`|`true`|*will deprecate (use `useClear` instead)*|
-|`force`|`boolean`|`false`|if set to `true`, the item which is allready present will be replaced with a new one|
+|`force`|`boolean`|`false`|if set to `true`, the item which is already present will be replaced with a new one|
 
 If the `options` parameter is a `boolean` value it treats as a `options.useClear` option.

package/doc/html-helper-lib.md

@@ -1,6 +1,6 @@
->|***rev.*:**|0.1.3|
+>|***rev.*:**|0.1.4|
 >|:---|---:|
->|date:|2022-09-03|
+>|date:|2022-09-22|
 
 ## Introduction
 
@@ -116,3 +116,7 @@ The `options` structure has listed below:
 If succeed, the function returned `HTMLElement` and `null` if failed.
 
 This function make all the jobs under the hood. So there is no need to call DOM-object directly in many situations.
+
+#### **valueToIDString(value)**
+
+This function tries to convert a given `value` to `ID_STRING`. If failed an empty string is returned.

package/index.js

@@ -1,4 +1,4 @@
-// [v0.1.009-20220912]
+// [v0.1.010-20220922]
 
 // === module init block ===
 
@@ -43,6 +43,7 @@ exports.BTS_DEF_GROUP_NAME = html_bts.BTS_DEF_GROUP_NAME;
 exports.THtmlListButtonsController = html_list_btn.THtmlListButtonsController;
 
 // experimental
+exports.valueToIDString = html_helper.valueToIDString;
 exports.createNewHtmlElement = html_helper.createNewHtmlElement;
 
 exports.classes = {
@@ -51,4 +52,5 @@ exports.classes = {
   THtmlItemsListController: exports.THtmlItemsListController,
   THtmlButtonsSet: exports.THtmlButtonsSet,
   THtmlListButtonsController: exports.THtmlListButtonsController,
+  THtmlButtonsControllerARCSet: exports.THtmlButtonsControllerARCSet,
 };

package/lib/html-ctrls-btn.js

@@ -1,4 +1,4 @@
-// [v0.1.042-20220912]
+// [v0.1.043-20220922]
 
 // === module init block ===
 
@@ -10,6 +10,7 @@ const {
 
 const {
   isHTMLElement, CSS_CLASS_STRING,
+  valueToIDString,
 } = require('./html-helper-lib.js');
 
 const {
@@ -53,7 +54,8 @@ class THtmlButtonsSet {
   constructor(){
     // define default functions for manipulators
     const __user_index_getter = (value) => {
-      return readAsString(value, '', { useTrim: true, numberToString: true });
+      //return readAsString(value, '', { useTrim: true, numberToString: true });
+      return valueToIDString(value);
     };
     const __user_item_getter = (value) => {
       return THtmlButtonsSet.isHTMLButton(value) ? value : null;

package/lib/html-ctrls-list.js

@@ -1,12 +1,12 @@
-// [v0.1.036-20220902]
+// [v0.1.051-20221009]
 
 // === module init block ===
 
 const {
-  readAsBool, readAsNumber, readAsString,
-  isEmptyString,
-  isNotEmptyString,
-  isArray, isObject,
+  //readAsBool,
+  readAsNumber,
+  //valueToIndex,
+  //isArray, isObject,
   isPlainObject,
   TItemsListEx,
 } = require('@ygracs/bsfoc-lib-js');
@@ -15,6 +15,7 @@ const {
   isHTMLElement, isSelectedHTMLElement, isHiddenHTMLElement,
   showHtmlElement, hideHtmlElement,
   selectHtmlElement, unselectHtmlElement,
+  markHtmlElementAsCurrent, unmarkCurrentHtmlElement,
   CSS_CLASS_STRING,
 } = require('./html-helper-lib.js');
 
@@ -24,10 +25,35 @@ const {
   CSS_CLASS_SELECTED,
   CSS_CLASS_DISABLED,
   CSS_CLASS_HIDDEN,
+  CSS_CLASS_CURRENT,
+  CSS_CLASS_ACTIVE,
 } = CSS_CLASS_STRING;
 
+const ILC_SMODE_DEF = 0;
+const ILC_SMODE_SHFT = 1;
+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;
+  };
+  return result;
+};
+
 // === module main block (function definitions) ===
 
 // === module main block (class definitions) ===
@@ -36,16 +62,33 @@ class THtmlItemsListContainer {
   #_host = null;
   #_items = null;
   #_options = null;
+  #_status = null;
 
   constructor(host, opt) {
-    this.#_items = new TItemsListEx();
+    // check host
     this.#_host = isHTMLElement(host) ? host : null;
+    // init items container
+    const _items = new TItemsListEx();
+    this.#_items = _items;
     // load options
     const _options = isPlainObject(opt) ? opt : {};
-    let { autoHideNewItems, } = _options;
-    if (typeof autoHideNewItems !== 'boolean') autoHideNewItems = false;
+    let {
+      autoHideNewItems,
+      markCurrentItem,
+    } = _options;
+    if (typeof autoHideNewItems !== 'boolean') {
+      _options.autoHideNewItems = autoHideNewItems = false;
+    };
+    if (typeof markCurrentItem !== 'boolean') {
+      _options.markCurrentItem = markCurrentItem = false;
+    };
+    // init status
+    const _status = {
+      curIndex: _items.curIndex,
+      curItem: _items.curItem,
+    };
+    this.#_status = _status;
     // save options
-    _options.autoHideNewItems = autoHideNewItems;
     this.#_options = _options;
   }
 
@@ -80,7 +123,11 @@ class THtmlItemsListContainer {
 
   clear(){
     this.#_items.clear();
-    if (this.#_host) this.#_host.innerHTML = '';
+    const _status = this.#_status;
+    _status.curIndex = this.curIndex;
+    _status.curItem = this.curItem;
+    const _host = this.#_host;
+    if (_host) _host.innerHTML = '';
   }
 
   isEmpty(){
@@ -103,22 +150,20 @@ class THtmlItemsListContainer {
     return isHTMLElement(item) ? this.#_items.srchIndex(item) : -1;
   }
 
-  srchIndexByAttr(name, value){
-    let index = -1;
+  srchIndexByAttr(name, value = ''){
     const _name = typeof name === 'string' ? name.trim() : '';
-    const _value = readAsString(value, '', {
-      useTrim: true,
-      numberToString: true,
-      boolToString: true,
-    });
-    if (_name !== '' && _value !== '') {
+    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 < this.count; i++) {
-        item = this.getItem(i);
+      for (let i = 0; i < _items.count; i++) {
+        item = _items.getItem(i);
         if (
           isHTMLElement(item)
           && item.hasAttribute(_name)
-          && item.getAttribute(_name) === _value
+          && (acceptAnyVal || item.getAttribute(_name) === _value)
         ) {
           index = i;
           break;
@@ -133,11 +178,29 @@ class THtmlItemsListContainer {
   };
 
   setCurIndex(index){
-    return this.#_items.setIndex(index);
+    const isSUCCEED = this.#_items.setIndex(index);
+    if (isSUCCEED) {
+      const markCurrentItem = this.#_options.markCurrentItem;
+      const _status = this.#_status;
+      if (markCurrentItem && _status.curIndex !== -1) {
+        unmarkCurrentHtmlElement(_status.curItem);
+      };
+      const item = this.getItem(index);
+      _status.curIndex = Number(index);
+      _status.curItem = item;
+      if (markCurrentItem) markHtmlElementAsCurrent(item);
+    };
+    return isSUCCEED;
   }
 
   rstCurIndex(){
+    const _status = this.#_status;
+    if (this.#_options.markCurrentItem && _status.curIndex !== -1) {
+      unmarkCurrentHtmlElement(_status.curItem);
+    };
     this.#_items.rstIndex();
+    _status.curIndex = this.#_items.curIndex;
+    _status.curItem = this.curItem;
   }
 
   getItem(index){
@@ -145,59 +208,51 @@ class THtmlItemsListContainer {
     return isHTMLElement(item) ? item : null;
   }
 
-  getItemByAttr(name, value = ''){
-    let _name = '';
-    let item = null;
-    let index = -1;
-    value = readAsString(value, '', {
-      useTrim: true,
-      numberToString: true,
-      boolToString: true,
-    });
-    if (typeof name === 'string' && ((_name = name.trim()) !== '')){
-      const useAnyName = isEmptyString(name);
-      const useAnyVal = isEmptyString(value);
-      for (let i = 0; i < this.count; i++) {
-        item = this.getItem(i);
-        if (
-          isHTMLElement(item)
-          && item.hasAttribute(_name)
-          && (useAnyVal || item.getAttribute(_name) === value)
-        ) {
-          index = i;
-          break;
-        };
-      };
-    };
-    return index !== -1 ? item : null;
+  getItemByAttr(...args){
+    return this.getItem(this.srchIndexByAttr(...args));
   }
 
   getItemByID(value){
-    return this.getItemByAttr('id', value);
+    return this.getItem(this.srchIndexByID(value));
   }
 
   addItem(item, opt){
-    let index = isHTMLElement(item) ? this.#_items.addItemEx(item, opt) : -1;
-    let isSUCCEED = index !== -1;
+    const forceCI = typeof opt === 'boolean' ? opt : false;
+    const index = (
+      isHTMLElement(item)
+      ? this.#_items.addItemEx(item, false)
+      : -1
+    );
+    const isSUCCEED = index !== -1;
     if (isSUCCEED) {
       if (this.#_options.autoHideNewItems) hideHtmlElement(item);
-      if (this.#_host) this.#_host.appendChild(item);
+      if (forceCI) this.setCurIndex(index);
+      if (this.#_host) this.#_host.append(item);
     };
     return isSUCCEED ? index : -1;
   }
 
   delItem(index, opt){
-    let item = this.#_items.delItemEx(index, opt);
-    let isSUCCEED = isHTMLElement(item);
-    if (isSUCCEED && this.#_host && this.#_host.contains(item)) {
-      this.#_host.removeChild(item);
+    const forceCI = typeof opt === 'boolean' ? opt : true;
+    const _items = this.#_items;
+    const item = _items.delItemEx(index, forceCI);
+    const isSUCCEED = isHTMLElement(item);
+    if (isSUCCEED) {
+      const index = _items.curIndex;
+      if (index === -1) {
+        this.rstCurIndex();
+      } else {
+        this.setCurIndex(_items.curIndex);
+      };
+      if (this.#_host) item.remove();
     };
     return isSUCCEED;
   }
 
   selectItem(index, opt){
-    let isSUCCEED = selectHtmlElement(this.#_items.getItem(index));
-    if (isSUCCEED && readAsBool(opt, false)) this.#_items.setIndex(index);
+    const forceCI = typeof opt === 'boolean' ? opt : false;
+    const isSUCCEED = selectHtmlElement(this.#_items.getItem(index));
+    if (isSUCCEED && forceCI) this.setCurIndex(index);
     return isSUCCEED;
   }
 
@@ -227,7 +282,6 @@ class THtmlItemsListController extends THtmlItemsListContainer {
   #_host = null;
   #_stubs = null;
   #_selects = null;
-  #_visibles = null;
   #_options = null;
   #_status = null;
   #_events = null;
@@ -242,21 +296,23 @@ class THtmlItemsListController extends THtmlItemsListContainer {
     super(_host, _options);
     // load options
     let {
-      autoHideNewItems,
+      //autoHideNewItems, // [*] processed by parent
+      //markCurrentItem, // [*] processed by parent
       showStubsIfEmpty,
       allowGroupSelection,
       allowSelectionLocks,
       stubs: stubsList,
     } = _options;
-    if (typeof autoHideNewItems !== 'boolean') autoHideNewItems = false;
-    if (typeof showStubsIfEmpty !== 'boolean') showStubsIfEmpty = false;
-    if (typeof allowGroupSelection !== 'boolean') allowGroupSelection = false;
-    if (typeof allowSelectionLocks !== 'boolean') allowSelectionLocks = false;
+    if (typeof showStubsIfEmpty !== 'boolean') {
+      _options.showStubsIfEmpty = showStubsIfEmpty = false;
+    };
+    if (typeof allowGroupSelection !== 'boolean') {
+      _options.allowGroupSelection = allowGroupSelection = false;
+    };
+    if (typeof allowSelectionLocks !== 'boolean') {
+      _options.allowSelectionLocks = allowSelectionLocks = false;
+    };
     // save options
-    _options.autoHideNewItems = autoHideNewItems;
-    _options.showStubsIfEmpty = showStubsIfEmpty;
-    _options.allowGroupSelection = allowGroupSelection;
-    _options.allowSelectionLocks = allowSelectionLocks;
     this.#_options = _options;
     // init status flags set
     const _status = {
@@ -264,6 +320,9 @@ class THtmlItemsListController extends THtmlItemsListContainer {
       isStubItemShown: false,
       isHostEnabled: isHostEnabled,
       catchEventOnHost: false,
+      execDelItem: false,
+      execDelItemDI: -1,
+      execDelItemCI: -1,
     }
     // bind ref to host
     this.#_host = _host;
@@ -271,8 +330,6 @@ class THtmlItemsListController extends THtmlItemsListContainer {
     this.#_stubs = new THtmlStubItemsSet(_host, stubsList);
     // init index of selected items
     this.#_selects = new Set();
-    // init index of visible items
-    this.#_visibles = new Set();
     // init events controller
     this.#_events = new Map();
     if (isHostEnabled) {
@@ -287,23 +344,31 @@ class THtmlItemsListController extends THtmlItemsListContainer {
 
   #_on_will_select_item = (e) => {
     //console.log('THtmlItemsListController._on_will_select_item() ==> was called...');
-    //console.log('CHECK: e => ditail:['+e.detail+']');
-    //console.log('CHECK: e => phase:['+e.eventPhase+']');
     //e.preventDefault(); /* need to reconsider reason for use */
+    const {
+      eventPhase,
+      target,
+      currentTarget,
+      ctrlKey,
+      shiftKey,
+    } = e;
+    //console.log('CHECK: e => ditail:['+e.detail+']');
+    //console.log('CHECK: e => phase:['+eventPhase+']');
+    const onClickNum = readAsNumber(e.detail, 0);
     const _status = this.#_status;
     const { isSelectionLocked, catchEventOnHost } = _status;
-    const on_click_num = readAsNumber(e.detail, 0);
     let curItem = null;
-    switch (e.eventPhase) {
-      //*case 1:
+    switch (eventPhase) {
       //* // NOTE: currently on eventPhase = 2 and 3
-      case 2:
+      //*case 1:
         /**/// capturing stage
-        curItem = e.target;
+      case 2:
+        /**/// target stage
+        if (target !== this.#_host) curItem = target;
         break;
       case 3:
         /**/// bubblig stage
-        curItem = catchEventOnHost ? e.target : e.currentTarget;
+        curItem = catchEventOnHost ? target : currentTarget;
         break;
       default:
         break;
@@ -311,61 +376,15 @@ class THtmlItemsListController extends THtmlItemsListContainer {
     if (
       !isSelectionLocked
       && curItem instanceof HTMLElement
-      && (on_click_num === 0 || on_click_num === 1)
+      && (onClickNum === 0 || onClickNum === 1)
       && !curItem.classList.contains(CSS_CLASS_DISABLED)
     ) {
-      const key_ctrl = readAsBool(e.ctrlKey, false);
-      const key_shft = readAsBool(e.shiftKey, false);
-      //console.log('CHECK: e => isShiftKeyPressed:['+key_ctrl+']');
-      //console.log('CHECK: e => isCtrlKeyPressed:['+key_shft+']');
-      let c_index = this.curIndex;
-      let n_index = this.srchIndex(curItem);
-      //console.log('THtmlItemsListController._on_will_select_item() ==> current:['+c_index+']');
-      //console.log('THtmlItemsListController._on_will_select_item() ==> next:['+n_index+']');
-      let act_in_mode = 0;
-      let act_unsel_grp = false;
-      if (this.#_options.allowGroupSelection) {
-        if (c_index !== -1) {
-          if (key_ctrl) {
-            act_in_mode = 2;
-          } else if (key_shft) {
-            act_in_mode = 1;
-          } else if (this.#_selects.size > 0) {
-            //console.log('THtmlItemsListController._on_will_select_item() ==> _selects.size:['+this.#_selects.size+']');
-            act_unsel_grp = true;
-          };
-        };
-      };
-      //console.log('THtmlItemsListController._on_will_select_item() ==> mode:['+act_in_mode+']');
-      //console.log('THtmlItemsListController._on_will_select_item() ==> act_unsel_grp:['+act_unsel_grp+']');
-      if (act_unsel_grp) {
-        for (let item of this.#_selects) {
-          c_index = this.srchIndex(item);
-          if (c_index !== -1) this.unselectItem(c_index);
-        };
-        c_index = -1;
-      };
-      if (act_in_mode === 1) {
-        if (c_index > n_index) [ c_index, n_index ] = [ n_index, c_index ];
-        let t_index = 0;
-        for (let item of this.#_selects) {
-          t_index = this.srchIndex(item);
-          if (t_index !== -1) this.unselectItem(t_index);
-        };
-        this.#_selects.clear();
-        for (let i = c_index; i < n_index + 1; i++) {
-          this.selectItem(i, false);
-        };
-      } else if (act_in_mode === 2) {
-        if (this.isSelectedItem(n_index)) {
-          this.unselectItem(n_index);
-        } else {
-          this.selectItem(n_index, false);
-        };
-      } else if (c_index !== n_index) {
-        if (c_index !== -1) this.unselectItem(c_index);
-        this.selectItem(n_index, true);
-      };
+      //console.log('CHECK: e => tag:['+curItem.tagName+']');
+      this.#_selectItemEx(curItem, {
+        ctrlKey: ctrlKey,
+        shiftKey: shiftKey,
+        forceCI: true,
+      });
     };
   };
 
@@ -378,8 +397,10 @@ class THtmlItemsListController extends THtmlItemsListContainer {
   };
 
   get SelectedItems(){
+    const _selects = this.#_selects;
+    // // TODO: consider to use: `[...<value>]`
     let result = [];
-    for (let item of this.#_selects) {
+    for (let item of _selects) {
       if (item) result.push(item);
     };
     return result;
@@ -397,7 +418,6 @@ class THtmlItemsListController extends THtmlItemsListContainer {
     // // TODO: clear event handler on elements if set
     super.clear();
     this.#_selects.clear();
-    this.#_visibles.clear();
     if (this.#_options.showStubsIfEmpty) {
       // show default stub-item
       this.#_status.isStubItemShown = this.#_stubs.showDefItem();
@@ -415,34 +435,52 @@ class THtmlItemsListController extends THtmlItemsListContainer {
     this.#_status.isSelectionLocked = false;
   }
 
-  setCurIndex(index){
+  #_setCurIndex(index){
     const isSUCCEED = super.setCurIndex(index);
     if (isSUCCEED) this.#_triggerEvent('current-item-chosen', {
       index: Number(index),
       item: null,
     });
     return isSUCCEED;
+  };
+
+  setCurIndex(index){
+    return this.selectItem(index, true);
+  }
+
+  rstCurIndex(){
+    const {
+      execDelItem,
+      execDelItemDI,
+      execDelItemCI,
+    } = this.#_status;
+    if (execDelItem) {
+      let index = execDelItemCI;
+      if (execDelItemCI !== -1) index--;
+      if (index !== -1 && execDelItemDI !== execDelItemCI) {
+        this.unselectItem(index);
+      };
+    };
+    super.rstCurIndex();
   }
 
   addItem(item, opt){
-    let index = super.addItem(item, false);
-    let newItem = index !== -1 ? super.getItem(index) : null;
-    if (newItem) {
-      const _options = this.#_options;
+    const index = super.addItem(item, false);
+    if (index !== -1) {
+      const { autoHideNewItems, showStubsIfEmpty } = this.#_options;
       const _status = this.#_status;
-      if (!_status.catchEventOnHost) {
+      const { catchEventOnHost, isStubItemShown } = _status;
+      if (!catchEventOnHost) {
         // set event handler on element if it is not set on host
-        newItem.addEventListener('click', this.#_on_will_select_item);
+        item.addEventListener('click', this.#_on_will_select_item);
       };
       // TODO: consider if a "boolean" <opt> is enough
-      let setItemAsCur = typeof opt === 'boolean' ? opt : false;
-      if (_options.autoHideNewItems && !setItemAsCur) {
-        super.hideItem(index);
-      } else {
+      const forceCI = typeof opt === 'boolean' ? opt : false;
+      if (!autoHideNewItems) {
         if (index === 0) {
           if (
-            _options.showStubsIfEmpty
-            && _status.isStubItemShown
+            showStubsIfEmpty
+            && isStubItemShown
             && this.#_stubs.hideDefItem()
           ) {
             // hide default stub-item
@@ -450,38 +488,53 @@ class THtmlItemsListController extends THtmlItemsListContainer {
           };
           this.#_triggerEvent('first-item-added', {
             index: index,
-            item: newItem,
+            item: item,
           });
         };
         this.#_triggerEvent('item-added', {
           index: index,
-          item: newItem,
+          item: item,
+        });
+      };
+      if (forceCI) {
+        this.#_selectItemEx(item, {
+          ctrlKey: false,
+          shiftKey: false,
+          forceCI: forceCI,
         });
       };
-      if (setItemAsCur) this.setCurIndex(index);
     };
     return index;
   }
 
   delItem(index, opt){
-    let item = super.getItem(index);
-    let isSUCCEED = isHTMLElement(item) ? super.delItem(index, opt) : false;
+    const item = super.getItem(index);
+    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);
+      _status.execDelItemDI = -1;
+      _status.execDelItemCI = -1;
+      _status.execDelItem = false;
+    };
     if (isSUCCEED) {
       const _options = this.#_options;
-      const _status = this.#_status;
       if (!_status.catchEventOnHost) {
         // remove event handler on element if it was set by addItem()
         item.removeEventListener('click', this.#_on_will_select_item);
       };
-      this.#_selects.delete(item);
-      this.#_visibles.delete(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,
@@ -491,22 +544,84 @@ class THtmlItemsListController extends THtmlItemsListContainer {
     return isSUCCEED;
   }
 
-  selectItem(index, opt){
-    let item = super.getItem(index);
-    let isSUCCEED = selectHtmlElement(item);
+  #_selectItem(index){
+    const item = super.getItem(index);
+    const isSUCCEED = selectHtmlElement(item);
     if (isSUCCEED) {
       this.#_selects.add(item);
       this.#_triggerEvent('item-selected', {
         index: Number(index),
         item: item,
       });
-      if (readAsBool(opt, false)) isSUCCEED = this.setCurIndex(index);
+    };
+    return isSUCCEED;
+  }
+
+  #_selectItemEx(item, opt){
+    const _selects = this.#_selects;
+    let {
+      ctrlKey = false,
+      shiftKey = false,
+      forceCI = false,
+    } = opt;
+    let mode = ILC_SMODE_DEF;
+    let doUnSelGrp = false;
+    let indexCI = this.curIndex;
+    let indexNI = this.srchIndex(item);
+    if (indexCI !== -1) {
+      if (this.#_options.allowGroupSelection) {
+        if (shiftKey) {
+          mode = ILC_SMODE_SHFT;
+          if (_selects.size > 0) doUnSelGrp = true;
+        } else if (ctrlKey) {
+          mode = ILC_SMODE_CTRL;
+        } else if (_selects.size > 0) {
+          doUnSelGrp = true;
+        };
+      } else if (_selects.size > 0) {
+        doUnSelGrp = true;
+      };
+    };
+    if (doUnSelGrp) {
+      for (let item of _selects) {
+        this.unselectItem(this.srchIndex(item));
+      };
+      _selects.clear();
+    };
+    switch (mode) {
+      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:
+        this.#_selectItem(this.srchIndex(item));
+        break;
+      default:
+        if (this.#_selectItem(this.srchIndex(item))) {
+          if (forceCI) this.#_setCurIndex(indexNI);
+        };
+        break;
+    };
+  }
+
+  selectItem(index, opt){
+    const item = super.getItem(index);
+    let isSUCCEED = isHTMLElement(item);
+    if (isSUCCEED) {
+      const forceCI = typeof opt === 'boolean' ? opt : false;
+      this.#_selectItemEx(item, {
+        ctrlKey: false,
+        shiftKey: false,
+        forceCI: forceCI,
+      });
     };
     return isSUCCEED;
   }
 
   unselectItem(index){
-    let item = super.getItem(index);
+    const item = super.getItem(index);
     let isSUCCEED = unselectHtmlElement(item);
     if (isSUCCEED) {
       this.#_selects.delete(item);
@@ -519,10 +634,9 @@ class THtmlItemsListController extends THtmlItemsListContainer {
   }
 
   hideItem(index){
-    let item = super.getItem(index);
+    const item = super.getItem(index);
     let isSUCCEED = hideHtmlElement(item);
     if (isSUCCEED) {
-      this.#_visibles.delete(item);
       this.#_triggerEvent('item-hidden', {
         index: Number(index),
         item: item,
@@ -532,10 +646,9 @@ class THtmlItemsListController extends THtmlItemsListContainer {
   }
 
   showItem(index){
-    let item = super.getItem(index);
+    const item = super.getItem(index);
     let isSUCCEED = showHtmlElement(item);
     if (isSUCCEED) {
-      this.#_visibles.add(item);
       this.#_triggerEvent('item-shown', {
         index: Number(index),
         item: item,
@@ -554,7 +667,6 @@ class THtmlItemsListController extends THtmlItemsListContainer {
         /* NOTE:
          *    for current you can't reset or set new one on the same event
          */
-        //console.log('THtmlItemsListController.on() ==> event:['+name+'] - already exists...');
       };
     };
   }

package/lib/html-helper-lib.js

@@ -1,4 +1,4 @@
-// [v0.1.013-20220903]
+// [v0.1.014-20220922]
 
 // === module init block ===
 
@@ -134,6 +134,23 @@ function valueToClassList(value, opt){
   return result;
 };
 
+function valueToIDString(value){
+  let result = '';
+  switch (typeof value) {
+    case 'number':
+      if (Number.isNaN(value) || value < 0) break;
+      if (Number.isInteger(value)) result = value.toString();
+      break;
+    case 'string':
+      result = value.trim();
+      // // TODO: check if a valid character sequencies
+      break;
+    default:
+      break;
+  };
+  return result;
+};
+
 function createNewHtmlElement(tagName, opt){
   let _tag = typeof tagName === 'string' ? tagName.trim() : '';
   if (_tag === '') return null;
@@ -147,8 +164,7 @@ function createNewHtmlElement(tagName, opt){
       data: dset,
     } = opt;
     // set an element id
-    id = typeof id === 'string' ? id.trim() : '';
-    if (id !== '') item.setAttribute('id', id);
+    if ((id = valueToIDString(id)) !== '') item.setAttribute('id', id);
     // set an element text context
     if (typeof text === 'string') {
       item.appendChild(document.createTextNode(text));
@@ -226,3 +242,4 @@ exports.valueToClassList = valueToClassList;
 
 // experimental
 exports.createNewHtmlElement = createNewHtmlElement;
+exports.valueToIDString = valueToIDString;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntwg/html-helper",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "A base HTML-helper library for js",
   "author": "ygracs <cs70th-om@rambler.ru>",
   "license": "MIT",
@@ -40,6 +40,7 @@
     "@ygracs/bsfoc-lib-js": "^0.1.2"
   },
   "devDependencies": {
-    "jest": "^27.5.1"
+    "jest": "^29.0.3",
+    "jest-environment-jsdom": "^29.0.3"
   }
 }

package/CHANGELOG.md

@@ -1,123 +0,0 @@
-#### *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.