adrigm
6/5/2016 - 11:03 AM

componentsMenu.js

"use strict";

module.exports = function (processor) {
    var ComponentsMenu = [
        {
            name: '<i class="fa fa-bold"></i> Bootstrap CSS',
            children : [
                {
                    name: '<i class="fa fa-font"></i> Typography',
                    link: 'typo.html'
                },
                {
                    name: '<i class="fa fa-font"></i> Typography',
                    link: 'typo2.html'
                },
                {
                    name: '<i class="fa fa-font"></i> Typography',
                    link: 'typo3.html'
                }
            ]
        },
        {
            name: '<i class="fa fa-hand-o-up"></i> Buttons',
            children : [
                {
                    name: '<i class="fa fa-arrow-circle-right"></i> Basic Buttons',
                    link: 'typo4.html'
                },
                {
                    name: '<i class="fa fa-arrow-circle-right"></i> Other Buttons',
                    link: 'typo5.html'
                },
                {
                    name: '<i class="fa fa-arrow-circle-right"></i> Social Buttons',
                    link: 'typo7.html'
                },
            ]
        },
        {
            name: '<i class="fa fa-arrow-circle-right"></i> Otro',
            link: 'typo6.html',
        },
    ]

    processor.registerBlockType('componentsMenu', function (content, block, blockLine, blockContent) {
        var menu = '';
        var num = 1;

        for (var item in ComponentsMenu) {
            if (ComponentsMenu[item].hasOwnProperty('children')) {
                menu += generateMenu(ComponentsMenu[item].name, ComponentsMenu[item].children, block.asset ,num++);
            }
            else if (ComponentsMenu[item].hasOwnProperty('link')) {
                var active = false;
                if (block.asset === ComponentsMenu[item].link)
                    active = true;
                menu += generateLink(ComponentsMenu[item].name, ComponentsMenu[item].link, active);
            }
        }

        var result = content.replace(blockLine, menu);
        return result;
      });

    function generateLink(name, link, active) {
        var result = '<li><a class="withripple';
        result += active ? ' active' : '';
        result += '" href="' + link + '">';
        result += name + '</a></li>';
        return result;
    };

    function generateMenu(name, children, active_link, num) {
        var submbenu = ''
        var active = false;
        for (var child in children) {
            if (active_link === children[child]['link']) {
                active = true;
                submbenu += generateLink(children[child]['name'], children[child]['link'], active)
                continue;
            }
            submbenu += generateLink(children[child]['name'], children[child]['link'], false);
        }

        var r = '<li class="panel" role="tab" id="e' + num +'">';
        r += '<a role="button" data-toggle="collapse" data-parent="#components-nav" href="#c' + num + '" aria-expanded="true" aria-controls="c' + num + '" class="';
        r += active ? '' : 'collapsed ';
        r += 'withripple">';
        r += name + '</a>';
        r += '<ul id="c' + num + '" class="panel-collapse collapse';
        r += active ? ' in' : '';
        r += '" role="tabpanel" aria-labelledby="e' + num + '">';
        r += submbenu;
        r+= '</ul></li>'
        return r;
    }
};