savvy-js/theme/js/view.js

Savvy - Style sheet documentation tool

(function () {
    'use strict';

    var viewElement,
        welcomeElement;

    function initializeRenderer() {
        viewElement = $('#savvy-view');
        welcomeElement = $('#savvy-welcome');
    }

    function escapeHtml(html) {
        var div = document.createElement('div'),
            result;

        div.appendChild(document.createTextNode(html));
        result = div.innerHTML;

        return result;
    }

    function setResultPanel(panel) {
        viewElement.html(panel);
        viewElement.show();
        welcomeElement.hide();
    }

    function renderDescription(description) {
        var result = '',
            codeBlock = '',
            openParagraph;

        function closeParagraph(index) {
            if (description[index].type === 'text') {
                result += '</p>';
            }
            if (description[index].type === 'code') {
                result += '</pre></div>';
                result += '<div class="row"><div class="savvy-example savvy-live-example col-md-6">' + codeBlock + '</div></div>';
                codeBlock = '';
            }
        }

        if (description && description.length) {

            description.forEach(function (row, index) {
                if (row.type === 'paragraph') {
                    if (openParagraph) {
                        closeParagraph(index - 1);
                    }
                    openParagraph = false;
                }
                if (row.type === 'text') {
                    if (!openParagraph) {
                        result += '<p>';
                        openParagraph = true;
                    }
                    result += '<span>' + row.text + '</span>';
                }

                if (row.type === 'code') {
                    if(index > 0 && description[index - 1].type !== 'code'){
                        openParagraph = false;
                    }
                    if (!openParagraph) {
                        result += '<div class="savvy-example row"><pre class="col-md-6">';
                        openParagraph = true;
                    }
                    result += escapeHtml(row.text);
                    codeBlock += row.text;
                }

            });
        }

        if (openParagraph) {
            var lastRow,
                index = description.length;
            while (!lastRow && index) {
                index--;
                if (description[index].type !== 'paragraph') {
                    lastRow = description[index];
                }
            }

            if (lastRow) {
                closeParagraph(index);
            }
        }
        return result;
    }

    function renderClassesList(parent) {
        var panel = '';

        if (parent.classes && parent.classes.length) {
            panel = '<div><h2>Classes</h2><ul>';
            parent.classes.forEach(function (classObject) {
                panel += '<li>' + app.navigation.getLink(classObject) + '</li>';
            });
            panel += '</ul></div>';
        }

        return panel;
    }

    function renderSubmodulesList(parent) {
        var panel = '';

        if (parent.submodules && parent.submodules.length) {
            panel = '<div><h2>Submodules</h2><ul>';
            parent.submodules.forEach(function (submodule) {
                panel += '<li>' + app.navigation.getLink(submodule);

                panel += renderClassesList(submodule);

                panel += '</li>';
            });
            panel += '</ul></div>';
        }

        return panel;
    }

    function renderModule(module) {
        var panel = '<div><div class="page-header"><h1>' + module.name + ' <small>module</small></h1></div>';

        panel += renderClassesList(module);
        panel += renderSubmodulesList(module);

        panel += '</div>';

        setResultPanel(panel);
    }

    function renderSubmodule(submodule) {
        var panel = '<div><div class="page-header"><h1>' + submodule.name + ' <small>submodule</small></h1></div>';

        panel += renderClassesList(submodule);

        panel += '</div>';

        setResultPanel(panel);
    }

    function produceClass(classObject, stateOf, childOf){
        var panel = '<div>',
            headerClass,
            type;

        // render breadcrumbs
        if (classObject.module || classObject.submodule) {
            panel += '<ol class="breadcrumb">'
            if (classObject.module) {
                panel += '<li><span>' + classObject.module + '</span></li>';
            }
            if (classObject.submodule) {
                panel += '<li><span>' + classObject.submodule + '</span></li>';
            }
            panel += '</ol>';
        }

        // render class
        type = stateOf ? ('state of <b>' + stateOf + '</b>') : (childOf ? ('child of <b>' + childOf + '</b>') : 'class');
        headerClass = !stateOf && !childOf ? 'page-header' : 'savvy-sub-header';
        panel += '<div class="' + headerClass + '"><h1>' + classObject.class + ' <small>'+ type +'</small></h1>';
        panel += '<div class="location text-info"><small>' + classObject.filePath + ' Line ' + classObject.line + '</small></div></div>';
        panel += renderDescription(classObject.description);

        // render states
        if(classObject.states && classObject.states.length){
            panel += '<h2>'+ classObject.class +' states</h2>';
            panel += '<div class="savvy-class-states">';
            classObject.states.forEach(function(classState){
                panel += produceClass(classState, classObject.class);
            });
            panel += '</div>';
        }

        // render children
        if(classObject.children && classObject.children.length){
            panel += '<h2>'+ classObject.class +' children</h2>';
            panel += '<div class="savvy-class-children">';
            classObject.children.forEach(function(classChild){
                panel += produceClass(classChild, null, classObject.class);
            });
            panel += '</div>';
        }

        panel += '</div>';

        return panel;
    }

    function renderClass(classObject) {
        var panel = produceClass(classObject);
        setResultPanel(panel);
    }

    app.view = {
        init: initializeRenderer,
        renderClass: renderClass,
        renderModule: renderModule,
        renderSubmodule: renderSubmodule
    };
}());