requirebin sketch

index.js

'use strict';

var snabbdom = require('snabbdom');
var patch = snabbdom.init([require('snabbdom/modules/class'), 
  require('snabbdom/modules/props'), 
  require('snabbdom/modules/style'), 
  require('snabbdom/modules/eventlisteners')]);
var h = require('snabbdom/h.js');

var vnode;

var nextKey = 11;
var margin = 8;
var sortBy = 'rank';
var totalHeight = 0;
var originalData = [{
  rank: 1,
  title: 'The Shawshank Redemption',
  desc: 'Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.',
  elmHeight: 0
}, {
  rank: 2,
  title: 'The Godfather',
  desc: 'The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son.',
  elmHeight: 0
}, {
  rank: 3,
  title: 'The Godfather: Part II',
  desc: 'The early life and career of Vito Corleone in 1920s New York is portrayed while his son, Michael, expands and tightens his grip on his crime syndicate stretching from Lake Tahoe, Nevada to pre-revolution 1958 Cuba.',
  elmHeight: 0
}, {
  rank: 4,
  title: 'The Dark Knight',
  desc: 'When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.',
  elmHeight: 0
}, {
  rank: 5,
  title: 'Pulp Fiction',
  desc: 'The lives of two mob hit men, a boxer, a gangster\'s wife, and a pair of diner bandits intertwine in four tales of violence and redemption.',
  elmHeight: 0
}, {
  rank: 6,
  title: 'Schindler\'s List',
  desc: 'In Poland during World War II, Oskar Schindler gradually becomes concerned for his Jewish workforce after witnessing their persecution by the Nazis.',
  elmHeight: 0
}, {
  rank: 7,
  title: '12 Angry Men',
  desc: 'A dissenting juror in a murder trial slowly manages to convince the others that the case is not as obviously clear as it seemed in court.',
  elmHeight: 0
}, {
  rank: 8,
  title: 'The Good, the Bad and the Ugly',
  desc: 'A bounty hunting scam joins two men in an uneasy alliance against a third in a race to find a fortune in gold buried in a remote cemetery.',
  elmHeight: 0
}, {
  rank: 9,
  title: 'The Lord of the Rings: The Return of the King',
  desc: 'Gandalf and Aragorn lead the World of Men against Sauron\'s army to draw his gaze from Frodo and Sam as they approach Mount Doom with the One Ring.',
  elmHeight: 0
}, {
  rank: 10,
  title: 'Fight Club',
  desc: 'An insomniac office worker looking for a way to change his life crosses paths with a devil-may-care soap maker and they form an underground fight club that evolves into something much, much more...',
  elmHeight: 0
}];
var data = [originalData[0], originalData[1], originalData[2], originalData[3], originalData[4], originalData[5], originalData[6], originalData[7], originalData[8], originalData[9]];

function changeSort(prop) {
  sortBy = prop;
  data.sort(function(a, b) {
    if (a[prop] > b[prop]) {
      return 1;
    }
    if (a[prop] < b[prop]) {
      return -1;
    }
    return 0;
  });
  render();
}

function add() {
  var n = originalData[Math.floor(Math.random() * 10)];
  data = [{
    rank: nextKey++,
    title: n.title,
    desc: n.desc,
    elmHeight: 0
  }].concat(data);
  render();
  render();
}

function remove(movie) {
  data = data.filter(function(m) {
    return m !== movie;
  });
  render();
}

function movieView(movie) {
  return h('div.row', {
    key: movie.rank,
    style: {
      opacity: '0',
      transform: 'translate(-200px)',
      delayed: {
        transform: 'translateY(' + movie.offset + 'px)',
        opacity: '1'
      },
      remove: {
        opacity: '0',
        transform: 'translateY(' + movie.offset + 'px) translateX(200px)'
      }
    },
    hook: {
      insert: function insert(vnode) {
        movie.elmHeight = vnode.elm.offsetHeight;
      }
    }
  }, [h('div', {
    style: {
      fontWeight: 'bold'
    }
  }, movie.rank), h('div', movie.title), h('div', movie.desc), h('div.btn.rm-btn', {
    on: {
      click: [remove, movie]
    }
  }, 'x')]);
}

