@cntwg/html-helper 0.0.14

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

@@ -0,0 +1,277 @@
+// [v0.1.042-20220912]
+
+// === module init block ===
+
+const {
+  readAsString,
+  readAsNumber,
+  isNotEmptyString,
+  isPlainObject,
+  valueToArray,
+  TItemsICollection,
+} = require('@ygracs/bsfoc-lib-js');
+
+const {
+  CSS_CLASS_STRING,
+  isHTMLElement,
+} = require('../html-helper-lib.js');
+
+const {
+  isHTMLButton,
+  THtmlButtonsSet,
+}  = require('../html-ctrls-btn');
+
+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,
+    };
+    // 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', this.#_on_btn_frst_pressed);
+      btnLast.addEventListener('click', this.#_on_btn_last_pressed);
+    } 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', this.#_on_btn_prev_pressed);
+      btnNext.addEventListener('click', this.#_on_btn_next_pressed);
+    } 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_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;
+    };
+    if (
+      curItem instanceof HTMLElement
+      && (on_click_num === 0 || on_click_num === 1)
+      && !curItem.classList.contains(CSS_CLASS_DISABLED)
+    ) {
+      this.#_triggerEvent('btn-first-pressed', e);
+    };
+  }
+
+  #_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;
+    };
+    if (
+      curItem instanceof HTMLElement
+      && (on_click_num === 0 || on_click_num === 1)
+      && !curItem.classList.contains(CSS_CLASS_DISABLED)
+    ) {
+      this.#_triggerEvent('btn-last-pressed', e);
+    };
+  }
+
+  #_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;
+    };
+    if (
+      curItem instanceof HTMLElement
+      && (on_click_num === 0 || on_click_num === 1)
+      && !curItem.classList.contains(CSS_CLASS_DISABLED)
+    ) {
+      this.#_triggerEvent('btn-prev-pressed', e);
+    };
+  }
+
+  #_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;
+    };
+    if (
+      curItem instanceof HTMLElement
+      && (on_click_num === 0 || on_click_num === 1)
+      && !curItem.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);
+    };
+  }
+
+  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){
+    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...');
+      };
+    };
+  }
+};
+
+// === module exports block ===
+
+exports.THtmlListButtonsController = THtmlListButtonsController;
+
+exports.BTS_DEF_GROUP_NAME = BTS_DEF_GROUP_NAME;

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

@@ -0,0 +1,185 @@
+// [v0.1.038-20220912]
+
+// === module init block ===
+
+const {
+  //readAsBool, readAsNumber, readAsString,
+  //isEmptyString, isNotEmptyString,
+  isArray, isObject, isPlainObject,
+  //TItemsListEx,
+} = require('@ygracs/bsfoc-lib-js');
+
+const {
+  isHTMLElement,
+  //isSelectedHTMLElement, isHiddenHTMLElement,
+  //showHtmlElement, hideHtmlElement,
+  //selectHtmlElement, unselectHtmlElement,
+  CSS_CLASS_STRING,
+} = require('../html-helper-lib.js');
+
+/*const {
+  CSS_CLASS_SELECTED,
+  CSS_CLASS_DISABLED,
+  CSS_CLASS_HIDDEN,
+} = CSS_CLASS_STRING;*/
+
+// === module extra block (helper functions) ===
+
+// === module main block (function definitions) ===
+
+// === module main block (class definitions) ===
+
+class THtmlStubItemsSet {
+  #_host = null;
+  #_items = null;
+  #_defItem = '';
+  #_shownItem = null;
+
+  constructor(host, items) {
+    this.#_host = isHTMLElement(host) ? host : null;
+    this.#_items = new Map();
+    this.#_defItem = '';
+    this.#_shownItem = null;
+    if (isObject(items)) this.loadItems(items);
+  }
+
+  get defItem(){
+    return this.#_defItem;
+  }
+
+  set defItem(name){
+    this.setDefItem(name);
+  }
+
+  get count(){
+    return this.#_items.size;
+  }
+
+  clear(){
+    // // TODO: check if any item is shown
+    this.#_items.clear();
+    this.#_defItem = '';
+    this.#_shownItem = null;
+  }
+
+  setDefItem(name){
+    let isACCEPTED = false;
+    if (typeof name === 'string') {
+      const _name = name.trim();
+      isACCEPTED = this.#_items.has(_name);
+      if (isACCEPTED) this.#_defItem = _name;
+    };
+    return isACCEPTED;
+  }
+
+  rstDefItem(){
+    // // TODO: check if item is shown
+    this.#_defItem = '';
+  }
+
+  hasItem(name){
+    const _name = typeof name === 'string' ? name.trim() : '';
+    return this.#_items.has(_name);
+  }
+
+  hasItems(){
+    return this.#_items.size > 0;
+  }
+
+  getItem(name){
+    const _name = typeof name === 'string' ? name.trim() : '';
+    const item = this.#_items.has(_name) ? this.#_items.get(_name) : null;
+    return isHTMLElement(item) ? item : null;
+  }
+
+  addItem(name, item, opt){
+    const _name = typeof name === 'string' ? name.trim() : '';
+    let isSUCCEED = false;
+    if (_name !== '' && isHTMLElement(item)) {
+      const force = typeof opt === 'boolean' ? opt : false;
+      if (force || !this.#_items.has(_name)) {
+        this.#_items.set(_name, item);
+        isSUCCEED = true;
+      };
+    };
+    return isSUCCEED;
+  }
+
+  delItem(name){
+    let _name = '';
+    let isSUCCEED = (
+      typeof name === 'string'
+      && ((_name = name.trim()) !== '')
+    );
+    if (isSUCCEED) {
+      this.#_items.delete(_name);
+      // // TODO: check if item is shown
+    };
+    return isSUCCEED;
+  }
+
+  showItem(name){
+    const item = this.getItem(name);
+    const isSUCCEED = this.#_host && item ? true : false;
+    if (isSUCCEED) this.#_host.append(item);
+    return isSUCCEED;
+  }
+
+  showDefItem(){
+    return this.showItem(this.#_defItem);
+  }
+
+  hideItem(name){
+    const item = this.getItem(name);
+    const isSUCCEED = this.#_host && item ? true : false;
+    if (isSUCCEED && this.#_host.contains(item)) item.remove();
+    return isSUCCEED;
+  }
+
+  hideDefItem(){
+    return this.hideItem(this.#_defItem);
+  }
+
+  loadItems(list, opt){
+    let _options = {};
+    if (typeof opt === 'boolean') {
+      _options.useClear = opt;
+    } else if (isPlainObject(opt)) {
+      _options = opt;
+    };
+    let {
+      defaultItem,
+      useClear,
+      force,
+      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;
+    let _list = list;
+    if (isPlainObject(_list)) {
+      ({ items: _list, defaultItem } = _list);
+    };
+    const setDefs = defaultItem !== undefined;
+    let count = 0;
+    if (isArray(_list)) {
+      if (useClear) this.clear();
+      _list.forEach((obj) => {
+        if (isArray(obj)) {
+          const [ name, item ] = obj;
+          if (this.addItem(name, item, force)) count++;
+        } else if (isPlainObject(obj)) {
+          const { name, item } = obj;
+          if (this.addItem(name, item, force)) count++;
+        };
+      });
+    };
+    if (setDefs && count > 0) this.setDefItem(defaultItem);
+    return count;
+  }
+
+};
+
+// === module exports block ===
+
+exports.THtmlStubItemsSet = THtmlStubItemsSet;