From 127eb7d09beb2aaf41cd997ce3e831cad82fe813 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9A=D0=BE=D0=BD=D1=81=D1=82=D0=B0=D0=BD=D1=82=D0=B8?= =?UTF-8?q?=D0=BD=20=D0=91=D0=B5=D0=B7=D0=B3=D0=BE=D0=B4=D0=BE=D0=B2?= Date: Sun, 5 Mar 2017 16:17:41 +0500 Subject: [PATCH] Bugfix for position element when use css3 transformations --- audiojs/audio.js | 11 ++--------- audiojs/audio.min.js | 42 +++++++++++++++++++++--------------------- 2 files changed, 23 insertions(+), 30 deletions(-) diff --git a/audiojs/audio.js b/audiojs/audio.js index f3c4879..51f7d2a 100644 --- a/audiojs/audio.js +++ b/audiojs/audio.js @@ -309,21 +309,14 @@ if (!audio.settings.createPlayer) return; var player = audio.settings.createPlayer, playPause = getByClass(player.playPauseClass, wrapper), - scrubber = getByClass(player.scrubberClass, wrapper), - leftPos = function(elem) { - var curleft = 0; - if (elem.offsetParent) { - do { curleft += elem.offsetLeft; } while (elem = elem.offsetParent); - } - return curleft; - }; + scrubber = getByClass(player.scrubberClass, wrapper); container[audiojs].events.addListener(playPause, 'click', function(e) { audio.playPause.apply(audio); }); container[audiojs].events.addListener(scrubber, 'click', function(e) { - var relativeLeft = e.clientX - leftPos(this); + var relativeLeft = e.clientX - this.getBoundingClientRect().left; audio.skipTo(relativeLeft / scrubber.offsetWidth); }); diff --git a/audiojs/audio.min.js b/audiojs/audio.min.js index 83e2381..8b29666 100644 --- a/audiojs/audio.min.js +++ b/audiojs/audio.min.js @@ -1,24 +1,24 @@ -(function(f,n,g){var i;a:{var l=/audio(.min)?.js.*/,m=document.getElementsByTagName("script"),k=0;for(i=m.length;k ';m=i+"player-graphics.gif";k=i+"player-graphics@2x.gif";i+="audiojs.swf";j=document.createElement("audio");j=!(j.canPlayType&&j.canPlayType("audio/mpeg;").replace(/no/,""));g[f]={instanceCount:0,instances:{},flashSource:l,settings:{autoplay:!1,loop:!1,preload:!0,imageLocation:m,retinaImageLocation:k,swfLocation:i,useFlash:j,hasFlash:function(){if(navigator.plugins&&navigator.plugins.length&&navigator.plugins["Shockwave Flash"])return!0; -if(navigator.mimeTypes&&navigator.mimeTypes.length){var a=navigator.mimeTypes["application/x-shockwave-flash"];return a&&a.enabledPlugin}try{return new ActiveXObject("ShockwaveFlash.ShockwaveFlash"),!0}catch(b){}return!1}(),createPlayer:{markup:'

00:00/00:00
', +(function(f,k,g){var n=function(){for(var a=/audio(.min)?.js.*/,b=document.getElementsByTagName("script"),c=0,d=b.length;c ',settings:{autoplay:!1,loop:!1,preload:!0,imageLocation:n+"player-graphics.gif",retinaImageLocation:n+"player-graphics@2x.gif",swfLocation:n+"audiojs.swf",useFlash:function(){var a=document.createElement("audio");return!(a.canPlayType&&a.canPlayType("audio/mpeg;").replace(/no/,""))}(),hasFlash:function(){if(navigator.plugins&&navigator.plugins.length&&navigator.plugins["Shockwave Flash"])return!0;if(navigator.mimeTypes&& +navigator.mimeTypes.length){var a=navigator.mimeTypes["application/x-shockwave-flash"];return a&&a.enabledPlugin}try{return new ActiveXObject("ShockwaveFlash.ShockwaveFlash"),!0}catch(b){}return!1}(),createPlayer:{markup:'

00:00/00:00
', playPauseClass:"play-pause",scrubberClass:"scrubber",progressClass:"progress",loaderClass:"loaded",timeClass:"time",durationClass:"duration",playedClass:"played",errorMessageClass:"error-message",playingClass:"playing",loadingClass:"loading",errorClass:"error"},css:' .audiojs audio { position: absolute; left: -1px; } .audiojs { width: 460px; height: 36px; background: #404040; overflow: hidden; font-family: monospace; font-size: 12px; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444), color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, #444)); background-image: -moz-linear-gradient(center top, #444 0%, #555 50%, #444 51%, #444 100%); -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); } .audiojs .play-pause { width: 25px; height: 40px; padding: 4px 6px; margin: 0px; float: left; overflow: hidden; border-right: 1px solid #000; } .audiojs p { display: none; width: 25px; height: 40px; margin: 0px; cursor: pointer; } .audiojs .play { display: block; } .audiojs .scrubber { position: relative; float: left; width: 280px; background: #5a5a5a; height: 14px; margin: 10px; border-top: 1px solid #3f3f3f; border-left: 0px; border-bottom: 0px; overflow: hidden; } .audiojs .progress { position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; background: #ccc; z-index: 1; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc), color-stop(0.5, #ddd), color-stop(0.51, #ccc), color-stop(1, #ccc)); background-image: -moz-linear-gradient(center top, #ccc 0%, #ddd 50%, #ccc 51%, #ccc 100%); } .audiojs .loaded { position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; background: #000; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #222), color-stop(0.5, #333), color-stop(0.51, #222), color-stop(1, #222)); background-image: -moz-linear-gradient(center top, #222 0%, #333 50%, #222 51%, #222 100%); } .audiojs .time { float: left; height: 36px; line-height: 36px; margin: 0px 0px 0px 6px; padding: 0px 6px 0px 12px; border-left: 1px solid #000; color: #ddd; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); } .audiojs .time em { padding: 0px 2px 0px 0px; color: #f9f9f9; font-style: normal; } .audiojs .time strong { padding: 0px 0px 0px 2px; font-weight: normal; } .audiojs .error-message { float: left; display: none; margin: 0px 10px; height: 36px; width: 400px; overflow: hidden; line-height: 36px; white-space: nowrap; color: #fff; text-overflow: ellipsis; -o-text-overflow: ellipsis; -icab-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; } .audiojs .error-message a { color: #eee; text-decoration: none; padding-bottom: 1px; border-bottom: 1px solid #999; white-space: wrap; } .audiojs .play { background: url("$1") -2px -1px no-repeat; } .audiojs .loading { background: url("$1") -2px -31px no-repeat; } .audiojs .error { background: url("$1") -2px -61px no-repeat; } .audiojs .pause { background: url("$1") -2px -91px no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) { .audiojs .play, .audiojs .loading, .audiojs .error, .audiojs .pause { background-image: url("$2"); -webkit-background-size: 30px 120px; -moz-background-size: 30px 120px; -o-background-size: 30px 120px; background-size: 30px 120px; } } .playing .play, .playing .loading, .playing .error { display: none; } .playing .pause { display: block; } .loading .play, .loading .pause, .loading .error { display: none; } .loading .loading { display: block; } .error .time, .error .play, .error .pause, .error .scrubber, .error .loading { display: none; } .error .error { display: block; } .error .play-pause p { cursor: auto; } .error .error-message { display: block; }', -trackEnded:function(){},flashError:function(){var a=this.settings.createPlayer,b=h(a.errorMessageClass,this.wrapper),c='Missing flash player plugin.';this.mp3&&(c+=' Download audio file.');g[f].helpers.removeClass(this.wrapper,a.loadingClass);g[f].helpers.addClass(this.wrapper,a.errorClass);b.innerHTML=c},loadError:function(){var a=this.settings.createPlayer,b=h(a.errorMessageClass,this.wrapper);g[f].helpers.removeClass(this.wrapper, -a.loadingClass);g[f].helpers.addClass(this.wrapper,a.errorClass);b.innerHTML='Error loading: "'+this.mp3+'"'},init:function(){g[f].helpers.addClass(this.wrapper,this.settings.createPlayer.loadingClass)},loadStarted:function(){var a=this.settings.createPlayer,b=h(a.durationClass,this.wrapper),c=Math.floor(this.duration/60),d=Math.floor(this.duration%60);g[f].helpers.removeClass(this.wrapper,a.loadingClass);b.innerHTML=(10>c?"0":"")+c+":"+(10>d?"0":"")+d},loadProgress:function(a){var b=this.settings.createPlayer, -c=h(b.scrubberClass,this.wrapper);h(b.loaderClass,this.wrapper).style.width=c.offsetWidth*a+"px"},playPause:function(){this.playing?this.settings.play():this.settings.pause()},play:function(){g[f].helpers.addClass(this.wrapper,this.settings.createPlayer.playingClass)},pause:function(){g[f].helpers.removeClass(this.wrapper,this.settings.createPlayer.playingClass)},updatePlayhead:function(a){var b=this.settings.createPlayer,c=h(b.scrubberClass,this.wrapper);h(b.progressClass,this.wrapper).style.width= -c.offsetWidth*a+"px";b=h(b.playedClass,this.wrapper);c=this.duration*a;a=Math.floor(c/60);c=Math.floor(c%60);b.innerHTML=(10>a?"0":"")+a+":"+(10>c?"0":"")+c}},create:function(a,b){b=b||{};return a.length?this.createAll(b,a):this.newInstance(a,b)},createAll:function(a,b){for(var c=b||document.getElementsByTagName("audio"),d=[],a=a||{},e=0,g=c.length;eb.loadedPercent||(b.updatePlayhead.call(b,[a]),b.element.skipTo(a))};b.updatePlayhead=function(a){b.settings.updatePlayhead.apply(b,[a])};b.play=function(){b.settings.preload||(b.settings.preload=!0,b.element.init(b.mp3));b.playing=!0;b.element.pplay();b.settings.play.apply(b)};b.pause=function(){b.playing=!1;b.element.ppause();b.settings.pause.apply(b)};b.setVolume=function(a){b.element.setVolume(a)};b.loadStarted=function(){b.swfReady=!0;b.settings.preload&&b.element.init(b.mp3); +trackEnded:function(a){},flashError:function(){var a=this.settings.createPlayer,b=h(a.errorMessageClass,this.wrapper),c='Missing flash player plugin.';this.mp3&&(c+=' Download audio file.');g[f].helpers.removeClass(this.wrapper,a.loadingClass);g[f].helpers.addClass(this.wrapper,a.errorClass);b.innerHTML=c},loadError:function(a){a=this.settings.createPlayer;var b=h(a.errorMessageClass,this.wrapper);g[f].helpers.removeClass(this.wrapper, +a.loadingClass);g[f].helpers.addClass(this.wrapper,a.errorClass);b.innerHTML='Error loading: "'+this.mp3+'"'},init:function(){g[f].helpers.addClass(this.wrapper,this.settings.createPlayer.loadingClass)},loadStarted:function(){var a=this.settings.createPlayer,b=h(a.durationClass,this.wrapper),c=Math.floor(this.duration/60),d=Math.floor(this.duration%60);g[f].helpers.removeClass(this.wrapper,a.loadingClass);b.innerHTML=(10>c?"0":"")+c+":"+(10>d?"0":"")+d},loadProgress:function(a){h(this.settings.createPlayer.loaderClass, +this.wrapper).style.width=Math.round(100*a)+"%"},playPause:function(){this.playing?this.settings.play():this.settings.pause()},play:function(){var a=this.settings.createPlayer;g[f].helpers.removeClass(this.wrapper,a.errorClass);g[f].helpers.addClass(this.wrapper,a.playingClass)},pause:function(){g[f].helpers.removeClass(this.wrapper,this.settings.createPlayer.playingClass)},updatePlayhead:function(a){var b=this.settings.createPlayer;h(b.progressClass,this.wrapper).style.width=Math.round(100*a)+"%"; +var b=h(b.playedClass,this.wrapper),c=this.duration*a;a=Math.floor(c/60);c=Math.floor(c%60);b.innerHTML=(10>a?"0":"")+a+":"+(10>c?"0":"")+c}},create:function(a,b){b=b||{};return a.length?this.createAll(b,a):this.newInstance(a,b)},createAll:function(a,b){var c=b||document.getElementsByTagName("audio"),d=[];a=a||{};for(var e=0,p=c.length;eb.loadedPercent||(b.updatePlayhead.call(b,[a]),b.element.skipTo(a))};b.updatePlayhead=function(a){b.settings.updatePlayhead.apply(b,[a])};b.play=function(){b.settings.preload||(b.settings.preload=!0,b.element.init(b.mp3));b.playing=!0;b.element.pplay();b.settings.play.apply(b)};b.pause=function(){b.playing=!1;b.element.ppause();b.settings.pause.apply(b)};b.setVolume=function(a){b.element.setVolume(a)};b.loadStarted=function(){b.swfReady=!0;b.settings.preload&&b.element.init(b.mp3); b.settings.autoplay&&b.play.apply(b)}},injectFlash:function(a,b){var c=this.flashSource.replace(/\$1/g,b),c=c.replace(/\$2/g,a.settings.swfLocation),c=c.replace(/\$3/g,+new Date+Math.random()),d=a.wrapper.innerHTML,e=document.createElement("div");e.innerHTML=c+d;a.wrapper.innerHTML=e.innerHTML;a.element=this.helpers.getSwf(b)},helpers:{merge:function(a,b){for(attr in b)if(a.hasOwnProperty(attr)||b.hasOwnProperty(attr))a[attr]=b[attr]},clone:function(a){if(null==a||"object"!==typeof a)return a;var b= -new a.constructor,c;for(c in a)b[c]=arguments.callee(a[c]);return b},addClass:function(a,b){RegExp("(\\s|^)"+b+"(\\s|$)").test(a.className)||(a.className+=" "+b)},removeClass:function(a,b){a.className=a.className.replace(RegExp("(\\s|^)"+b+"(\\s|$)")," ")},injectCss:function(a,b){for(var c="",d=document.getElementsByTagName("style"),e=b.replace(/\$1/g,a.settings.imageLocation),e=e.replace(/\$2/g,a.settings.retinaImageLocation),g=0,f=d.length;gthis.loadedPercent||(this.element.currentTime=this.duration*a,this.updatePlayhead())},load:function(a){this.loadStartedCalled=!1;this.source.setAttribute("src",a);this.element.load();this.mp3=a;g[f].events.trackLoadProgress(this)},loadError:function(){this.settings.loadError.apply(this)},init:function(){this.settings.init.apply(this)}, +new a.constructor,c;for(c in a)b[c]=arguments.callee(a[c]);return b},addClass:function(a,b){(new RegExp("(\\s|^)"+b+"(\\s|$)")).test(a.className)||(a.className+=" "+b)},removeClass:function(a,b){a.className=a.className.replace(new RegExp("(\\s|^)"+b+"(\\s|$)")," ")},injectCss:function(a,b){for(var c="",d=document.getElementsByTagName("style"),e=b.replace(/\$1/g,a.settings.imageLocation),e=e.replace(/\$2/g,a.settings.retinaImageLocation),g=0,f=d.length;gthis.loadedPercent||(this.element.currentTime=this.duration*a,this.updatePlayhead())},load:function(a){this.loadStartedCalled=!1;this.source.setAttribute("src",a);this.element.load();this.mp3=a;g[f].events.trackLoadProgress(this)},loadError:function(){this.settings.loadError.apply(this)},init:function(){this.settings.init.apply(this)}, loadStarted:function(){if(!this.element.duration)return!1;this.duration=this.element.duration;this.updatePlayhead();this.settings.loadStarted.apply(this)},loadProgress:function(){null!=this.element.buffered&&this.element.buffered.length&&(this.loadStartedCalled||(this.loadStartedCalled=this.loadStarted()),this.loadedPercent=this.element.buffered.end(this.element.buffered.length-1)/this.duration,this.settings.loadProgress.apply(this,[this.loadedPercent]))},playPause:function(){this.playing?this.pause(): -this.play()},play:function(){/(ipod|iphone|ipad)/i.test(navigator.userAgent)&&0==this.element.readyState&&this.init.apply(this);this.settings.preload||(this.settings.preload=!0,this.element.setAttribute("preload","auto"),g[f].events.trackLoadProgress(this));this.playing=!0;this.element.play();this.settings.play.apply(this)},pause:function(){this.playing=!1;this.element.pause();this.settings.pause.apply(this)},setVolume:function(a){this.element.volume=a},trackEnded:function(){this.skipTo.apply(this, -[0]);this.settings.loop||this.pause.apply(this);this.settings.trackEnded.apply(this)}};var h=function(a,b){var c=[],b=b||document;if(b.getElementsByClassName)c=b.getElementsByClassName(a);else{var d,e,f=b.getElementsByTagName("*"),g=RegExp("(^|\\s)"+a+"(\\s|$)");d=0;for(e=f.length;d