desy-html 11.1.2 → 11.2.0

package/src/templates/components/tree/_examples.tree.njk

@@ -528,6 +528,119 @@
       ]
     }
   },
+  {
+    "name": "Tree Nav: Mostrar activo un item del tree con JavaScript",
+    "description": 'Puedes usar con javascript la función global <code>activateItemsTree(tree, element,  true)</code>, para mostrar un item activo del tree nav. Ej: Abre la consola del navegador y escribe <code>activateItemsTree("tree-nav-js", "sub-sub-tree-nav-js-item-1-2-1", true)</code> para mostrar un item del menú activo.',
+    "data": {
+      "name": "tree-navigation-js",
+      "classes": "mt-base",
+      "id": "tree-nav-js",
+      "type": "navigation",
+      "idPrefix": "tree-nav-js-example",
+      "items": [
+        {
+          "text": "Item 1",
+          "id": "tree-nav-js-item-1",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1",
+                "href": "index.html"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2",
+                "href": "#"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3",
+                "href": "#",
+                 "sub": {
+                    "items": [
+                      {
+                        "text": "Subitem 1",
+                        "value": "subitem-1",
+                        "href": "#"
+                      },
+                      {
+                        "text": "Subitem 2",
+                        "value": "subitem-2",
+                        "href": "#"
+                      },
+                      {
+                        "text": "Subitem 3",
+                        "value": "subitem-3",
+                        "href": "#"
+                      }
+                    ],
+                    "attributes": {
+                      "aria-labelledby": "tree-nav-js-item-3"
+                    }
+                  }
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "tree-nav-js-item-1"
+            }
+          }
+        },
+        {
+          "text": "Item 2",
+          "id": "tree-nav-js-item-2",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1",
+                "href": "#"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2",
+                "href": "#"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3",
+                "href": "#"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "tree-nav-js-item-2"
+            }
+          }
+        },
+        {
+          "text": "Item 3",
+          "id": "tree-nav-js-item-3",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1",
+                "href": "#"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2",
+                "href": "#"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3",
+                "href": "#"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "tree-nav-js-item-3"
+            }
+          }
+        }
+      ]
+    }
+  },
   {
     "name": "con pista y error",
     "data": {

package/src/templates/components/tree/_template.tree.njk

@@ -169,7 +169,7 @@
   {% if params.searchbar %}
     {{ componentSearchbar(params.searchbar)  }}
   {% endif %}
-  <ul class="c-tree {%- if params.classes %} {{ params.classes }}{% endif %}" id="{% if params.id %}{{ params.id }}{% else %}{{ idPrefix }}{% endif %}" role="tree" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="c-tree">
+  <ul class="c-tree {%- if params.classes %} {{ params.classes }}{% endif %}" id="{% if params.id %}{{ params.id }}{% else %}{{ idPrefix }}{% endif %}" role="tree" {%- if params.type=='navigation' %} data-tree-navigation{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="c-tree">
     {% for item in params.items %}
       {% if item %}
         {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
@@ -184,7 +184,7 @@
         {% set itemHintId = id + "-item-hint" if hasHint else "" %}
         {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
         {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
-    <li id="{{ id }}" class="{%- if t %}{% endif %}c-tree__item ml-4 {%- if params.type=='navigation' %} my-sm {% endif %} focus:outline-none {%- if item.active %} font-bold{% endif %}" role="treeitem" data-module="c-tree__item" {%- if item.sub%}{% if item.expanded %} aria-expanded="true"{% else %} aria-expanded="false"{% endif %}{% endif %}>
+    <li id="{{ id }}" class="c-tree__item ml-4 {%- if params.type=='navigation' %} my-sm {% endif %} focus:outline-none {%- if item.active %} font-bold{% endif %}" role="treeitem" data-module="c-tree__item" {%- if item.sub%}{% if item.expanded %} aria-expanded="true"{% else %} aria-expanded="false"{% endif %}{% endif %}>
       {{ childrenTree(item, id, name, params.type) | trim }}
     </li>
       {% endif %}