JSFiddle - React, Tailwind, and code Playground

by cambiata

HTML

<script src="http://code.angularjs.org/angular-0.10.5.min.js" ng:autobind></script>


<div class="wrapper" ng:controller="AppMain">
    <div class="nav">
        <a href="" ng:click="getSheet('sheet1')">Sheet 1</a><br />
        <a href="" ng:click="getSheet('sheet2')">Sheet 2</a><br />
        <a href="" ng:click="getsheet('sheet3')">Sheet 3</a><br />
    </div>
    <div class="sheet-wrapper">
        <div class="bct">BCT: <span ng:repeat="sheet in bct">{{sheet.data.title}}</span></div>
        <div class="sheet"ng:repeat="sheet in bct">{{sheet.$element}}</div>
    </div>
</div>

CSS

.wrapper { width: 100%; }
.nav { float: left; width: 10%; border-right: 1px #000 solid; padding: 5px; }
.sheet-wrapper { float: right; width: 80%; height: 240px; padding: 5px; border: 1px #F00 solid; overflow: auto; white-space: nowrap; }
.sheet { width: 130px; height: 180px; border: 1px #0F0 solid; padding: 5px; display: inline-block;}
.bct { margin-bottom: 5px; }
.bct span span {padding: 3px; margin-right: 5px; border: 1px #00F solid; }

JavaScript

var sheet1 = {status:true, statusMsg:'', data:{id:101, title:'Test Sheet 1', body:'This is a test sheet.'}, template:'<div><span>{{data.title}}</span><br /><p>{{data.body}}</p><a href="" ng:click="getSheet(\'sheet4\')">Sheet 4</a>'};
var sheet2 = {status:true, statusMsg:'', data:{id:102, title:'Test Sheet 2', body:'This is a test sheet.'}, template:'<div><span>{{data.title}}</span><br /><p>{{data.body}}</p><a href="" ng:click="getSheet(\'sheet5\')">Sheet 5</a>'};
var sheet3 = {status:true, statusMsg:'', data:{id:103, title:'Test Sheet 3', body:'This is a test sheet.'}, template:'<div><span>{{data.title}}</span><br /><p>{{data.body}}</p><a href="" ng:click="getSheet(\'sheet6\')">Sheet 6</a>'};
var sheet4 = {status:true, statusMsg:'', data:{id:104, title:'Test Sheet 4', body:'This is a test sheet.'}, template:'<div><span>{{data.title}}</span><br /><p>{{data.body}}</p><a href="" ng:click="getSheet(\'sheet1\')">Sheet 1</a>'};
var sheet5 = {status:true, statusMsg:'', data:{id:105, title:'Test Sheet 5', body:'This is a test sheet.'}, template:'<div><span>{{data.title}}</span><br /><p>{{data.body}}</p><a href="" ng:click="getSheet(\'sheet2\')">Sheet 2</a>'};
var sheet6 = {status:true, statusMsg:'', data:{id:106, title:'Test Sheet 6', body:'This is a test sheet.'}, template:'<div><span>{{data.title}}</span><br /><p>{{data.body}}</p><a href="" ng:click="getSheet(\'sheet3\')">Sheet 3</a>'};

/********************************************************************
| AppMain
| Holds BCT, loads new sheets
|*******************************************************************/
function AppMain() {
    this.bct = [];
    this.bctActive = 0;
    
    this.init();
}

AppMain.prototype = {
    init: function() {
        this.$on('openModule', this.openModule);
    },
    openModule: function(event, args) {
        this.bct = [];
        this.bctActive = 0;
        this.getSheet('');
    },
    getSheet: function(args) {
        var sheet = this.$new(AppSheet, [args]);
       ...