JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<script src="http://dl.dropbox.com/u/28322516/source/js/storeJson2.min.js"></script>
<link rel="stylesheet" href="http://dl.dropbox.com/u/28322516/source/css/bootstrap.min.css">
<div class="top-bar-settings-button btn-group" data-toggle="buttons-checkbox">
<button id="toggle-side-options" class="matrix-view-switch btn active" rel="tip-left1" title="Hide Options"><i class="icon-tasks"></i></button>
<button id="toggle-matrix-charts" class="btn active" rel="tip-left1" title="Table Charts"><i class="icon-picture"></i></button>
<button id="toggle-matrix-options" class="btn closed" rel="tip-left1" title="Table Options"><i class="icon-list-alt"></i></button>
</div>
    
<button type="button" id="toggle-chart-options" class="btn btn-mini borderless active" data-toggle="button"><i class="option-config icon-cog" rel="tip-right" data-original-title="Chart Options"></i></button>
    
<ul class="nav nav-pills pull-right">
    <!-- STATUS DROP-DOWN MENU -->
    <li id="allStatusMenu" class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        All <b class="caret"></b></a>
        <ul class="dropdown-menu olStatus">
            <li>
                <div class="controls">
                    <label class="radio">
                        <input type="radio" name="status_select" id="status_select_all" value="all" checked="">
                        Show All
                    </label>
                    <label class="radio">
                        <input type="radio" name="status_select" id="status_select_pause" value="active_paused">
                        Show Active/Paused
                    </label>
                    <label class="radio">
                        <input type="radio" name="status_select" id="status_select_active" value="active">
                        Show Active
                    </label>
                </div>
            </li>

            <li>
                <div class="controls">
                    <label...

CSS

body { padding: 9px;-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;}
.fixed{background: pink; display:inline-block; padding: 3px;}fieldset {display: inline-block; vertical-align:top;}
#toolbar { display:inline-block; padding: 3px; }
#page_size, #matrix-footer { display:inline-block; }

JavaScript

// Simulate data from real database
var miniDatabase = {
    "uiPrefs":[ 
        {"sidebar":"on","charts":"on","tableOptions":"off","chartSettings":"on","tablePager":"off","tableStyle":"columns","pageSize":25}
    ]
};

 
$(document).ready(function() {
    
    if( store.enabled ){
               
        if( store.get('uiPrefs') ){
            uiPrefs = store.get('uiPrefs');
            $('#pagerBtn').attr('data-status',uiPrefs.pager);
            $('#matrix-switch').val(uiPrefs.tableStyle);
            
        }
        else{
            // No data stored. Create data based on default HTML values.
            uiPrefs.pager = $('#pagerBtn').attr('data-status');
            store.set('uiPrefs', uiPrefs);
        }
    }
    else{
        console.error('localStorage disabled');
    }
    
    
    // Dropbox Network
    $("#matrix-switch").change(function(){
        var val = $("#matrix-switch option:selected").index();
        if( store.get('uiPrefs') ){
            var ui = store.get('uiPrefs');
            // Add new value to the collection
            ui.tableStyle = val;
            store.set('uiPrefs',ui);
        }

    });
    
    // Button Toolbar
    $("#pagerBtn").click(function(){
        $(this).parent().parent().toggleClass("fixed");
        $(this).attr('data-status',$(this).attr('data-status') == 'fixed' ? 'normal' : 'fixed');
        if( store.get('uiPrefs') ){
            var ui = store.get('uiPrefs');
            ui.pager = $(this).attr('data-status');
            store.set('uiPrefs',ui);
        }
    });
    
    // Button Delete
    $("#logout").click(function(){
        store.clear();
        alert('localStorage Deleted');
    });

});