SubtleTemplateDirty Demo

https://github.com/subtleGradient/mootools-subtle-templates-dirty

by Thomas Aylott

HTML

<script src="https://github.com/subtleGradient/mootools-subtle-templates-dirty/raw/master/Source/Plugins/SubtleTemplateDirty.js"></script>
<button onclick="makeItHappen()">Do it!</button>

<div id=editor>

    <input name=epoch size=20>
    <input name=date size=45>
    <input type=range name=percent_complete value=50 min=0 max=100>

    <h1 class="albert">albert</h1>
    <h2 class="coffee">
        coffee
        <b class="cream">
            cream
            <i class="flavor">flavor</i>
        </b>
        <i class="richness">richness</i>
    </h2>

</div>

CSS

body{font-family:Georgia;}
h1{font-size:2em;margin:1ex 0;}
h2{font-size:1.5em;margin:1ex 0;}

#editor{background:#eee;padding:2ex;}

.extreme{background-color:#00f; color:#fff}
.extreme_later{background-color:#fff; color:#444}

JavaScript

/*


    https://github.com/subtleGradient/mootools-subtle-templates-dirty


*/

// You can define a custom function for a property
SubtleTemplateDirty.prototype.Properties.fanciness = {
    set: function(value) {
        var el = this;
        el.morph("." + value);
        setTimeout(function() {
            el.morph("." + value + "_later")
        }, 300)
    }
};

var myThing;

function makeItHappen() {

    if (!myThing) myThing = new SubtleTemplateDirty('editor');

    myThing.set({
        percent_complete: $random(0, 100),
        epoch: +new Date,
        date: new Date,
        albert: 'Just set albert!',
        'coffee.cream.flavor': 'Just set coffee.cream.flavor!',
        "coffee.richness": "<strong> HTML Safe",
        fanciness: 'extreme'
    });

}