@cntwg/html-helper 0.0.26 → 0.1.0

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

@@ -1,210 +0,0 @@
-// [v0.1.054-20250509]
-
-// === module init block ===
-
-const {
-  isPlainObject,
-} = require('@ygracs/bsfoc-lib-js');
-
-const {
-  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_DISABLED,
-} = CSS_CLASS_STRING;
-
-// === module extra block (function definitions) ===
-
-// === module main block ===
-
-/***
- * (* constant definitions *)
- */
-
-const BTS_DEF_GROUP_NAME = 'all';
-
-/***
- * (* function definitions *)
- */
-
-/***
- * (* class definitions *)
- */
-
-/**
- * @classdesc This class implements an interface of a pre-defined
- *            buttons set that is used in pair with a list elements.
- *            A set provide a buttons: <next>, <previous>, <first> and <last>.
- */
-class THtmlListButtonsController {
-  /** @type {THtmlButtonsSet} */
-  #_btnSet;
-  /** @type {Map<string, Function>} */
-  #_events;
-
-  /**
-   * @typedef {Object} listButtonsSetDesc
-   * @property {?HTMLElement} btnFirst - button 'move to first'
-   * @property {?HTMLElement} btnPrev - button 'move to previous'
-   * @property {?HTMLElement} btnNext - button 'move to next'
-   * @property {?HTMLElement} btnLast - button 'move to last'
-   * @description A description for list buttons set.
-   */
-
-  /**
-   * @param {listButtonsSetDesc} [opt] - an options
-   * @description Creates an instance of a buttons set.
-   */
-  constructor(opt) {
-    // load controls
-    /** @type {listButtonsSetDesc} */
-    let {
-      btnFirst,
-      btnPrev,
-      btnNext,
-      btnLast,
-    } = isPlainObject(opt) ? opt : {};
-    if (!isHTMLButton(btnFirst)) btnFirst = null;
-    if (!isHTMLButton(btnPrev)) btnPrev = null;
-    if (!isHTMLButton(btnNext)) btnNext = null;
-    if (!isHTMLButton(btnLast)) btnLast = null;
-    // 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();
-  }
-
-  /**
-   * @param {object} e - event
-   * @param {string} key - button ID
-   * @returns {void}
-   * @private
-   */
-  #_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);
-    };
-  }
-
-  /**
-   * @param {string} name - event name
-   * @param {...any} args
-   * @returns {void}
-   * @private
-   * @see triggerEventHandler
-   */
-  #_triggerEvent = (name, ...args) => {
-    triggerEventHandler(this.#_events, name, ...args);
-  }
-
-  /**
-   * @returns {void}
-   * @description Disables all buttons.
-   */
-  disableAll() {
-    const _btnSet = this.#_btnSet;
-    _btnSet.disableGroup('move_bkwd');
-    _btnSet.disableGroup('move_frwd');
-  }
-
-  /**
-   * @returns {void}
-   * @description Disables all buttons in 'move_bkwd' group.
-   */
-  disableBkwd() {
-    this.#_btnSet.disableGroup('move_bkwd');
-  }
-
-  /**
-   * @returns {void}
-   * @description Disables all buttons in 'move_frwd' group.
-   */
-  disableFrwd() {
-    this.#_btnSet.disableGroup('move_frwd');
-  }
-
-  /**
-   * @returns {void}
-   * @description Enables all buttons.
-   */
-  enableAll() {
-    const _btnSet = this.#_btnSet;
-    _btnSet.enableGroup('move_bkwd');
-    _btnSet.enableGroup('move_frwd');
-  }
-
-  /**
-   * @returns {void}
-   * @description Enables all buttons in 'move_bkwd' group.
-   */
-  enableBkwd() {
-    this.#_btnSet.enableGroup('move_bkwd');
-  }
-
-  /**
-   * @returns {void}
-   * @description Enables all buttons in 'move_frwd' group.
-   */
-  enableFrwd() {
-    this.#_btnSet.enableGroup('move_frwd');
-  }
-
-  /**
-   * @param {string} name - event name
-   * @param {func} evnt - callback function
-   * @returns {void}
-   * @description Sets a callback function to handle event.
-   */
-  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,297 +0,0 @@
-// [v0.1.049-20250505]
-
-// === module init block ===
-
-const {
-  isArray, isObject, isPlainObject,
-} = require('@ygracs/bsfoc-lib-js');
-
-const {
-  isHTMLElement,
-} = require('../html-helper-lib.js');
-
-// === module extra block (helper functions) ===
-
-// === module main block ===
-
-/***
- * (* constant definitions *)
- */
-
-/***
- * (* function definitions *)
- */
-
-/***
- * (* class definitions *)
- */
-
-/**
- * @typedef {Object} OPT_ldstubs
- * @property {string} [defaultItem] - <*deprecated*> a default element name
- * @property {boolean} [useClear=true] - to clear before load an elements
- * @property {boolean} [force=false] - run in a force mode
- * @description A settings to load a stub-elements.
- * @todo [since v0.0.26] `defaultItem`-option deprecated
- */
-
-/**
- * @typedef {Object} OBJ_stubEList
- * @property {Array} items - array of `name`-`element` pairs
- * @property {string} [defaultItem] - a default element name
- * @description A stub-elements description list.
- */
-
-/**
- * @typedef {Object} OPT_stubconsett
- * @property {(any[])} items - array of `name`-`element` pairs
- * @property {string} [defaultItem] - a default element name
- * @property {boolean} [force=false] - run in a force mode
- * @description A an options set for a `THtmlStubItemsSet`-class constructor
- */
-
-/**
- * @classdesc This class implements an interface of a stub-items set
- */
-class THtmlStubItemsSet {
-  /** @type {?HTMLElement} */
-  #_host;
-  /** @type {Map<string, HTMLElement>} */
-  #_items;
-  /** @type {string} */
-  #_defItem;
-  #_shownItem = null;
-
-  /**
-   * @param {HTMLElement} host - host element
-   * @param {(array|OPT_stubconsett|OBJ_stubEList)} [opt] - options
-   * @description Creates an instance of a stub-items set
-   * @todo [since v0.0.26] use of an `array`-type as a value of an `opt` is deprecated
-   */
-  constructor(host, opt) {
-    this.#_host = isHTMLElement(host) ? host : null;
-    this.#_items = new Map();
-    this.#_defItem = '';
-    this.#_shownItem = null;
-    if (isObject(opt)) {
-      /** @type {(OPT_stubconsett|OBJ_stubEList)} */
-      const obj = isArray(opt) ? { items: opt } : opt;
-      const { items, defaultItem, force } = obj;
-      this.loadItems({
-        items,
-        defaultItem,
-      }, {
-        force,
-      });
-    };
-  }
-
-  /**
-   * Defines a default element name
-   * @type {string}
-   */
-  get defItem() {
-    return this.#_defItem;
-  }
-
-  set defItem(name) {
-    this.setDefItem(name);
-  }
-
-  /**
-   * Contains a Qty of an elements
-   * @type {number}
-   * @readonly
-   */
-  get count() {
-    return this.#_items.size;
-  }
-
-  /**
-   * @returns {void}
-   * @description Clears an instance content.
-   */
-  clear() {
-    // // TODO: check if any item is shown
-    this.#_items.clear();
-    this.#_defItem = '';
-    this.#_shownItem = null;
-  }
-
-  /**
-   * @param {string} name - an element name
-   * @returns {boolean}
-   * @description Sets a default item.
-   */
-  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;
-  }
-
-  /**
-   * @returns {void}
-   * @description Resets a default item.
-   */
-  rstDefItem() {
-    // // TODO: check if item is shown
-    this.#_defItem = '';
-  }
-
-  /**
-   * @param {string} name - an element name
-   * @returns {boolean}
-   * @description Checks if an item exists.
-   */
-  hasItem(name) {
-    const _name = typeof name === 'string' ? name.trim() : '';
-    return this.#_items.has(_name);
-  }
-
-  /**
-   * @returns {boolean}
-   * @description Checks if any items exists.
-   */
-  hasItems() {
-    return this.#_items.size > 0;
-  }
-
-  /**
-   * @param {string} name - an element name
-   * @returns {?HTMLElement}
-   * @description Returns an item by its name.
-   */
-  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;
-  }
-
-  /**
-   * @param {string} name - an element name
-   * @param {HTMLElement} item - an element
-   * @param {boolean} [opt=false] - flag indicating a force mode
-   * @returns {boolean}
-   * @description Adds an item to an instance members.
-   */
-  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;
-  }
-
-  /**
-   * @param {string} name - an element name
-   * @returns {boolean}
-   * @description Deletes an item from an instance members.
-   */
-  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;
-  }
-
-  /**
-   * @param {string} name - an element name
-   * @returns {boolean}
-   * @description Shows an item.
-   */
-  showItem(name) {
-    const item = this.getItem(name);
-    const isSUCCEED = this.#_host && item ? true : false;
-    if (isSUCCEED) this.#_host.append(item);
-    return isSUCCEED;
-  }
-
-  /**
-   * @returns {boolean}
-   * @description Shows a default item.
-   */
-  showDefItem() {
-    return this.showItem(this.#_defItem);
-  }
-
-  /**
-   * @param {string} name - an element name
-   * @returns {boolean}
-   * @description Hides an item.
-   */
-  hideItem(name) {
-    const item = this.getItem(name);
-    const isSUCCEED = this.#_host && item ? true : false;
-    if (isSUCCEED && this.#_host.contains(item)) item.remove();
-    return isSUCCEED;
-  }
-
-  /**
-   * @returns {boolean}
-   * @description Hides a default item.
-   */
-  hideDefItem() {
-    return this.hideItem(this.#_defItem);
-  }
-
-  /**
-   * @param {(Array|OBJ_stubEList)} data - an array of entries or special object
-   * @param {(boolean|OPT_ldstubs)} [opt] - an options
-   * @returns {number}
-   * @description Adds an items to an instance members.
-   * @todo [since 0.0.25] deprecate use of `opt` as `boolean`
-   * @todo [since v0.0.26] for `OPT_ldstubs` a `defaultItem`-option deprecated
-   */
-  loadItems(data, opt) {
-    /** @type {OBJ_stubEList} */
-    let {
-      items,
-      defaultItem,
-    } = isPlainObject(data) ? data : { items: data };
-    /** @type {OPT_ldstubs} */
-    let _options = isPlainObject(opt) ? opt : { useClear: opt };
-    let {
-      useClear,
-      force,
-    } = _options;
-    if (typeof useClear !== 'boolean') useClear = true;
-    if (typeof force !== 'boolean') force = false;
-    if (defaultItem === undefined) defaultItem = _options.defaultItem;  /* deprecated */
-    const setDefs = defaultItem !== undefined;
-    let count = 0;
-    if (isArray(items)) {
-      if (useClear) this.clear();
-      items.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;

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

@@ -1,60 +0,0 @@
-// [v0.1.063-20250220]
-
-// === module init block ===
-
-const {
-  pushEventHandler, triggerEventHandler,
-} = require('../event-hfunc.js');
-
-// === module extra block (helper functions) ===
-
-// === module main block ===
-
-/***
- * (* constant definitions *)
- */
-
-/***
- * (* function definitions *)
- */
-
-/**
- * @function readOnClickEventInfo
- * @param {object}
- * @returns {object}
- * @inner
- */
-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: {}
-  };
-  return { item, onClickNum };
-};
-
-/***
- * (* class definitions *)
- */
-
-// === module exports block ===
-
-exports.readOnClickEventInfo = readOnClickEventInfo;
-
-// re-exported
-exports.pushEventHandler = pushEventHandler;
-exports.triggerEventHandler = triggerEventHandler;