@rxap/layout 18.0.2 → 18.0.3-dev.0

package/compodoc/js/sourceCode.js

@@ -0,0 +1,58 @@
+document.addEventListener('DOMContentLoaded', function() {
+    var $tabSource = document.querySelector('#source-tab'),
+        $tabInfo = document.querySelector('#info-tab'),
+        $tabReadme = document.querySelector('#readme-tab'),
+        $tabTemplate = document.querySelector('#templateData-tab'),
+        $tabTree = document.querySelector('#tree-tab'),
+        $tabExample = document.querySelector('#example-tab'),
+        $prismPre = document.querySelector('pre.compodoc-sourcecode');
+    if ($tabSource && $prismPre) {
+        $prismCode = $prismPre.querySelector('code'),
+        $content = document.querySelector('.content'),
+        prismLinks = document.querySelectorAll('.link-to-prism')
+
+        for (var i = 0; i < prismLinks.length; i++) {
+            prismLinks[i].addEventListener('click', linkToPrism, false);
+        }
+
+        function linkToPrism(event) {
+            var targetLine = event.target.getAttribute('data-line');
+            event.preventDefault();
+
+            $prismPre.setAttribute('data-line', targetLine);
+            Prism.highlightElement($prismCode, function() {});
+
+            $tabSource.click();
+
+            setTimeout(function() {
+                var $prismHighlightLine = document.querySelector('.line-highlight'),
+                    top = parseInt(getComputedStyle($prismHighlightLine)['top']);
+                $content.scrollTop = top;
+            }, 500);
+        };
+
+        window.onhashchange = function(event) {
+            switch (window.location.hash) {
+                case '':
+                case '#info':
+                    $tabInfo.click();
+                    break;
+                case '#readme':
+                    $tabReadme.click();
+                    break;
+                case '#source':
+                    $tabSource.click();
+                    break;
+                case '#template':
+                    $tabTemplate.click();
+                    break;
+                case '#dom-tree':
+                    $tabTree.click();
+                    break;
+                case '#example':
+                    $tabExample.click();
+                    break;
+            }
+        }
+    }
+});

package/compodoc/js/svg-pan-zoom.controls.js

@@ -0,0 +1,53 @@
+document.addEventListener('DOMContentLoaded', function() {
+    if (document.getElementById('module-graph-svg')) {
+        panZoom = svgPanZoom(document.getElementById('module-graph-svg').querySelector('svg'), {
+            zoomEnabled: true,
+            minZoom: 1,
+            maxZoom: 5
+        });
+    
+        document.getElementById('zoom-in').addEventListener('click', function(ev) {
+            ev.preventDefault();
+            panZoom.zoomIn();
+        });
+    
+        document.getElementById('zoom-out').addEventListener('click', function(ev) {
+            ev.preventDefault();
+            panZoom.zoomOut();
+        });
+    
+        document.getElementById('reset').addEventListener('click', function(ev) {
+            ev.preventDefault();
+            panZoom.resetZoom();
+            panZoom.resetPan();
+        });
+    
+        var overviewFullscreen = false,
+            originalOverviewHeight;
+    
+        document.getElementById('fullscreen').addEventListener('click', function(ev) {
+            if (overviewFullscreen) {
+                document.getElementById('module-graph-svg').style.height = originalOverviewHeight;
+                overviewFullscreen = false;
+                if (ev.target) {
+                    ev.target.classList.remove('ion-md-close');
+                    ev.target.classList.add('ion-ios-resize');
+                }
+            } else {
+                originalOverviewHeight = document.getElementById('module-graph-svg').style.height;
+                document.getElementById('module-graph-svg').style.height = '85vh';
+                overviewFullscreen = true;
+                if (ev.target) {
+                    ev.target.classList.remove('ion-ios-resize');
+                    ev.target.classList.add('ion-md-close');
+                }
+            }
+            document.getElementById('module-graph-svg').querySelector('svg').style.height = document.getElementById('module-graph-svg').clientHeight;
+            setTimeout(function() {
+                panZoom.resize();
+                panZoom.fit();
+                panZoom.center();
+            }, 0)
+        });
+    }
+});

package/compodoc/js/tabs.js

@@ -0,0 +1,21 @@
+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);
+            }
+        };
+    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();
+                }
+            }
+        }
+    }
+});

package/compodoc/js/tree.js

