vimeowrap.playlist.js

(function(t){t.playlist=function(e,i){var o=this;var s;var n;var a;var l={position:"bottom",size:200,offsetx:2,offsety:2,autoplay:false,template:'<a href="{{url}}" title="{{title}}"><span class="shade"></span><span class="border"></span><img src="{{thumbnail_'+(i.thumb&&i.thumb.quality?i.thumb.quality:"small")+'}}" alt="" /><span class="title">{{title|truncate:30}}</span><span class="byline">from <b>{{user_name}}</b> <time datetime="{{upload_date}}">{{upload_date|timesince}} ago</time></span><span class="desc">{{description|striptags|truncate:50}}</span><span class="duration">{{duration|time}}</span></a>',style:"",thumb:{width:80,height:60}};i=t.utils.extend(l,i);this.config=i;this.setup=function(){var o=["#{{id}} {background-color:#000; color:#fff; font:normal 12px/14px helvetica,arial,sans-serif; -webkit-tap-highlight-color:rgba(0,0,0,0);}","ul {list-style:none; margin:0; padding:0 9px 0 0;}","li {list-style:none; clear:both; display:block; height:{{thumb_height}}px; line-height:16px; margin:0 0 2px; padding:0; overflow:hidden;}","li:last-child {margin:0;}","li.selected {opacity:.4; filter:alpha(opacity=40);}","li:nth-child(odd) > a {background-color:rgba(255,255,255,.07);}","li > a {display:block; position:relative; height:{{thumb_height}}px; text-decoration:none;}","a:active, #{{id}} a:focus {outline:none;}","span {color:#fff; display:block;}",".shade {position:absolute; top:0; right:0; bottom:0; left:0;}","img {border:none; float:left; width:{{thumb_width}}px; height:{{thumb_height}}px; margin:0 7px 0 0;}",".border {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; position:absolute; left:0; top:0; border-right:rgba(255, 255, 255, .1) 1px solid; width:{{thumb_width}}px; height:{{thumb_height}}px;}",".title {font-weight:bold; padding-top:5px; font-size:14px;}",".byline {color:#9DA2A8;}",".byline time {font-size:11px;}",".desc {color:#71767A;}",".duration {position:absolute; top:3px; right:7px;}"];if("ontouchstart"in window){o.push("li .pressed {background-color:rgba(255,255,255,0.15);}")}else{o.push("li > a:hover {background-color:rgba(255,255,255,0); text-decoration:none;}");o.push("li > a:hover .shade {background-color:rgba(255,255,255,0.15);}")}o=o.join(" #{{id}} ");o+=i.style;var l=document.createTextNode(o.populate({id:e.id+"_playlist",color:e.config.color,thumb_width:i.thumb.width,thumb_height:i.thumb.height}));var d=document.createElement("style");d.type="text/css";t.utils.prepend(d,document.getElementsByTagName("head")[0]);if(d.styleSheet){d.styleSheet.cssText=l.nodeValue}else{d.appendChild(l)}s=document.createElement("div");s.id=e.id+"_playlist";e.container.appendChild(s);t.utils.css(s,{width:this.width,height:this.height,position:"absolute",left:this.x,top:this.y});new t.playlist.NoClickDelay(s);var f=document.createElement("div");f.id=s.id+"_wrap";s.appendChild(f);t.utils.css(f,{width:this.width-i.offsetx*2,height:this.height-i.offsety*2,position:"absolute",left:i.offsetx,top:i.offsety});n=document.createElement("ul");n.id=s.id+"_list";f.appendChild(n);t.utils.css(n,{position:"absolute"});n.onclick=h;a=new SkinnyScroll(f);e.events.playlist.add(r);e.events.playlistItem.add(c)};function r(t){o.length=t.length;var e={striptags:function(t){return t.replace(/<\/?.*?>/g,"")},truncate:function(t,e){if(t.length>e){t=t.slice(0,e)+"..."}return t},timesince:function(t){var e=new Date(t.replace(/-/g,"/")).getTime();var i={second:((new Date).getTime()-e)/1e3};var o=["second","minute","hour","day","week","month","year"];var s=[1,60,60,24,7,4.34812,12];for(var n=1;n<o.length;n++){i[o[n]]=i[o[n-1]]/s[n];if(i[o[n-1]]<s[n]){t=Math.floor(i[o[n-1]]);return t+" "+o[n-1]+(t===1?"":"s")}}t=Math.floor(i[o[n-1]]);return t+" "+o[n-1]+(t===1?"":"s")},time:function(t){var e=Math.floor(t/3600);var i=Math.floor(t%3600/60);var o=Math.floor(t%3600%60);return(e===0?"":e.toString()+":")+i.toString()+":"+(o<10?"0"+o.toString():o.toString())}};var n=[];var l=i.template;for(var r=0;r<t.length;r++){n.push("<li>");n.push(l.populate(t[r],e));n.push("</li>")}var h=document.getElementById(s.id+"_list");h.innerHTML=n.join("");a.redraw()}function h(t){var o=t||window.event;var s=o.target||o.srcElement;if(s&&s.nodeName.toLowerCase()!=="li"){while(s){s=s.parentNode;if(s.nodeName.toLowerCase()==="li")break}}var n=0;var a=s.parentNode.children;for(var l=0;l<a.length;l++){n=l;if(a[l]===s)break}if(n!==e.config.item){e.playlistItem(n,i.autoplay)}return false}function c(t,e){var i=n.children;for(var o=0;o<i.length;o++){i[o].className=i[o].className.replace(/ ?selected/gi,"")}i[e].className+=" selected"}}})(vimeowrap);(function(t){function e(t){if("ontouchstart"in window){this.element=typeof t==="object"?t:document.getElementById(t);this.element.addEventListener("touchstart",this,false);this.element.addEventListener("click",this,true)}}e.prototype={handleEvent:function(t){this[t.type](t)},touchstart:function(t){this.moved=false;this.target=document.elementFromPoint(t.targetTouches[0].clientX,t.targetTouches[0].clientY);if(this.target.nodeType==3)this.target=target.parentNode;this.element.addEventListener("touchmove",this,false);this.element.addEventListener("touchend",this,false)},touchmove:function(t){this.moved=true;this.target.className=this.target.className.replace(/ ?pressed/gi,"")},touchend:function(t){t.preventDefault();this.element.removeEventListener("touchmove",this,false);this.element.removeEventListener("touchend",this,false);if(!this.moved&&this.target){this.target.className+=" pressed";var e=this.target;setTimeout(function(){e.className=e.className.replace(/ ?pressed/gi,"")},150);var i=document.createEvent("MouseEvents");i.initEvent("click",true,true);this.target.dispatchEvent(i)}this.target=undefined},click:function(t){if(this.target===undefined){t.stopImmediatePropagation();t.preventDefault()}}};t.NoClickDelay=e})(vimeowrap.playlist);(function(t){var e=function(t,i){var o=null;this.hasTouch="ontouchstart"in window,this.config={color:"#fff",radius:7,width:7};for(var s in i)this.config[s]=i[s];var n=typeof t=="object"?t:document.getElementById(t);e.Utils.css(n,{overflow:"hidden"});var a=n.children[0];e.Utils.css(a,{position:"absolute",left:0,top:0,right:0}),this.hasTouch?o=new e.TouchMode(this,n,a):(e.Utils.css(a,{overflow:"hidden",bottom:0}),o=new e.MouseMode(this,n,a)),o.redraw(),e.Utils.on(window,"resize",o.redraw),this.scrollTop=function(t){return o.scrollTop(t)},this.redraw=function(){return o.redraw()},this.destroy=function(){e.Utils.off(window,"resize",o.redraw),o.destroy()}};t.SkinnyScroll=e})(window),function(t){t.MouseMode=function(e,i,o){function s(t,e){t.preventDefault?t.preventDefault():t.returnValue=!1,n.scrollTop(n.scrollTop()-e*20)}var n=this,a=new t.Scrollbar(e,i,!0),l=new t.Mousewheel(i);l.on(s),this.scrollTop=function(t){return t===void 0?-o.scrollTop:(o.scrollTop=-t,a.setY(o.scrollTop),void 0)},this.redraw=function(){var t=a.redraw(o.scrollHeight,o.offsetHeight);return n.scrollTop(n.scrollTop()),t},this.destroy=function(){l.off(s),a.destroy()}}}(SkinnyScroll),function(t){t.TouchMode=function(e,i,o){function s(){clearInterval(n),o.style.WebkitTransitionDuration="0s"}var n,a=this,l=new t.Scrollbar(e,i),r="WebKitCSSMatrix"in window,h=r&&"m11"in new WebKitCSSMatrix;this.wrap=i,this.view=o,this.x=0,this.y=0,t.Utils.on(o,"touchstart",this),t.Utils.on(o,"webkitTransitionEnd",s),o.style.WebkitTransition="-webkit-transform 1s cubic-bezier(0,0,0.2,1)",this.scrollTop=function(t){return t===void 0?(this.clampY(),this.y):(this.setY(t),l.setY(-t),void 0)},this.setY=function(t){this.y=t,o.style.WebkitTransform=h?"translate3d(0, "+t+"px, 0)":"translate(0, "+t+"px)"},this.getY=function(){if(r){var t=window.getComputedStyle(this.view).webkitTransform;if(t&&t!=="none"){var e=new WebKitCSSMatrix(t);return e.f}}return this.y},this.redraw=function(){var t=l.redraw(o.offsetHeight,i.offsetHeight);return a.scrollTop(a.scrollTop()),t},this.destroy=function(){t.Utils.off(o,"touchstart",this),t.Utils.off(o,"webkitTransitionEnd",s),o.style.WebkitTransition="",l.destroy()},this.animateScrollbar=function(){clearInterval(n),n=setInterval(function(){l.setY(-a.getY())},1e3/30)}},t.TouchMode.prototype={handleEvent:function(t){this[t.type](t)},touchstart:function(e){this.view.offsetHeight>this.wrap.offsetHeight&&(this.moved=!1,this.startX=e.touches[0].pageX-this.x,this.startY=e.touches[0].pageY-this.y,this.view.style.WebkitTransitionDuration="0s",t.Utils.on(this.view,"touchmove",this),t.Utils.on(this.view,"touchend",this))},touchmove:function(t){this.lastX=this.x,this.lastY=this.y,this.x=t.touches[0].pageX-this.startX,this.y=t.touches[0].pageY-this.startY,t.touches.length===1&&Math.abs(this.y-this.lastY)>Math.abs(this.x-this.lastX)&&(t.preventDefault(),this.moved=!0,this.lastMoveTime=(new Date).getTime(),this.scrollTop(this.y))},touchend:function(e){if(t.Utils.off(this.view,"touchmove",this),t.Utils.off(this.view,"touchend",this),this.moved){e.preventDefault();var i=this.y-this.lastY,o=(new Date).getTime()-this.lastMoveTime+1;this.y=this.y+i*200/o,this.view.style.WebkitTransitionDuration=this.clampY()?"0.5s":"1s",this.setY(this.y),this.animateScrollbar()}},clampY:function(){return 0>this.y?this.wrap.offsetHeight-this.view.offsetHeight>this.y?(this.y=this.wrap.offsetHeight-this.view.offsetHeight,!0):void 0:(this.y=0,!0)}}}(SkinnyScroll),function(t){t.Mousewheel=function(t){var e=this;e.el=typeof t=="object"?t:document.getElementById(t),e.calls=[],e.t=function(t){e.to(t)}},t.Mousewheel.prototype={on:function(e){this.calls.length===0&&t.Utils.on(this.el,"DOMMouseScroll mousewheel",this.t),this.calls.push(e)},off:function(e){if(e)for(var i=0;this.calls.length>i;i++)this.calls[i]===e&&(this.calls.splice(i,1),i--);else this.calls=[];this.calls.length===0&&t.Utils.off(this.el,"DOMMouseScroll mousewheel",this.t)},to:function(t){t=t||window.event;var e=0;t.wheelDelta&&(e=-t.wheelDelta/120),t.detail&&(e=t.detail/3);var i=[].slice.call(arguments,1);i.unshift(t,e);for(var o=0;this.calls.length>o;o++)typeof this.calls[o]=="function"&&this.calls[o].apply(this,i)}}}(SkinnyScroll),function(t){t.Scrollbar=function(e,i,o){function s(e){e=e||window.event,l(e),e.preventDefault&&e.preventDefault(),t.Utils.on(document,"mousemove",n),t.Utils.on(document,"mouseup",a),t.Utils.on(r.hand,"mouseup",a),r.diff=e.pageY-r.hand.offsetTop}function n(t){return t=t||window.event,l(t),e.scrollTop(-(t.pageY-r.diff)*r.ratio),!1}function a(e){e=e||window.event,t.Utils.off(document,"mousemove",n),t.Utils.off(document,"mouseup",a),t.Utils.off(r.hand,"mouseup",a)}function l(t){if(t.pageX===void 0&&t.clientX!==void 0){var e=document.documentElement,i=document.body;t.pageX=t.clientX+(e&&e.scrollLeft||i&&i.scrollLeft||0)-(e&&e.clientLeft||i&&i.clientLeft||0),t.pageY=t.clientY+(e&&e.scrollTop||i&&i.scrollTop||0)-(e&&e.clientTop||i&&i.clientTop||0)}}var r=this,h=e.config.color,c=e.config.radius,d=e.config.width;i=typeof i=="object"?i:document.getElementById(i),this.rail=t.Utils.add("div",i,{position:"absolute",right:0,top:0,bottom:0,width:d,zIndex:90}),this.rail.className="skinnyscrollbar",this.back=t.Utils.add("div",this.rail,{backgroundColor:h,filter:"alpha(opacity=20)",opacity:.2,borderRadius:c,position:"absolute",left:0,top:0,bottom:0,width:d}),this.hand=t.Utils.add("div",this.rail,{backgroundColor:h,filter:"alpha(opacity=40)",opacity:.4,borderRadius:c,position:"absolute",left:0,top:0,width:d,height:7}),this.diff=t.Utils.getOffset(this.hand).top,o&&(t.Utils.on(this.hand,"mousedown",s),t.Utils.on(this.rail,"mousedown",n))},t.Scrollbar.prototype={redraw:function(t,e){var i=t>e;return this.rail.style.display=i?"block":"none",this.scrollHeight=t,this.height=e,this.handHeight=Math.max(e/t*this.rail.offsetHeight,25),this.ratio=(t-e)/(this.rail.offsetHeight-this.handHeight),i},destroy:function(){var t=this.rail.parentNode;t&&t.removeChild(this.rail)},setY:function(t){var e=t/this.ratio;isNaN(e)&&(e=0);var i=e+this.handHeight-this.rail.offsetHeight,o=this.hand.style;0>t?(o.height=Math.max(this.handHeight+e,25)+"px",o.top="0px"):i>0?(o.height=Math.max(this.handHeight-i,25)+"px",o.bottom="0px",o.top="auto"):(o.height=this.handHeight+"px",o.top=e+"px")}}}(SkinnyScroll),function(t){t.Utils=function(){},t.Utils.add=function(e,i,o){var s=document.createElement(e);return i.appendChild(s),t.Utils.css(s,o),s},t.Utils.css=function(t,e){if(t)for(var i in e)if(e[i]!==void 0){if(typeof e[i]=="number"&&i!="zIndex"&&i!="opacity"){if(isNaN(e[i]))continue;e[i]=Math.ceil(e[i])+"px"}try{t.style[i]=e[i]}catch(o){}}},t.Utils.getOffset=function(t){var e=0,i=0;while(t&&!isNaN(t.offsetLeft)&&!isNaN(t.offsetTop))e+=t.offsetLeft-t.scrollLeft,i+=t.offsetTop-t.scrollTop,t=t.offsetParent;return{top:i,left:e}},t.Utils.on=function(t,e,i){if(t!==null&&t!==void 0)for(var o=e.split(" "),s=0;o.length>s;s++)t.addEventListener?t.addEventListener(o[s],i,!1):t.attachEvent?t.attachEvent("on"+o[s],i):t["on"+o[s]]=i},t.Utils.off=function(t,e,i){if(t!==null&&t!==void 0)for(var o=e.split(" "),s=0;o.length>s;s++)t.removeEventListener?t.removeEventListener(o[s],i,!1):t.detachEvent?t.detachEvent("on"+o[s],i):t["on"+o[s]]=null}}(SkinnyScroll)