JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<!--

To view just the JS code, view http://jsfiddle.net/jakie8/X935S/

Because JSFiddle does not allow HTML input within the head of the document,
I resorted to some trickery at the end of the JavaScript pane, so please
ignore everything below "$(document).ready(AppName.init);" and I will explain the purpose of it.


In my custom MVC Framework, I output the controllers name as "primus"
and I output the actions name as "secundus" (first, second), so I can
figure out through Javascript what would need to be done on this page.

<meta name="primus" content="dashboard">
<meta name="secundus" content="following">

These would go in the head of your doc (note, you would output your own
values for the content attribute ("dashboard", "following") to reflect
the location/state of your application.

The two following additional meta tags are not necessary, but I like to
include them as they come in handy often times.

<meta name="userid" content="-1">
<meta name="url" content="http://myapp.com/">

View your console to view the output. Cheers!

-->

JavaScript

var AppName = AppName || (function() {

    var utils = {};      // Your Toolbox
    var app = {};        // Your Global Logic
    var bootstrap = {};  // Your Page by Page Logic

    utils = {
        cache: {
            window: $(window),
            document: $(document),
            body: $('body')
        },
        home_url: function(path){
            if(typeof path=="undefined"){
                path = '';
            }
            return utils.settings.homeURL+path;            
        },
        settings: {
            debug: true,
            currentUser: -1,
            primus: -1,
            secundus: -1,
            homeURL: -1,
            init: function() {
                _log('Initializing Settings');
                utils.settings.primus = $("meta[name=primus]").attr("content");
                utils.settings.secundus = $("meta[name=secundus]").attr("content");

                // The following are just useful features
                utils.settings.currentUser = $("meta[name=userid]").attr("content");
                utils.settings.homeURL = $("meta[name=url]").attr("content");
            }
        },
        callbacks: {
            doSomething: function() {
                _log('Doing Something');
            }
        },
        log: function(what) {
            if (utils.settings.debug) {
                console.log(what);
            }
        },
        bootstrap: function(){

            var controller = utils.settings.primus;
            var action = utils.settings.secundus;
            
            if(typeof bootstrap[controller] != 'undefined'){
                if (typeof bootstrap[controller].init != 'undefined') {
                    bootstrap[controller].init.call();
                }
                
                if(typeof bootstrap[controller][action] != 'undefined'){
                    bootstrap[controller][action].call();              
                }
            }            
        }
    };
    _log = utils.log;

 ...