@cntwg/html-helper 0.0.26 → 0.1.0

package/lib/html-ctrls/buttons.js

@@ -1,414 +0,0 @@
-// [v0.1.062-20250509]
-
-// === module init block ===
-
-const {
-  isNotEmptyString,
-  isPlainObject, valueToArray,
-} = require('@ygracs/bsfoc-lib-js');
-
-const {
-  TItemsICollection,
-} = require('@ygracs/lists-lib-js');
-
-const {
-  isHTMLElement,
-  valueToIDString,
-  lockHTMLElement, unlockHTMLElement,
-  CSS_CLASS_STRING,
-} = require('../html-helper-lib.js');
-
-const {
-  pushEventHandler, triggerEventHandler,
-  readOnClickEventInfo,
-} = require('./mod-hfunc.js');
-
-const {
-  CSS_CLASS_DISABLED,
-} = CSS_CLASS_STRING;
-
-// === module extra block (helper functions) ===
-
-// === module main block ===
-
-/***
- * (* constant definitions *)
- */
-
-const BTS_DEF_GROUP_NAME = 'all';
-
-const etlHTagInputForBtn = new Set([
-  'button', 'submit', 'reset', 'image',
-]);
-
-/***
- * (* function definitions *)
- */
-
-/**
- * @function isHTMLButton
- * @param {any} obj - element to be verified
- * @returns {boolean}
- * @description Checks if the given object is an HTML-button.
- */
-function isHTMLButton(obj) {
-  let result = false;
-  if (isHTMLElement(obj)) {
-    switch (obj.tagName.toLowerCase()) {
-      case 'button': {
-        result = true;
-        break;
-      }
-      case 'input': {
-        result = etlHTagInputForBtn.has(obj.type.toLowerCase());
-        break;
-      }
-      default: {}
-    };
-  };
-  return result;
-}
-
-/***
- * (* class definitions *)
- */
-
-/**
- * @classdesc This class implements an interface of a buttons set
- */
-class THtmlButtonsSet {
-  /** @type {TItemsICollection} */
-  #_btnCol;
-
-  /**
-   * @description Creates an instance of a buttons set
-   */
-  constructor() {
-    // define default functions for manipulators
-    const __user_index_getter = (value) => {
-      return valueToIDString(value);
-    };
-    const __user_item_getter = (value) => {
-      return THtmlButtonsSet.isHTMLButton(value) ? value : null;
-    };
-    this.#_btnCol = new TItemsICollection({
-      userFn: {
-        checkIndexFn: isNotEmptyString,
-        readIndexFn: __user_index_getter,
-        checkItemFn: THtmlButtonsSet.isHTMLButton,
-        readItemFn: __user_item_getter,
-      },
-    });
-  }
-
-  /**
-   * Contains a list of an element names
-   * @type {string[]}
-   * @readonly
-   * @see TItemsICollection.ItemNames
-   */
-  get ItemNames() {
-    return this.#_btnCol.ItemNames;
-  }
-
-  /**
-   * Contains a list of an elements group names
-   * @type {string[]}
-   * @readonly
-   * @see TItemsICollection.CategoryNames
-   */
-  get GroupNames() {
-    return this.#_btnCol.CategoryNames;
-  }
-
-  /**
-   * @param {string} name - element name
-   * @returns {boolean}
-   * @see TItemsICollection.hasItem
-   * @description Checks whether a target item with a given name exists.
-   */
-  hasItem(name) {
-    return this.#_btnCol.hasItem(name);
-  }
-
-  /**
-   * @param {string} name - element name
-   * @param {any} item - element
-   * @param {...string} [group] - name of a target groups
-   * @returns {boolean}
-   * @see TItemsICollection.addItem
-   * @description Adds buttons to a set members.
-   */
-  addItem(...args) {
-    return this.#_btnCol.addItem(...args);
-  }
-
-  /**
-   * @param {string} name - element name
-   * @param {...string} [group] - name of a target groups
-   * @returns {boolean}
-   * @see TItemsICollection.addItemToCategory
-   * @description Adds button to a listed groups.
-   */
-  addItemToGroup(...args) {
-    return this.#_btnCol.addItemToCategory(...args);
-  }
-
-  /**
-   * @param {string} name - element name
-   * @returns {boolean}
-   * @see TItemsICollection.delItem
-   * @description Deletes button from a set members.
-   */
-  delItem(name) {
-    return this.#_btnCol.delItem(name);
-  }
-
-  /**
-   * @param {string} name - element name
-   * @param {...string} [group] - name of a target groups
-   * @returns {boolean}
-   * @see TItemsICollection.delItemFromGroup
-   * @description Deletes button from a listed groups.
-   */
-  delItemFromGroup(...args) {
-    return this.#_btnCol.delItemFromGroup(...args);
-  }
-
-  /**
-   * @param {string} name - old name
-   * @param {string} value - new name
-   * @returns {boolean}
-   * @see TItemsICollection.renameItem
-   * @description Renames button in a set.
-   */
-  renameItem(name, value) {
-    return this.#_btnCol.renameItem(name, value, false);
-  }
-
-  /**
-   * @param {string} name - element name
-   * @returns {void}
-   * @description Tries to enable button.
-   */
-  enableItem(name) {
-    unlockHTMLElement(this.#_btnCol.getItem(name));
-  }
-
-  /**
-   * @param {string} name - element name
-   * @returns {void}
-   * @description Tries to disable button.
-   */
-  disableItem(name) {
-    lockHTMLElement(this.#_btnCol.getItem(name));
-  }
-
-  /**
-   * @param {string} name - group name
-   * @returns {boolean}
-   * @see TItemsICollection.hasCategory
-   * @description Checks whether a target group with a given name exists.
-   */
-  hasGroup(name) {
-    return this.#_btnCol.hasCategory(name);
-  }
-
-  /**
-   * @param {string} name - group name
-   * @returns {boolean}
-   * @see TItemsICollection.addCategory
-   * @description Adds a group with a given name.
-   */
-  addGroup(name) {
-    return this.#_btnCol.addCategory(name);
-  }
-
-  /**
-   * @param {string} name - group name
-   * @returns {boolean}
-   * @see TItemsICollection.delCategory
-   * @description Deletes a group with a given name.
-   */
-  delGroup(name) {
-    return this.#_btnCol.delCategory(name);
-  }
-
-  /**
-   * @param {string} name - old name
-   * @param {string} value - new name
-   * @returns {boolean}
-   * @see TItemsICollection.renameCategory
-   * @description Renames group in a set.
-   */
-  renameGroup(name, value) {
-    return this.#_btnCol.renameCategory(name, value, false);
-  }
-
-  /**
-   * @param {string} value - group name
-   * @returns {void}
-   * @description Enables all buttons in a given group.
-   */
-  enableGroup(value) {
-    const group = this.#_btnCol.getCategory(value);
-    valueToArray(group).forEach(item => unlockHTMLElement(item));
-  }
-
-  /**
-   * @param {string} value - group name
-   * @returns {void}
-   * @description Disables all buttons in a given group.
-   */
-  disableGroup(value) {
-    const group = this.#_btnCol.getCategory(value);
-    valueToArray(group).forEach(item => lockHTMLElement(item));
-  }
-
-  /**
-   * Returns a function wich do a validation check.
-   * @type {isHTMLButton}
-   * @static
-   */
-  static get isHTMLButton() {
-    return isHTMLButton;
-  }
-
-};
-
-/**
- * @classdesc This class implements an interface of a pre-defined buttons set.
- *            A set provide a three button: <apply>, <reset> and <cancel>.
- */
-class THtmlButtonsControllerARCSet {
-  /** @type {THtmlButtonsSet} */
-  #_btnSet;
-  /** @type {Map<string, Function>} */
-  #_events;
-
-  /**
-   * @typedef {Object} arcButtonsDesc
-   * @property {?HTMLElement} btnApply - button 'apply'
-   * @property {?HTMLElement} btnReset - button 'reset'
-   * @property {?HTMLElement} btnCancel - button 'cancel'
-   * @description A description for ARC-buttons set.
-   */
-
-  /**
-   * @param {arcButtonsDesc} opt - an option
-   * @description Creates an instance of the buttons set.
-   */
-  constructor(opt) {
-    // load controls
-    /** @type {arcButtonsDesc} */
-    let {
-      btnApply,
-      btnReset,
-      btnCancel,
-    } = isPlainObject(opt) ? opt : {};
-    if (!isHTMLButton(btnApply)) btnApply = null;
-    if (!isHTMLButton(btnReset)) btnReset = null;
-    if (!isHTMLButton(btnCancel)) btnCancel = null;
-    // init buttons set
-    const _btnSet = new THtmlButtonsSet();
-    this.#_btnSet = _btnSet;
-    _btnSet.addGroup('main');
-    _btnSet.addGroup('all');
-    if (btnApply) {
-      _btnSet.addItem('btn_apply', btnApply, 'main', 'all');
-      btnApply.addEventListener('click', e => this.#_on_btn_pressed(e, 'apply'));
-    };
-    if (btnReset) {
-      _btnSet.addItem('btn_reset', btnReset, 'main', 'all');
-      btnReset.addEventListener('click', e => this.#_on_btn_pressed(e, 'reset'));
-    };
-    if (btnCancel) {
-      _btnSet.addItem('btn_cancel', btnCancel, 'all');
-      btnCancel.addEventListener('click', e => this.#_on_btn_pressed(e, 'cancel'));
-    };
-    _btnSet.disableGroup('main');
-    // 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 in 'main' group.
-   */
-  disableMain() {
-    this.#_btnSet.disableGroup('main');
-  }
-
-  /**
-   * @returns {void}
-   * @description Enables all buttons in 'main' group.
-   */
-  enableMain() {
-    this.#_btnSet.enableGroup('main');
-  }
-
-  /**
-   * @returns {void}
-   * @description Disables all buttons.
-   */
-  disableAll() {
-    this.#_btnSet.disableGroup('all');
-  }
-
-  /**
-   * @returns {void}
-   * @description Enables all buttons.
-   */
-  enableAll() {
-    this.#_btnSet.enableGroup('all');
-  }
-
-  /**
-   * @param {string} name - event name
-   * @param {func} evnt - a callback function
-   * @returns {void}
-   * @description Sets a callback function to handle event.
-   */
-  on(name, evnt) {
-    pushEventHandler(this.#_events, name, evnt);
-  }
-};
-
-// === module exports block ===
-
-module.exports.THtmlButtonsSet = THtmlButtonsSet;
-module.exports.THtmlButtonsControllerARCSet = THtmlButtonsControllerARCSet;
-
-module.exports.BTS_DEF_GROUP_NAME = BTS_DEF_GROUP_NAME;
-
-module.exports.isHTMLButton = isHTMLButton;