function render() {
  data = data.reduce(function(acc, m) {
    var last = acc[acc.length - 1];
    m.offset = last ? last.offset + last.elmHeight + margin : margin;
    return acc.concat(m);
  }, []);
  totalHeight = data[data.length - 1].offset + data[data.length - 1].elmHeight;
  vnode = patch(vnode, view(data));
}

function view(data) {
  return h('div', [h('h1', 'Top 10 movies'), h('div', [h('a.btn.add', {
    on: {
      click: add
    }
  }, 'Add'), 'Sort by: ', h('span.btn-group', [h('a.btn.rank', {
    class: {
      active: sortBy === 'rank'
    },
    on: {
      click: [changeSort, 'rank']
    }
  }, 'Rank'), h('a.btn.title', {
    class: {
      active: sortBy === 'title'
    },
    on: {
      click: [changeSort, 'title']
    }
  }, 'Title'), h('a.btn.desc', {
    class: {
      active: sortBy === 'desc'
    },
    on: {
      click: [changeSort, 'desc']
    }
  }, 'Description')])]), h('div.list', {
    style: {
      height: totalHeight + 'px'
    }
  }, data.map(movieView))]);
}


var container = document.getElementById('container');
vnode = patch(container, view(data));
render();

minified.js

setTimeout(function(){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 createElement(tagName){return document.createElement(tagName)}function createElementNS(namespaceURI,qualifiedName){return document.createElementNS(namespaceURI,qualifiedName)}function createTextNode(text){return document.createTextNode(text)}function insertBefore(parentNode,newNode,referenceNode){parentNode.insertBefore(newNode,referenceNode)}function removeChild(node,child){node.removeChild(child)}function appendChild(node,child){node.appendChild(child)}function parentNode(node){return node.parentElement}function nextSibling(node){return node.nextSibling}function tagName(node){return node.tagName}function setTextContent(node,text){node.textContent=text}module.exports={createElement:createElement,createElementNS:createElementNS,createTextNode:createTextNode,appendChild:appendChild,removeChild:removeChild,insertBefore:insertBefore,parentNode:parentNode,nextSibling:nextSibling,tagName:tagName,setTextContent:setTextContent}},{}],2:[function(require,module,exports){module.exports={array:Array.isArray,primitive:function(s){return typeof s==="string"||typeof s==="number"}}},{}],3:[function(require,module,exports){module.exports=function(sel,data,children,text,elm){var key=data===undefined?undefined:data.key;return{sel:sel,data:data,children:children,text:text,elm:elm,key:key}}},{}],snabbdom:[function(require,module,exports){"use strict";var VNode=require("./vnode");var is=require("./is");var domApi=require("./htmldomapi");function isUndef(s){return s===undefined}function isDef(s){return s!==undefined}var emptyNode=VNode("",{},[],undefined,undefined);function sameVnode(vnode1,vnode2){return vnode1.key===vnode2.key&&vnode1.sel===vnode2.sel}function createKeyToOldIdx(children,beginIdx,endIdx){var i,map={},key;for(i=beginIdx;i<=endIdx;++i){key=children[i].key;if(isDef(key))map[key]=i}return map}var hooks=["create","update","remove","destroy","pre","post"];function init(modules,api){var i,j,cbs={};if(isUndef(api))api=domApi;for(i=0;i<hooks.length;++i){cbs[hooks[i]]=[];for(j=0;j<modules.length;++j){if(modules[j][hooks[i]]!==undefined)cbs[hooks[i]].push(modules[j][hooks[i]])}}function emptyNodeAt(elm){return VNode(api.tagName(elm).toLowerCase(),{},[],undefined,elm)}function createRmCb(childElm,listeners){return function(){if(--listeners===0){var parent=api.parentNode(childElm);api.removeChild(parent,childElm)}}}function createElm(vnode,insertedVnodeQueue){var i,data=vnode.data;if(isDef(data)){if(isDef(i=data.hook)&&isDef(i=i.init)){i(vnode);data=vnode.data}}var elm,children=vnode.children,sel=vnode.sel;if(isDef(sel)){var hashIdx=sel.indexOf("#");var dotIdx=sel.indexOf(".",hashIdx);var hash=hashIdx>0?hashIdx:sel.length;var dot=dotIdx>0?dotIdx:sel.length;var tag=hashIdx!==-1||dotIdx!==-1?sel.slice(0,Math.min(hash,dot)):sel;elm=vnode.elm=isDef(data)&&isDef(i=data.ns)?api.createElementNS(i,tag):api.createElement(tag);if(hash<dot)elm.id=sel.slice(hash+1,dot);if(dotIdx>0)elm.className=sel.slice(dot+1).replace(/\./g," ");if(is.array(children)){for(i=0;i<children.length;++i){api.appendChild(elm,createElm(children[i],insertedVnodeQueue))}}else if(is.primitive(vnode.text)){api.appendChild(elm,api.createTextNode(vnode.text))}for(i=0;i<cbs.create.length;++i)cbs.create[i](emptyNode,vnode);i=vnode.data.hook;if(isDef(i)){if(i.create)i.create(emptyNode,vnode);if(i.insert)insertedVnodeQueue.push(vnode)}}else{elm=vnode.elm=api.createTextNode(vnode.text)}return vnode.elm}function addVnodes(parentElm,before,vnodes,startIdx,endIdx,insertedVnodeQueue){for(;startIdx<=endIdx;++startIdx){api.insertBefore(parentElm,createElm(vnodes[startIdx],insertedVnodeQueue),before)}}function invokeDestroyHook(vnode){var i,j,data=vnode.data;if(isDef(data)){if(isDef(i=data.hook)&&isDef(i=i.destroy))i(vnode);for(i=0;i<cbs.destroy.length;++i)cbs.destroy[i](vnode);if(isDef(i=vnode.children)){for(j=0;j<vnode.children.length;++j){invokeDestroyHook(vnode.children[j])}}}}function removeVnodes(parentElm,vnodes,startIdx,endIdx){for(;startIdx<=endIdx;++startIdx){var i,listeners,rm,ch=vnodes[startIdx];if(isDef(ch)){if(isDef(ch.sel)){invokeDestroyHook(ch);listeners=cbs.remove.length+1;rm=createRmCb(ch.elm,listeners);for(i=0;i<cbs.remove.length;++i)cbs.remove[i](ch,rm);if(isDef(i=ch.data)&&isDef(i=i.hook)&&isDef(i=i.remove)){i(ch,rm)}else{rm()}}else{api.removeChild(parentElm,ch.elm)}}}}function updateChildren(parentElm,oldCh,newCh,insertedVnodeQueue){var oldStartIdx=0,newStartIdx=0;var oldEndIdx=oldCh.length-1;var oldStartVnode=oldCh[0];var oldEndVnode=oldCh[oldEndIdx];var newEndIdx=newCh.length-1;var newStartVnode=newCh[0];var newEndVnode=newCh[newEndIdx];var oldKeyToIdx,idxInOld,elmToMove,before;while(oldStartIdx<=oldEndIdx&&newStartIdx<=newEndIdx){if(isUndef(oldStartVnode)){oldStartVnode=oldCh[++oldStartIdx]}else if(isUndef(oldEndVnode)){oldEndVnode=oldCh[--oldEndIdx]}else if(sameVnode(oldStartVnode,newStartVnode)){patchVnode(oldStartVnode,newStartVnode,insertedVnodeQueue);oldStartVnode=oldCh[++oldStartIdx];newStartVnode=newCh[++newStartIdx]}else if(sameVnode(oldEndVnode,newEndVnode)){patchVnode(oldEndVnode,newEndVnode,insertedVnodeQueue);oldEndVnode=oldCh[--oldEndIdx];newEndVnode=newCh[--newEndIdx]}else if(sameVnode(oldStartVnode,newEndVnode)){patchVnode(oldStartVnode,newEndVnode,insertedVnodeQueue);api.insertBefore(parentElm,oldStartVnode.elm,api.nextSibling(oldEndVnode.elm));oldStartVnode=oldCh[++oldStartIdx];newEndVnode=newCh[--newEndIdx]}else if(sameVnode(oldEndVnode,newStartVnode)){patchVnode(oldEndVnode,newStartVnode,insertedVnodeQueue);api.insertBefore(parentElm,oldEndVnode.elm,oldStartVnode.elm);oldEndVnode=oldCh[--oldEndIdx];newStartVnode=newCh[++newStartIdx]}else{if(isUndef(oldKeyToIdx))oldKeyToIdx=createKeyToOldIdx(oldCh,oldStartIdx,oldEndIdx);idxInOld=oldKeyToIdx[newStartVnode.key];if(isUndef(idxInOld)){api.insertBefore(parentElm,createElm(newStartVnode,insertedVnodeQueue),oldStartVnode.elm);newStartVnode=newCh[++newStartIdx]}else{elmToMove=oldCh[idxInOld];patchVnode(elmToMove,newStartVnode,insertedVnodeQueue);oldCh[idxInOld]=undefined;api.insertBefore(parentElm,elmToMove.elm,oldStartVnode.elm);newStartVnode=newCh[++newStartIdx]}}}if(oldStartIdx>oldEndIdx){before=isUndef(newCh[newEndIdx+1])?null:newCh[newEndIdx+1].elm;addVnodes(parentElm,before,newCh,newStartIdx,newEndIdx,insertedVnodeQueue)}else if(newStartIdx>newEndIdx){removeVnodes(parentElm,oldCh,oldStartIdx,oldEndIdx)}}function patchVnode(oldVnode,vnode,insertedVnodeQueue){var i,hook;if(isDef(i=vnode.data)&&isDef(hook=i.hook)&&isDef(i=hook.prepatch)){i(oldVnode,vnode)}var elm=vnode.elm=oldVnode.elm,oldCh=oldVnode.children,ch=vnode.children;if(oldVnode===vnode)return;if(!sameVnode(oldVnode,vnode)){var parentElm=api.parentNode(oldVnode.elm);elm=createElm(vnode,insertedVnodeQueue);api.insertBefore(parentElm,elm,oldVnode.elm);removeVnodes(parentElm,[oldVnode],0,0);return}if(isDef(vnode.data)){for(i=0;i<cbs.update.length;++i)cbs.update[i](oldVnode,vnode);i=vnode.data.hook;if(isDef(i)&&isDef(i=i.update))i(oldVnode,vnode)}if(isUndef(vnode.text)){if(isDef(oldCh)&&isDef(ch)){if(oldCh!==ch)updateChildren(elm,oldCh,ch,insertedVnodeQueue)}else if(isDef(ch)){if(isDef(oldVnode.text))api.setTextContent(elm,"");addVnodes(elm,null,ch,0,ch.length-1,insertedVnodeQueue)}else if(isDef(oldCh)){removeVnodes(elm,oldCh,0,oldCh.length-1)}else if(isDef(oldVnode.text)){api.setTextContent(elm,"")}}else if(oldVnode.text!==vnode.text){api.setTextContent(elm,vnode.text)}if(isDef(hook)&&isDef(i=hook.postpatch)){i(oldVnode,vnode)}}return function(oldVnode,vnode){var i,elm,parent;var insertedVnodeQueue=[];for(i=0;i<cbs.pre.length;++i)cbs.pre[i]();if(isUndef(oldVnode.sel)){oldVnode=emptyNodeAt(oldVnode)}if(sameVnode(oldVnode,vnode)){patchVnode(oldVnode,vnode,insertedVnodeQueue)}else{elm=oldVnode.elm;parent=api.parentNode(elm);createElm(vnode,insertedVnodeQueue);if(parent!==null){api.insertBefore(parent,vnode.elm,api.nextSibling(elm));removeVnodes(parent,[oldVnode],0,0)}}for(i=0;i<insertedVnodeQueue.length;++i){insertedVnodeQueue[i].data.hook.insert(insertedVnodeQueue[i])}for(i=0;i<cbs.post.length;++i)cbs.post[i]();return vnode}}module.exports={init:init}},{"./htmldomapi":1,"./is":2,"./vnode":3}]},{},[]);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}({"snabbdom/modules/class":[function(require,module,exports){function updateClass(oldVnode,vnode){var cur,name,elm=vnode.elm,oldClass=oldVnode.data.class||{},klass=vnode.data.class||{};for(name in oldClass){if(!klass[name]){elm.classList.remove(name)}}for(name in klass){cur=klass[name];if(cur!==oldClass[name]){elm.classList[cur?"add":"remove"](name)}}}module.exports={create:updateClass,update:updateClass}},{}]},{},[]);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}({"snabbdom/modules/props":[function(require,module,exports){function updateProps(oldVnode,vnode){var key,cur,old,elm=vnode.elm,oldProps=oldVnode.data.props||{},props=vnode.data.props||{};for(key in oldProps){if(!props[key]){delete elm[key]}}for(key in props){cur=props[key];old=oldProps[key];if(old!==cur&&(key!=="value"||elm[key]!==cur)){elm[key]=cur}}}module.exports={create:updateProps,update:updateProps}},{}]},{},[]);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}({"snabbdom/modules/style":[function(require,module,exports){var raf=typeof window!=="undefined"&&window.requestAnimationFrame||setTimeout;var nextFrame=function(fn){raf(function(){raf(fn)})};function setNextFrame(obj,prop,val){nextFrame(function(){obj[prop]=val})}function updateStyle(oldVnode,vnode){var cur,name,elm=vnode.elm,oldStyle=oldVnode.data.style||{},style=vnode.data.style||{},oldHasDel="delayed"in oldStyle;for(name in oldStyle){if(!style[name]){elm.style[name]=""}}for(name in style){cur=style[name];if(name==="delayed"){for(name in style.delayed){cur=style.delayed[name];if(!oldHasDel||cur!==oldStyle.delayed[name]){setNextFrame(elm.style,name,cur)}}}else if(name!=="remove"&&cur!==oldStyle[name]){elm.style[name]=cur}}}function applyDestroyStyle(vnode){var style,name,elm=vnode.elm,s=vnode.data.style;if(!s||!(style=s.destroy))return;for(name in style){elm.style[name]=style[name]}}function applyRemoveStyle(vnode,rm){var s=vnode.data.style;if(!s||!s.remove){rm();return}var name,elm=vnode.elm,idx,i=0,maxDur=0,compStyle,style=s.remove,amount=0,applied=[];for(name in style){applied.push(name);elm.style[name]=style[name]}compStyle=getComputedStyle(elm);var props=compStyle["transition-property"].split(", ");for(;i<props.length;++i){if(applied.indexOf(props[i])!==-1)amount++}elm.addEventListener("transitionend",function(ev){if(ev.target===elm)--amount;if(amount===0)rm()})}module.exports={create:updateStyle,update:updateStyle,destroy:applyDestroyStyle,remove:applyRemoveStyle}},{}]},{},[]);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={array:Array.isArray,primitive:function(s){return typeof s==="string"||typeof s==="number"}}},{}],"snabbdom/modules/eventlisteners":[function(require,module,exports){var is=require("../is");function arrInvoker(arr){return function(){if(!arr.length)return;arr.length===2?arr[0](arr[1]):arr[0].apply(undefined,arr.slice(1))}}function fnInvoker(o){return function(ev){if(o.fn===null)return;o.fn(ev)}}function updateEventListeners(oldVnode,vnode){var name,cur,old,elm=vnode.elm,oldOn=oldVnode.data.on||{},on=vnode.data.on;if(!on)return;for(name in on){cur=on[name];old=oldOn[name];if(old===undefined){if(is.array(cur)){elm.addEventListener(name,arrInvoker(cur))}else{cur={fn:cur};on[name]=cur;elm.addEventListener(name,fnInvoker(cur))}}else if(is.array(old)){old.length=cur.length;for(var i=0;i<old.length;++i)old[i]=cur[i];on[name]=old}else{old.fn=cur;on[name]=old}}if(oldOn){for(name in oldOn){if(on[name]===undefined){var old=oldOn[name];if(is.array(old)){old.length=0}else{old.fn=null}}}}}module.exports={create:updateEventListeners,update:updateEventListeners}},{"../is":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}({1:[function(require,module,exports){module.exports={array:Array.isArray,primitive:function(s){return typeof s==="string"||typeof s==="number"}}},{}],2:[function(require,module,exports){module.exports=function(sel,data,children,text,elm){var key=data===undefined?undefined:data.key;return{sel:sel,data:data,children:children,text:text,elm:elm,key:key}}},{}],"snabbdom/h.js":[function(require,module,exports){var VNode=require("./vnode");var is=require("./is");function addNS(data,children){data.ns="http://www.w3.org/2000/svg";if(children!==undefined){for(var i=0;i<children.length;++i){addNS(children[i].data,children[i].children)}}}module.exports=function h(sel,b,c){var data={},children,text,i;if(c!==undefined){data=b;if(is.array(c)){children=c}else if(is.primitive(c)){text=c}}else if(b!==undefined){if(is.array(b)){children=b}else if(is.primitive(b)){text=b}else{data=b}}if(is.array(children)){for(i=0;i<children.length;++i){if(is.primitive(children[i]))children[i]=VNode(undefined,undefined,undefined,children[i])}}if(sel[0]==="s"&&sel[1]==="v"&&sel[2]==="g"){addNS(data,children)}return VNode(sel,data,children,text,undefined)}},{"./is":1,"./vnode":2}]},{},[]);"use strict";var snabbdom=require("snabbdom");var patch=snabbdom.init([require("snabbdom/modules/class"),require("snabbdom/modules/props"),require("snabbdom/modules/style"),require("snabbdom/modules/eventlisteners")]);var h=require("snabbdom/h.js");var vnode;var nextKey=11;var margin=8;var sortBy="rank";var totalHeight=0;var originalData=[{rank:1,title:"The Shawshank Redemption",desc:"Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.",elmHeight:0},{rank:2,title:"The Godfather",desc:"The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son.",elmHeight:0},{rank:3,title:"The Godfather: Part II",desc:"The early life and career of Vito Corleone in 1920s New York is portrayed while his son, Michael, expands and tightens his grip on his crime syndicate stretching from Lake Tahoe, Nevada to pre-revolution 1958 Cuba.",elmHeight:0},{rank:4,title:"The Dark Knight",desc:"When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.",elmHeight:0},{rank:5,title:"Pulp Fiction",desc:"The lives of two mob hit men, a boxer, a gangster's wife, and a pair of diner bandits intertwine in four tales of violence and redemption.",elmHeight:0},{rank:6,title:"Schindler's List",desc:"In Poland during World War II, Oskar Schindler gradually becomes concerned for his Jewish workforce after witnessing their persecution by the Nazis.",elmHeight:0},{rank:7,title:"12 Angry Men",desc:"A dissenting juror in a murder trial slowly manages to convince the others that the case is not as obviously clear as it seemed in court.",elmHeight:0},{rank:8,title:"The Good, the Bad and the Ugly",desc:"A bounty hunting scam joins two men in an uneasy alliance against a third in a race to find a fortune in gold buried in a remote cemetery.",elmHeight:0},{rank:9,title:"The Lord of the Rings: The Return of the King",desc:"Gandalf and Aragorn lead the World of Men against Sauron's army to draw his gaze from Frodo and Sam as they approach Mount Doom with the One Ring.",elmHeight:0},{rank:10,title:"Fight Club",desc:"An insomniac office worker looking for a way to change his life crosses paths with a devil-may-care soap maker and they form an underground fight club that evolves into something much, much more...",elmHeight:0}];var data=[originalData[0],originalData[1],originalData[2],originalData[3],originalData[4],originalData[5],originalData[6],originalData[7],originalData[8],originalData[9]];function changeSort(prop){sortBy=prop;data.sort(function(a,b){if(a[prop]>b[prop]){return 1}if(a[prop]<b[prop]){return-1}return 0});render()}function add(){var n=originalData[Math.floor(Math.random()*10)];data=[{rank:nextKey++,title:n.title,desc:n.desc,elmHeight:0}].concat(data);render();render()}function remove(movie){data=data.filter(function(m){return m!==movie});render()}function movieView(movie){return h("div.row",{key:movie.rank,style:{opacity:"0",transform:"translate(-200px)",delayed:{transform:"translateY("+movie.offset+"px)",opacity:"1"},remove:{opacity:"0",transform:"translateY("+movie.offset+"px) translateX(200px)"}},hook:{insert:function insert(vnode){movie.elmHeight=vnode.elm.offsetHeight}}},[h("div",{style:{fontWeight:"bold"}},movie.rank),h("div",movie.title),h("div",movie.desc),h("div.btn.rm-btn",{on:{click:[remove,movie]}},"x")])}function render(){data=data.reduce(function(acc,m){var last=acc[acc.length-1];m.offset=last?last.offset+last.elmHeight+margin:margin;return acc.concat(m)},[]);totalHeight=data[data.length-1].offset+data[data.length-1].elmHeight;vnode=patch(vnode,view(data))}function view(data){return h("div",[h("h1","Top 10 movies"),h("div",[h("a.btn.add",{on:{click:add}},"Add"),"Sort by: ",h("span.btn-group",[h("a.btn.rank",{"class":{active:sortBy==="rank"},on:{click:[changeSort,"rank"]}},"Rank"),h("a.btn.title",{"class":{active:sortBy==="title"},on:{click:[changeSort,"title"]}},"Title"),h("a.btn.desc",{"class":{active:sortBy==="desc"},on:{click:[changeSort,"desc"]}},"Description")])]),h("div.list",{style:{height:totalHeight+"px"}},data.map(movieView))])}var container=document.getElementById("container");vnode=patch(container,view(data));render()},0);

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "snabbdom": "0.5.0"
  }
}

