JSFiddle - React, Tailwind, and code Playground

by tonyjcamp

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.3/bootstrap.min.js"></script>
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title></title>
    <meta name="description" content="">
    <meta name="author" content="">

    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">

    <script src="js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body>
<header>
    <h1>User Permissions</h1>
</header>
<div class="permissions-container well">
    <form action="" method="post" accept-charset="utf-8" class="update-permissions">
        <dl class="permissions">
            <dt>
                tonyinstructor_2:
            </dt>
            <dd>
                <div class="btn-group">
                    <input type="button" class="btn btn-large btn-success" value="QA" />
                    <input type="hidden" name="qa" value="1" />
                    <input type="button" class="btn btn-large btn-danger" value="Production" />
                    <input type="hidden" name="production" value="0" />
                    <input type="button" class="btn btn-large btn-danger" value="Nightly" />
                    <input type="hidden" name="nightly" value="0" />
                    <input type="button" class="btn btn-large btn-success" value="Misc" />
                    <input type="hidden" name="misc" value="1" />
                    <input type="button" class="btn btn-large btn-success"...

CSS

/* =============================================================================
   HTML5 Boilerplate CSS: h5bp.com/css
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle;...

JavaScript

// have to hack the last visible button style
$('.btn-group').each(function() {
    $(this).find('.btn').last().addClass('last-button');
});

// function to check current status
var statusCheck = function(el) {
    // if el has class of success, remove and add danger
    // toggle won't work properly
    if( el.hasClass('btn-success') ) {
        el.removeClass('btn-success').addClass('btn-danger').next('input').val('0');
    } else {
        el.removeClass('btn-danger').addClass('btn-success').next('input').val('1');
    }
};

var toggleAll = function(el, state) {
    console.log(el);
    if( state === true ) {
        el.removeClass('btn-danger').addClass('btn-success');
    } else {
        el.removeClass('btn-success').addClass('btn-danger');
    }
}

// check total buttons clicked, and change select all or deselect all
var allChecked = function(group) {
    var danger = group.find('.btn-danger').length,
        success = group.find('.btn-success').length,
        btns = group.find('.btn').length;

    if( danger === btns) {
        group.siblings().find('.toggle').val('Enable All').removeClass('deselect-all').addClass('all');    
        toggleAll(group.find('.btn'), false);
    }

    if( success === btns ) {
        group.siblings().find('.toggle').val('Disable All').removeClass('all').addClass('deselect-all');
        toggleAll(group.find('.btn'), true);
    }
};

// overwrite default bootstrap btn-group actions
$('.btn-group .btn').on('click', function() {
    var self = $(this);

    statusCheck(self);
    allChecked(self.parents('.well').find('.btn-group'));

});

// toggling all butons on, or off, on click
// .toggle won't help us here
$('.all, .deselect-all').on('click', function() {
    var self = $(this),
        container = self.parent().siblings('.btn-group'),
        buttons = container.find('.btn');

    if( self.hasClass('all') ) {
        buttons.removeClass('btn-danger').addClass('btn-success');
        self.val('Disable...