@cntwg/html-helper 0.0.17 → 0.0.19

package/lib/html-ctrls/buttons.js

@@ -0,0 +1,242 @@
+// [v0.1.049-20230614]
+
+// === module init block ===
+
+const {
+  isNotEmptyString,
+  isPlainObject, valueToArray,
+  TItemsICollection,
+} = require('@ygracs/bsfoc-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_SELECTED,
+  CSS_CLASS_DISABLED,
+  //CSS_CLASS_HIDDEN,
+} = CSS_CLASS_STRING;
+
+const BTS_DEF_GROUP_NAME = 'all';
+
+const etlHTagInputForBtn = new Set([
+  'button', 'submit', 'reset', 'image',
+]);
+
+// === module extra block (helper functions) ===
+
+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: {
+        break;
+      }
+    };
+  };
+  return result;
+}
+
+// === module main block (function definitions) ===
+
+// === module main block (class definitions) ===
+
+class THtmlButtonsSet {
+  #_btnCol = null;
+
+  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,
+      },
+    });
+  }
+
+  get ItemNames(){
+    return this.#_btnCol.ItemNames;
+  }
+
+  get GroupNames(){
+    return this.#_btnCol.CategoryNames;
+  }
+
+  hasItem(name){
+    return this.#_btnCol.hasItem(name);
+  }
+
+  addItem(...args){
+    return this.#_btnCol.addItem(...args);
+  }
+
+  addItemToGroup(...args){
+    return this.#_btnCol.addItemToCategory(...args);
+  }
+
+  delItem(name){
+    return this.#_btnCol.delItem(name);
+  }
+
+  delItemFromGroup(...args){
+    return this.#_btnCol.delItemFromGroup(...args);
+  }
+
+  renameItem(oldName, newName){
+    return this.#_btnCol.renameItem(oldName, newName, false);
+  }
+
+  enableItem(name){
+    unlockHtmlElement(this.#_btnCol.getItem(name));
+  }
+
+  disableItem(name){
+    lockHtmlElement(this.#_btnCol.getItem(name));
+  }
+
+  hasGroup(name){
+    return this.#_btnCol.hasCategory(name);
+  }
+
+  addGroup(name){
+    return this.#_btnCol.addCategory(name);
+  }
+
+  delGroup(name){
+    return this.#_btnCol.delCategory(name);
+  }
+
+  renameGroup(oldName, newName){
+    return this.#_btnCol.renameCategory(oldName, newName, false);
+  }
+
+  enableGroup(value){
+    const group = this.#_btnCol.getCategory(value);
+    valueToArray(group).forEach(item => unlockHtmlElement(item));
+  }
+
+  disableGroup(value){
+    const group = this.#_btnCol.getCategory(value);
+    valueToArray(group).forEach(item => lockHtmlElement(item));
+  }
+
+  static get isHTMLButton(){
+    return isHTMLButton;
+  }
+
+};
+
+class THtmlButtonsControllerARCSet {
+  #_btnSet = null;
+  #_events = null;
+
+  constructor(opt) {
+    // load options
+    const _options = isPlainObject(opt) ? opt : {};
+    // load controls
+    let {
+      btnApply,
+      btnReset,
+      btnCancel,
+    } = _options;
+    if (!isHTMLButton(btnApply)) btnApply = null;
+    if (!isHTMLButton(btnReset)) btnReset = null;
+    if (!isHTMLButton(btnCancel)) btnCancel = null;
+    /*const controls = {
+      btnApply,
+      btnReset,
+      btnCancel,
+    };*/ // // TODO:  ???
+    // 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();
+  }
+
+  #_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);
+  }
+
+  disableMain(){
+    this.#_btnSet.disableGroup('main');
+  }
+
+  enableMain(){
+    this.#_btnSet.enableGroup('main');
+  }
+
+  disableAll(){
+    this.#_btnSet.disableGroup('all');
+  }
+
+  enableAll(){
+    this.#_btnSet.enableGroup('all');
+  }
+
+  on(name, evnt){
+    pushEventHandler(this.#_events, name, evnt);
+  }
+};
+
+// === module exports block ===
+
+exports.THtmlButtonsSet = THtmlButtonsSet;
+exports.THtmlButtonsControllerARCSet = THtmlButtonsControllerARCSet;
+
+exports.BTS_DEF_GROUP_NAME = BTS_DEF_GROUP_NAME;
+
+exports.isHTMLButton = isHTMLButton;

package/lib/html-ctrls/fields.js

@@ -0,0 +1,342 @@
+// [v0.1.011-20230704]
+
+// === module init block ===
+
+const {
+  readAsBool, readAsString,
+  isEmptyString, isNotEmptyString,
+  isPlainObject,
+} = require('@ygracs/bsfoc-lib-js');
+
+const {
+  isHTMLElement, createNewHtmlElement,
+  valueToIDString, valueToClassList,
+  readAsAttrValue,
+  showHtmlElement, hideHtmlElement,
+} = require('../html-helper-lib.js');
+
+const {
+  pushEventHandler, triggerEventHandler,
+} = require('./mod-hfunc.js');
+
+// === module extra block (helper functions) ===
+
+const lpAllowedValues = new Map([
+  [ 'before', 0 ],
+  [ 'after', 1 ],
+  [ 'default', 0 ],
+]);
+
+function getInputFieldTypeDescr(value){
+  let fldType = readAsString(value, '', true);
+  if (fldType === '') fldType = 'default';
+  let fldSubType = '';
+  switch (fldType) {
+    case 'text':
+    case 'checkbox': {
+      break;
+    }
+    case 'switch': {
+      fldType = 'checkbox';
+      fldSubType = 'switch';
+      break;
+    }
+    case 'field':
+    case 'default': {
+      fldType = 'text';
+      break;
+    }
+    default: {
+      fldType = '';
+      break;
+    }
+  };
+  return { type: fldType, subtype: fldSubType };
+};
+
+function getLabelPositionID(value){
+  let key = readAsString(value, '', true);
+  if (!lpAllowedValues.has(key)) key = 'default';
+  return lpAllowedValues.get(key);
+};
+
+// === module main block ===
+
+/***
+ * (* constant definitions *)
+ */
+
+/***
+ * (* function definitions *)
+ */
+
+/***
+ * (* class definitions *)
+ */
+
+class THtmlInputField {
+  #_host = null;
+  #_label = null;
+  #_field = null;
+  #_id = '';
+  #_value = '';
+  #_options = null;
+  #_status = null;
+  #_events = null;
+
+  constructor(name, eholds, opt){
+    // load elements
+    const _eholds = isPlainObject(eholds) ? eholds : {};
+    let { host, label, field } = _eholds;
+    // save elements
+    if (!isHTMLElement(host)) host = null;
+    if (!isHTMLElement(label)) label = null;
+    if (!isHTMLElement(field)) field = null;
+    this.#_host = host;
+    this.#_label = label;
+    this.#_field = field;
+    // load options
+    const _options = isPlainObject(opt) ? opt : {};
+    let {
+      idPref,
+      baseClassID,
+      hint,
+      type: fldType,
+      readonly: isReadOnly,
+    } = _options;
+    let fldSubType = '';
+    ({ type: fldType, subtype: fldSubType } = getInputFieldTypeDescr(fldType));
+    isReadOnly = readAsBool(isReadOnly, true);
+    // save options
+    this.#_options = _options;
+    // save status
+    this.#_status = {
+      fldType,
+      fldSubType,
+      isReadOnly,
+      isModified: false,
+    };
+    // init an event instance controller
+    if (field) {
+      field.addEventListener('change', this.#_saveFieldData);
+      field.addEventListener('input', this.#_switchFieldStatusOnInput);
+      field.addEventListener('blur', this.#_switchFieldStatusOnBlur);
+    };
+    this.#_events = new Map();
+  }
+
+  get isModified(){
+    return this.#_status.isModified;
+  }
+
+  get value(){
+    const field = this.#_field;
+    let result = '';
+    if (field) {
+      const { fldType } = this.#_status;
+      result = fldType === 'checkbox' ?  field.checked : field.value;
+    };
+    return result;
+  }
+
+  set value(value){
+    const field = this.#_field;
+    if (value !== undefined) {
+      const { fldType } = this.#_status;
+      if (fldType === 'checkbox') {
+        field.checked = value;
+        this.#_status.isModified = false;
+      } else {
+        let _value = readAsString(value, '', {
+          boolToString: true,
+          numberToString: true,
+        });
+        field.value = _value;
+        this.#_status.isModified = false;
+        if (_value === '') {
+          this.#_triggerEvent('value-empty', {
+            type: 'value-empty',
+            target: null,
+          });
+        };
+      };
+    };
+  }
+
+  #_triggerEvent = (name, ...args) => {
+    triggerEventHandler(this.#_events, name, ...args);
+  };
+
+  #_saveFieldData = (e) => {
+    e.preventDefault();
+    const target = e.target;
+    //***/console.log(':'+e.type+':'+target.getAttribute('id')+':\n:saveFieldData() => received OnChange-event');
+    // // TODO:
+    this.#_triggerEvent('value-changed', {
+      type: 'value-changed',
+      target,
+    });
+  };
+
+  #_switchFieldStatusOnInput = (e) => {
+    e.preventDefault();
+    const target = e.target;
+    //***/console.log(':'+e.type+':'+target.getAttribute('id')+':\n:switchFieldStatusOnInput() => received OnInput-event');
+    this.#_status.isModified = true;
+    // // TODO:
+    if (target.value === '') {
+      this.#_triggerEvent('value-empty', {
+        type: 'value-empty',
+        target,
+      });
+    };
+  };
+
+  #_switchFieldStatusOnBlur = (e) => {
+    e.preventDefault();
+    //***/console.log(':'+e.type+':'+e.target.getAttribute('id')+':\n:switchFieldStatusOnBlur() => received OnBlur-event');
+    // // TODO:
+  };
+
+  attachTo(target){
+    const host = this.#_host;
+    let result = false;
+    if (
+      isHTMLElement(target)
+      && isHTMLElement(host)
+    ) {
+      target.append(host);
+      result = true;
+    };
+    return result;
+  }
+
+  isEmpty(){
+    return isEmptyString(this.value);
+  }
+
+  isNotEmpty(){
+    return isNotEmptyString(this.value);
+  }
+
+  show(){
+    showHtmlElement(this.#_host);
+  }
+
+  hide(){
+    hideHtmlElement(this.#_host);
+  }
+
+  clear(){
+    // // TODO:
+  }
+
+  static create(name, opt){
+    const eholds = THtmlInputField.createElement(name, opt, true);
+    const { field } = eholds;
+    return (
+      isHTMLElement(field)
+      ? new THtmlInputField(name, eholds, opt)
+      : null
+    );
+  }
+
+  static createElement(name, opt, doRetChild){
+    const id = valueToIDString(name);
+    const _options = isPlainObject(opt) ? opt : {};
+    let fldSubType = '';
+    let {
+      host,
+      idPref,
+      label,
+      labelPosition,
+      useDelim,
+      baseClassID,
+      hint,
+      type: fldType,
+      readonly: isReadOnly,
+    } = _options;
+    if (!isPlainObject(baseClassID)) baseClassID = {};
+    let {
+      main: bcidMain,
+      host: bcidHost,
+      label: bcidLabel,
+      field: bcidField,
+    } = baseClassID;
+    bcidMain = valueToClassList(bcidMain);
+    bcidHost = valueToClassList(bcidHost);
+    bcidLabel = valueToClassList(bcidLabel);
+    bcidField = valueToClassList(bcidField);
+    idPref = valueToIDString(idPref);
+    hint = readAsString(hint, '', true);
+    ({ type: fldType, subtype: fldSubType } = getInputFieldTypeDescr(fldType));
+    if (fldSubType === 'switch') bcidField.push('switch');
+    labelPosition = getLabelPositionID(labelPosition);
+    if (typeof useDelim !== 'boolean') useDelim = true;
+    label = readAsString(label, '', true);
+    if (label !== '') label = `${label}${useDelim ? ':' : ''}`;
+    isReadOnly = readAsBool(isReadOnly, true);
+    let fldID = idPref === '' ? id : `${idPref}-${id}`;
+    if (!isHTMLElement(host)) {
+      host = createNewHtmlElement('div', {
+        class: bcidHost,
+      });
+    };
+    let lblHolder = null;
+    let fldHolder = null;
+    let items = [];
+    if (host) {
+      lblHolder = host.querySelector(`label[for="${fldID}"]`);
+      if (!lblHolder) {
+        lblHolder = createNewHtmlElement('label', {
+          text: label,
+          attr: {
+            for: fldID,
+          },
+          class: bcidLabel,
+        });
+      };
+      fldHolder = host.querySelector(`input#${fldID}`);
+      if (!fldHolder) {
+        fldHolder = createNewHtmlElement('input', {
+          id: fldID,
+          attr: {
+            type: fldType,
+            placeholder: hint,
+          },
+          class: bcidField,
+        });
+      };
+      if (fldHolder) {
+        if (isReadOnly) {
+          const attr = fldType === 'checkbox' ? 'disabled' : 'readOnly';
+          fldHolder[attr] = true;
+        };
+        if (lblHolder) items.push(lblHolder);
+        items.push(fldHolder);
+      };
+      const len = items.length;
+      if (len > 0) {
+        if (len === 2 && labelPosition === 1) {
+          items = [ items[1], items[0] ];
+        };
+        host.append(...items);
+      };
+    };
+    // // TODO:
+    return (
+      readAsBool(doRetChild, false)
+      ? { host, label: lblHolder, field: fldHolder }
+      : host
+    );
+  }
+
+  on(name, evnt){
+    pushEventHandler(this.#_events, name, evnt);
+  }
+
+};
+
+// === module exports block ===
+
+module.exports.THtmlInputField = THtmlInputField;