Html5 Playground RV3

Third complete rewrite of the html5 playground. The main goal is to simplify the code needed for often-used tasks even further

by Entoarox

HTML

<script src="http://cdn.kvdk.net/jquery-scrollbar/jquery.fs.scroller.min.js"></script>
<!--////////////////////////////-->
<script>document.head.innerHTML+='<link type="text/css" rel="style'+'sheet"...

SCSS

/*****************************************/
%outline,input[type="radio"] + label
{
    color:#fff;
    font-family:'segoe ui semibold';
    text-shadow: 1px 1px 0px #000, 0px 1px 0px #000, -1px 1px 0px #000, -1px 0px 0px #000, -1px -1px 0px #000, 0px -1px 0px #000, 1px -1px 0px #000, 1px 0px 0px #000, 0px 0px 2px #000;
}
/*****************************************/
.c-1{color:#fff!important;}
.c-2{color:#0c0!important;}
.c-3{color:#0af!important;}
.c-4{color:#b0b!important;}
.c-5{color:#b70!important;}
.c-6{color:#f00!important;}
.c-7{color:#69c!important;}
.c-8{color:#c9c!important;}
.c-9{color:#fd0!important;}
.c-10{color:#ccc!important;}
.c-11{color:rgb(209,135,21)!important;}
.small{font-size:.8em;}
.prefix{display:inline-block;width:75px;}
.inset{margin-left:75px;}
.nbr{white-space:nowrap;}
.center{text-align:center;}
/*****************************************/
body
{
    font-size:0;
    -webkit-user-select:none;
    cursor:default;
    background:url('http://dl.dropboxusercontent.com/u/14002006/rpg-gui/resources/filler.png');
}
interface
{
    display:inline-block;
    background:url('https://dl.dropboxusercontent.com/u/14002006/ui2/bg1.png');
    min-width:150px;
    min-height:50px;
    border:20px;
    border-image-source:url('https://dl.dropboxusercontent.com/u/14002006/ui2/fbw.png');
    border-image-slice:20;
    border-image-outset:5px;
    border-image-repeat:round;
    position:relative;
    background-attachment:fixed;
    z-index:10;
}
interface[label]:before
{
    font-size:10pt;
    font-family:'Segoe Script';
    content:attr(label);
    background:url('https://dl.dropboxusercontent.com/u/14002006/ui2/bg1.png');
    border:5px;
    border-image-source:url('https://dl.dropboxusercontent.com/u/14002006/ui2/fbt.png');
    border-image-slice:15;
    border-image-outset:5px;
    border-image-repeat:round;
    border-image-width:15px;
    line-height:16px;
    position:absolute;
    top:-30px;
    left:-5px;
}
.closeInterface
{
   ...

JavaScript

// Event hooks
$('interface[close]').each(function(index){
    var e = $(this);
    e.prepend('<a class="closeInterface" onclick="envi.setInterface(\'' + e.attr('close') + '\')"></a>');
});
$('tab').on('click', function (evt) {
    if (evt.target != this) return;
    var e = $(this);
    if (e.attr('selected') != 'true' && !e.attr('disabled')) {
        e.parent().find('tab').attr('selected', null);
        e.attr('selected', 'true');
    }
});
$.scroller('defaults',{
    handleSize:40,
    trackMargin:25
});
$(window).mousemove(function(e){
    envi.pageX=e.pageX;
    envi.pageY=e.pageY;
    if(envi.tooltipVisible)
    {
        envi.positionTooltip();
    }
});
$('[tooltip]').on('mousemove',function(){
    envi.renderTooltip($(this).attr('tooltip'));
}).on('mouseout',function(){
    envi.renderTooltip();
});
// Loader Code
$('.scrollbar').scroller();
$('.scroller-bar').append('<span class="scroller-up"></span><span class="scroller-down"></span>');
$('.scroller-bar .scroller-up').on('click',function(){
    var t=$(this).parent().parent();
    t.scroller('scroll',t.find('> .scroller-content').scrollTop()-40);
})
$('.scroller-bar .scroller-down').on('click',function(){
    var t=$(this).parent().parent();
    t.scroller('scroll',t.find('> .scroller-content').scrollTop()+40);
})
$('.scroller-content').wrapInner('<div class="scroller-fix"></div>');
$('.scroller-content').parent().scroller('reset');
$('interface').hide();
$('#loader').fadeOut(150);
// Static code
window.data={
    items:{
        'stick':{
            name:'Stick',
            category:'Material',
            description:'A wooden stick.',
            quality:0,
            value:7,
            socket:0,
            enchant:0,
            durability:null,
            stats:null,
            reqs:null,
            set:null,
            abilities:null
        }
    }
};
window.save={items:{
    'item:testitem':{
        type:'stick',
        name:'Power Stick',
        category:'Event Item',
       ...