JSFiddle - React, Tailwind, and code Playground
by secretgspot
HTML
<body>
<article>
<div class="div wrapper">
<div class="div padded">
<ul>
<li><i>css</i><div id="animation-css"></div></li>
<li><i>img</i><div id="animation-img"></div></li>
</ul>
<div class="clear"></div>
</div>
<div class="div padded">
<ul>
<li><i>online</i><div class="sprite online"></div></li>
<li><i>offline</i><div class="sprite offline"></div></li>
<li><i>frame1</i><div class="sprite frame1"></div></li>
<li><i>frame2</i><div class="sprite frame2"></div></li>
<li><i>frame3</i><div class="sprite frame3"></div></li>
<li><i>frame4</i><div class="sprite frame4"></div></li>
<li><i>frame5</i><div class="sprite frame5"></div></li>
<li><i>frame6</i><div class="sprite frame6"></div></li>
</ul>
<div class="clear"></div>
</div>
</div>
</article>
<div class="div buttons">
<h2>Set state:</h2>
<div class="wrapper">
<button id="btn-connect">Connected</button>
<button id="btn-connecting">Connecting</button>
<button id="btn-disconnected">Disconnected</button>
</div>
</div>
</body>CSS
/**
* For Sprite CSS configuration
*/
.sprite {
display: inline-block;
width: 35px;
height: 35px;
background: url(https://dl.dropboxusercontent.com/u/48498161/status-sprite.png) 0 0;
}
.sprite.online { background-position: 0px 0px; }
.sprite.offline { background-position: 35px 0px; }
.sprite.frame1 { background-position: 245px 0px; }
.sprite.frame2 { background-position: 210px 0px; }
.sprite.frame3 { background-position: 175px 0px; }
.sprite.frame4 { background-position: 140px 0px; }
.sprite.frame5 { background-position: 105px 0px; }
.sprite.frame6 { background-position: 70px 0px; }
/**
** -- IGNORE BELOW -- **
**/
body {
font-family: "Trebuchet MS", Tahoma, Sans;
margin: 0px; padding:0px;
position: absolute;
top: 0px; left: 0px; right: 0px; bottom: 0px;
background-color: #FF6600;
}
article {
padding: 0px;
background: #FF9900;
margin: 0px;
}
article ul, article ul li {
padding: 0px; margin: 0px;
list-style: none;
}
article ul {
}
article ul li {
display: inline-block;
font-size: 0.8em;
border: 1px solid rgba(255,102,0,1);
padding: 7px 10px;
margin: 10px 0 0 10px;
float: left;
background: url(https://dl.dropboxusercontent.com/u/48498161/stripes.png) 0 0;
}
article ul li i {
display: block;
text-align: center;
color: rgba(255,0,0,1);
font-size: 0.8em;
}
.div.padded {
padding: 0 10px 0 10px;
}
.div.wrapper {
padding: 0 0 10px 0;
}
.div.buttons {
background: #300000;
color: #FFB700;
font-size: 0.8em;
}
.div.buttons h2 {
padding: 10px 0 0 10px; margin: 0px;
display: inline-block;
font-size: 1em;
}
.div.buttons .wrapper {
display: inline-block;
padding: 10px;
}
.div.buttons button {
height: 30px;
}
.clear {
clear: both;
}
@media all
and (max-width: 640px) {
article {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 250px;
overflow: auto;
}
.div.buttons {
position: absolute;
bottom: 0px;
right: 0px;
left: 0px;
height: 250px;
}
.div.buttons button {
height:...JavaScript
$(function(){
/* * *
* Sprite class.
* Maps portions of a single image as separate images.
*
* Config options:
*
* cls [string] [required, if no `img` defined]
* img [string] [required, if no `cls` defined]
* map [object] [required]
* sprite [string]
* el [jQuery] [required, if no `selector` defined]
* selector [string] [required, if no `el` defined]
*
{ // example config using previously generated CSS (see above)
cls: 'sprite', // base class applied to all mapped classes
map: {
sprite1: 'sprite1',
sprite2: 'sprite2'
}
}
* ___ OR ___ *
{ // example config using a static image (css automatically generated)
img: 'img/status-sprite.png',
map: {
sprite1: { x: 0, y: 0, w: 35, h: 35 },
sprite2: { x: 35, y: 0, w: 35, h: 35 }
},
cls: 'sprite' // optionally apply a class to this sprite
}
*/
function Sprite(cfg){
var me = this;
cfg=cfg||{};
var
$el = null,
mapper = null,
lastSprite = null,
mapperCss = {
init: function(map){
this.map = map;
},
loadEl: function(el,callback,scope){
if( $.isFunction(callback) ) callback.call(scope||me);
},
spriteCls: function(sprite){
return this.map[sprite];
},
has: function(sprite){
return this.map[sprite] !== undefined;
},
load: function(el,sprite){
el.addClass( this.spriteCls(sprite) );
},
unload: function(el,sprite){
el.removeClass( this.spriteCls(sprite) );
}
},
mapperImg = {
loaded: false,
iW: 0,
iH: 0,
iSrc: '',
init: function(img,map){
this.image = img;
this.map = map;
},
loadEl: function(el,callback,scope){
var self = this, img = (this.image instanceof Image) ? this.image : new Image();
$(img).on('load',function(){
// store image dimansions
self.loaded = true;
self.iW = this.width;
self.iH = this.height;
self.iSrc = this.src;
// configure css of the...