requirebin sketch

10/14/2014 - 5:36 PM

Rendered
Source

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

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "dom-morph": "0.4.0",
    "delegate-dom": "0.0.1"
  }
}

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){var process=module.exports={};process.nextTick=function(){var canSetImmediate=typeof window!=="undefined"&&window.setImmediate;var canPost=typeof window!=="undefined"&&window.postMessage&&window.addEventListener;if(canSetImmediate){return function(f){return window.setImmediate(f)}}if(canPost){var queue=[];window.addEventListener("message",function(ev){var source=ev.source;if((source===window||source===null)&&ev.data==="process-tick"){ev.stopPropagation();if(queue.length>0){var fn=queue.shift();fn()}}},true);return function nextTick(fn){queue.push(fn);window.postMessage("process-tick","*")}}return function nextTick(fn){setTimeout(fn,0)}}();process.title="browser";process.browser=true;process.env={};process.argv=[];function noop(){}process.on=noop;process.addListener=noop;process.once=noop;process.off=noop;process.removeListener=noop;process.removeAllListeners=noop;process.emit=noop;process.binding=function(name){throw new Error("process.binding is not supported")};process.cwd=function(){return"/"};process.chdir=function(dir){throw new Error("process.chdir is not supported")}},{}],2:[function(require,module,exports){var getStyleKeys=require("./get-style-keys");module.exports=getMatch;module.exports.append=getMatchAppend;module.exports.remove=getMatchRemove;var excludeStyles=["transition","font","overflow","webkit","Moz","ms"];function getMatch(element,to){var fromStyle=window.getComputedStyle(element);var toStyle=window.getComputedStyle(to);var start={};var end={};var target={};var original={};var fromMatch={};getStyleKeys().forEach(function(key){var root=/^.[a-z]*/.exec(key)[0];if(!(root in start)&&!~excludeStyles.indexOf(root)&&fromStyle[key]!=toStyle[key]){start[key]=fromStyle[key];end[key]=toStyle[key];target[key]=to.style[key];original[key]=element.style[key]}});fromMatch=mergeClone(end,{opacity:"0",display:fromStyle["display"]});start["opacity"]="0";end["opacity"]="1";original["display"]=element.style["display"];original["opacity"]=element.style["opacity"];var fromPos=fromStyle["position"];var toPos=toStyle["position"];if((fromPos=="static"||fromPos=="relative")&&(toPos=="static"||toPos=="relative")){var marginTopOffset=parsePx(toStyle["marginTop"]);var marginLeftOffset=parsePx(toStyle["marginLeft"]);start["position"]=end["position"]="absolute";start["top"]=element.offsetTop-marginTopOffset+"px";start["left"]=element.offsetLeft-marginLeftOffset+"px";start["width"]=fromStyle["width"];start["height"]=fromStyle["height"];start["margin"]="";fromMatch["position"]=fromStyle["position"];set(element,fromMatch);end["top"]=element.offsetTop-marginTopOffset+"px";end["left"]=element.offsetLeft-marginLeftOffset+"px";set(element,original);target["top"]=toStyle["top"];target["left"]=toStyle["left"];target["position"]=null}var startRect=element.getBoundingClientRect();var endRect=to.getBoundingClientRect();var autoHeight=getAutoHeight(to);if(toStyle.height==autoHeight){to["height"]="auto"}return{start:start,end:end,fromMatch:fromMatch,target:target,original:original,startHeight:startRect.bottom-startRect.top,startWidth:startRect.right-startRect.left,endHeight:endRect.bottom-endRect.top,endWidth:endRect.right-endRect.left,offsetParent:element.offsetParent}}function getMatchAppend(after,element){var toStyle=window.getComputedStyle(element);var aboveStyle=window.getComputedStyle(after);var rect=element.getBoundingClientRect();var start={height:"0px",width:toStyle.width,marginTop:-parsePx(aboveStyle.marginBottom)+"px",marginBottom:aboveStyle.marginBottom,opacity:0};if(toStyle.boxSizing!=="border-box"){start["padding-bottom"]=start["padding-top"]="0px";start["border-top-width"]=start["border-top-width"]="0px"}var end={top:element.offsetTop-parsePx(toStyle["marginTop"])+"px",left:element.offsetLeft-parsePx(toStyle["marginLeft"])+"px"};var target={};Object.keys(start).forEach(function(key){end[key]=toStyle[key];target[key]=""});start["top"]=element.offsetTop+"px";start["left"]=element.offsetLeft+"px";target["top"]="";target["left"]="";return{start:start,end:end,target:target,startHeight:0,startWidth:rect.right-rect.left,endHeight:rect.bottom-rect.top,endWidth:rect.right-rect.left,offsetParent:element.offsetParent}}function getMatchRemove(element){var rect=element.getBoundingClientRect();var start={top:element.offsetTop+"px",left:element.offsetLeft+"px"};var end={top:element.offsetTop+"px",left:element.offsetLeft+"px",height:"0px",opacity:"0"};return{start:start,end:end,startHeight:rect.bottom-rect.top,startWidth:rect.right-rect.left,endHeight:0,endWidth:rect.right-rect.left,offsetParent:element.offsetParent}}function parsePx(px){return parseInt(px,10)||0}function set(element,attributes){Object.keys(attributes).forEach(function(key){element.style[key]=attributes[key]})}function mergeClone(){var result={};for(var i=0;i<arguments.length;i++){var obj=arguments[i];if(obj){Object.keys(obj).forEach(function(key){result[key]=obj[key]})}}return result}function getAutoHeight(element){var revert=element.style.height;element.style.height="auto";var value=window.getComputedStyle(element).height;element.style.height=revert;return value}},{"./get-style-keys":3}],3:[function(require,module,exports){module.exports=getStyleKeys;var cachedStyleKeys=null;function getStyleKeys(){if(!cachedStyleKeys){var cachedStyleKeys=[];var styles=window.getComputedStyle(document.body);for(var key in styles){if(key in styles&&!isNumeric(key)&&key!="length"&&key!="cssText"){cachedStyleKeys.push(key)}}}return cachedStyleKeys}function isNumeric(text){return/^[0-9]+$/.test(text)}},{}],4:[function(require,module,exports){(function(process){var scrollBy=require("css-scroll-by");var offset=[0,0];var lastDuration=null;module.exports=function(match,duration,cushion,reverse){var cushion=cushion||0;var view={height:window.innerHeight||document.documentElement.clientHeight,width:window.innerWidth||document.documentElement.clientWidth,scrollHeight:document.documentElement.scrollHeight,scrollWidth:document.documentElement.scrollWidth,scrollX:document.documentElement.scrollLeft||document.body.scrollLeft,scrollY:document.documentElement.scrollTop||document.body.scrollTop};var rect=reverse?{top:parseInt(match.start["top"])-cushion,bottom:parseInt(match.start["top"])+match.startHeight+cushion,left:parseInt(match.start["left"])-cushion,right:parseInt(match.start["left"])+match.startWidth+cushion,width:match.startWidth,height:match.startHeight,differenceX:match.startWidth-match.endWidth,differenceY:match.startHeight-match.endHeight}:{top:parseInt(match.end["top"])-cushion,bottom:parseInt(match.end["top"])+match.endHeight+cushion,left:parseInt(match.end["left"])-cushion,right:parseInt(match.end["left"])+match.endWidth+cushion,width:match.endWidth,height:match.endHeight,differenceX:match.endWidth-match.startWidth,differenceY:match.endHeight-match.startHeight};setAbsoluteOffset(rect,match.offsetParent);if(rect.fixed){return}var newWidth=view.scrollWidth+rect.differenceX;var newHeight=view.scrollHeight+rect.differenceY;if(newWidth>view.width){if(rect.left-view.scrollX<0||rect.width>view.width){offset[0]+=rect.top-view.scrollX}else if(rect.right-view.scrollX>view.width){offset[0]+=rect.right-view.scrollX-view.width}}if(newHeight>view.height){if(rect.top-view.scrollY<0||rect.height>view.height){offset[1]+=rect.top-view.scrollY}else if(rect.bottom-view.scrollY>view.height){offset[1]+=rect.bottom-view.scrollY-view.height}}lastDuration=duration;process.nextTick(doScroll)};function doScroll(){if(offset[0]||offset[1]){scrollBy(offset,lastDuration);offset=[0,0]}}function setAbsoluteOffset(rect,element){while(element){if(element.style&&window.getComputedStyle(element).position==="fixed"){rect.fixed=true;break}rect.top+=element.offsetTop;rect.bottom+=element.offsetTop;rect.left+=element.offsetLeft;rect.right+=element.offsetLeft;rect.element=element;element=element.offsetParent}}}).call(this,require("_process"))},{_process:1,"css-scroll-by":5}],5:[function(require,module,exports){var transition=require("css-transition");module.exports=scrollBy;function scrollBy(offset,time){var style=window.getComputedStyle(document.documentElement);var scroll=getScroll();var width=window.innerWidth||document.documentElement.clientWidth||body.clientWidth;var start={position:"relative"};var end={};if(typeof offset==="number"){offset=[0,offset]}var maxScrollXOffset=width-scroll[0]-document.body.scrollWidth;offset[0]=Math.max(-scroll[0],Math.min(offset[0],maxScrollXOffset));offset[1]=Math.max(-scroll[1],offset[1]);if(offset[0]){end["marginLeft"]=parseInt(style.marginLeft)-offset[0]+"px"}if(offset[1]){end["marginTop"]=parseInt(style.marginTop)-offset[1]+"px"}set(document.documentElement,start);transition(document.documentElement,end,time,function(){var scroll=getScroll();set(document.documentElement,{position:"",marginTop:"",marginLeft:""});setScroll([scroll[0]+offset[0],scroll[1]+offset[1]])})}function setScroll(scroll){document.body.scrollLeft=scroll[0];document.documentElement.scrollLeft=scroll[0];document.body.scrollTop=scroll[1];document.documentElement.scrollTop=scroll[1]}function getScroll(){return[document.documentElement.scrollLeft||document.body.scrollLeft,document.documentElement.scrollTop||document.body.scrollTop]}function set(element,attributes){Object.keys(attributes).forEach(function(key){element.style[key]=attributes[key]})}},{"css-transition":6}],6:[function(require,module,exports){module.exports=function(element,targetAttributes,time,easing,cb){if(typeof easing=="function"){cb=easing;easing=null}if(!("transition"in element.style)){set(element,targetAttributes);return cb&&cb()}var targetAttributes=normalize(element,targetAttributes);var startAttributes=getStart(element,targetAttributes);var endAttributes=getEnd(element,startAttributes,targetAttributes);var finalAttributes=getFinal(element,endAttributes,targetAttributes);var transition=Object.keys(endAttributes).map(function(key){return dasherize(key)+" "+time+"ms "+(easing||"")}).join(", ");if(Object.keys(endAttributes).length){set(element,startAttributes);setTimeout(function(){element.style.transition=transition;set(element,endAttributes);setTimeout(function(){element.style.transition="";set(element,finalAttributes);cb&&cb()},time)},15)}else{return cb&&cb()}};function set(element,attributes){Object.keys(attributes).forEach(function(key){element.style[key]=attributes[key]})}function getStart(element,targetAttributes){var currentStyle=window.getComputedStyle(element);var result={};Object.keys(targetAttributes).forEach(function(key){result[key]=currentStyle[key]});if(targetAttributes["position"]){if(currentStyle["position"]!=targetAttributes["position"]){result["position"]="relative";result["top"]="0";result["left"]="0";result["right"]="auto";result["bottom"]="auto";result["width"]=currentStyle["width"];result["height"]=currentStyle["height"];if(currentStyle["position"]=="fixed"){var offset=getDestinationOffset(element);result["top"]=element.offsetTop+offset.top+"px";result["left"]=element.offsetLeft+offset.left+"px"}if(targetAttributes["position"]=="static"){result["marginBottom"]=parsePx(currentStyle["marginBottom"])-element.offsetHeight+"px"}else if(currentStyle["position"]=="static"){result["marginBottom"]=currentStyle["marginBottom"]}}}return result}function getEnd(element,startAttributes,targetAttributes){var result={};var originals={};var offsetTop=element.offsetTop;var offsetLeft=element.offsetLeft;var originalPosition=window.getComputedStyle(element)["position"];Object.keys(targetAttributes).forEach(function(key){originals[key]=element.style[key];element.style[key]=targetAttributes[key]});var targetStyle=window.getComputedStyle(element);Object.keys(targetAttributes).forEach(function(key){if(startAttributes[key]!=targetStyle[key]){result[key]=targetStyle[key]}});if(targetAttributes["position"]&&startAttributes["position"]!=targetAttributes["position"]){result["position"]="relative";result["top"]=element.offsetTop-offsetTop+"px";result["left"]=element.offsetLeft-offsetLeft+"px";result["right"]="auto";result["bottom"]="auto";if(targetAttributes["position"]=="static"){result["top"]="0px";result["left"]="0px";result["marginBottom"]=element.style["marginBottom"]}else if(originalPosition=="static"&&!result["marginBottom"]){result["marginBottom"]=parsePx(startAttributes["marginBottom"])-element.offsetHeight+"px"}}Object.keys(originals).forEach(function(key){element.style[key]=originals[key]});return result}function getFinal(element,endAttributes,targetAttributes){var result={};Object.keys(endAttributes).forEach(function(key){result[key]=element.style[key]});Object.keys(targetAttributes).forEach(function(key){result[key]=targetAttributes[key]});return result}function normalize(element,attributes){var result={};Object.keys(attributes).forEach(function(key){result[camelize(key)]=attributes[key]});return result}function getOffset(element){var result={top:0,left:0};while(element){result.top+=element.offsetTop;result.left+=element.offsetLeft;element=element.offsetParent}return result}function getDestinationOffset(element){var revert=element.style.position;element.style.position="static";var parent=element.offsetParent;var value=getOffset(element);element.style.position=revert;return{top:-value.top+document.body.scrollTop,left:-value.left+document.body.scrollLeft}}function parsePx(px){return parseInt(px,10)||0}function camelize(str){return str.replace(/[_.-](\w|$)/g,function(_,x){return x.toUpperCase()})}function dasherize(str){return str.trim().replace(/([A-Z])/g,"-$1").replace(/[-_\s]+/g,"-").toLowerCase()}},{}],"dom-morph":[function(require,module,exports){var transition=require("css-transition");var getMatch=require("./lib/get-match");var scrollFit=require("./lib/scroll-fit");module.exports=function(element,to,optionsOrDuration,cb){if(!cb&&typeof optionsOrDuration=="function"){cb=optionsOrDuration;optionsOrDuration=null}var options=typeof optionsOrDuration==="number"?{duration:optionsOrDuration}:optionsOrDuration||{};if(!window.getComputedStyle||options.animate===false){var originalDisplay=element.style.display;element.parentNode.insertBefore(to,element);element.style.display="none";return function(){to.parentNode.removeChild(to);element.style.display=originalDisplay}}options.duration=options.duration||400;var scroll=getScroll();if(!to.parentNode){element.parentNode.appendChild(to)}var match=getMatch(element,to);set(to,match.start);transition(element,match.fromMatch,options.duration);transition(to,match.end,options.duration,function(){var selection=getSelection();element.parentNode.insertBefore(to,element);set(to,match.target);set(element,match.original);element.style.display="none";setSelection(selection);cb&&cb()});setScroll(scroll);if(options.fit){scrollFit(match,options.duration,getNumber(options.fit,0))}return function unmorph(opts,cb){var scroll=getScroll();if(!cb&&typeof opts==="function"){cb=opts;opts=null}opts=opts||options;opts.duration=opts.duration||400;set(element,match.fromMatch);set(to,match.end);transition(element,match.original,opts.duration);transition(to,match.start,opts.duration,function(){var scroll=getScroll();to.parentNode.removeChild(to);set(to,match.target);setScroll(scroll);cb&&cb()});setScroll(scroll);if(opts.fit){scrollFit(match,opts.duration,getNumber(opts.fit,0),true)}}};module.exports.after=function(after,element,optionsOrDuration,cb){if(!window.getComputedStyle){insertAfter(element,after);return function(){element.parentNode.removeChild(element)}}if(!cb&&typeof optionsOrDuration=="function"){cb=optionsOrDuration;optionsOrDuration=null}var options=typeof optionsOrDuration==="number"?{duration:optionsOrDuration}:optionsOrDuration||{};options.duration=options.duration||400;var scroll=getScroll();insertAfter(element,after);var match=getMatch.append(after,element);set(element,match.start);transition(element,match.end,options.duration,function(){set(element,match.target);cb&&cb()});setScroll(scroll);if(options.fit){scrollFit(match,options.duration,getNumber(options.fit,0))}return function unmorph(opts,cb){if(!cb&&typeof opts==="function"){cb=opts;opts=null}opts=opts||options;opts.duration=opts.duration||400;var scroll=getScroll();transition(element,match.start,opts.duration,function(){element.parentNode.removeChild(element);cb&&cb()});setScroll(scroll);if(opts.fit){scrollFit(match,opts.duration,getNumber(opts.fit,0),true)}}};module.exports.remove=function(element,optionsOrDuration,cb){if(!cb&&typeof optionsOrDuration=="function"){cb=optionsOrDuration;optionsOrDuration=null}if(!window.getComputedStyle){element.parentNode.removeChild(element);return}var options=typeof optionsOrDuration==="number"?{duration:optionsOrDuration}:optionsOrDuration||{};options.duration=options.duration||400;var scroll=getScroll();var match=getMatch.remove(element);transition(element,match.end,options.duration,function(){element.parentNode.removeChild(element);cb&&cb()});setScroll(scroll);if(options.fit){scrollFit(match,options.duration,getNumber(options.fit,0))}};function getNumber(value,def){return typeof value==="number"?value:def}function insertAfter(node,after){if(after.nextSibling){after.parentNode.insertBefore(node,after.nextSibling)}else{after.parentNode.appendChild(node)}}function setScroll(scroll){document.body.scrollLeft=scroll[0];document.documentElement.scrollLeft=scroll[0];document.body.scrollTop=scroll[1];document.documentElement.scrollTop=scroll[1]}function getScroll(){return[document.documentElement.scrollLeft||document.body.scrollLeft,document.documentElement.scrollTop||document.body.scrollTop]}function getSelection(){if(document.activeElement){var element=document.activeElement;try{return{element:element,selectionStart:element.selectionStart,selectionEnd:element.selectionEnd,selectionDirection:element.selectionDirection}}catch(ex){return{element:element}}}}function setSelection(selection){if(selection&&selection.element!=document.activeElement&&selection.element.focus){selection.element.focus();try{selection.element.selectionStart=selection.selectionStart;selection.element.selectionEnd=selection.selectionEnd;selection.element.selectionDirection=selection.selectionDirection}catch(ex){}}}function set(element,attributes){Object.keys(attributes).forEach(function(key){element.style[key]=attributes[key]||""})}},{"./lib/get-match":2,"./lib/scroll-fit":4,"css-transition":6}]},{},[]);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){module.exports=on;module.exports.on=on;module.exports.off=off;function on(element,event,callback,capture){(element.addEventListener||element.attachEvent).call(element,event,callback,capture);return callback}function off(element,event,callback,capture){(element.removeEventListener||element.detachEvent).call(element,event,callback,capture);return callback}},{}],2:[function(require,module,exports){var query=require("select-dom");var proto=Element.prototype;var vendor=proto.matchesSelector||proto.webkitMatchesSelector||proto.mozMatchesSelector||proto.msMatchesSelector||proto.oMatchesSelector;module.exports=match;function match(el,selector){if(vendor)return vendor.call(el,selector);var nodes=query.all(selector,el.parentNode);for(var i=0;i<nodes.length;++i){if(nodes[i]==el)return true}return false}},{"select-dom":4}],3:[function(require,module,exports){var qwery=require("qwery");module.exports={one:one,all:all};function all(selector,parent){return qwery(selector,parent)}function one(selector,parent){return all(selector,parent)[0]}},{qwery:5}],4:[function(require,module,exports){var fallback=require("./fallback");module.exports=one;module.exports.all=all;function one(selector,parent){parent||(parent=document);if(parent.querySelector){return parent.querySelector(selector)}return fallback.one(selector,parent)}function all(selector,parent){parent||(parent=document);if(parent.querySelectorAll){return parent.querySelectorAll(selector)}return fallback.all(selector,parent)}},{"./fallback":3}],5:[function(require,module,exports){(function(name,context,definition){if(typeof module!="undefined"&&module.exports)module.exports=definition();else if(typeof define=="function"&&define.amd)define(definition);else context[name]=definition()})("qwery",this,function(){var doc=document,html=doc.documentElement,byClass="getElementsByClassName",byTag="getElementsByTagName",qSA="querySelectorAll",useNativeQSA="useNativeQSA",tagName="tagName",nodeType="nodeType",select,id=/#([\w\-]+)/,clas=/\.[\w\-]+/g,idOnly=/^#([\w\-]+)$/,classOnly=/^\.([\w\-]+)$/,tagOnly=/^([\w\-]+)$/,tagAndOrClass=/^([\w]+)?\.([\w\-]+)$/,splittable=/(^|,)\s*[>~+]/,normalizr=/^\s+|\s*([,\s\+\~>]|$)\s*/g,splitters=/[\s\>\+\~]/,splittersMore=/(?![\s\w\-\/\?\&\=\:\.\(\)\!,@#%<>\{\}\$\*\^'"]*\]|[\s\w\+\-]*\))/,specialChars=/([.*+?\^=!:${}()|\[\]\/\\])/g,simple=/^(\*|[a-z0-9]+)?(?:([\.\#]+[\w\-\.#]+)?)/,attr=/\[([\w\-]+)(?:([\|\^\$\*\~]?\=)['"]?([ \w\-\/\?\&\=\:\.\(\)\!,@#%<>\{\}\$\*\^]+)["']?)?\]/,pseudo=/:([\w\-]+)(\(['"]?([^()]+)['"]?\))?/,easy=new RegExp(idOnly.source+"|"+tagOnly.source+"|"+classOnly.source),dividers=new RegExp("("+splitters.source+")"+splittersMore.source,"g"),tokenizr=new RegExp(splitters.source+splittersMore.source),chunker=new RegExp(simple.source+"("+attr.source+")?"+"("+pseudo.source+")?");var walker={" ":function(node){return node&&node!==html&&node.parentNode},">":function(node,contestant){return node&&node.parentNode==contestant.parentNode&&node.parentNode},"~":function(node){return node&&node.previousSibling},"+":function(node,contestant,p1,p2){if(!node)return false;return(p1=previous(node))&&(p2=previous(contestant))&&p1==p2&&p1}};function cache(){this.c={}}cache.prototype={g:function(k){return this.c[k]||undefined},s:function(k,v,r){v=r?new RegExp(v):v;return this.c[k]=v}};var classCache=new cache,cleanCache=new cache,attrCache=new cache,tokenCache=new cache;function classRegex(c){return classCache.g(c)||classCache.s(c,"(^|\\s+)"+c+"(\\s+|$)",1)}function each(a,fn){var i=0,l=a.length;for(;i<l;i++)fn(a[i])}function flatten(ar){for(var r=[],i=0,l=ar.length;i<l;++i)arrayLike(ar[i])?r=r.concat(ar[i]):r[r.length]=ar[i];return r}function arrayify(ar){var i=0,l=ar.length,r=[];for(;i<l;i++)r[i]=ar[i];return r}function previous(n){while(n=n.previousSibling)if(n[nodeType]==1)break;return n}function q(query){return query.match(chunker)}function interpret(whole,tag,idsAndClasses,wholeAttribute,attribute,qualifier,value,wholePseudo,pseudo,wholePseudoVal,pseudoVal){var i,m,k,o,classes;if(this[nodeType]!==1)return false;if(tag&&tag!=="*"&&this[tagName]&&this[tagName].toLowerCase()!==tag)return false;if(idsAndClasses&&(m=idsAndClasses.match(id))&&m[1]!==this.id)return false;if(idsAndClasses&&(classes=idsAndClasses.match(clas))){for(i=classes.length;i--;)if(!classRegex(classes[i].slice(1)).test(this.className))return false}if(pseudo&&qwery.pseudos[pseudo]&&!qwery.pseudos[pseudo](this,pseudoVal))return false;if(wholeAttribute&&!value){o=this.attributes;for(k in o){if(Object.prototype.hasOwnProperty.call(o,k)&&(o[k].name||k)==attribute){return this}}}if(wholeAttribute&&!checkAttr(qualifier,getAttr(this,attribute)||"",value)){return false}return this}function clean(s){return cleanCache.g(s)||cleanCache.s(s,s.replace(specialChars,"\\$1"))}function checkAttr(qualify,actual,val){switch(qualify){case"=":return actual==val;case"^=":return actual.match(attrCache.g("^="+val)||attrCache.s("^="+val,"^"+clean(val),1));case"$=":return actual.match(attrCache.g("$="+val)||attrCache.s("$="+val,clean(val)+"$",1));case"*=":return actual.match(attrCache.g(val)||attrCache.s(val,clean(val),1));case"~=":return actual.match(attrCache.g("~="+val)||attrCache.s("~="+val,"(?:^|\\s+)"+clean(val)+"(?:\\s+|$)",1));case"|=":return actual.match(attrCache.g("|="+val)||attrCache.s("|="+val,"^"+clean(val)+"(-|$)",1))}return 0}function _qwery(selector,_root){var r=[],ret=[],i,l,m,token,tag,els,intr,item,root=_root,tokens=tokenCache.g(selector)||tokenCache.s(selector,selector.split(tokenizr)),dividedTokens=selector.match(dividers);if(!tokens.length)return r;token=(tokens=tokens.slice(0)).pop();if(tokens.length&&(m=tokens[tokens.length-1].match(idOnly)))root=byId(_root,m[1]);if(!root)return r;intr=q(token);els=root!==_root&&root[nodeType]!==9&&dividedTokens&&/^[+~]$/.test(dividedTokens[dividedTokens.length-1])?function(r){while(root=root.nextSibling){root[nodeType]==1&&(intr[1]?intr[1]==root[tagName].toLowerCase():1)&&(r[r.length]=root)}return r}([]):root[byTag](intr[1]||"*");for(i=0,l=els.length;i<l;i++){if(item=interpret.apply(els[i],intr))r[r.length]=item}if(!tokens.length)return r;each(r,function(e){if(ancestorMatch(e,tokens,dividedTokens))ret[ret.length]=e});return ret}function is(el,selector,root){if(isNode(selector))return el==selector;if(arrayLike(selector))return!!~flatten(selector).indexOf(el);var selectors=selector.split(","),tokens,dividedTokens;while(selector=selectors.pop()){tokens=tokenCache.g(selector)||tokenCache.s(selector,selector.split(tokenizr));dividedTokens=selector.match(dividers);tokens=tokens.slice(0);if(interpret.apply(el,q(tokens.pop()))&&(!tokens.length||ancestorMatch(el,tokens,dividedTokens,root))){return true}}return false}function ancestorMatch(el,tokens,dividedTokens,root){var cand;function crawl(e,i,p){while(p=walker[dividedTokens[i]](p,e)){if(isNode(p)&&interpret.apply(p,q(tokens[i]))){if(i){if(cand=crawl(p,i-1,p))return cand}else return p}}}return(cand=crawl(el,tokens.length-1,el))&&(!root||isAncestor(cand,root))}function isNode(el,t){return el&&typeof el==="object"&&(t=el[nodeType])&&(t==1||t==9)}function uniq(ar){var a=[],i,j;o:for(i=0;i<ar.length;++i){for(j=0;j<a.length;++j)if(a[j]==ar[i])continue o;a[a.length]=ar[i]}return a}function arrayLike(o){return typeof o==="object"&&isFinite(o.length)}function normalizeRoot(root){if(!root)return doc;if(typeof root=="string")return qwery(root)[0];if(!root[nodeType]&&arrayLike(root))return root[0];return root}function byId(root,id,el){return root[nodeType]===9?root.getElementById(id):root.ownerDocument&&((el=root.ownerDocument.getElementById(id))&&isAncestor(el,root)&&el||!isAncestor(root,root.ownerDocument)&&select('[id="'+id+'"]',root)[0])}function qwery(selector,_root){var m,el,root=normalizeRoot(_root);if(!root||!selector)return[];if(selector===window||isNode(selector)){return!_root||selector!==window&&isNode(root)&&isAncestor(selector,root)?[selector]:[]}if(selector&&arrayLike(selector))return flatten(selector);if(m=selector.match(easy)){if(m[1])return(el=byId(root,m[1]))?[el]:[];if(m[2])return arrayify(root[byTag](m[2]));if(hasByClass&&m[3])return arrayify(root[byClass](m[3]))}return select(selector,root)}function collectSelector(root,collector){return function(s){var oid,nid;if(splittable.test(s)){if(root[nodeType]!==9){if(!(nid=oid=root.getAttribute("id")))root.setAttribute("id",nid="__qwerymeupscotty");s='[id="'+nid+'"]'+s;collector(root.parentNode||root,s,true);oid||root.removeAttribute("id")}return}s.length&&collector(root,s,false)}}var isAncestor="compareDocumentPosition"in html?function(element,container){return(container.compareDocumentPosition(element)&16)==16}:"contains"in html?function(element,container){container=container[nodeType]===9||container==window?html:container;return container!==element&&container.contains(element)}:function(element,container){while(element=element.parentNode)if(element===container)return 1;return 0},getAttr=function(){var e=doc.createElement("p");return(e.innerHTML='<a href="#x">x</a>')&&e.firstChild.getAttribute("href")!="#x"?function(e,a){return a==="class"?e.className:a==="href"||a==="src"?e.getAttribute(a,2):e.getAttribute(a)}:function(e,a){return e.getAttribute(a)}}(),hasByClass=!!doc[byClass],hasQSA=doc.querySelector&&doc[qSA],selectQSA=function(selector,root){var result=[],ss,e;try{if(root[nodeType]===9||!splittable.test(selector)){return arrayify(root[qSA](selector))}each(ss=selector.split(","),collectSelector(root,function(ctx,s){e=ctx[qSA](s);if(e.length==1)result[result.length]=e.item(0);else if(e.length)result=result.concat(arrayify(e))}));return ss.length>1&&result.length>1?uniq(result):result}catch(ex){}return selectNonNative(selector,root)},selectNonNative=function(selector,root){var result=[],items,m,i,l,r,ss;selector=selector.replace(normalizr,"$1");if(m=selector.match(tagAndOrClass)){r=classRegex(m[2]);items=root[byTag](m[1]||"*");for(i=0,l=items.length;i<l;i++){if(r.test(items[i].className))result[result.length]=items[i]}return result}each(ss=selector.split(","),collectSelector(root,function(ctx,s,rewrite){r=_qwery(s,ctx);for(i=0,l=r.length;i<l;i++){if(ctx[nodeType]===9||rewrite||isAncestor(r[i],root))result[result.length]=r[i]}}));return ss.length>1&&result.length>1?uniq(result):result},configure=function(options){if(typeof options[useNativeQSA]!=="undefined")select=!options[useNativeQSA]?selectNonNative:hasQSA?selectQSA:selectNonNative};configure({useNativeQSA:true});qwery.configure=configure;qwery.uniq=uniq;qwery.is=is;qwery.pseudos={};return qwery})},{}],"delegate-dom":[function(require,module,exports){module.exports=on;module.exports.on=on;module.exports.off=off;var matches=require("matches-dom-selector"),on=require("dom-event");function on(el,selector,type,fn,capture){return on(el,type,function(e){if(matches(e.target||e.srcElement,selector))fn.call(el,e)},capture)}function off(el,type,fn,capture){on.off(el,type,fn,capture)}},{"dom-event":1,"matches-dom-selector":2}]},{},[]);document.body.innerHTML='<div class="wrapper"><div class="btn-morph"> <a class="pure-button pure-button-confirm" href="#">Do Something</a></div></div><link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">';var morph=require("dom-morph");var delegate=require("delegate-dom");var addClass=function(el,className){if(el.classList){el.classList.add(className)}else{el.className+=" "+className}};var createButton=function(className){var but=document.createElement("a");but.className="pure-button";if(but.classList){but.classList.add(className)}else{but.className+=" "+className}return but};var button=document.querySelector(".pure-button-confirm");var btnWrapper=document.querySelector(".btn-morph");var buttonText=button.innerHTML;var buttonHolder=document.createElement("div");var mainButtonClick=function(e){console.log(arguments);console.log("boom!");e.preventDefault();var className="pure-button";var ok=createButton("pure-button-primary");ok.innerHTML="Are you sure?";var cancel=createButton("pure-button-cancel");cancel.innerHTML="No";delegate.on(document.body,"a.pure-button-cancel","click",function self(ev){ev.cancelBubble=true;button.innerHTML="";addClass(button,"pure-button");console.log(buttonText);button.innerHTML=buttonText;ev.preventDefault();button.addEventListener("click",mainButtonClick)});buttonHolder.appendChild(ok);buttonHolder.appendChild(cancel);morph(button,buttonHolder,400,function(){console.log("morph complete")})};button.addEventListener("click",mainButtonClick);

index.js

// example using the raf module from npm. try changing some values!
document.body.innerHTML ='<div class="wrapper"><div class="btn-morph"> <a class="pure-button pure-button-confirm" href="#">Do Something</a></div></div><link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">';
var morph = require('dom-morph');
var delegate = require('delegate-dom')


         var addClass = function (el, className) {
            if (el.classList) {
                el.classList.add(className);
            } else {
                el.className += ' ' + className; 
            }
        }
        var createButton = function (className) {
            var but = document.createElement('a');
            but.className = "pure-button";
            if (but.classList) {
                but.classList.add(className);
            } else {
                but.className += ' ' + className; 
            }
            return but;
        }
  		var button = document.querySelector('.pure-button-confirm');
			var btnWrapper = document.querySelector('.btn-morph');
        var buttonText = button.innerHTML;
				var buttonHolder = document.createElement('div')
        var mainButtonClick = function (e) {
          
            console.log(arguments)
            console.log('boom!')
            e.preventDefault(); 
            var className = "pure-button";
 
            var ok = createButton('pure-button-primary');
            ok.innerHTML = 'Are you sure?';
            var cancel = createButton('pure-button-cancel');
            cancel.innerHTML ='No'; 
        
delegate.on(document.body, 'a.pure-button-cancel', 'click', function self (ev) {
		                ev.cancelBubble = true;
                button.innerHTML = '';
                addClass(button, 'pure-button')
                console.log(buttonText);
                button.innerHTML = buttonText;
                ev.preventDefault();
                button.addEventListener('click', mainButtonClick );
});
            buttonHolder.appendChild(ok);
            buttonHolder.appendChild(cancel); 
          
          morph(button, buttonHolder, 400, function(){
    console.log('morph complete')
  })
        }
  		button.addEventListener('click', mainButtonClick );

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

requirebin sketch