magnolia-fan
parent
eb243dcd0e
commit
3a40da1dbe
|
|
@ -13,28 +13,28 @@
|
|||
<div class="inner-1">
|
||||
<div id="player">
|
||||
<audio autoplay preload></audio>
|
||||
<div class="prev"><img src="/images/player/prev.svg" alt="prev" /></div>
|
||||
<div class="play"><img src="/images/player/play.svg" alt="play" /></div>
|
||||
<div class="pause" style="display:none"><img src="/images/player/pause.svg" alt="pause" /></div>
|
||||
<div class="next"><img src="/images/player/next.svg" alt="pause" /></div>
|
||||
<div class="prev" title="Play Previous Track"><img src="/images/player/prev.svg" alt="prv" /></div>
|
||||
<div class="play" title="Play"><img src="/images/player/play.svg" alt="ply" /></div>
|
||||
<div class="pause" title="Pause" style="display:none"><img src="/images/player/pause.svg" alt="pause" /></div>
|
||||
<div class="next" title="Play Next Track"><img src="/images/player/next.svg" alt="pse" /></div>
|
||||
<div class="time-played">0:00</div>
|
||||
<div class="progress">
|
||||
<div class="track-title">No track</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-loaded">
|
||||
<div class="progress-point"></div>
|
||||
<div title="Drag It Now!" class="progress-point"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="time-left">0:00</div>
|
||||
<div title="Play Tracks In Random Order" class="shuffle"><img src="/images/player/shuffle.svg" alt="shu" /></div>
|
||||
<div title="Repeat Playlist" class="repeat"><img src="/images/player/shuffle.svg" alt="rep" /></div>
|
||||
<div title="Show/Hide Playlist" class="playlist"><img src="/images/player/playlist.svg" alt="pls" /></div>
|
||||
</div>
|
||||
<div id="playlist">
|
||||
<div class="show-button"></div>
|
||||
<ul style="display:none;">
|
||||
</ul>
|
||||
<ul class="list"></ul>
|
||||
</div>
|
||||
<%= yield %>
|
||||
<a href="" onclick="addToPlaylist('Artist', 'Track', 123, 123);return(false);">add</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="1000" height="1000" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="50" width="400" height="1000" style="fill:rgb(200,200,200);"/>
|
||||
<rect x="600" width="400" height="1000" style="fill:rgb(200,200,200);"/>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 372 B After Width: | Height: | Size: 273 B |
|
|
@ -0,0 +1,10 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<svg width="700" height="920" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="50" y="50" rx="50" ry="50" width="600" height="820" style="stroke:rgb(200,200,200);stroke-width:50;"/>
|
||||
<rect x="150" y="150" width="400" height="50" style="fill:rgb(200,200,200);"/>
|
||||
<rect x="150" y="265" width="400" height="50" style="fill:rgb(200,200,200);"/>
|
||||
<rect x="150" y="380" width="400" height="50" style="fill:rgb(200,200,200);"/>
|
||||
<rect x="150" y="495" width="400" height="50" style="fill:rgb(200,200,200);"/>
|
||||
<rect x="150" y="610" width="400" height="50" style="fill:rgb(200,200,200);"/>
|
||||
<rect x="150" y="725" width="400" height="50" style="fill:rgb(200,200,200);"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 718 B |
|
|
@ -0,0 +1,41 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<svg width="700" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M100 400
|
||||
|
||||
L250 400
|
||||
|
||||
C300 400
|
||||
325 375
|
||||
350 325
|
||||
|
||||
L400 225
|
||||
|
||||
C425 175
|
||||
450 150
|
||||
500 150
|
||||
|
||||
L600 150
|
||||
|
||||
|
||||
M100 150
|
||||
|
||||
L250 150
|
||||
|
||||
C300 150
|
||||
325 175
|
||||
350 225
|
||||
|
||||
L400 325
|
||||
|
||||
C425 375
|
||||
450 400
|
||||
500 400
|
||||
|
||||
L600 400
|
||||
" style="stroke:rgb(200,200,200);stroke-width:70;" />
|
||||
|
||||
<path d="M295 300 L371 150" style="stroke:rgb(0,0,0);stroke-width:50;" />
|
||||
<path d="M379 400 L455 250" style="stroke:rgb(0,0,0);stroke-width:50;" />
|
||||
<polygon points="599,70 680,150 599,230" style="fill:rgb(200,200,200);"/>
|
||||
<polygon points="599,320 680,400 599,480" style="fill:rgb(200,200,200);"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 757 B |
|
|
@ -0,0 +1,15 @@
|
|||
/*
|
||||
* jQuery.fn.rand();
|
||||
*
|
||||
* Return a random, but defined numbers of elements from a jQuery Object.
|
||||
* $('element').rand(); // returns one element from the jQuery Object.
|
||||
* $('element').rand(4); // returns four elements from the jQuery Object.
|
||||
*
|
||||
* Version 0.8.5
|
||||
* www.labs.skengdon.com/rand
|
||||
* www.labs.skengdon.com/rand/js/rand.min.js
|
||||
*
|
||||
* And:
|
||||
* http://phpjs.org/functions/array_rand:332
|
||||
*/
|
||||
;(function($){$.fn.rand=function(number){var array_rand=function(input,num_req){var indexes=[];var ticks=num_req||1;var checkDuplicate=function(input,value){var exist=false,index=0;while(index<input.length){if(input[index]===value){exist=true;break;};index++;};return exist;};while(true){var rand=Math.floor((Math.random()*input.length));if(indexes.length===ticks){break;};if(!checkDuplicate(indexes,rand)){indexes.push(rand);}};return((ticks==1)?indexes.join():indexes);};if(typeof number!=='number')var number=1;if(number>this.length)number=this.length;var numbers=array_rand(this,number);var $return=[];for(var i=0;i<number;i++){$return[i]=this.get(numbers[i]);};return $($return);};}(jQuery));
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/*
|
||||
* jScrollPane - v2.0.0beta10 - 2011-04-04
|
||||
* http://jscrollpane.kelvinluck.com/
|
||||
*
|
||||
* Copyright (c) 2010 Kelvin Luck
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
*/
|
||||
(function(b,a,c){b.fn.jScrollPane=function(f){function d(E,P){var aA,R=this,Z,al,w,an,U,aa,z,r,aB,aG,aw,j,J,i,k,ab,V,ar,Y,u,B,at,ag,ao,H,m,av,az,y,ax,aJ,g,M,ak=true,Q=true,aI=false,l=false,aq=E.clone(false,false).empty(),ad=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aJ=E.css("paddingTop")+" "+E.css("paddingRight")+" "+E.css("paddingBottom")+" "+E.css("paddingLeft");g=(parseInt(E.css("paddingLeft"),10)||0)+(parseInt(E.css("paddingRight"),10)||0);function au(aU){var aS,aT,aN,aP,aO,aL,aK,aR,aQ=false,aM=false;aA=aU;if(Z===c){aK=E.scrollTop();aR=E.scrollLeft();E.css({overflow:"hidden",padding:0});al=E.innerWidth()+g;w=E.innerHeight();E.width(al);Z=b('<div class="jspPane" />').css("padding",aJ).append(E.children());an=b('<div class="jspContainer" />').css({width:al+"px",height:w+"px"}).append(Z).appendTo(E)}else{E.css("width","");aQ=aA.stickToBottom&&L();aM=aA.stickToRight&&C();aL=E.innerWidth()+g!=al||E.outerHeight()!=w;if(aL){al=E.innerWidth()+g;w=E.innerHeight();an.css({width:al+"px",height:w+"px"})}if(!aL&&M==U&&Z.outerHeight()==aa){E.width(al);return}M=U;Z.css("width","");E.width(al);an.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}if(aU.contentWidth){U=aU.contentWidth}else{aS=Z.clone(false,false).css("position","absolute");aT=b('<div style="width:1px; position: relative;" />').append(aS);b("body").append(aT);U=Math.max(Z.outerWidth(),aS.outerWidth());aT.remove()}aa=Z.outerHeight();z=U/al;r=aa/w;aB=r>1;aG=z>1;if(!(aG||aB)){E.removeClass("jspScrollable");Z.css({top:0,width:an.width()-g});o();F();S();x();aj()}else{E.addClass("jspScrollable");aN=aA.maintainPosition&&(J||ab);if(aN){aP=aE();aO=aC()}aH();A();G();if(aN){O(aM?(U-al):aP,false);N(aQ?(aa-w):aO,false)}K();ah();ap();if(aA.enableKeyboardNavigation){T()}if(aA.clickOnTrack){q()}D();if(aA.hijackInternalLinks){n()}}if(aA.autoReinitialise&&!ax){ax=setInterval(function(){au(aA)},aA.autoReinitialiseDelay)}else{if(!aA.autoReinitialise&&ax){clearInterval(ax)}}aK&&E.scrollTop(0)&&N(aK,false);aR&&E.scrollLeft(0)&&O(aR,false);E.trigger("jsp-initialised",[aG||aB])}function aH(){if(aB){an.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));V=an.find(">.jspVerticalBar");ar=V.find(">.jspTrack");aw=ar.find(">.jspDrag");if(aA.showArrows){at=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",aF(0,-1)).bind("click.jsp",aD);ag=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",aF(0,1)).bind("click.jsp",aD);if(aA.arrowScrollOnHover){at.bind("mouseover.jsp",aF(0,-1,at));ag.bind("mouseover.jsp",aF(0,1,ag))}am(ar,aA.verticalArrowPositions,at,ag)}u=w;an.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){u-=b(this).outerHeight()});aw.hover(function(){aw.addClass("jspHover")},function(){aw.removeClass("jspHover")}).bind("mousedown.jsp",function(aK){b("html").bind("dragstart.jsp selectstart.jsp",aD);aw.addClass("jspActive");var s=aK.pageY-aw.position().top;b("html").bind("mousemove.jsp",function(aL){W(aL.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",ay);return false});p()}}function p(){ar.height(u+"px");J=0;Y=aA.verticalGutter+ar.outerWidth();Z.width(al-Y-g);try{if(V.position().left===0){Z.css("margin-left",Y+"px")}}catch(s){}}function A(){if(aG){an.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));ao=an.find(">.jspHorizontalBar");H=ao.find(">.jspTrack");i=H.find(">.jspDrag");if(aA.showArrows){az=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",aF(-1,0)).bind("click.jsp",aD);
|
||||
y=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",aF(1,0)).bind("click.jsp",aD);if(aA.arrowScrollOnHover){az.bind("mouseover.jsp",aF(-1,0,az));y.bind("mouseover.jsp",aF(1,0,y))}am(H,aA.horizontalArrowPositions,az,y)}i.hover(function(){i.addClass("jspHover")},function(){i.removeClass("jspHover")}).bind("mousedown.jsp",function(aK){b("html").bind("dragstart.jsp selectstart.jsp",aD);i.addClass("jspActive");var s=aK.pageX-i.position().left;b("html").bind("mousemove.jsp",function(aL){X(aL.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",ay);return false});m=an.innerWidth();ai()}}function ai(){an.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){m-=b(this).outerWidth()});H.width(m+"px");ab=0}function G(){if(aG&&aB){var aK=H.outerHeight(),s=ar.outerWidth();u-=aK;b(ao).find(">.jspCap:visible,>.jspArrow").each(function(){m+=b(this).outerWidth()});m-=s;w-=s;al-=aK;H.parent().append(b('<div class="jspCorner" />').css("width",aK+"px"));p();ai()}if(aG){Z.width((an.outerWidth()-g)+"px")}aa=Z.outerHeight();r=aa/w;if(aG){av=Math.ceil(1/z*m);if(av>aA.horizontalDragMaxWidth){av=aA.horizontalDragMaxWidth}else{if(av<aA.horizontalDragMinWidth){av=aA.horizontalDragMinWidth}}i.width(av+"px");k=m-av;af(ab)}if(aB){B=Math.ceil(1/r*u);if(B>aA.verticalDragMaxHeight){B=aA.verticalDragMaxHeight}else{if(B<aA.verticalDragMinHeight){B=aA.verticalDragMinHeight}}aw.height(B+"px");j=u-B;ae(J)}}function am(aL,aN,aK,s){var aP="before",aM="after",aO;if(aN=="os"){aN=/Mac/.test(navigator.platform)?"after":"split"}if(aN==aP){aM=aN}else{if(aN==aM){aP=aN;aO=aK;aK=s;s=aO}}aL[aP](aK)[aM](s)}function aF(aK,s,aL){return function(){I(aK,s,this,aL);this.blur();return false}}function I(aN,aM,aQ,aP){aQ=b(aQ).addClass("jspActive");var aO,aL,aK=true,s=function(){if(aN!==0){R.scrollByX(aN*aA.arrowButtonSpeed)}if(aM!==0){R.scrollByY(aM*aA.arrowButtonSpeed)}aL=setTimeout(s,aK?aA.initialDelay:aA.arrowRepeatFreq);aK=false};s();aO=aP?"mouseout.jsp":"mouseup.jsp";aP=aP||b("html");aP.bind(aO,function(){aQ.removeClass("jspActive");aL&&clearTimeout(aL);aL=null;aP.unbind(aO)})}function q(){x();if(aB){ar.bind("mousedown.jsp",function(aP){if(aP.originalTarget===c||aP.originalTarget==aP.currentTarget){var aN=b(this),aQ=aN.offset(),aO=aP.pageY-aQ.top-J,aL,aK=true,s=function(){var aT=aN.offset(),aU=aP.pageY-aT.top-B/2,aR=w*aA.scrollPagePercent,aS=j*aR/(aa-w);if(aO<0){if(J-aS>aU){R.scrollByY(-aR)}else{W(aU)}}else{if(aO>0){if(J+aS<aU){R.scrollByY(aR)}else{W(aU)}}else{aM();return}}aL=setTimeout(s,aK?aA.initialDelay:aA.trackClickRepeatFreq);aK=false},aM=function(){aL&&clearTimeout(aL);aL=null;b(document).unbind("mouseup.jsp",aM)};s();b(document).bind("mouseup.jsp",aM);return false}})}if(aG){H.bind("mousedown.jsp",function(aP){if(aP.originalTarget===c||aP.originalTarget==aP.currentTarget){var aN=b(this),aQ=aN.offset(),aO=aP.pageX-aQ.left-ab,aL,aK=true,s=function(){var aT=aN.offset(),aU=aP.pageX-aT.left-av/2,aR=al*aA.scrollPagePercent,aS=k*aR/(U-al);if(aO<0){if(ab-aS>aU){R.scrollByX(-aR)}else{X(aU)}}else{if(aO>0){if(ab+aS<aU){R.scrollByX(aR)}else{X(aU)}}else{aM();return}}aL=setTimeout(s,aK?aA.initialDelay:aA.trackClickRepeatFreq);aK=false},aM=function(){aL&&clearTimeout(aL);aL=null;b(document).unbind("mouseup.jsp",aM)};s();b(document).bind("mouseup.jsp",aM);return false}})}}function x(){if(H){H.unbind("mousedown.jsp")}if(ar){ar.unbind("mousedown.jsp")}}function ay(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");if(aw){aw.removeClass("jspActive")}if(i){i.removeClass("jspActive")}}function W(s,aK){if(!aB){return}if(s<0){s=0}else{if(s>j){s=j}}if(aK===c){aK=aA.animateScroll}if(aK){R.animate(aw,"top",s,ae)}else{aw.css("top",s);ae(s)}}function ae(aK){if(aK===c){aK=aw.position().top}an.scrollTop(0);J=aK;var aN=J===0,aL=J==j,aM=aK/j,s=-aM*(aa-w);if(ak!=aN||aI!=aL){ak=aN;aI=aL;E.trigger("jsp-arrow-change",[ak,aI,Q,l])}v(aN,aL);Z.css("top",s);E.trigger("jsp-scroll-y",[-s,aN,aL]).trigger("scroll")}function X(aK,s){if(!aG){return
|
||||
}if(aK<0){aK=0}else{if(aK>k){aK=k}}if(s===c){s=aA.animateScroll}if(s){R.animate(i,"left",aK,af)}else{i.css("left",aK);af(aK)}}function af(aK){if(aK===c){aK=i.position().left}an.scrollTop(0);ab=aK;var aN=ab===0,aM=ab==k,aL=aK/k,s=-aL*(U-al);if(Q!=aN||l!=aM){Q=aN;l=aM;E.trigger("jsp-arrow-change",[ak,aI,Q,l])}t(aN,aM);Z.css("left",s);E.trigger("jsp-scroll-x",[-s,aN,aM]).trigger("scroll")}function v(aK,s){if(aA.showArrows){at[aK?"addClass":"removeClass"]("jspDisabled");ag[s?"addClass":"removeClass"]("jspDisabled")}}function t(aK,s){if(aA.showArrows){az[aK?"addClass":"removeClass"]("jspDisabled");y[s?"addClass":"removeClass"]("jspDisabled")}}function N(s,aK){var aL=s/(aa-w);W(aL*j,aK)}function O(aK,s){var aL=aK/(U-al);X(aL*k,s)}function ac(aX,aS,aL){var aP,aM,aN,s=0,aW=0,aK,aR,aQ,aU,aT,aV;try{aP=b(aX)}catch(aO){return}aM=aP.outerHeight();aN=aP.outerWidth();an.scrollTop(0);an.scrollLeft(0);while(!aP.is(".jspPane")){s+=aP.position().top;aW+=aP.position().left;aP=aP.offsetParent();if(/^body|html$/i.test(aP[0].nodeName)){return}}aK=aC();aQ=aK+w;if(s<aK||aS){aT=s-aA.verticalGutter}else{if(s+aM>aQ){aT=s-w+aM+aA.verticalGutter}}if(aT){N(aT,aL)}aR=aE();aU=aR+al;if(aW<aR||aS){aV=aW-aA.horizontalGutter}else{if(aW+aN>aU){aV=aW-al+aN+aA.horizontalGutter}}if(aV){O(aV,aL)}}function aE(){return -Z.position().left}function aC(){return -Z.position().top}function L(){var s=aa-w;return(s>20)&&(s-aC()<10)}function C(){var s=U-al;return(s>20)&&(s-aE()<10)}function ah(){an.unbind(ad).bind(ad,function(aN,aO,aM,aK){var aL=ab,s=J;R.scrollBy(aM*aA.mouseWheelSpeed,-aK*aA.mouseWheelSpeed,false);return aL==ab&&s==J})}function o(){an.unbind(ad)}function aD(){return false}function K(){Z.find(":input,a").unbind("focus.jsp").bind("focus.jsp",function(s){ac(s.target,false)})}function F(){Z.find(":input,a").unbind("focus.jsp")}function T(){var s,aK,aM=[];aG&&aM.push(ao[0]);aB&&aM.push(V[0]);Z.focus(function(){E.focus()});E.attr("tabindex",0).unbind("keydown.jsp keypress.jsp").bind("keydown.jsp",function(aP){if(aP.target!==this&&!(aM.length&&b(aP.target).closest(aM).length)){return}var aO=ab,aN=J;switch(aP.keyCode){case 40:case 38:case 34:case 32:case 33:case 39:case 37:s=aP.keyCode;aL();break;case 35:N(aa-w);s=null;break;case 36:N(0);s=null;break}aK=aP.keyCode==s&&aO!=ab||aN!=J;return !aK}).bind("keypress.jsp",function(aN){if(aN.keyCode==s){aL()}return !aK});if(aA.hideFocus){E.css("outline","none");if("hideFocus" in an[0]){E.attr("hideFocus",true)}}else{E.css("outline","");if("hideFocus" in an[0]){E.attr("hideFocus",false)}}function aL(){var aO=ab,aN=J;switch(s){case 40:R.scrollByY(aA.keyboardSpeed,false);break;case 38:R.scrollByY(-aA.keyboardSpeed,false);break;case 34:case 32:R.scrollByY(w*aA.scrollPagePercent,false);break;case 33:R.scrollByY(-w*aA.scrollPagePercent,false);break;case 39:R.scrollByX(aA.keyboardSpeed,false);break;case 37:R.scrollByX(-aA.keyboardSpeed,false);break}aK=aO!=ab||aN!=J;return aK}}function S(){E.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp keypress.jsp")}function D(){if(location.hash&&location.hash.length>1){var aL,aK;try{aL=b(location.hash)}catch(s){return}if(aL.length&&Z.find(location.hash)){if(an.scrollTop()===0){aK=setInterval(function(){if(an.scrollTop()>0){ac(location.hash,true);b(document).scrollTop(an.position().top);clearInterval(aK)}},50)}else{ac(location.hash,true);b(document).scrollTop(an.position().top)}}}}function aj(){b("a.jspHijack").unbind("click.jsp-hijack").removeClass("jspHijack")}function n(){aj();b("a[href^=#]").addClass("jspHijack").bind("click.jsp-hijack",function(){var s=this.href.split("#"),aK;if(s.length>1){aK=s[1];if(aK.length>0&&Z.find("#"+aK).length>0){ac("#"+aK,true);return false}}})}function ap(){var aL,aK,aN,aM,aO,s=false;an.unbind("touchstart.jsp touchmove.jsp touchend.jsp click.jsp-touchclick").bind("touchstart.jsp",function(aP){var aQ=aP.originalEvent.touches[0];aL=aE();aK=aC();aN=aQ.pageX;aM=aQ.pageY;aO=false;s=true}).bind("touchmove.jsp",function(aS){if(!s){return}var aR=aS.originalEvent.touches[0],aQ=ab,aP=J;
|
||||
R.scrollTo(aL+aN-aR.pageX,aK+aM-aR.pageY);aO=aO||Math.abs(aN-aR.pageX)>5||Math.abs(aM-aR.pageY)>5;return aQ==ab&&aP==J}).bind("touchend.jsp",function(aP){s=false}).bind("click.jsp-touchclick",function(aP){if(aO){aO=false;return false}})}function h(){var s=aC(),aK=aE();E.removeClass("jspScrollable").unbind(".jsp");E.replaceWith(aq.append(Z.children()));aq.scrollTop(s);aq.scrollLeft(aK)}b.extend(R,{reinitialise:function(aK){aK=b.extend({},aA,aK);au(aK)},scrollToElement:function(aL,aK,s){ac(aL,aK,s)},scrollTo:function(aL,s,aK){O(aL,aK);N(s,aK)},scrollToX:function(aK,s){O(aK,s)},scrollToY:function(s,aK){N(s,aK)},scrollToPercentX:function(aK,s){O(aK*(U-al),s)},scrollToPercentY:function(aK,s){N(aK*(aa-w),s)},scrollBy:function(aK,s,aL){R.scrollByX(aK,aL);R.scrollByY(s,aL)},scrollByX:function(s,aL){var aK=aE()+s,aM=aK/(U-al);X(aM*k,aL)},scrollByY:function(s,aL){var aK=aC()+s,aM=aK/(aa-w);W(aM*j,aL)},positionDragX:function(s,aK){X(s,aK)},positionDragY:function(aK,s){X(aK,s)},animate:function(aK,aN,s,aM){var aL={};aL[aN]=s;aK.animate(aL,{duration:aA.animateDuration,ease:aA.animateEase,queue:false,step:aM})},getContentPositionX:function(){return aE()},getContentPositionY:function(){return aC()},getContentWidth:function(){return U},getContentHeight:function(){return aa},getPercentScrolledX:function(){return aE()/(U-al)},getPercentScrolledY:function(){return aC()/(aa-w)},getIsScrollableH:function(){return aG},getIsScrollableV:function(){return aB},getContentPane:function(){return Z},scrollToBottom:function(s){W(j,s)},hijackInternalLinks:function(){n()},destroy:function(){h()}});au(P)}f=b.extend({},b.fn.jScrollPane.defaults,f);b.each(["mouseWheelSpeed","arrowButtonSpeed","trackClickSpeed","keyboardSpeed"],function(){f[this]=f[this]||f.speed});var e;this.each(function(){var g=b(this),h=g.data("jsp");if(h){h.reinitialise(f)}else{h=new d(g,f);g.data("jsp",h)}e=e?e.add(g):g});return e};b.fn.jScrollPane.defaults={showArrows:false,maintainPosition:true,stickToBottom:false,stickToRight:false,clickOnTrack:true,autoReinitialise:false,autoReinitialiseDelay:500,verticalDragMinHeight:0,verticalDragMaxHeight:99999,horizontalDragMinWidth:0,horizontalDragMaxWidth:99999,contentWidth:c,animateScroll:false,animateDuration:300,animateEase:"linear",hijackInternalLinks:false,verticalGutter:4,horizontalGutter:4,mouseWheelSpeed:0,arrowButtonSpeed:0,arrowRepeatFreq:50,arrowScrollOnHover:false,trackClickSpeed:0,trackClickRepeatFreq:70,verticalArrowPositions:"split",horizontalArrowPositions:"split",enableKeyboardNavigation:true,hideFocus:false,keyboardSpeed:0,initialDelay:300,speed:30,scrollPagePercent:0.8}})(jQuery,this);
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
|
||||
* Licensed under the MIT License (LICENSE.txt).
|
||||
*
|
||||
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
|
||||
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
|
||||
* Thanks to: Seamus Leahy for adding deltaX and deltaY
|
||||
*
|
||||
* Version: 3.0.4
|
||||
*
|
||||
* Requires: 1.2.2+
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
|
||||
var types = ['DOMMouseScroll', 'mousewheel'];
|
||||
|
||||
$.event.special.mousewheel = {
|
||||
setup: function() {
|
||||
if ( this.addEventListener ) {
|
||||
for ( var i=types.length; i; ) {
|
||||
this.addEventListener( types[--i], handler, false );
|
||||
}
|
||||
} else {
|
||||
this.onmousewheel = handler;
|
||||
}
|
||||
},
|
||||
|
||||
teardown: function() {
|
||||
if ( this.removeEventListener ) {
|
||||
for ( var i=types.length; i; ) {
|
||||
this.removeEventListener( types[--i], handler, false );
|
||||
}
|
||||
} else {
|
||||
this.onmousewheel = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.extend({
|
||||
mousewheel: function(fn) {
|
||||
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
|
||||
},
|
||||
|
||||
unmousewheel: function(fn) {
|
||||
return this.unbind("mousewheel", fn);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function handler(event) {
|
||||
var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
|
||||
event = $.event.fix(orgEvent);
|
||||
event.type = "mousewheel";
|
||||
|
||||
// Old school scrollwheel delta
|
||||
if ( event.wheelDelta ) { delta = event.wheelDelta/120; }
|
||||
if ( event.detail ) { delta = -event.detail/3; }
|
||||
|
||||
// New school multidimensional scroll (touchpads) deltas
|
||||
deltaY = delta;
|
||||
|
||||
// Gecko
|
||||
if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
|
||||
deltaY = 0;
|
||||
deltaX = -1*delta;
|
||||
}
|
||||
|
||||
// Webkit
|
||||
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
|
||||
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
|
||||
|
||||
// Add event and delta to the front of the arguments
|
||||
args.unshift(event, delta, deltaX, deltaY);
|
||||
|
||||
return $.event.handle.apply(this, args);
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
|
|
@ -1,6 +1,17 @@
|
|||
var audio;
|
||||
var utid;
|
||||
$(function(){
|
||||
$.extend($.fn.disableTextSelect = function() {
|
||||
return this.each(function(){
|
||||
if ($.browser.mozilla) {//Firefox
|
||||
$(this).css('MozUserSelect','none');
|
||||
} else if ($.browser.msie) {//IE
|
||||
$(this).bind('selectstart',function(){return false;});
|
||||
} else {//Opera, etc.
|
||||
$(this).mousedown(function(){return false;});
|
||||
}
|
||||
});
|
||||
});
|
||||
audio = document.getElementsByTagName('audio')[0];
|
||||
$('#player .play').click(function(){
|
||||
if (! audio.src) return;
|
||||
|
|
@ -8,14 +19,13 @@ $(function(){
|
|||
utid = window.setTimeout(updatePlayer, 100);
|
||||
$('#player .pause').show();
|
||||
$('#player .play').hide();
|
||||
})
|
||||
}).disableTextSelect();
|
||||
$('#player .pause').click(function(){
|
||||
audio.pause();
|
||||
clearTimeout(utid);
|
||||
$('#player .pause').hide();
|
||||
$('#player .play').show();
|
||||
})
|
||||
|
||||
}).disableTextSelect();
|
||||
$('.tracks .play').click(function(){
|
||||
addToPlaylist(
|
||||
$('h1.artist').html(),
|
||||
|
|
@ -24,9 +34,20 @@ $(function(){
|
|||
$(this).parent().attr('id')
|
||||
);
|
||||
})
|
||||
$('#playlist .show-button').click(function(){
|
||||
$('#playlist ul').toggle();
|
||||
$('#player .prev').click(function(){
|
||||
playPrev();
|
||||
}).disableTextSelect();
|
||||
$('#player .next').click(function(){
|
||||
playNext();
|
||||
}).disableTextSelect();
|
||||
$('#player .shuffle, #player .repeat').click(function(){
|
||||
$(this).toggleClass('on');
|
||||
}).disableTextSelect();
|
||||
$('#player .playlist').click(function(){
|
||||
$('#playlist').toggle();
|
||||
//$('#playlist').data('jsp').reinitialise();
|
||||
})
|
||||
$('#playlist').hide();
|
||||
})
|
||||
function updatePlayer() {
|
||||
duration = audio.duration;
|
||||
|
|
@ -36,10 +57,10 @@ function updatePlayer() {
|
|||
}
|
||||
loaded = 0;
|
||||
if ((audio.buffered != undefined) && (audio.buffered.length != 0)) {
|
||||
loaded = Math.round((audio.buffered.end(0) / audio.duration) * 730);
|
||||
loaded = Math.round((audio.buffered.end(0) / audio.duration) * 390);
|
||||
$('#player .time-played').html(formatTime(cur_time));
|
||||
$('#player .time-left').html(formatTime(duration - cur_time));
|
||||
progress = Math.round((cur_time / duration) * 730);
|
||||
progress = Math.round((cur_time / duration) * 390);
|
||||
$('#player .progress-loaded').css('width', loaded +'px')
|
||||
$('#player .progress-point').css('margin-left', progress +'px')
|
||||
}
|
||||
|
|
@ -58,25 +79,46 @@ function playTrack(artist, track, id) {
|
|||
$('#player .time-left').html('0:00');
|
||||
$('#player .progress-loaded').css('width', 0 +'px')
|
||||
$('#player .progress-point').css('margin-left', 0 +'px')
|
||||
$('#playlist li').removeClass('now-playing');
|
||||
$('#playlist li[data-id="'+ id +'"]').addClass('now-playing');
|
||||
$('#player .play').trigger('click');
|
||||
}
|
||||
function playNext() {
|
||||
$('#playlist ul li.now-playing').next().trigger('click');
|
||||
function playPrev() {
|
||||
if ($('#playlist ul.list li').length == 0) return false;
|
||||
if ($('#playlist ul.list li.now-playing').prev().length == 0) {
|
||||
$('#playlist ul.list li:last').dblclick();
|
||||
} else {
|
||||
$('#playlist ul.list li.now-playing').prev().dblclick();
|
||||
}
|
||||
}
|
||||
function playNext(auto) {
|
||||
if ($('#playlist ul.list li').length == 0) return false;
|
||||
if ($('#player .shuffle').hasClass('on')) {
|
||||
$('#playlist ul.list li').rand().dblclick();
|
||||
}
|
||||
if ($('#playlist ul.list li.now-playing').next().length == 0) {
|
||||
$('#playlist ul.list li:first').dblclick();
|
||||
} else {
|
||||
$('#playlist ul.list li.now-playing').next().dblclick();
|
||||
}
|
||||
}
|
||||
function addToPlaylist(artist, track, length, id) {
|
||||
$('#playlist ul').append($(
|
||||
$('#playlist ul.list').append($(
|
||||
'<li data-id="'+ id +'">'+
|
||||
'<span class="artist">'+ artist +'</span> — '+
|
||||
'<span class="track">'+ track +'</span>'+
|
||||
'<span class="length" data-seconds="'+ length +'">'+ formatTime(length) +'</span>'+
|
||||
'</li>'
|
||||
));
|
||||
$('#playlist ul li[data-id="'+ id +'"]').click(function(){
|
||||
$('#playlist ul.list li').disableTextSelect();
|
||||
$('#playlist ul.list li[data-id="'+ id +'"]').dblclick(function(){
|
||||
playTrack(artist, track, id);
|
||||
$('#playlist li').removeClass('now-playing');
|
||||
$(this).addClass('now-playing');
|
||||
})
|
||||
if ($('#playlist ul li').length == 1) {
|
||||
playTrack(artist, track, id);
|
||||
if ($('#playlist ul.list li').length == 1) {
|
||||
$('#playlist ul.list li:first').dblclick();
|
||||
}
|
||||
if ($('#playlist ul.list li').length > 6) {
|
||||
$('#playlist').jScrollPane();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,113 @@
|
|||
/*
|
||||
* CSS Styles that are needed by jScrollPane for it to operate correctly.
|
||||
*
|
||||
* Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
|
||||
* may not operate correctly without them.
|
||||
*/
|
||||
|
||||
.jspContainer
|
||||
{
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.jspPane
|
||||
{
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.jspVerticalBar
|
||||
{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
background: red;
|
||||
}
|
||||
|
||||
.jspHorizontalBar
|
||||
{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
background: red;
|
||||
}
|
||||
|
||||
.jspVerticalBar *,
|
||||
.jspHorizontalBar *
|
||||
{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.jspCap
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.jspHorizontalBar .jspCap
|
||||
{
|
||||
float: left;
|
||||
}
|
||||
|
||||
.jspTrack
|
||||
{
|
||||
background: #111;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.jspDrag
|
||||
{
|
||||
background: #555;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.jspHorizontalBar .jspTrack,
|
||||
.jspHorizontalBar .jspDrag
|
||||
{
|
||||
float: left;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.jspArrow.jspDisabled
|
||||
{
|
||||
cursor: default;
|
||||
background: #80808d;
|
||||
}
|
||||
|
||||
.jspVerticalBar .jspArrow
|
||||
{
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.jspHorizontalBar .jspArrow
|
||||
{
|
||||
width: 16px;
|
||||
float: left;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.jspVerticalBar .jspArrow:focus
|
||||
{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.jspCorner
|
||||
{
|
||||
background: #eeeef4;
|
||||
float: left;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
|
||||
* html .jspCorner
|
||||
{
|
||||
margin: 0 -3px 0 0;
|
||||
}
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
#player {
|
||||
position: fixed;
|
||||
width: 1000px;
|
||||
width: 750px;
|
||||
height: 50px;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
margin-left: -500px;
|
||||
margin-left: -375px;
|
||||
background-color: #000;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
margin-left: 20px;
|
||||
}
|
||||
#player .next {
|
||||
margin-right: 20px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
#player .time-played, #player .time-left {
|
||||
float: left;
|
||||
|
|
@ -65,11 +65,11 @@
|
|||
float: left;
|
||||
margin-top: 25px;
|
||||
height: 25px;
|
||||
width: 740px;
|
||||
width: 400px;
|
||||
}
|
||||
#player .track-title {
|
||||
float: left;
|
||||
width: 730px;
|
||||
width: 390px;
|
||||
height: 25px;
|
||||
margin-left: 5px;
|
||||
margin-top: -25px;
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
float: left;
|
||||
margin: 11px 5px;
|
||||
background-color: #013;
|
||||
width: 730px;
|
||||
width: 390px;
|
||||
height: 3px;
|
||||
}
|
||||
#player .progress-loaded {
|
||||
|
|
@ -100,41 +100,74 @@
|
|||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#player .shuffle, #player .repeat, #player .playlist {
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
#player .shuffle {
|
||||
margin: 17px 0 0 0;
|
||||
}
|
||||
#player .shuffle img {
|
||||
width: 20px;
|
||||
}
|
||||
#player .repeat {
|
||||
margin: 17px 0 0 15px;
|
||||
}
|
||||
#player .repeat img {
|
||||
width: 20px;
|
||||
}
|
||||
#player .playlist {
|
||||
margin: 12px 0 0 15px;
|
||||
}
|
||||
#player .playlist img {
|
||||
width: 20px;
|
||||
}
|
||||
#player .shuffle, #player .repeat {
|
||||
opacity: 0.5;
|
||||
-moz-opacity: 0.5;
|
||||
-khtml-opacity: 0.5;
|
||||
-webkit-opacity: 0.5;
|
||||
filter:alpha(opacity=50);
|
||||
}
|
||||
#player .shuffle.on, #player .repeat.on {
|
||||
opacity: 1;
|
||||
-moz-opacity: 1;
|
||||
-khtml-opacity: 1;
|
||||
-webkit-opacity: 1;
|
||||
filter:alpha(opacity=100);
|
||||
}
|
||||
#playlist {
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
left: 50%;
|
||||
width: 1000px;
|
||||
margin-left: -500px;
|
||||
width: 750px;
|
||||
margin-left: -375px;
|
||||
background-color: #000;
|
||||
opacity: 60;
|
||||
-moz-opacity: 60;
|
||||
-khtml-opacity: 60;
|
||||
-webkit-opacity: 60;
|
||||
}
|
||||
#playlist .show-button {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
background-color: #222;
|
||||
cursor: pointer;
|
||||
opacity: 0.9;
|
||||
-moz-opacity: 0.9;
|
||||
-khtml-opacity: 0.9;
|
||||
-webkit-opacity: 0.9;
|
||||
filter:alpha(opacity=90);
|
||||
overflow-y: auto;
|
||||
max-height: 10em;
|
||||
}
|
||||
|
||||
#playlist ul {
|
||||
margin: 0.2em 0.3em;
|
||||
padding: 0;
|
||||
max-height: 10em;
|
||||
overflow-y: scroll;
|
||||
position: relative;
|
||||
}
|
||||
#playlist ul li {
|
||||
margin: 0;
|
||||
padding: 0.2em 0;
|
||||
padding: 0.4em 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: 0.8em;
|
||||
font-size: 0.75em;
|
||||
color: #FFF;
|
||||
}
|
||||
#playlist ul li:hover {
|
||||
background-color: #222;
|
||||
cursor: pointer;
|
||||
background-color: #050505;
|
||||
cursor: default;
|
||||
}
|
||||
#playlist ul li.now-playing {
|
||||
background-color: #013;
|
||||
|
|
|
|||
Loading…
Reference in New Issue