@cntwg/html-helper 0.0.15 → 0.0.17

package/lib/html-ctrls-list.js

@@ -1,11 +1,12 @@
-// [v0.1.044-20220925]
+// [v0.1.053-20221022]
 
 // === module init block ===
 
 const {
-  readAsBool, readAsNumber,
-  valueToIndex,
-  isArray, isObject,
+  //readAsBool,
+  readAsNumber,
+  //valueToIndex,
+  //isArray, isObject,
   isPlainObject,
   TItemsListEx,
 } = require('@ygracs/bsfoc-lib-js');
@@ -28,6 +29,10 @@ const {
   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){
@@ -227,17 +232,21 @@ class THtmlItemsListContainer {
     return isSUCCEED ? index : -1;
   }
 
-  delItem(index, opt){
-    const forceCI = typeof opt === 'boolean' ? opt : true;
-    const item = this.#_items.delItemEx(index, forceCI);
-    const isSUCCEED = isHTMLElement(item);
+  delItem(index, opt, optEx){
+    const _items = this.#_items;
+    const item = _items.delItemEx(index, opt);
+    const isSUCCEED = item !== undefined;
     if (isSUCCEED) {
-      const _status = this.#_status;
-      const curItem = this.curItem;
-      _status.curIndex = this.#_items.curIndex;
-      _status.curItem = curItem;
-      if (this.#_options.markCurrentItem) markHtmlElementAsCurrent(curItem);
-      if (this.#_host) item.remove();
+      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);
+        };
+      };
     };
     return isSUCCEED;
   }
@@ -313,6 +322,9 @@ class THtmlItemsListController extends THtmlItemsListContainer {
       isStubItemShown: false,
       isHostEnabled: isHostEnabled,
       catchEventOnHost: false,
+      execDelItem: false,
+      execDelItemDI: -1,
+      execDelItemCI: -1,
     }
     // bind ref to host
     this.#_host = _host;
@@ -334,23 +346,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;
@@ -358,61 +378,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,
+      });
     };
   };
 
@@ -463,19 +437,39 @@ 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){
     const index = super.addItem(item, false);
     if (index !== -1) {
-      const { autoHideNewItems, showStubsIfEmpty }  = this.#_options;
+      const { autoHideNewItems, showStubsIfEmpty } = this.#_options;
       const _status = this.#_status;
       const { catchEventOnHost, isStubItemShown } = _status;
       if (!catchEventOnHost) {
@@ -504,49 +498,132 @@ class THtmlItemsListController extends THtmlItemsListContainer {
           item: item,
         });
       };
-      if (forceCI) this.setCurIndex(index);
+      if (forceCI) {
+        this.#_selectItemEx(item, {
+          ctrlKey: false,
+          shiftKey: false,
+          forceCI: forceCI,
+        });
+      };
     };
     return index;
   }
 
   delItem(index, opt){
-    let item = super.getItem(index);
-    let isSUCCEED = isHTMLElement(item) ? super.delItem(index, opt) : false;
+    const item = super.getItem(index);
+    let isSUCCEED = item !== undefined;
+    const _status = this.#_status;
     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);
-      if (this.isEmpty()) {
-        if (_options.showStubsIfEmpty) {
-          // show default stub-item
-          _status.isStubItemShown = this.#_stubs.showDefItem();
+      _status.execDelItem = true;
+      _status.execDelItemCI = this.curIndex;
+      _status.execDelItemDI = Number(index);
+      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);
+          };
         };
-        this.#_triggerEvent('list-clear');
-      } else {
-        this.#_triggerEvent('item-removed', {
-          index: Number(index),
-          item: item,
-        });
       };
+      _status.execDelItemDI = -1;
+      _status.execDelItemCI = -1;
+      _status.execDelItem = false;
     };
     return isSUCCEED;
   }
 
-  selectItem(index, opt){
+  #_selectItem(index){
     const item = super.getItem(index);
-    let isSUCCEED = selectHtmlElement(item);
+    const isSUCCEED = selectHtmlElement(item);
     if (isSUCCEED) {
       this.#_selects.add(item);
       this.#_triggerEvent('item-selected', {
         index: Number(index),
         item: item,
       });
+    };
+    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;
-      if (forceCI) isSUCCEED = this.setCurIndex(index);
+      this.#_selectItemEx(item, {
+        ctrlKey: false,
+        shiftKey: false,
+        forceCI: forceCI,
+      });
     };
     return isSUCCEED;
   }

package/package.json

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