page-body.html

<style>
      body {
        background: #fafafa;
        font-family: sans-serif;
      }
      h1 {
        font-weight: normal;
      }
      .btn {
        display: inline-block;
        cursor: pointer;
        background: #fff;
        box-shadow: 0 0 1px rgba(0, 0, 0, .2);
        padding: .5em .8em;
        transition: box-shadow .05s ease-in-out;
        -webkit-transition: box-shadow .05s ease-in-out;
      }
      .btn:hover {
        box-shadow: 0 0 2px rgba(0, 0, 0, .2);
      }
      .btn:active, .active, .active:hover {
        box-shadow: 0 0 1px rgba(0, 0, 0, .2),
                    inset 0 0 4px rgba(0, 0, 0, .1);
      }
      .add {
        float: right;
      }
      #container {
        max-width: 42em;
        margin: 0 auto 2em auto;
      }
      .list {
        position: relative;
      }
      .row {
        overflow: hidden;
        position: absolute;
        box-sizing: border-box;
        width: 100%;
        left: 0px;
        margin: .5em 0;
        padding: 1em;
        background: #fff;
        box-shadow: 0 0 1px rgba(0, 0, 0, .2);
        transition: transform .5s ease-in-out, opacity .5s ease-out, left .5s ease-in-out;
        -webkit-transition: transform .5s ease-in-out, opacity .5s ease-out, left .5s ease-in-out;
      }
      .row div {
        display: inline-block;
        vertical-align: middle;
      }
      .row > div:nth-child(1) {
        width: 5%;
      }
      .row > div:nth-child(2) {
        width: 30%;
      }
      .row > div:nth-child(3) {
        width: 65%;
      }
      .rm-btn {
        cursor: pointer;
        position: absolute;
        top: 0;
        right: 0;
        color: #C25151;
        width: 1.4em;
        height: 1.4em;
        text-align: center;
        line-height: 1.4em;
        padding: 0;
      }
    </style>


<div id="container"></div>

page-head.html

<!-- contents of this file will be placed inside the <head> -->

requirebin.md

made with requirebin