Manager Loader

Dynamic load JS and CSS for components

by Ben Clayton

HTML

<div class="nav">
    <ul>
        <li class="nava">Manager A</li>
        <li class="navb">Manager B</li>
    </ul>
</div>
<div class='manager-panels'></div>

CSS

.nav {
    padding:10px;
    background-color:#F0FFF0;
    position:fixed;
    top:10px;
    left:0px;
    border-radius:20px;
}
.panel {
    position:absolute;
    top:10px;
    left:150px;
    width:70%;
    min-height:280px;
    display:none;
    border:1px solid red;
}
ul {
    -webkit-padding-start:20px
}

JavaScript

var _infx = {};

_infx.loader = function (cfg) {
    var _self = this;
    this.cfg = cfg;
    this.load_js = function (src, load_callback) {
        console.log('load js: ' + src);

         // this does show in chrome developer tools sources
        jQuery.getScript(src, load_callback);
        
        /*
        var script = document.createElement('script');
        script.src = src;
        script.onload = load_callback;
        script.id = "js1";
        document.body.appendChild(script);
        console.log($("#js1"));
        */

    }

    this.load_css = function (src, load_callback) {
        console.log('load css: ' + src);

        // this does show in chrome developer tools sources
        var headID = document.getElementsByTagName("head")[0];
        var cssNode = document.createElement('link');
        cssNode.type = 'text/css';
        cssNode.rel = 'stylesheet';
        cssNode.href = src;
        cssNode.media = 'screen';
        headID.appendChild(cssNode);
    }
    this.load_html = function (src, load_callback) {
        $.get(src, {}, function () {
            load_callback();
        });

    }
    this.loadmanager = function (cfgitem) {
        console.log('load html' + cfgitem.html);

        this.load_js(cfgitem.js, function () {})
        this.load_css(cfgitem.css, function () {})

        var fnd = $(".panel" + cfgitem.el).length;
        var title = $(cfgitem.sel).text();
        if (!fnd) {
            var s = cfgitem.el.replace(/\./, '');
            $('.manager-panels').append("<div class=\"panel " + s + "\">Loading " + title + " ...</div>");
        }
        $('.panel:visible').fadeOut();
        $(cfgitem.el).fadeIn();
    }

    this.init = function () {
        for (var m in _self.cfg) {
            $(_self.cfg[m].sel).on('click', function () {
                _self.loadmanager(_self.cfg[$(this).data('manager')]);
            }).data('manager', m);
        }
    }
    this.init();

}

new _infx.loader({
    managera: {
      ...