desy-html 13.0.1 → 14.0.0

package/src/js/aria/tree.js

@@ -20,57 +20,290 @@ export function Tree(aria) {
 *       An element with the role=tree attribute
   */
   aria.Tree = function (node) {
-  // Check whether node is a DOM element
-  if (typeof node !== 'object') {
-    return;
-  }
+    // Check whether node is a DOM element
+    if (typeof node !== 'object') {
+      return;
+    }
 
-  this.domNode = node;
+    this.domNode = node;
 
-  this.treeitems = [];
-  this.firstChars = [];
+    this.treeitems = [];
+    this.firstChars = [];
 
-  this.firstTreeitem = null;
-  this.lastTreeitem = null;
+    this.firstTreeitem = null;
+    this.lastTreeitem = null;
 
-};
+    this.lazyRendering = false;
+    this.treeData = null;
+    this.params = null;
+  };
 
   aria.Tree.prototype.init = function () {
 
-    function findTreeitems (node, tree, group) {
+    // Only if lazyRendering
+    const treeDataRaw = this.domNode.getAttribute('data-tree');
+    if (treeDataRaw) {
+      this.treeData = JSON.parse(treeDataRaw);
+      this.lazyRendering = true;
+      const paramsRaw = this.domNode.getAttribute('data-params');
+      if (paramsRaw) {
+        this.params = JSON.parse(paramsRaw);
+        this.describedBy = this.params.describedBy ?? "";
+        if (this.params.fieldset.describedBy)
+          this.describedBy = this.params.fieldset.describedBy;
+        this.hasFieldset = this.params.fieldset ?? false;
+      }
+    }
+
+    // initialize pop up menus
+    if (!this.domNode.getAttribute('role')) {
+      this.domNode.setAttribute('role', 'tree');
+    }
+
+    this.findTreeitems(this.domNode, this, false);
+
+    this.updateVisibleTreeitems();
+
+    this.firstTreeitem.domNode.tabIndex = 0;
+
+  };
 
-      var elem = node.firstElementChild;
-      var ti = group;
 
-      while (elem) {
+  aria.Tree.prototype.findTreeitems = function (node, tree, group) {
+    var elem = node.firstElementChild;
+    var ti = group;
 
-        if (elem.tagName.toLowerCase() === 'li') {
+    while (elem) {
+      if (elem.tagName.toLowerCase() === 'li') {
+        if (elem.dataset.treeProcessed !== 'true' || !this.lazyRendering) {
           ti = new aria.Treeitem(elem, tree, group);
           ti.init();
           tree.treeitems.push(ti);
           tree.firstChars.push(ti.label.substring(0, 1).toLowerCase());
+          if (this.lazyRendering) {
+            elem.dataset.treeProcessed = 'true';
+            elem.addEventListener('click', (event) => event.stopPropagation());
+          }
         }
+      }
 
-        if (elem.firstElementChild) {
-          findTreeitems(elem, tree, ti);
-        }
+      if (elem.firstElementChild) {
+        this.findTreeitems(elem, tree, ti);
+      }
+
+      elem = elem.nextElementSibling;
+    }
+  };
 
-        elem = elem.nextElementSibling;
+  function checkboxItem(item, id, name, type, params, describedBy, hasFieldset) {
+    name = name || item.name || '';
+    var hasHint = item.hint && (item.hint.text || item.hint.html);
+    var itemHintId = hasHint ? id + '-item-hint' : '';
+    var itemDescribed = (!hasFieldset ? describedBy : '') + (itemHintId ? ' ' + itemHintId : '');
+    itemDescribed = itemDescribed.trim();
+
+    // Wrapper
+    var html = '<div' +
+      ((params.hasDividers ? ' class="border-t border-b border-neutral-base -mb-px' : '') +
+        (item.classes ? ' ' + item.classes : '') + '"').replace('""', '') +
+      '>' +
+      '<div class="relative flex items-start py-xs">';
+
+    // Checkbox / Radio branch
+    if (type === 'checkbox' || type === 'radio' || typeof type === 'undefined') {
+      html += '<div class="flex items-center mx-sm">' +
+        '<input ' +
+        'class="w-6 h-6 transition duration-150 ease-in-out border-black ' +
+        'focus:border-black focus:shadow-outline-focus-input ' +
+        'focus:ring-4 focus:ring-offset-0 focus:ring-warning-base ' +
+        'disabled:bg-neutral-base disabled:border-neutral-base text-primary-base' +
+        ((item.isIndeterminate && item.indeterminateChecked)
+          ? ' c-checkboxes__indeterminate-active'
+          : '') + '"' +
+        ' id="' + id + '-input"' +
+        ' name="' + name + '"' +
+        (type === 'checkbox' ? ' type="checkbox" role="checkbox"' : ' type="radio"') +
+        ' value="' + (item.value || '') + '"' +
+        (item.checked ? ' checked' : '') +
+        (item.disabled ? ' disabled' : '') +
+        (itemDescribed ? ' aria-describedby="' + itemDescribed + '"' : '') +
+        (params.errorMessage ? ' aria-invalid="true"' : '');
+
+      if (item.isIndeterminate || item.indeterminateChecked) {
+        html += ' onclick="' +
+          "if (this.readOnly) this.checked=this.readOnly=false; " +
+          "else if (!this.checked) this.readOnly=this.indeterminate=true;" +
+          '"';
       }
+      html += '>' +
+        '</div>' +            // cierre flex items-center
+        '<div class="flex-1 pt-0.5 leading-5">';
+
+      // Label
+      var lblCls = (item.label && item.label.classes)
+        ? item.label.classes
+        : 'block relative -top-xs -left-8 pl-8 py-xs';
+      html += '<label for="' + id + '-input" class="' + lblCls + '">';
+      html += item.html ? item.html : (item.text || '');
+      html += '</label>';
+
+      // Hint
+      if (hasHint) {
+        html += '<div id="' + itemHintId + '"' +
+          (item.hint.classes ? ' class="' + item.hint.classes + '"' : '') +
+          '>';
+        html += item.hint.html || item.hint.text;
+        html += '</div>';
+      }
+      html += '</div>';  // cierre flex-1
     }
 
-    // initialize pop up menus
-    if (!this.domNode.getAttribute('role')) {
-      this.domNode.setAttribute('role', 'tree');
+    // Navigation branch
+    if (type === 'navigation') {
+      if (item.href) {
+        html += '<a' +
+          (id ? ' id="' + id + '-link"' : '') +
+          ' href="' + item.href + '"' +
+          ' class="block px-xs focus:bg-warning-base focus:outline-none ' +
+          'focus:shadow-outline-focus focus:text-black' +
+          (item.classes ? ' ' + item.classes : '') +
+          (!item.disabled ? ' hover:text-primary-base hover:underline'
+            : ' no-underline pointer-events-none') + '"' +
+          (item.title ? ' title="' + item.title + '"' : '') +
+          (item.active ? ' aria-current="page"' : '') +
+          (item.disabled ? ' aria-disabled="true" tabindex="-1"' : '') +
+          (item.target ? ' target="' + item.target + '"' : '') +
+          '>';
+        html += item.active
+          ? '<strong class="font-bold">' +
+          (item.html || item.text) +
+          '</strong>'
+          : (item.html || item.text);
+        html += '</a>';
+      } else {
+        html += '<span' +
+          (id ? ' id="' + id + '-link"' : '') +
+          ' class="block px-xs' +
+          (item.classes ? ' ' + item.classes : '') + '"' +
+          (item.title ? ' title="' + item.title + '"' : '') +
+          '>';
+        html += item.active
+          ? '<strong class="font-bold">' +
+          (item.html || item.text) +
+          '</strong>'
+          : (item.html || item.text);
+        html += '</span>';
+      }
     }
 
-    findTreeitems(this.domNode, this, false);
+    html += '</div></div>';
+    return html;
+  }
 
-    this.updateVisibleTreeitems();
+  aria.Tree.prototype.childrenTree = function (itemNode, id, name, type, lazyRendering, onlySub, params, describedBy, hasFieldset) {
+    var html = '';
+
+    if (!onlySub) {
+      if (itemNode.sub) {
+        html += '<div class="w-full h-full">' +
+          '<div class="flex items-center relative ' +
+          'focus:bg-warning-base focus:outline-none ' +
+          'focus:shadow-outline-focus focus:text-black text-left' +
+          (itemNode.classes ? ' ' + itemNode.classes : '') + '"';
+        for (var a in itemNode.attributes || {}) {
+          html += ' ' + a + '="' + itemNode.attributes[a] + '"';
+        }
+        html += '>' +
+          '<span class="c-tree__icon absolute top-3 -left-4 flex items-center ' +
+          'w-4 h-2.5 text-primary-base font-bold ' +
+          "after:content-[''] after:absolute after:-left-2 after:p-4\">" +
+          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" ' +
+          'width="10" height="10" aria-hidden="true" ' +
+          'class="c-tree__minus">' +
+          '<path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/>' +
+          '</svg>' +
+          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" ' +
+          'width="10" height="10" aria-hidden="true" ' +
+          'class="c-tree__plus">' +
+          '<path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/>' +
+          '</svg>' +
+          '</span>' +
+          checkboxItem(itemNode, id, name, type, params, describedBy, hasFieldset) +
+          '</div>' +
+          '</div>';
+      } else {
+        html += checkboxItem(itemNode, id, name, type, params, describedBy, hasFieldset);
+      }
+    }
 
-    this.firstTreeitem.domNode.tabIndex = 0;
+    if (itemNode.sub && itemNode.sub.items) {
+      html += '<ul role="group" class="c-tree__itemgroup' +
+        (itemNode.sub.classes ? ' ' + itemNode.sub.classes : '') + '"';
+      for (var b in itemNode.sub.attributes || {}) {
+        html += ' ' + b + '="' + itemNode.sub.attributes[b] + '"';
+      }
+      html += '>';
+
+      if (!lazyRendering || onlySub) {
+        var subLevel = 'sub-';
+        itemNode.sub.items.forEach((subitem, idx) => {
+          if (!subitem) return;
+          var subId = subitem.id
+            ? subitem.id
+            : subLevel + id + '-' + idx;
+          var clsBase = (type === 'navigation')
+            ? 'c-tree__item ml-5 my-sm origin-top-left focus:outline-none'
+            : 'c-tree__item ml-8 origin-top-left focus:outline-none';
+          var expanded = subitem.sub
+            ? ' aria-expanded="' + (subitem.expanded ? 'true' : 'false') + '"'
+            : '';
+
+          html += '<li class="' + clsBase + '" ' +
+            'id="' + subId + '" ' +
+            'role="treeitem" ' +
+            'data-module="c-tree__item"' +
+            expanded +
+            '>';
+
+          if (subitem.sub) {
+            html += this.childrenTree(
+              subitem,
+              subId,
+              name,
+              type,
+              lazyRendering,
+              false,
+              params,
+              describedBy,
+              hasFieldset
+            );
+          } else {
+            html += '<div class="block' +
+              (subitem.classes ? ' ' + subitem.classes : '') +
+              (subitem.active ? ' font-bold' : '') +
+              '"' +
+              (subitem.title ? ' title="' + subitem.title + '"' : '') +
+              (subitem.active ? ' aria-current="page"' : '') +
+              '>';
+            if (subitem.active) {
+              html += '<div class="font-bold">' +
+                checkboxItem(subitem, subId, name, type, params, describedBy, hasFieldset) +
+                '</div>';
+            } else {
+              html += checkboxItem(subitem, subId, name, type, params, describedBy, hasFieldset);
+            }
+            html += '</div>';
+          }
+
+          html += '</li>';
+        });
+      }
 
-  };
+      html += '</ul>';
+    }
+
+    return html;
+  }
 
   aria.Tree.prototype.setFocusToItem = function (treeitem) {
 
@@ -80,8 +313,12 @@ export function Tree(aria) {
       if (ti === treeitem) {
         ti.domNode.tabIndex = 0;
         ti.domNode.focus();
-      }
-      else {
+
+        var input = ti.domNode.querySelector('input');
+        if (input) {
+          ti.domNode.setAttribute('aria-checked', input.checked ? 'true' : 'false');
+        }
+      } else {
         ti.domNode.tabIndex = -1;
       }
     }
@@ -145,7 +382,58 @@ export function Tree(aria) {
   aria.Tree.prototype.expandTreeitem = function (currentItem) {
 
     if (currentItem.isExpandable) {
-      currentItem.domNode.setAttribute('aria-expanded', true);
+      var node = currentItem.domNode;
+      node.setAttribute('aria-expanded', 'true');
+
+      if (this.lazyRendering && !node.dataset.childrenInjected) {
+
+        function findNodeById(data, targetId, parentId = '') {
+          for (let i = 0; i < data.length; i++) {
+            const item = data[i];
+
+            const currentId = item.id || (parentId ? 'sub-' + parentId + '-' + i : i);
+
+            if (currentId === targetId) {
+              return item;
+            }
+
+            if (item.sub?.items?.length) {
+              const result = findNodeById(item.sub.items, targetId, currentId);
+              if (result) return result;
+            }
+          }
+
+          return null;
+        }
+
+        var itemNode = findNodeById(this.treeData || [], node.id);
+
+        if (itemNode && itemNode.sub && itemNode.sub.items && itemNode.sub.items.length) {
+          var group = node.querySelector('ul[role="group"]');
+
+          var html = this.childrenTree(
+            itemNode,
+            node.id,
+            this.params.name,
+            this.params.type,
+            this.lazyRendering,
+            true,
+            this.params,
+            this.describedBy,
+            this.hasFieldset
+          );
+          var listItems = html
+            .replace(/^<ul[^>]*>/, '')
+            .replace(/<\/ul>$/, '');
+          group.insertAdjacentHTML('beforeend', listItems);
+          node.dataset.childrenInjected = 'true';
+        }
+        this.findTreeitems(this.domNode, this, currentItem);
+        // To sort because when add children dinnamically, the order is not guaranteed as should be.
+        this.treeitems.sort((a, b) => a.domNode.compareDocumentPosition(b.domNode) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
+        this.firstChars = this.treeitems.map(ti => ti.label.substring(0, 1).toLowerCase());
+      }
+
       this.updateVisibleTreeitems();
     }
 
@@ -171,9 +459,10 @@ export function Tree(aria) {
     } else {
       groupTreeitem = currentItem.groupTreeitem;
     }
-
     if (groupTreeitem) {
-      groupTreeitem.domNode.setAttribute('aria-expanded', false);
+      var node = groupTreeitem.domNode;
+      node.setAttribute('aria-expanded', false);
+
       this.updateVisibleTreeitems();
       this.setFocusToItem(groupTreeitem);
     }