@@ -0,0 +1,147 @@
+document.addEventListener('DOMContentLoaded', function() {
+    var tabs = document.getElementsByClassName('nav-tabs')[0],
+        tabsCollection = tabs.getElementsByTagName('A'),
+        treeTab;
+    var len = tabsCollection.length;
+    for(var i = 0; i < len; i++) {
+        if (tabsCollection[i].getAttribute('id') === 'tree-tab') {
+            treeTab = tabsCollection[i];
+        }
+    }
+
+    // short-circuit if no tree tab
+    if (!treeTab) return;
+
+    var handler = new Tautologistics.NodeHtmlParser.HtmlBuilder(function(error, dom) {
+        if (error) {
+            console.log('handler ko');
+        }
+    }),
+        parser = new Tautologistics.NodeHtmlParser.Parser(handler),
+        currentLocation = window.location;
+    parser.parseComplete(COMPONENT_TEMPLATE);
+
+    var newNodes = [],
+        newEdges = [],
+        parsedHtml = handler.dom[0],
+        nodeCount = 0,
+        nodeLevel = 0;
+
+    newNodes.push({
+        _id: 0,
+        label: parsedHtml.name,
+        type: parsedHtml.type
+    })
+    //Add id for nodes
+    var traverseIds = function(o) {
+        for (i in o) {
+            if (!!o[i] && typeof(o[i]) == "object") {
+                if (!o[i].length && o[i].type === 'tag') {
+                    nodeCount += 1;
+                    o[i]._id = nodeCount;
+                }
+                traverseIds(o[i]);
+            }
+        }
+    }
+    parsedHtml._id = 0;
+    traverseIds(parsedHtml);
+
+
+    var DeepIterator = deepIterator.default,
+        it = DeepIterator(parsedHtml);
+    for (let {
+            value,
+            parent,
+            parentNode,
+            key,
+            type
+        } of it) {
+        if (type === 'NonIterableObject' && typeof key !== 'undefined' && value.type === 'tag') {
+            var newNode = {
+                id: value._id,
+                label: value.name,
+                type: value.type
+            };
+            for(var i = 0; i < COMPONENTS.length; i++) {
+                if (COMPONENTS[i].selector === value.name) {
+                    newNode.font = {
+                        multi: 'html'
+                    };
+                    newNode.label = '<b>' + newNode.label + '</b>';
+                    newNode.color = '#FB7E81';
+                    newNode.name = COMPONENTS[i].name;
+                }
+            }
+            for(var i = 0; i < DIRECTIVES.length; i++) {
+                if (value.attributes) {
+                    for(attr in value.attributes) {
+                        if (DIRECTIVES[i].selector.indexOf(attr) !== -1) {
+                            newNode.font = {
+                                multi: 'html'
+                            };
+                            newNode.label = '<b>' + newNode.label + '</b>';
+                            newNode.color = '#FF9800';
+                            newNode.name = DIRECTIVES[i].name;
+                        }
+                    }
+                }
+            }
+            newNodes.push(newNode);
+            newEdges.push({
+                from: parentNode._parent._id,
+                to: value._id,
+                arrows: 'to'
+            });
+        }
+    }
+
+    newNodes.shift();
+
+    var container = document.getElementById('tree-container'),
+        data = {
+            nodes: newNodes,
+            edges: newEdges
+        },
+        options = {
+            layout: {
+                hierarchical: {
+                    sortMethod: 'directed',
+                    enabled: true
+                }
+            },
+            nodes: {
+                shape: 'ellipse',
+                fixed: true
+            }
+        },
+
+        handleClickNode = function(params) {
+            var clickeNodeId;
+            if (params.nodes.length > 0) {
+                clickeNodeId = params.nodes[0];
+                for(var i = 0; i < newNodes.length; i++) {
+                    if (newNodes[i].id === clickeNodeId) {
+                        for(var j = 0; j < COMPONENTS.length; j++) {
+                            if (COMPONENTS[j].name === newNodes[i].name) {
+                                document.location.href = currentLocation.origin + currentLocation.pathname.replace(ACTUAL_COMPONENT.name, newNodes[i].name);
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        
+        loadTree = function () {
+            setTimeout(function() {
+                container.style.height = document.getElementsByClassName('content')[0].offsetHeight - 140 + 'px';
+                var network = new vis.Network(container, data, options);
+                network.on('click', handleClickNode);
+            }, 200); // Fade is 0.150
+        };
+
+    loadTree();
+    treeTab.addEventListener('click', function() {
+        loadTree();
+    });
+});