jquery.ui.butter.min.js

/*
 * Butter Track Widgter jquery.ui.butter.js
 * Version 0.1.0
 * 
 * Developed by Bocoup on behalf of the Mozilla Foundation
 * Copyright (c) 2011 Bocoup, LLC
 * Authors: Alistair McDonald
 * Dual licensed under the MIT and GPL licenses.
 * http://code.bocoup.com/license/
 *
 */
(function(j,g,h,n){function l(a,d){h.extend(this,a);this.parent=d;this.xr=this.xl=this.oxr=this.oxl=0;this.hovered=false;this.draw();return this}var o=-1,m={x:0,y:0},k={trackEvent:{defaults:function(a,d,b,e,c){if(!isNaN(d)){b=a.createLinearGradient(0,0,0,c);b.addColorStop(0,"rgba( 255, 255, 0, 0.3 )");b.addColorStop(1,"rgba( 255, 255, 0, 0.3 )");a.fillStyle=b;a.fillRect(d,1.5,e,c-1.5);a.fillStyle="rgba(255,255,255,.125)";a.fillRect(d,0,e,c/2);a.lineWidth=0.5;a.fillStyle="#FF0";a.fillRect(d,3,1,c-
5);a.fillRect(d+e-1,3,1,c-5)}},hover:function(a,d,b,e,c){if(!isNaN(d)){a.fillStyle="#FF0";a.fillRect(d,1.5,e,c-1.5);b=a.createLinearGradient(0,0,0,c);b.addColorStop(0,"rgba(255,255,255,.7)");b.addColorStop(1,"rgba(0,0,0,.25)");a.fillStyle=b;a.fillRect(d,0,e,c);a.fillStyle="#FF0";a.fillRect(d,0,1,c);a.fillRect(d+e-1,0,1,c);a.fillRect(d,c-1.5,e,2);a.fillRect(d,0,e,1)}},thumb:{left:{defaults:function(a,d,b,e,c){a.fillStyle="#880";a.fillRect(d,0,8,c);a.fillStyle="#FF0";a.fillRect(d,0,1,c)}},right:{defaults:function(a,
d,b,e,c){a.fillStyle="#880";a.fillRect(d+e-9,0,8,c);a.fillStyle="#FF0";a.fillRect(d+e-1,0,1,c)}}}},zoomEvent:{defaults:function(a,d,b,e,c){b=a.createLinearGradient(0,0,0,c);b.addColorStop(0,"rgba( 128, 255, 0, 0.3 )");b.addColorStop(1,"rgba( 128, 255, 0, 0.3 )");a.fillStyle=b;a.fillRect(d,1.5,e,c-1.5);a.fillStyle="rgba(255,255,255,.125)";a.fillRect(d,0,e,c/2);a.lineWidth=0.5;a.fillStyle="#AF0";a.fillRect(d,3,1,c-5);a.fillRect(d+e-1,3,1,c-5)},hover:function(a,d,b,e,c){a.fillStyle="#AF0";a.fillRect(d,
1.5,e,c-1.5);b=a.createLinearGradient(0,0,0,c);b.addColorStop(0,"rgba(128,255,0,.7)");b.addColorStop(1,"rgba(0,0,0,.25)");a.fillStyle=b;a.fillRect(d,0,e,c);a.fillStyle="#AF0";a.fillRect(d,0,1,c);a.fillRect(d+e-1,0,1,c);a.fillRect(d,c-1.5,e,2);a.fillRect(d,0,e,1)},thumb:{left:{defaults:function(a,d,b,e,c){a.fillStyle="#480";a.fillRect(d,0,16,c);a.fillStyle="#AF0";a.fillRect(d,0,4,c)}},right:{defaults:function(a,d,b,e,c){a.fillStyle="#480";a.fillRect(d+e-17,0,16,c);a.fillStyle="#AF0";a.fillRect(d+e-
4,0,4,c)}}}}};l.prototype.draw=function(a,d){var b=this.xl=this.oxl+this.parent.width/this.parent.options.duration*this.inPoint,e=this.parent.width/this.parent.options.duration*(this.outPoint-this.inPoint),c=this.parent.height,f=this.parent.context,i;b=b*100/this.parent.zoomWindow.width-this.parent.zoomWindow.offsetX*100;e=e*100/this.parent.zoomWindow.width;this.xr=b+e;i=this.parent.options.mode==="smartZoom"?"zoomEvent":"trackEvent";if(this.hovered){k[i].hover(f,b,null,e,c);a&&k[i].thumb.left.defaults(f,
b,null,e,c);d&&k[i].thumb.right.defaults(f,b,null,e,c)}else k[i].defaults(f,b,null,e,c)};h.widget("butter.track",{options:{},_init:function(){this.index=o++;this._inView=[];this.hovering=null;this._loadedmetadata=function(a){this.options.duration=a.currentTarget.duration};this._playBar={position:0};this.width=this.element.width();this.height=this.element.height();h.extend(this,{context:function(a,d){var b;b=g.createElement("canvas");b.width=a;b.height=d;return b.getContext("2d")}(this.width,this.height),
scrubBar:{position:0,width:3},mouse:{x:0,y:0,down:false,lastX:0,lastY:0,mode:100},zoomWindow:{offsetX:0,width:100}});h.extend(this.options,{style:{outerBar:{lineWidth:1,strokeStyle:"#888"},playBar:{lineWidth:1,strokeStyle:"#f00"}}});this.options.mode==="smartZoom"&&this._inView.push(new l({inPoint:0,outPoint:100,duration:100},this));this.element.append(this.context.canvas);if(this.options.target){this.options.target.bind("timeupdate.track",h.proxy(this._timeupdate,this));this.options.target.bind("loadedmetadata.track",
h.proxy(this._loadedmetadata,this))}this.element.bind("mousemove.track",h.proxy(this._mousemove,this));this.element.bind("mousedown.track mouseup.track",h.proxy(this._mouseupdown,this));this.element.bind("mouseenter.track mouseleave.track",h.proxy(this._hover,this));this._draw();return this},_style:function(a){for(var d in a)this.context[d]=a[d]},killTrackEvent:function(a){var d=[];n.each(this._inView,function(b){b._id!==a._id&&d.push(b)});this._inView=d},addTrackEvent:function(a){return this._inView.push(new l(a,
this))},zoom:function(a){this.zoomWindow.offsetX=a.offsetX;this.zoomWindow.width=a.width;this._draw()},_draw:function(a,d){h(g).trigger("drawStart.track");var b=this.context,e=b.canvas,c=e.width,f=e.height,i=b.createLinearGradient(0,0,0,f);e=0;var p=this._inView.length;i.addColorStop(0,"#fff");i.addColorStop(1,"#B6B6B6");b.fillStyle=i;b.fillRect(0,0,c,f);b.strokeStyle="#9D9D9D";b.lineWidth=0;for(b.strokeRect(0.5,0.5,c-1,f-1);e<p;e++){b=this._inView[e];b.draw(a,d)}h(g).trigger("drawComplete.track")},
_timeupdate:function(a){this._playBar.position=a.currentTarget.currentTime;this._draw()},_mousemove:function(a){a=a.originalEvent;this.mouse.lastX=this.mouse.x;this.mouse.lastY=this.mouse.y;var d=j.scrollY!==null&&typeof j.scrollY!=="undefined"?j.scrollY:j.pageYOffset,b=0,e=this._inView.length,c,f;this.mouse.x=a.clientX-this.element[0].offsetLeft+(j.scrollX!==null&&typeof j.scrollX!=="undefined"?j.scrollX:j.pageXOffset)+this.element[0].parentNode.scrollLeft;this.mouse.y=a.clientY-this.element[0].offsetTop+
d;a=d=false;if(!this.mouse.down){for(this.mouse.hovering=null;b<e;b++){c=this._inView[b];if(c.xl<=this.mouse.x&&c.xr>=this.mouse.x){if(!c.hovered){c.hovered=true;this.mouse.hovering=c}this.mouse.hovering=c;this.mouse.hovering.grabX=this.mouse.x-this.mouse.hovering.xl+1;if(this.mouse.x>=c.xl&&this.mouse.x<=c.xl+8){g.body.style.cursor="w-resize";a=true}else if(this.mouse.x>=c.xr-8&&this.mouse.x<=c.xr){g.body.style.cursor="e-resize";d=true}else g.body.style.cursor="move"}else if(c.hovered){c.hovered=
false;this.mouse.hovering=null;this._draw()}}if(!this.mouse.hovering){this.mouse.mode=100;g.body.style.cursor="auto";return}}c=this.mouse.hovering;if(this.mouse.down){if(this.mouse.mode===100&&this.mouse.hovering)if(this.mouse.x>=c.xl&&this.mouse.x<=c.xl+8)this.mouse.mode=102;else if(this.mouse.x>=c.xr-8&&this.mouse.x<=c.xr)this.mouse.mode=101;else if(this.mouse.x>=c.xl+8&&this.mouse.x<=c.xr-8)this.mouse.mode=103;a=d=false;if([101,102].indexOf(this.mouse.mode)>-1){b=false;if(this.mouse.hovering.xl+
20>this.mouse.hovering.xr){this.mouse.hovering.popcornEvent.start=this.mouse.hovering.inPoint-2;b=true}if(this.mouse.hovering.xr-20<this.mouse.hovering.xl){this.mouse.hovering.popcornEvent.end=this.mouse.hovering.outPoint+2;b=true}if(this.mouse.lastX<this.mouse.hovering.xl&&this.mouse.mode===102)b=false;if(this.mouse.lastX>this.mouse.hovering.xr&&this.mouse.mode===101)b=false;if(b){this._draw(a,d);return}}if(this.mouse.mode===101){d=true;g.body.style.cursor="e-resize";this.mouse.hovering.outPoint=
this.options.duration/this.width*(this.mouse.x+4);if(this.options.mode!=="smartZoom")this.mouse.hovering.popcornEvent.end=this.mouse.hovering.outPoint;else{b=this.options.linkedTracks;for(f in b)b[f].track("zoom",{offsetX:this.mouse.hovering.inPoint,width:this.mouse.hovering.outPoint-this.mouse.hovering.inPoint})}}else if(this.mouse.mode===102){a=true;g.body.style.cursor="w-resize";this.mouse.hovering.inPoint=this.options.duration/this.width*(this.mouse.x-4);if(this.options.mode!=="smartZoom")this.mouse.hovering.popcornEvent.start=
this.mouse.hovering.inPoint;else{b=this.options.linkedTracks;for(f in b)b[f].track("zoom",{offsetX:this.mouse.hovering.inPoint,width:this.mouse.hovering.outPoint-this.mouse.hovering.inPoint})}}else if(this.mouse.mode===103){g.body.style.cursor="move";b=this.mouse.hovering.outPoint-this.mouse.hovering.inPoint;this.mouse.hovering.inPoint=(this.mouse.x-this.mouse.hovering.grabX)/this.width*this.options.duration;this.mouse.hovering.outPoint=this.mouse.hovering.inPoint+b;if(this.options.mode!=="smartZoom"){this.mouse.hovering.popcornEvent.start=
this.mouse.hovering.inPoint;this.mouse.hovering.popcornEvent.end=this.mouse.hovering.outPoint}else{b=this.options.linkedTracks;for(f in b)b[f].track("zoom",{offsetX:this.mouse.hovering.inPoint,width:this.mouse.hovering.outPoint-this.mouse.hovering.inPoint})}}}this._draw(a,d)},_mouseupdown:function(a){if(a.type==="mousedown"){this.mouse.down=true;$.extend(m,{x:a.pageX,y:a.pageY})}else if(a.type==="mouseup"){if(this.mouse.hovering&&this.mouse.down){this.options.mode!=="smartZoom"&&m.x===a.pageX&&this.mouse.hovering.editEvent(a);
this.mouse.hovering=null}this.mouse.down=false;this._draw()}},_hover:function(a){if(a.type==="mouseenter")this._draw();else if(a.type==="mouseleave"){if(this.mouse.hovering)this.mouse.hovering.hovered=false;g.body.style.cursor="auto";this._draw()}},myPublicMethod:function(){},_setOption:function(){},destroy:function(){},option:function(){},setData:function(){},enable:function(){},disable:function(){}})})(this,this.document,this.jQuery,this._,this.Popcorn);