JSFiddle - React, Tailwind, and code Playground

by Chase Wilson

HTML

<script src="http://facebook.involver.com/javascripts/jtk/jtk.js"></script>
<script src="http://embednr.involver.com/javascripts/cached_facebook_tab_and_canvas_sml.js"></script>
<script>_NAMESPACE_ = sml</script>
<script src="https://raw.github.com/gist/884484/Events.js"></script>
<script src="https://raw.github.com/gist/1763600/template.js"></script>

CSS

body {padding: 30px;}
.rating-wrapper {}
.rating-wrapper .rating-form {}
.rating-wrapper .rating-option-wrapper {display: inline-block; position: relative; padding: 3px;}
.rating-wrapper .rating-option-wrapper:hover label {display: block; position: absolute; top: -20px; left: -10px;}
.rating-wrapper .rating-option-wrapper label {display: none; width: 30px; height: 20px; text-align: center; background: #fff; border: 1px #ccc solid; border-radius: 3px; box-shadow: 1px 1px 3px rgba(0,0,0,.5); z-index: 3;}
.rating-wrapper .rating-option-wrapper input {}

JavaScript

;(function  (win, doc, ns,undef) {
var RatingBox = sml.tag.RatingBox = function (config) {
    this.feature = {};
    this.content = {};
    this.instance = RatingBox.instanceCount++;
    this.initialize(config);
    RatingBox.instances[this.instance] = this;
};
    
RatingBox.instanceCount = 0;
RatingBox.instances = {};
    
RatingBox.prototype = {
    options : {
         template: '\
            <div class="rating-wrapper">\
            <div class="rating-inner">\
            <form action="" method="post" id="<%=["rating",instance,"form"].join("-")%>" class="rating-form" bind="form">\
                <% if ($this.title) { %><h3><%=title %></h3><% } %>\
                <% for (var i = 0; i < $this.getStarCount();) { %>\
                <% i += 1 %>\
                <div class="rating-option-wrapper">\
                    <label for="<%=["rate",instance,i].join("-") %>" bind="label"><%=i %></label>\
                    <input name="rating" id="<%=["rate",instance,i].join("-") %>" type="radio" value="<%= i %>" />\
                </div>\
                <% } %>\
                <input type="hidden" name="feature_signature" value="<%=feature.signature %>" />\
                <input type="hidden" name="feature_id" value="<%=feature.id %>" />\
                <input type="hidden" name="content_id" value="<%=content.id %>" />\
            </form>\
            </div>\
            </div>'
        ,starCount: 5
    }
    
    /*
     *
     *
    **/
    ,initialize: function (config) {
        
        var config = this.config = $.extend({},this.options, config);
        
        // Boilerplate configuration enforcement.
        try {
            this.feature.id = config.featureId;
        } catch(e) { throw new Error('`RatingBox` requires a feature id in it\'s configuration object', e)}
        
        try {
            this.feature.signature = config.featureSignature;
        } catch(e) { throw new Error('`RatingBox` requires a feature signature in it\'s...