@cntwg/html-helper 0.0.17 → 0.0.19

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

@@ -1,12 +1,9 @@
-// [v0.1.053-20221022]
+// [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,9 +222,12 @@ 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;
   }
@@ -300,6 +300,7 @@ class THtmlItemsListController extends THtmlItemsListContainer {
     let {
       //autoHideNewItems, // [*] processed by parent
       //markCurrentItem, // [*] processed by parent
+      //itemBaseClassID, // [*] processed by parent
       showStubsIfEmpty,
       allowGroupSelection,
       allowSelectionLocks,
@@ -364,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
@@ -391,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(){
@@ -597,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;
+      }
     };
   }
 
@@ -666,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-btn.js

@@ -0,0 +1,155 @@
+// [v0.1.047-20230614]
+
+// === module init block ===
+
+const {
+  isPlainObject,
+} = require('@ygracs/bsfoc-lib-js');
+
+const {
+  isHTMLElement,
+  CSS_CLASS_STRING,
+} = require('../html-helper-lib.js');
+
+const {
+  isHTMLButton,
+  THtmlButtonsSet,
+}  = require('./buttons.js');
+
+const {
+  pushEventHandler, triggerEventHandler,
+  readOnClickEventInfo,
+} = require('./mod-hfunc.js');
+
+const {
+  //CSS_CLASS_SELECTED,
+  CSS_CLASS_DISABLED,
+  //CSS_CLASS_HIDDEN,
+} = CSS_CLASS_STRING;
+
+const BTS_DEF_GROUP_NAME = 'all';
+
+// === module extra block (function definitions) ===
+
+// === module main block (function definitions) ===
+
+// === module main block (class definitions) ===
+
+class THtmlListButtonsController {
+  #_btnSet = null;
+  #_events = null;
+
+  constructor(opt) {
+    // load options
+    const _options = isPlainObject(opt) ? opt : {};
+    // load controls
+    let {
+      btnFirst,
+      btnPrev,
+      btnNext,
+      btnLast,
+      btn_frst, //* will deprecate
+      btn_prev, //* will deprecate
+      btn_next, //* will deprecate
+      btn_last, //* will deprecate
+    } = _options;
+    if (btnFirst === undefined) btnFirst = btn_frst;
+    if (btnPrev === undefined) btnPrev = btn_prev;
+    if (btnNext === undefined) btnNext = btn_next;
+    if (btnLast === undefined) btnLast = btn_last;
+    if (!isHTMLButton(btnFirst)) btnFirst = null;
+    if (!isHTMLButton(btnPrev)) btnPrev = null;
+    if (!isHTMLButton(btnNext)) btnNext = null;
+    if (!isHTMLButton(btnLast)) btnLast = null;
+    /*const controls = {
+      btnFirst,
+      btnPrev,
+      btnNext,
+      btnLast,
+    };*/ // // TODO: ???
+    // init buttons set
+    const _btnSet = new THtmlButtonsSet();
+    this.#_btnSet = _btnSet;
+    _btnSet.addGroup('move_frwd');
+    _btnSet.addGroup('move_bkwd');
+    _btnSet.addGroup('dsbl_ctrls');
+    if (btnFirst && btnLast) {
+      _btnSet.addItem('btn_frst', btnFirst, 'move_bkwd');
+      _btnSet.addItem('btn_last', btnLast, 'move_frwd');
+      btnFirst.addEventListener('click', e => this.#_on_btn_pressed(e, 'first'));
+      btnLast.addEventListener('click', e => this.#_on_btn_pressed(e, 'last'));
+    } else {
+      _btnSet.addItem('btn_frst', btnFirst, 'dsbl_ctrls');
+      _btnSet.addItem('btn_last', btnLast, 'dsbl_ctrls');
+    };
+    if (btnPrev && btnNext) {
+      _btnSet.addItem('btn_prev', btnPrev, 'move_bkwd');
+      _btnSet.addItem('btn_next', btnNext, 'move_frwd');
+      btnPrev.addEventListener('click', e => this.#_on_btn_pressed(e, 'prev'));
+      btnNext.addEventListener('click', e => this.#_on_btn_pressed(e, 'next'));
+    } else {
+      _btnSet.addItem('btn_prev', btnPrev, 'dsbl_ctrls');
+      _btnSet.addItem('btn_next', btnNext, 'dsbl_ctrls');
+    };
+    _btnSet.disableGroup('move_frwd');
+    _btnSet.disableGroup('move_bkwd');
+    _btnSet.disableGroup('dsbl_ctrls');
+    // init events controller
+    this.#_events = new Map();
+  }
+
+  #_on_btn_pressed = (e, key) => {
+    //console.log(`THtmlListButtonsController._on_btn_pressed().key(${key}) ==> was called...`);
+    //e.preventDefault(); /* need to reconsider reason for use */
+    const { item, onClickNum } = readOnClickEventInfo(e);
+    if (
+      item instanceof HTMLElement
+      && (onClickNum === 0 || onClickNum === 1)
+      && !item.classList.contains(CSS_CLASS_DISABLED)
+    ) {
+      this.#_triggerEvent(`btn-${key}-pressed`, e);
+    };
+  }
+
+  #_triggerEvent = (name, ...args) => {
+    triggerEventHandler(this.#_events, name, ...args);
+  }
+
+  disableAll(){
+    const _btnSet = this.#_btnSet;
+    _btnSet.disableGroup('move_bkwd');
+    _btnSet.disableGroup('move_frwd');
+  }
+
+  disableBkwd(){
+    this.#_btnSet.disableGroup('move_bkwd');
+  }
+
+  disableFrwd(){
+    this.#_btnSet.disableGroup('move_frwd');
+  }
+
+  enableAll(){
+    const _btnSet = this.#_btnSet;
+    _btnSet.enableGroup('move_bkwd');
+    _btnSet.enableGroup('move_frwd');
+  }
+
+  enableBkwd(){
+    this.#_btnSet.enableGroup('move_bkwd');
+  }
+
+  enableFrwd(){
+    this.#_btnSet.enableGroup('move_frwd');
+  }
+
+  on(name, evnt){
+    pushEventHandler(this.#_events, name, evnt);
+  }
+};
+
+// === module exports block ===
+
+exports.THtmlListButtonsController = THtmlListButtonsController;
+
+exports.BTS_DEF_GROUP_NAME = BTS_DEF_GROUP_NAME;

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,60 @@
+// [v0.1.060-20230614]
+
+// === 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);
+  };
+};
+
+function readOnClickEventInfo(e) {
+  let item = null;
+  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 (class definitions) ===
+
+// === module exports block ===
+
+exports.pushEventHandler = pushEventHandler;
+exports.triggerEventHandler = triggerEventHandler;
+exports.readOnClickEventInfo = readOnClickEventInfo;

package/lib/html-helper-lib.js

@@ -1,11 +1,9 @@
-// [v0.1.014-20220922]
+// [v0.1.019-20230614]
 
 // === 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);
@@ -85,34 +85,77 @@ function unmarkActiveHtmlElement(obj){
   return isSUCCEED;
 };
 
+function lockHtmlElement(obj){
+  let isSUCCEED = isHTMLElement(obj);
+  if (isSUCCEED) {
+    const { classList, tagName } = obj;
+    classList.add(CSS_CLASS_DISABLED);
+    switch (tagName.toLowerCase()) {
+      case 'button':
+      case 'input': {
+        obj.disabled = true;
+        break;
+      }
+      default: {
+        break;
+      }
+    };
+  };
+  return isSUCCEED;
+};
+
+function unlockHtmlElement(obj){
+  let isSUCCEED = isHTMLElement(obj);
+  if (isSUCCEED) {
+    const { classList, tagName } = obj;
+    classList.remove(CSS_CLASS_DISABLED);
+    switch (tagName.toLowerCase()) {
+      case 'button':
+      case 'input': {
+        obj.disabled = false;
+        break;
+      }
+      default: {
+        break;
+      }
+    };
+  };
+  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;
-      };
-    };
+    lockHtmlElement(item);
   };
 };
 
 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;
