@rxap/config/compodoc/js/tree.js

Provides a configuration service for Angular applications, allowing you to load and manage application settings from various sources such as static files, URLs, local storage, and URL parameters. It supports schema validation and provides utilities for ac

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();
    });
});