requirebin sketch

index.js

var Rating = require('rating-control'),
    DefaultStyle = require('default-style'),
    crel = require('crel'),
    currentValue = crel('div');

new DefaultStyle('.item > span { display: inline-block;  width: 20px; height: 20px; } .foo{ border: solid 1px red; } .bar{ border: solid 1px green; }');

var ratingTemplate = crel('div', {class: 'item'}, crel('span', {class: 'foo'}), crel('span', {class: 'bar'})),
    ratingItemsElement,
    ratingElement = crel('div', {class: 'rating'},
        crel('section',
            ratingItemsElement = crel('div')
        )
    );

window.document.body.appendChild(ratingElement);

var rating = new Rating({
    value:'apple',
    items: ['banana', 'apple', 'orange'],
    itemTemplate: ratingTemplate,
    itemsElement: ratingItemsElement,
    element: ratingElement
});

rating.on('value', function(value){
  currentValue.textContent = 'Current Value: ' + value;
});

currentValue.textContent = 'Current Value: ' + rating.value();
window.document.body.appendChild(currentValue);

minified.js

require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){function EventEmitter(){this._events=this._events||{};this._maxListeners=this._maxListeners||undefined}module.exports=EventEmitter;EventEmitter.EventEmitter=EventEmitter;EventEmitter.prototype._events=undefined;EventEmitter.prototype._maxListeners=undefined;EventEmitter.defaultMaxListeners=10;EventEmitter.prototype.setMaxListeners=function(n){if(!isNumber(n)||n<0||isNaN(n))throw TypeError("n must be a positive number");this._maxListeners=n;return this};EventEmitter.prototype.emit=function(type){var er,handler,len,args,i,listeners;if(!this._events)this._events={};if(type==="error"){if(!this._events.error||isObject(this._events.error)&&!this._events.error.length){er=arguments[1];if(er instanceof Error){throw er}else{throw TypeError('Uncaught, unspecified "error" event.')}return false}}handler=this._events[type];if(isUndefined(handler))return false;if(isFunction(handler)){switch(arguments.length){case 1:handler.call(this);break;case 2:handler.call(this,arguments[1]);break;case 3:handler.call(this,arguments[1],arguments[2]);break;default:len=arguments.length;args=new Array(len-1);for(i=1;i<len;i++)args[i-1]=arguments[i];handler.apply(this,args)}}else if(isObject(handler)){len=arguments.length;args=new Array(len-1);for(i=1;i<len;i++)args[i-1]=arguments[i];listeners=handler.slice();len=listeners.length;for(i=0;i<len;i++)listeners[i].apply(this,args)}return true};EventEmitter.prototype.addListener=function(type,listener){var m;if(!isFunction(listener))throw TypeError("listener must be a function");if(!this._events)this._events={};if(this._events.newListener)this.emit("newListener",type,isFunction(listener.listener)?listener.listener:listener);if(!this._events[type])this._events[type]=listener;else if(isObject(this._events[type]))this._events[type].push(listener);else this._events[type]=[this._events[type],listener];if(isObject(this._events[type])&&!this._events[type].warned){var m;if(!isUndefined(this._maxListeners)){m=this._maxListeners}else{m=EventEmitter.defaultMaxListeners}if(m&&m>0&&this._events[type].length>m){this._events[type].warned=true;console.error("(node) warning: possible EventEmitter memory "+"leak detected. %d listeners added. "+"Use emitter.setMaxListeners() to increase limit.",this._events[type].length);if(typeof console.trace==="function"){console.trace()}}}return this};EventEmitter.prototype.on=EventEmitter.prototype.addListener;EventEmitter.prototype.once=function(type,listener){if(!isFunction(listener))throw TypeError("listener must be a function");var fired=false;function g(){this.removeListener(type,g);if(!fired){fired=true;listener.apply(this,arguments)}}g.listener=listener;this.on(type,g);return this};EventEmitter.prototype.removeListener=function(type,listener){var list,position,length,i;if(!isFunction(listener))throw TypeError("listener must be a function");if(!this._events||!this._events[type])return this;list=this._events[type];length=list.length;position=-1;if(list===listener||isFunction(list.listener)&&list.listener===listener){delete this._events[type];if(this._events.removeListener)this.emit("removeListener",type,listener)}else if(isObject(list)){for(i=length;i-->0;){if(list[i]===listener||list[i].listener&&list[i].listener===listener){position=i;break}}if(position<0)return this;if(list.length===1){list.length=0;delete this._events[type]}else{list.splice(position,1)}if(this._events.removeListener)this.emit("removeListener",type,listener)}return this};EventEmitter.prototype.removeAllListeners=function(type){var key,listeners;if(!this._events)return this;if(!this._events.removeListener){if(arguments.length===0)this._events={};else if(this._events[type])delete this._events[type];return this}if(arguments.length===0){for(key in this._events){if(key==="removeListener")continue;this.removeAllListeners(key)}this.removeAllListeners("removeListener");this._events={};return this}listeners=this._events[type];if(isFunction(listeners)){this.removeListener(type,listeners)}else{while(listeners.length)this.removeListener(type,listeners[listeners.length-1])}delete this._events[type];return this};EventEmitter.prototype.listeners=function(type){var ret;if(!this._events||!this._events[type])ret=[];else if(isFunction(this._events[type]))ret=[this._events[type]];else ret=this._events[type].slice();return ret};EventEmitter.listenerCount=function(emitter,type){var ret;if(!emitter._events||!emitter._events[type])ret=0;else if(isFunction(emitter._events[type]))ret=1;else ret=emitter._events[type].length;return ret};function isFunction(arg){return typeof arg==="function"}function isNumber(arg){return typeof arg==="number"}function isObject(arg){return typeof arg==="object"&&arg!==null}function isUndefined(arg){return arg===void 0}},{}],2:[function(require,module,exports){(function(root,factory){if(typeof exports==="object"){module.exports=factory()}else if(typeof define==="function"&&define.amd){define(factory)}else{root.crel=factory()}})(this,function(){var fn="function",obj="object",isType=function(a,type){return typeof a===type},isNode=typeof Node===fn?function(object){return object instanceof Node}:function(object){return object&&isType(object,obj)&&"nodeType"in object&&isType(object.ownerDocument,obj)},isElement=function(object){return crel.isNode(object)&&object.nodeType===1},isArray=function(a){return a instanceof Array},appendChild=function(element,child){if(!isNode(child)){child=document.createTextNode(child)}element.appendChild(child)};function crel(){var args=arguments,element=args[0],child,settings=args[1],childIndex=2,argumentsLength=args.length,attributeMap=crel.attrMap;element=crel.isElement(element)?element:document.createElement(element);if(argumentsLength===1){return element}if(!isType(settings,obj)||crel.isNode(settings)||isArray(settings)){--childIndex;settings=null}if(argumentsLength-childIndex===1&&isType(args[childIndex],"string")&&element.textContent!==undefined){element.textContent=args[childIndex]}else{for(;childIndex<argumentsLength;++childIndex){child=args[childIndex];if(child==null){continue}if(isArray(child)){for(var i=0;i<child.length;++i){appendChild(element,child[i])}}else{appendChild(element,child)}}}for(var key in settings){if(!attributeMap[key]){element.setAttribute(key,settings[key])}else{var attr=crel.attrMap[key];if(typeof attr===fn){attr(element,settings[key])}else{element.setAttribute(attr,settings[key])}}}return element}crel["attrMap"]={};crel["isElement"]=isElement;crel["isNode"]=isNode;return crel})},{}],3:[function(require,module,exports){var defaultStyles,validEnvironment;function insertTag(){document.head.insertBefore(defaultStyles,document.head.childNodes[0])}if(typeof window==="undefined"||typeof document==="undefined"||typeof document.createTextNode==="undefined"){console.warn("No approprate environment, no styles will be added.")}else{validEnvironment=true;defaultStyles=document.createElement("style");if(document.head){insertTag()}else{addEventListener("load",insertTag)}}function DefaultStyle(cssText,dontInsert){if(!validEnvironment){return this}this._node=document.createTextNode(cssText||"");if(!dontInsert){this.insert()}}DefaultStyle.prototype.insert=function(target){if(!validEnvironment){return}target||(target=defaultStyles);target.appendChild(this._node)};DefaultStyle.prototype.remove=function(){if(!validEnvironment){return}var parent=this._node.parentElement;if(parent){parent.removeChild(this._node)}};DefaultStyle.prototype.css=function(cssText){if(!validEnvironment){return}if(!arguments.length){return this._node.textContent}this._node.textContent=cssText};module.exports=DefaultStyle},{}],"rating-control":[function(require,module,exports){var crel=require("crel"),DefaultStyle=require("default-style"),EventEmitter=require("events").EventEmitter,style=new DefaultStyle('.rating.empty .item {color: gray;} .rating .item {font-size: 1.5em; color: gold;} .rating .item:after {content: "\\2605";} .rating .item.selected ~ .item { color: gray; }'),matches;function closest(target,query){if(!matches){matches=target.matches||target.matchesSelector||target.webkitMatchesSelector||target.mozMatchesSelector||target.msMatchesSelector||function(){throw"This browser does not support Element.matches()"}}while(target&&target.ownerDocument&&!matches.call(target,query)){target=target.parentNode}return matches.call(target,query)?target:null}function Rating(options){this._items=[1,2,3,4,5];this._renderedItems=[];if(!options){options={}}this.element=options.element;this.itemsElement=options.itemsElement;this.itemTemplate=options.itemTemplate;if(options.items!=null){this._items=options.items}if(options.value!=null){this._currentIndex=this._items.indexOf(options.value)}if(options.removeDefaultStyle===true){style.remove()}this._render();if(options.enabled!=null){this.enabled(options.enabled)}}Rating.prototype=Object.create(EventEmitter.prototype);Rating.prototype.constructor=Rating;Rating.prototype._enabled=true;Rating.prototype.enabled=function(value){if(!arguments.length){return this._enabled}this._enabled=value;return this};Rating.prototype._value=null;Rating.prototype.value=function(value){if(!arguments.length){return this._value}var index=this._items.indexOf(value);if(value!==null&&index===-1||index===this._currentIndex){return this}return this._selectedIndex(index)};Rating.prototype.items=function(value){if(!arguments.length){return this._items.slice()}if(!Array.isArray(value)){throw"items must be an array"}this._removeRenderedItems();this._items=value.slice();this._renderItems();this._update();this.emit("items",value);return this};Rating.prototype._currentIndex=-1;Rating.prototype._selectedIndex=function(value){if(!arguments.length){return this._currentIndex}if(value===this._currentIndex){return this}this._currentIndex=value;this._update();return this};Rating.prototype._disableRenderedElement=function(){this.itemsElement.setAttribute("disabled","disabled")};Rating.prototype._enableRenderedElement=function(){this.itemsElement.removeAttribute("disabled")};Rating.prototype._update=function(){this._value=this._items[this._currentIndex];if(this._enabled){this._enableRenderedElement()}else{this._disableRenderedElement()}if(this._selectedElement){this._selectedElement.classList.remove("selected")}if(this._currentIndex===-1){this._setAsEmpty()}else{this._setHasValue()}this._selectedElement=this._renderedItems[this._currentIndex];if(this._selectedElement){this._selectedElement.classList.add("selected")}this.emit("value",this._value)};Rating.prototype._appendRenderedItem=function(item){crel(this.itemsElement,item)};Rating.prototype._removeRenderedItems=function(){while(this._renderedItems.length){this._removeRenderedItem(this._renderedItems.pop())}};Rating.prototype._removeRenderedItem=function(item){this.itemsElement.removeChild(item)};Rating.prototype._renderItem=function(){return this.itemTemplate.cloneNode(true)};Rating.prototype._renderItems=function(){var items=this.items();for(var i=0;i<items.length;i++){var item=this._renderItem(i);this._appendRenderedItem(item);this._renderedItems.push(item)}};Rating.prototype._click=function(event){if(!this._enabled){return}var item=closest(event.target,".rating .item");if(item){this._selectedIndex(this._renderedItems.indexOf(item))}};Rating.prototype._bindEvents=function(){this._clickHandeler=this._click.bind(this);this.itemsElement.addEventListener("click",this._clickHandeler)};Rating.prototype._debind=function(){this.itemsElement.removeEventListener("click",this._clickHandeler)};Rating.prototype.destroy=function(){this._debind();this.emit("destroy")};Rating.prototype._setAsEmpty=function(){this.itemsElement.classList.add("empty")};Rating.prototype._setHasValue=function(){this.itemsElement.classList.remove("empty")};Rating.prototype._render=function(){if(!this.element){this.element=crel("span",{"class":"rating"})}if(!this.itemsElement){this.itemsElement=this.element}this._setAsEmpty();if(!this.itemTemplate){this.itemTemplate=crel("span",{"class":"item"})}this._renderItems();this._bindEvents();this._update()};module.exports=Rating},{crel:2,"default-style":3,events:1}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({"default-style":[function(require,module,exports){var defaultStyles,validEnvironment;function insertTag(){document.head.insertBefore(defaultStyles,document.head.childNodes[0])}if(typeof window==="undefined"||typeof document==="undefined"||typeof document.createTextNode==="undefined"){console.warn("No approprate environment, no styles will be added.")}else{validEnvironment=true;defaultStyles=document.createElement("style");if(document.head){insertTag()}else{addEventListener("load",insertTag)}}function DefaultStyle(cssText,dontInsert){if(!validEnvironment){return this}this._node=document.createTextNode(cssText||"");if(!dontInsert){this.insert()}}DefaultStyle.prototype.insert=function(target){if(!validEnvironment){return}target||(target=defaultStyles);target.appendChild(this._node)};DefaultStyle.prototype.remove=function(){if(!validEnvironment){return}var parent=this._node.parentElement;if(parent){parent.removeChild(this._node)}};DefaultStyle.prototype.css=function(cssText){if(!validEnvironment){return}if(!arguments.length){return this._node.textContent}this._node.textContent=cssText};module.exports=DefaultStyle},{}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({crel:[function(require,module,exports){(function(root,factory){if(typeof exports==="object"){module.exports=factory()}else if(typeof define==="function"&&define.amd){define(factory)}else{root.crel=factory()}})(this,function(){var fn="function",isElement=typeof Element===fn?function(object){return object instanceof Element}:function(object){return typeof object==="object"&&object.nodeType===1&&typeof object.ownerDocument==="object"},isArray=function(a){return a instanceof Array},appendChild=function(element,child){if(!isElement(child)){child=document.createTextNode(child)}element.appendChild(child)};function crel(){var args=arguments,element=args[0],child,settings=args[1],childIndex=2,argumentsLength=args.length,attributeMap=crel.attrMap;element=crel.isElement(element)?element:document.createElement(element);if(argumentsLength===1){return element}if(typeof settings!=="object"||crel.isElement(settings)||isArray(settings)){--childIndex;settings=null}if(argumentsLength-childIndex===1&&typeof args[childIndex]==="string"&&element.textContent!==undefined){element.textContent=args[childIndex]}else{for(;childIndex<argumentsLength;++childIndex){child=args[childIndex];if(child==null){continue}if(isArray(child)){for(var i=0;i<child.length;++i){appendChild(element,child[i])}}else{appendChild(element,child)}}}for(var key in settings){if(!attributeMap[key]){element.setAttribute(key,settings[key])}else{var attr=crel.attrMap[key];if(typeof attr===fn){attr(element,settings[key])}else{element.setAttribute(attr,settings[key])}}}return element}crel["attrMap"]={};crel["isElement"]=isElement;return crel})},{}]},{},[]);var Rating=require("rating-control"),DefaultStyle=require("default-style"),crel=require("crel"),currentValue=crel("div");new DefaultStyle(".item > span { display: inline-block;  width: 20px; height: 20px; } .foo{ border: solid 1px red; } .bar{ border: solid 1px green; }");var ratingTemplate=crel("div",{"class":"item"},crel("span",{"class":"foo"}),crel("span",{"class":"bar"})),ratingItemsElement,ratingElement=crel("div",{"class":"rating"},crel("section",ratingItemsElement=crel("div")));window.document.body.appendChild(ratingElement);var rating=new Rating({value:"apple",items:["banana","apple","orange"],itemTemplate:ratingTemplate,itemsElement:ratingItemsElement,element:ratingElement});rating.on("value",function(value){currentValue.textContent="Current Value: "+value});currentValue.textContent="Current Value: "+rating.value();window.document.body.appendChild(currentValue);

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "rating-control": "1.0.1",
    "default-style": "1.0.3",
    "crel": "2.1.1"
  }
}

page-head.html

<style type='text/css'>html, body { margin: 0; padding: 0; border: 0; }
body, html { height: 100%; width: 100%; }</style>

requirebin.md

made with requirebin