desy-html 16.0.4 → 17.0.1

package/src/js/aria/combobox.js

@@ -0,0 +1,597 @@
+export function combobox(aria) {
+  /**
+   * @constructor
+   * @desc Combobox with autocomplete following W3C APG pattern
+   */
+  aria.Combobox = function (comboboxNode, inputNode, listboxNode, hiddenInputNode, tooltipNode, noResultsNode, toggleButtonNode) {
+    this.comboboxNode = comboboxNode;
+    this.inputNode = inputNode;
+    this.listboxNode = listboxNode;
+    this.hiddenInputNode = hiddenInputNode;
+    this.tooltipNode = tooltipNode;
+    this.noResultsNode = noResultsNode;
+    this.toggleButtonNode = toggleButtonNode;
+
+    this.autocompleteMode = this.inputNode.getAttribute('aria-autocomplete') || 'both';
+    this.activeDescendant = null;
+    this.selectedValue = '';
+    this.selectedId = '';
+    this.allOptions = [];
+    this.filteredOptions = [];
+    this.isOpen = false;
+    this._isDeleting = false;
+    this.floatingInstance = null;
+
+    this.multiselectable = this.listboxNode.getAttribute('aria-multiselectable') === 'true';
+    this.fieldName = this.multiselectable ? this.listboxNode.dataset.name : (this.hiddenInputNode && this.hiddenInputNode.name);
+    this.selectedItems = [];
+    this.hiddenInputs = [];
+
+    this.init();
+  };
+
+  aria.Combobox.prototype.init = function () {
+    var options = this.listboxNode.querySelectorAll('[role="option"]');
+    this.allOptions = [];
+
+    for (var i = 0; i < options.length; i++) {
+      var opt = options[i];
+      var optText = opt.textContent.trim();
+      this.allOptions.push({
+        node: opt,
+        text: optText,
+        normalizedText: this.normalizeString(optText)
+      });
+
+      if (opt.getAttribute('aria-selected') === 'true') {
+        if (this.multiselectable) {
+          this.selectedItems.push({ id: opt.id, text: optText });
+        } else {
+          this.selectedValue = optText;
+          this.selectedId = opt.id;
+          this.hiddenInputNode.value = this.selectedValue;
+        }
+      }
+    }
+
+    this.filteredOptions = this.allOptions.slice();
+    this.registerEvents();
+
+    if (this.multiselectable) {
+      this.syncHiddenInputs();
+    }
+  };
+
+  aria.Combobox.prototype.registerEvents = function () {
+    this._boundHandleInput = this.handleInput.bind(this);
+    this._boundHandleKeydown = this.handleKeydown.bind(this);
+    this._boundHandleInputClick = this.handleInputClick.bind(this);
+    this._boundHandleBlur = this.handleBlur.bind(this);
+    this._boundHandleOptionClick = this.handleOptionClick.bind(this);
+    this._boundHandleToggle = this.handleToggle.bind(this);
+    this._boundPreventBlur = function (evt) { evt.preventDefault(); };
+
+    this.inputNode.addEventListener('input', this._boundHandleInput);
+    this.inputNode.addEventListener('keydown', this._boundHandleKeydown);
+    this.inputNode.addEventListener('click', this._boundHandleInputClick);
+    this.inputNode.addEventListener('blur', this._boundHandleBlur);
+    this.listboxNode.addEventListener('click', this._boundHandleOptionClick);
+    if (this.toggleButtonNode) {
+      this.toggleButtonNode.addEventListener('click', this._boundHandleToggle);
+    }
+    this.tooltipNode.addEventListener('mousedown', this._boundPreventBlur);
+  };
+
+  aria.Combobox.prototype.destroy = function () {
+    this.inputNode.removeEventListener('input', this._boundHandleInput);
+    this.inputNode.removeEventListener('keydown', this._boundHandleKeydown);
+    this.inputNode.removeEventListener('click', this._boundHandleInputClick);
+    this.inputNode.removeEventListener('blur', this._boundHandleBlur);
+    this.listboxNode.removeEventListener('click', this._boundHandleOptionClick);
+    if (this.toggleButtonNode) {
+      this.toggleButtonNode.removeEventListener('click', this._boundHandleToggle);
+    }
+    this.tooltipNode.removeEventListener('mousedown', this._boundPreventBlur);
+
+    if (this.floatingInstance) {
+      this.floatingInstance.destroy();
+      this.floatingInstance = null;
+    }
+  };
+
+  aria.Combobox.prototype.normalizeString = function (str) {
+    return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();
+  };
+
+  aria.Combobox.prototype.filterOptions = function (text) {
+    var normalizedText = this.normalizeString(text);
+    this.filteredOptions = [];
+
+    for (var i = 0; i < this.allOptions.length; i++) {
+      var opt = this.allOptions[i];
+      if (normalizedText === '' || opt.normalizedText.indexOf(normalizedText) !== -1) {
+        opt.node.removeAttribute('hidden');
+        this.filteredOptions.push(opt);
+      } else {
+        opt.node.setAttribute('hidden', '');
+      }
+    }
+
+    if (this.filteredOptions.length === 0 && text.length > 0) {
+      this.noResultsNode.removeAttribute('hidden');
+    } else {
+      this.noResultsNode.setAttribute('hidden', '');
+    }
+  };
+
+  aria.Combobox.prototype.handleInput = function () {
+    var text = this.inputNode.value;
+
+    if (!this.isOpen) {
+      this.open();
+    }
+
+    this.filterOptions(text);
+    this.clearActiveDescendant();
+
+    if (this.filteredOptions.length > 0) {
+      var firstOption = this.filteredOptions[0];
+
+      if (this.autocompleteMode === 'both' && text.length > 0 && !this._isDeleting) {
+        var normalizedText = this.normalizeString(text);
+        if (firstOption.normalizedText.indexOf(normalizedText) === 0) {
+          this.inlineComplete(text, firstOption.text);
+        }
+        this.focusOption(firstOption.node);
+      }
+    }
+
+    if (text.length === 0 && !this.multiselectable) {
+      var hadSelection = this.selectedValue || this.hiddenInputNode.value;
+      for (var i = 0; i < this.allOptions.length; i++) {
+        this.allOptions[i].node.setAttribute('aria-selected', 'false');
+      }
+      this.selectedValue = '';
+      this.selectedId = '';
+      this.hiddenInputNode.value = '';
+      this.hiddenInputNode.setAttribute('value', '');
+      if (hadSelection) {
+        this.dispatchCustomEvent('combobox:clear', {});
+      }
+    }
+
+    this._isDeleting = false;
+  };
+
+  aria.Combobox.prototype.inlineComplete = function (typed, firstMatch) {
+    if (this.autocompleteMode !== 'both') {
+      return;
+    }
+
+    this.inputNode.value = firstMatch;
+    this.inputNode.setSelectionRange(typed.length, firstMatch.length);
+  };
+
+  aria.Combobox.prototype.handleKeydown = function (evt) {
+    var key = evt.which || evt.keyCode;
+
+    switch (key) {
+      case aria.KeyCode.DOWN:
+        evt.preventDefault();
+        if (evt.altKey) {
+          if (!this.isOpen) {
+            this.open();
+            this.filterOptions('');
+          }
+          return;
+        } else {
+          if (!this.isOpen) {
+            this.open();
+          }
+          var nextOpt = this.getNextVisibleOption(this.activeDescendant, 1);
+          if (nextOpt) {
+            this.focusOption(nextOpt);
+          }
+        }
+        break;
+
+      case aria.KeyCode.UP:
+        evt.preventDefault();
+        if (evt.altKey && this.isOpen) {
+          if (this.activeDescendant) {
+            var activeOpt = document.getElementById(this.activeDescendant);
+            if (activeOpt) {
+              this.selectOption(activeOpt);
+            }
+          }
+          this.close();
+        } else if (this.isOpen) {
+          var prevOpt = this.getNextVisibleOption(this.activeDescendant, -1);
+          if (prevOpt) {
+            this.focusOption(prevOpt);
+          }
+        }
+        break;
+
+      case aria.KeyCode.RETURN:
+        if (this.isOpen && this.activeDescendant) {
+          evt.preventDefault();
+          var selectedOpt = document.getElementById(this.activeDescendant);
+          if (selectedOpt) {
+            if (this.multiselectable) {
+              this.toggleOption(selectedOpt);
+            } else {
+              this.selectOption(selectedOpt);
+              this.close();
+            }
+          } else {
+            this.close();
+          }
+        }
+        break;
+
+      case aria.KeyCode.ESC:
+        evt.preventDefault();
+        if (this.multiselectable) {
+          if (this.isOpen) {
+            this.close();
+          }
+          this.inputNode.value = '';
+          this.inputNode.setAttribute('value', '');
+          this.filterOptions('');
+          break;
+        }
+        if (this.isOpen) {
+          this.close();
+          if (this.selectedValue) {
+            this.inputNode.value = this.selectedValue;
+            this.inputNode.setAttribute('value', this.selectedValue);
+          } else {
+            this.inputNode.value = '';
+            this.inputNode.setAttribute('value', '');
+            this.hiddenInputNode.value = '';
+            this.hiddenInputNode.setAttribute('value', '');
+            for (var i = 0; i < this.allOptions.length; i++) {
+              this.allOptions[i].node.setAttribute('aria-selected', 'false');
+            }
+          }
+        } else {
+          this.inputNode.value = '';
+          this.inputNode.setAttribute('value', '');
+          this.hiddenInputNode.value = '';
+          this.hiddenInputNode.setAttribute('value', '');
+          this.selectedValue = '';
+          this.selectedId = '';
+          for (var i = 0; i < this.allOptions.length; i++) {
+            this.allOptions[i].node.setAttribute('aria-selected', 'false');
+          }
+          this.dispatchCustomEvent('combobox:clear', {});
+        }
+        break;
+
+      case aria.KeyCode.HOME:
+        if (this.isOpen) {
+          evt.preventDefault();
+          if (this.filteredOptions.length > 0) {
+            this.focusOption(this.filteredOptions[0].node);
+          }
+        }
+        break;
+
+      case aria.KeyCode.END:
+        if (this.isOpen) {
+          evt.preventDefault();
+          if (this.filteredOptions.length > 0) {
+            this.focusOption(this.filteredOptions[this.filteredOptions.length - 1].node);
+          }
+        }
+        break;
+
+      case aria.KeyCode.BACKSPACE:
+      case aria.KeyCode.DELETE:
+        this._isDeleting = true;
+        break;
+
+      case aria.KeyCode.TAB:
+        if (this.isOpen) {
+          if (!this.multiselectable && this.activeDescendant) {
+            var tabOpt = document.getElementById(this.activeDescendant);
+            if (tabOpt) {
+              this.selectOption(tabOpt);
+            }
+          }
+          this.close();
+        }
+        break;
+    }
+  };
+
+  aria.Combobox.prototype.handleInputClick = function () {
+    if (!this.isOpen) {
+      this.open();
+      this.filterOptions(this.inputNode.value);
+      var selectedOpt = this.listboxNode.querySelector('[aria-selected="true"]:not([hidden])');
+      if (selectedOpt) {
+        this.focusOption(selectedOpt);
+      }
+      else if (this.filteredOptions.length > 0) {
+        this.focusOption(this.filteredOptions[0].node);
+      }
+    }
+  };
+
+  aria.Combobox.prototype.handleBlur = function () {
+    var self = this;
+    setTimeout(function () {
+      if (self.comboboxNode.contains(document.activeElement)) {
+        return;
+      }
+
+      if (self.isOpen) {
+        self.close();
+      }
+
+      if (self.multiselectable) {
+        self.inputNode.value = '';
+        self.inputNode.setAttribute('value', '');
+        self.filterOptions('');
+        return;
+      }
+
+      var currentText = self.inputNode.value.trim();
+      if (currentText && currentText !== self.selectedValue) {
+        self.inputNode.value = '';
+        self.inputNode.setAttribute('value', '');
+        self.hiddenInputNode.value = '';
+        self.hiddenInputNode.setAttribute('value', '');
+        self.selectedValue = '';
+        self.selectedId = '';
+        for (var i = 0; i < self.allOptions.length; i++) {
+          self.allOptions[i].node.setAttribute('aria-selected', 'false');
+        }
+        self.dispatchCustomEvent('combobox:clear', {});
+      }
+    }, 0);
+  };
+
+  aria.Combobox.prototype.handleOptionClick = function (evt) {
+    var option = evt.target.closest('[role="option"]');
+    if (option) {
+      if (this.multiselectable) {
+        this.toggleOption(option);
+        this.inputNode.focus();
+      } else {
+        this.selectOption(option);
+        this.close();
+        this.inputNode.focus();
+      }
+    }
+  };
+
+  aria.Combobox.prototype.handleToggle = function () {
+    if (this.isOpen) {
+      this.close();
+    } else {
+      this.open();
+      this.filterOptions('');
+      var selectedOpt = this.listboxNode.querySelector('[aria-selected="true"]:not([hidden])');
+      if (selectedOpt) {
+        this.focusOption(selectedOpt);
+      } else if (this.filteredOptions.length > 0) {
+        this.focusOption(this.filteredOptions[0].node);
+      }
+    }
+    this.inputNode.focus();
+  };
+
+  aria.Combobox.prototype.selectOption = function (option) {
+    // Deselect previous
+    for (var i = 0; i < this.allOptions.length; i++) {
+      this.allOptions[i].node.setAttribute('aria-selected', 'false');
+    }
+
+    option.setAttribute('aria-selected', 'true');
+
+    var text = option.textContent.trim();
+    this.inputNode.value = text;
+    this.inputNode.setAttribute('value', text);
+    this.hiddenInputNode.value = text;
+    this.hiddenInputNode.setAttribute('value', text);
+    this.selectedValue = text;
+    this.selectedId = option.id;
+
+    this.filterOptions('');
+    this.clearActiveDescendant();
+
+    this.dispatchCustomEvent('combobox:select', {
+      value: text,
+      id: option.id
+    });
+  };
+
+  aria.Combobox.prototype.toggleOption = function (option) {
+    var isSelected = option.getAttribute('aria-selected') === 'true';
+    var text = option.textContent.trim();
+
+    if (isSelected) {
+      option.setAttribute('aria-selected', 'false');
+      this.selectedItems = this.selectedItems.filter(function (item) {
+        return item.id !== option.id;
+      });
+    } else {
+      option.setAttribute('aria-selected', 'true');
+      this.selectedItems.push({ id: option.id, text: text });
+    }
+
+    this.syncHiddenInputs();
+
+    // Clear the filter so the full list is visible again, keep the listbox open
+    this.inputNode.value = '';
+    this.inputNode.setAttribute('value', '');
+    this.filterOptions('');
+
+    // Keep the acted-upon option as the focused (active) one, like the listbox's
+    // focusItem: the option you toggle stays highlighted as the active descendant.
+    this.focusOption(option);
+
+    this.dispatchCustomEvent(isSelected ? 'combobox:deselect' : 'combobox:select', {
+      value: text,
+      id: option.id
+    });
+  };
+
+  aria.Combobox.prototype.syncHiddenInputs = function () {
+    for (var i = 0; i < this.hiddenInputs.length; i++) {
+      if (this.hiddenInputs[i].parentNode) {
+        this.hiddenInputs[i].parentNode.removeChild(this.hiddenInputs[i]);
+      }
+    }
+    this.hiddenInputs = [];
+
+    if (!this.fieldName) {
+      return;
+    }
+
+    for (var j = 0; j < this.selectedItems.length; j++) {
+      var input = document.createElement('input');
+      input.type = 'hidden';
+      input.name = this.fieldName;
+      input.value = this.selectedItems[j].text;
+      this.comboboxNode.appendChild(input);
+      this.hiddenInputs.push(input);
+    }
+  };
+
+  aria.Combobox.prototype.focusOption = function (option) {
+    this.clearActiveDescendant();
+
+    this.inputNode.setAttribute('aria-activedescendant', option.id);
+    this.activeDescendant = option.id;
+    aria.Utils.addClass(option, 'focused');
+
+    // Scroll into view
+    if (this.listboxNode.scrollHeight > this.listboxNode.clientHeight) {
+      var scrollBottom = this.listboxNode.clientHeight + this.listboxNode.scrollTop;
+      var elementBottom = option.offsetTop + option.offsetHeight;
+      if (elementBottom > scrollBottom) {
+        this.listboxNode.scrollTop = elementBottom - this.listboxNode.clientHeight;
+      } else if (option.offsetTop < this.listboxNode.scrollTop) {
+        this.listboxNode.scrollTop = option.offsetTop;
+      }
+    }
+  };
+
+  aria.Combobox.prototype.clearActiveDescendant = function () {
+    if (this.activeDescendant) {
+      var prev = document.getElementById(this.activeDescendant);
+      if (prev) {
+        aria.Utils.removeClass(prev, 'focused');
+      }
+    }
+    this.inputNode.removeAttribute('aria-activedescendant');
+    this.activeDescendant = null;
+  };
+
+  aria.Combobox.prototype.getNextVisibleOption = function (currentId, dir) {
+    if (this.filteredOptions.length === 0) {
+      return null;
+    }
+
+    if (!currentId) {
+      return dir > 0 ? this.filteredOptions[0].node : this.filteredOptions[this.filteredOptions.length - 1].node;
+    }
+
+    var currentIndex = -1;
+    for (var i = 0; i < this.filteredOptions.length; i++) {
+      if (this.filteredOptions[i].node.id === currentId) {
+        currentIndex = i;
+        break;
+      }
+    }
+
+    var nextIndex = currentIndex + dir;
+    if (nextIndex >= this.filteredOptions.length) {
+      nextIndex = 0;
+    } else if (nextIndex < 0) {
+      nextIndex = this.filteredOptions.length - 1;
+    }
+
+    return this.filteredOptions[nextIndex].node;
+  };
+
+  aria.Combobox.prototype.open = function () {
+    if (this.isOpen) {
+      return;
+    }
+    this.isOpen = true;
+    this.inputNode.setAttribute('aria-expanded', 'true');
+    if (this.toggleButtonNode) {
+      this.toggleButtonNode.setAttribute('aria-expanded', 'true');
+    }
+
+    if (this.floatingInstance) {
+      this.floatingInstance.show();
+    }
+
+    this.dispatchCustomEvent('combobox:open', {});
+  };
+
+  aria.Combobox.prototype.close = function () {
+    if (!this.isOpen) {
+      return;
+    }
+    this.isOpen = false;
+    this.clearActiveDescendant();
+    this.inputNode.setAttribute('aria-expanded', 'false');
+    if (this.toggleButtonNode) {
+      this.toggleButtonNode.setAttribute('aria-expanded', 'false');
+    }
+
+    if (this.floatingInstance) {
+      this.floatingInstance.hide();
+    }
+
+    this.dispatchCustomEvent('combobox:close', {});
+  };
+
+  aria.Combobox.prototype.dispatchCustomEvent = function (name, detail) {
+    this.comboboxNode.dispatchEvent(new CustomEvent(name, {
+      bubbles: true,
+      detail: detail
+    }));
+  };
+
+  // Global API
+  window.activateItemCombobox = function (comboboxId, optionId) {
+    var comboboxNode = document.getElementById(comboboxId);
+    if (!comboboxNode) {
+      console.log('There is no combobox with this id in the document.');
+      return null;
+    }
+
+    var option = document.getElementById(optionId);
+    if (!option) {
+      console.log('There is no option with this id in the combobox.');
+      return null;
+    }
+
+    var inputNode = comboboxNode.querySelector('[data-module="c-combobox-input"]');
+    if (inputNode && inputNode._comboboxInstance) {
+      var instance = inputNode._comboboxInstance;
+      if (!instance.listboxNode.contains(option)) {
+        console.log('The option does not belong to the target combobox.');
+        return null;
+      }
+      if (instance.multiselectable) {
+        instance.toggleOption(option);
+      } else {
+        instance.selectOption(option);
+      }
+      return [comboboxNode, option];
+    }
+
+    return null;
+  };
+
+  return aria;
+}