-      };
-    };
+    unlockHtmlElement(item);
+  };
+};
+
+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){
@@ -137,16 +180,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;
 };
@@ -160,6 +206,7 @@ function createNewHtmlElement(tagName, opt){
       id,
       text,
       attr,
+      classNames,
       class: _class,
       data: dset,
     } = opt;
@@ -185,6 +232,7 @@ function createNewHtmlElement(tagName, opt){
       };
     };
     // set a class-attributes of the element
+    if (_class === undefined) _class = classNames;
     if (_class !== undefined) {
       const cl = valueToClassList(_class, true);
       if (cl.length > 0) item.classList.add(...cl);
@@ -235,6 +283,8 @@ exports.markHtmlElementAsCurrent = markHtmlElementAsCurrent;
 exports.unmarkCurrentHtmlElement = unmarkCurrentHtmlElement;
 exports.markHtmlElementAsActive = markHtmlElementAsActive;
 exports.unmarkActiveHtmlElement = unmarkActiveHtmlElement;
+exports.lockHtmlElement = lockHtmlElement;
+exports.unlockHtmlElement = unlockHtmlElement;
 exports.activateHtmlElements = activateHtmlElements;
 exports.inactivateHtmlElements = inactivateHtmlElements;
 
@@ -243,3 +293,4 @@ exports.valueToClassList = valueToClassList;
 // experimental
 exports.createNewHtmlElement = createNewHtmlElement;
 exports.valueToIDString = valueToIDString;
+exports.readAsAttrValue = readAsAttrValue;