SML2 Example

HTML

<script src="https://raw.github.com/gist/1331147/Events.Latched.js"></script>
<script src="https://raw.github.com/gist/1331431/Module.Model.js"></script>
<script src="https://raw.github.com/gist/1331165/Class.Template.js"></script>
<script src="https://raw.github.com/gist/1367807/Feature.js"></script>
<div class="app-wrapper">
<h1>Come see a list of Polls!</h1>
<script type="sml/poll" data-name="something" data-poll-id="2323423" id="random-poll">
    <h3><?=poll.question?></h3>
    <dl>
        <? for(var key in poll.options) {?>
        <? if(poll.options.hasOwnProperty(key)) { ?>
            <? var option = poll.options[key]; ?> 
            <dd class="">
                <div class="rating" style="width:<?=option.hits.percent?>%"></div>
                <label for="optionIndex"><?=option.key?> - <span><?=option.hits.count?> Hits</span></label>
                <input type="radio" name="optionIndex" value="<?=option.key?>" />
            </dd>
        <? } ?>
        <? } ?>
    </dl>
    <block type="share:facebook" description="Something here" caption="This is a poll about something." />
    <button type="submit"><span>Submit</span></button>
</script>
</div>

CSS

.app-wrapper {background: #efefef; padding: 20px;}
h1 {font-weight: bold; font-family: Helvetica,sans-serif; font-size: 22px;}

#random-poll {font-family: Helvetica,sans-serif; margin: 10px 0px; padding: 10px; border: 2px #ccc solid; background: #fff;}
#random-poll h3 {font-weight: bold;font-size: 18px; padding: 0 0 4px 0; margin-bottom: 10px; border-bottom: 2px #ccc solid;}
#random-poll dl {}
#random-poll dl dd {margin: 10px 0; padding: 0px; position: relative;}
#random-poll dl dd label {margin-left: 25px; padding: 3px;display: block; position: relative; z-index: 2}
#random-poll dl dd label span {color: #666;}
#random-poll dl dd input[type=radio] {position: absolute; top: 6px; left: 5px; z-index: 3;}  
#random-poll dl dd .rating {position: absolute;top:0; bottom:0px; left: 0px; width: 100px; background: #6495ed;opacity: 0.5; z-index:1; border-radius: 3px;}

JavaScript

var pollData = {
    poll: {
        question: "What do you think this question is?"
        ,options: [
            {
                key:'A Silly ass Question',
                value:0, 
                hits: {
                    count: 345, 
                    percent: 33 
                }
            }
            ,{
                key:'Some Random Question.',
                value:1,
                hits: {
                    count: 345, 
                    percent: 66 
                }
            }
            ,{
                key:'Not a Question, a Statement.',
                value:2,
                hits: {
                    count: 345, 
                    percent: 40 
                }
            }
            ,{
                key:'Here\'s another Option.',
                value:3,
                hits: {
                    count: 345, 
                    percent: 20 
                }
            }
        ]
    }
};


(function() {
Feature.Poll = new Class({
     Extends: Feature
    ,container: new Element('form[action=#]')
    ,Implements:[Options, Template]
    ,initialize: function (el,options) {
        this.handleArguments(arguments);
        if (this.options.template){
            this.setTemplate(this.options.template);
        }
        if (this.options.id) {
            this.container.set('id',this.options.id);
        } 
        this.container.set('html', this.compile(pollData));
    }
});

Feature.Poll.implement('_template', '<form action="#" class="sml-form sml-poll-form">\
        <img src="<?=poll.image?> class="sml-poll-image"/>\
        <h3 class="sml-header sml-poll-header"><?=poll.question?></h3> \
        <ul class="sml-poll-options">\
            <? for(var option in poll.options) { ?>\
            <li class="sml-poll-option"><?=option.key?> - <?=option.value?></li>\
            <? } ?>\
        </ul>\
        <sml:share type="facebook" description="Something here" caption="This is a poll about something." />\
  ...