@eui/base 23.0.0-alpha.1 → 23.0.0-alpha.3

package/docs/js/tabs.js

@@ -1,21 +1,104 @@
 document.addEventListener('DOMContentLoaded', function() {
-    var tabs = document.getElementsByClassName('nav-tabs'),
-        updateAddress = function(e) {
-            if(history.pushState && e.target.dataset.link) {
-                history.pushState(null, null, '#' + e.target.dataset.link);
+    var tabContainers = document.getElementsByClassName('nav-tabs');
+    var tabLinks = [];
+    var tabAliasMap = {
+        'template': 'templateData',
+        'dom-tree': 'tree'
+    };
+
+    function updateAddress(e) {
+        if (history.pushState && e.target.dataset.link) {
+            history.pushState(null, null, '#' + e.target.dataset.link);
+        }
+    }
+
+    function findTabLinkByDataLink(dataLink) {
+        for (var i = 0; i < tabLinks.length; i++) {
+            if (tabLinks[i].dataset.link === dataLink) {
+                return tabLinks[i];
+            }
+        }
+        return null;
+    }
+
+    function getClosestTabPane(element) {
+        if (!element) {
+            return null;
+        }
+        if (element.closest) {
+            return element.closest('.tab-pane');
+        }
+        var node = element;
+        while (node) {
+            if (node.classList && node.classList.contains('tab-pane')) {
+                return node;
             }
-        };
-    if (tabs.length > 0) {
-        tabs = tabs[0].querySelectorAll('li');
-        for (var i = 0; i < tabs.length; i++) {
-            tabs[i].addEventListener('click', updateAddress);
-            var linkTag = tabs[i].querySelector('a');
-            if (location.hash !== '') {
-                var currentHash = location.hash.substr(1);
-                if (currentHash === linkTag.dataset.link) {
-                    linkTag.click();
-                }
+            node = node.parentElement;
+        }
+        return null;
+    }
+
+    function findAnchorTarget(hashValue) {
+        if (!hashValue) {
+            return null;
+        }
+
+        var targetById = document.getElementById(hashValue);
+        if (targetById) {
+            return targetById;
+        }
+
+        var targetsByName = document.getElementsByName(hashValue);
+        if (targetsByName && targetsByName.length > 0) {
+            return targetsByName[0];
+        }
+
+        return null;
+    }
+
+    function activateTabFromHash() {
+        if (location.hash === '') {
+            return;
+        }
+
+        var currentHash = decodeURIComponent(location.hash.substr(1));
+        if (!currentHash) {
+            return;
+        }
+
+        var resolvedHash = tabAliasMap[currentHash] || currentHash;
+        var directMatch = findTabLinkByDataLink(resolvedHash);
+        if (directMatch) {
+            directMatch.click();
+            return;
+        }
+
+        if (currentHash.indexOf('source.') === 0) {
+            var sourceTabLink = findTabLinkByDataLink('source');
+            if (sourceTabLink) {
+                sourceTabLink.click();
+                return;
             }
         }
+
+        var targetAnchor = findAnchorTarget(currentHash);
+        var tabPane = getClosestTabPane(targetAnchor);
+        if (!tabPane || !tabPane.id) {
+            return;
+        }
+
+        var tabLink = findTabLinkByDataLink(tabPane.id);
+        if (tabLink) {
+            tabLink.click();
+        }
+    }
+
+    if (tabContainers.length > 0) {
+        tabLinks = tabContainers[0].querySelectorAll('a[data-link]');
+        for (var i = 0; i < tabLinks.length; i++) {
+            tabLinks[i].addEventListener('click', updateAddress);
+        }
+        activateTabFromHash();
+        window.addEventListener('hashchange', activateTabFromHash, false);
     }
 });

package/docs/js/tree.js

@@ -58,10 +58,18 @@ document.addEventListener('DOMContentLoaded', function() {
             type
         } of it) {
         if (type === 'NonIterableObject' && typeof key !== 'undefined' && value.type === 'tag') {
+            var parentId = parentNode && parentNode._parent ? parentNode._parent._id : null,
+                parentLevel = parentNode && parentNode._parent && typeof parentNode._parent._level === 'number'
+                    ? parentNode._parent._level
+                    : 0,
+                nodeLevel = parentLevel + 1;
+            value._level = nodeLevel;
+
             var newNode = {
                 id: value._id,
                 label: value.name,
-                type: value.type
+                type: value.type,
+                level: nodeLevel
             };
             for(var i = 0; i < COMPONENTS.length; i++) {
                 if (COMPONENTS[i].selector === value.name) {
@@ -88,17 +96,29 @@ document.addEventListener('DOMContentLoaded', function() {
                 }
             }
             newNodes.push(newNode);
-            newEdges.push({
-                from: parentNode._parent._id,
-                to: value._id,
-                arrows: 'to'
-            });
+            if (parentId !== null && typeof parentId !== 'undefined') {
+                newEdges.push({
+                    from: parentId,
+                    to: value._id
+                });
+            }
         }
     }
 
     newNodes.shift();
 
+    var stripHtml = function(value) {
+            return String(value || '').replace(/<[^>]*>/g, '');
+        },
+        longestLabelLength = newNodes.reduce(function(max, node) {
+            var labelLength = stripHtml(node.label).length;
+            return Math.max(max, labelLength);
+        }, 0),
+        uniformNodeWidth = Math.max(40, Math.ceil(longestLabelLength * 8 + 28));
+
     var container = document.getElementById('tree-container'),
+        isDarkMode = document.body && document.body.classList.contains('dark'),
+        treeFontColor = isDarkMode ? '#f0f0f0' : '#2d2d2d',
         data = {
             nodes: newNodes,
             edges: newEdges
@@ -107,12 +127,29 @@ document.addEventListener('DOMContentLoaded', function() {
             layout: {
                 hierarchical: {
                     sortMethod: 'directed',
+                    shakeTowards: 'roots',
+                    levelSeparation: 130,
                     enabled: true
                 }
             },
+            edges: {
+                smooth: {
+                    enabled: true,
+                    type: 'cubicBezier',
+                    forceDirection: 'vertical',
+                    roundness: 0.45
+                }
+            },
             nodes: {
                 shape: 'ellipse',
-                fixed: true
+                fixed: true,
+                font: {
+                    color: treeFontColor
+                },
+                widthConstraint: {
+                    minimum: uniformNodeWidth,
+                    maximum: uniformNodeWidth
+                }
             }
         },