Minified - CSS Classes

by tjansen

HTML

<script src="http://minifiedjs.com/minified-web-src.js"></script>
<button id="toggleRedButton">Toggle Red</button>
<button id="setRedButton">Set Red</button>
<button id="removeRedButton">Remove Red</button><br/>
<button id="toggleBlueButton">Toggle Blue</button>
<button id="setBlueButton">Set Blue</button>
<button id="removeBlueButton">Remove Blue</button><br/>
<button id="checkButton">Check classes</button> 
Red: <span id="redStatus">?</span> Blue: <span id="blueStatus">?</span>
<div id="elem">Change Me</div>

CSS

.red { color: red }
.blue { background-color: #aaf; }
div { margin-top: 1em; }

JavaScript

var MINI = require('minified'); 
var $ = MINI.$, $$ = MINI.$$, EE = MINI.EE;

$(function() {
    $('#toggleRedButton').on('click', function() { $('#elem').set('red'); });
    $('#setRedButton').on('click', function() { $('#elem').set('+red'); });
    $('#removeRedButton').on('click', function() { $('#elem').set('-red'); });

    $('#toggleBlueButton').on('click', function() { $('#elem').set('blue'); });
    $('#setBlueButton').on('click', function() { $('#elem').set('+blue'); });
    $('#removeBlueButton').on('click', function() { $('#elem').set('-blue'); });
    
    $('#checkButton').on('click', function() { 
        $('#redStatus').fill($('#elem').is('.red') ? 'yes' : 'no'); 
        $('#blueStatus').fill($('#elem').is('.blue') ? 'yes' : 'no'); 
    });
});