Bonjour à tous !
Ce sujet était à la base dans le forum CSS mais ayant résolu une partie du problème qui s'avère en fait être lié à un fichier JS je publie ici.
Dans mon blog il y a un lecteur de musique avec des boutons de contrôle et en dessous une liste des titres à jouer en cliquant sur chacun d'eux.
Quand je passe la souris sur la liste des titres la barre de défilement se bloquait sur PC comme sur Smartphone...
j'ai isolé la partie qui me pose problème sur la page ci-dessous pour que vous puissiez jeter un coup d'œil. J'ai caché tous les boutons dans un bloc noir et la liste des titres est en dessous.
Quand vous testerez en mode développeur sur votre navigateur, pensez à recharger votre page une fois être passé en vue smarphone. Vous constaterez alors que la liste se bloque...
https://resolvemycode.blogspot.jp/?m=1
(Pour ouvrir le lien recopiez-le directement dans votre barre d'adresse.)
Après avoir désactivé un 'value.preventDefault();' sur un '[btarget.mousewheel[/b]' à la ligne 979 le problème a été résolu sur PC mais pas sur Smartphone (Aquos et Experia)...
Je vous mets donc le code intégral JS, on ne sait jamais si quelqu'un a une idée...
Merci
Modifié par kuremo (10 May 2017 - 22:57)
Ce sujet était à la base dans le forum CSS mais ayant résolu une partie du problème qui s'avère en fait être lié à un fichier JS je publie ici.
Dans mon blog il y a un lecteur de musique avec des boutons de contrôle et en dessous une liste des titres à jouer en cliquant sur chacun d'eux.
Quand je passe la souris sur la liste des titres la barre de défilement se bloquait sur PC comme sur Smartphone...
j'ai isolé la partie qui me pose problème sur la page ci-dessous pour que vous puissiez jeter un coup d'œil. J'ai caché tous les boutons dans un bloc noir et la liste des titres est en dessous.
Quand vous testerez en mode développeur sur votre navigateur, pensez à recharger votre page une fois être passé en vue smarphone. Vous constaterez alors que la liste se bloque...
https://resolvemycode.blogspot.jp/?m=1
(Pour ouvrir le lien recopiez-le directement dans votre barre d'adresse.)
Après avoir désactivé un 'value.preventDefault();' sur un '[btarget.mousewheel[/b]' à la ligne 979 le problème a été résolu sur PC mais pas sur Smartphone (Aquos et Experia)...
/*
target.mousewheel(function(value, text, dataAndEvents, deepDataAndEvents) {
value.preventDefault();
value = el.slider("value");
if (1 < parseInt(value) && -1 == parseInt(text) || 100 > parseInt(value) && 1 == parseInt(text)) {
value += text;
el.slider("value", value);
callback(value, data, options, thumbsHolder_Thumb, el, node);
}
});
*/
Je vous mets donc le code intégral JS, on ne sait jamais si quelqu'un a une idée...
Merci
(function($) {
/**
* @param {HTMLElement} data
* @return {?}
*/
function template(data) {
/** @type {(HTMLElement|null)} */
data = document.getElementById(data.audioID);
return!(!data.canPlayType || !data.canPlayType("audio/mpeg;").replace(/no/, ""));
}
/**
* @param {?} data
* @return {undefined}
*/
function parse(data) {
/** @type {string} */
var ua = navigator.userAgent;
var uaindex;
if (ua.match(/iPad/i) || ua.match(/iPhone/i)) {
/** @type {string} */
data.userOS = "iOS";
/** @type {number} */
uaindex = ua.indexOf("OS ");
} else {
if (ua.match(/Android/i)) {
/** @type {string} */
data.userOS = "Android";
/** @type {number} */
uaindex = ua.indexOf("Android ");
} else {
/** @type {string} */
data.userOS = "unknown";
}
}
/** @type {string} */
data.userOSver = "iOS" === data.userOS && -1 < uaindex ? ua.substr(uaindex + 3, 3).replace("_", ".") : "Android" === data.userOS && -1 < uaindex ? ua.substr(uaindex + 8, 3) : "unknown";
}
/**
* @param {Object} data
* @param {Date} options
* @param {string} obj
* @param {?} collection
* @param {?} state
* @param {Object} path
* @param {HTMLElement} s
* @param {Node} head
* @param {?} self
* @param {Object} el
* @param {?} step
* @param {Object} control
* @param {Object} element
* @param {?} arr
* @return {undefined}
*/
function initialize(data, options, obj, collection, state, path, s, head, self, el, step, control, element, arr) {
/** @type {string} */
data.totalTime = "Infinity";
if (options.isSliderInitialized) {
self.slider("destroy");
/** @type {boolean} */
options.isSliderInitialized = false;
}
if (options.isProgressInitialized) {
el.progressbar("destroy");
/** @type {boolean} */
options.isProgressInitialized = false;
}
/** @type {boolean} */
data.is_changeSrc = true;
/** @type {boolean} */
data.is_buffer_complete = false;
control.width(data.audioPlayerWidth);
el.css({
background : options.bufferEmptyColor
});
/** @type {string} */
data.curSongText = "";
if (options.showAuthor) {
if (null != data.playlist_arr[data.current_img_no].author) {
if ("" != data.playlist_arr[data.current_img_no].author) {
data.curSongText += data.playlist_arr[data.current_img_no].author + " - ";
}
}
}
if (options.showTitle) {
if (null != data.playlist_arr[data.current_img_no].title) {
if ("" != data.playlist_arr[data.current_img_no].title) {
data.curSongText += data.playlist_arr[data.current_img_no].title;
}
}
}
/** @type {boolean} */
data.isAuthorTitleInsideScrolling = false;
/** @type {number} */
data.authorTitleInsideWait = 0;
element.stop();
element.css({
"margin-left" : 0
});
element.html(data.curSongText);
if (data.curSongText) {
control.removeClass("cancelDiv");
} else {
control.addClass("cancelDiv");
}
/** @type {(HTMLElement|null)} */
s = document.getElementById(data.audioID);
$(obj[data.current_img_no]).css({
background : options.playlistRecordBgOnColor,
"border-bottom-color" : options.playlistRecordBottomBorderOnColor,
color : options.playlistRecordTextOnColor
});
callback(-1, data, options, collection, state, path);
obj = data.playlist_arr[data.current_img_no].sources_mp3;
if (-1 != ua.indexOf("opera") || (-1 != ua.indexOf("opr") || (-1 != ua.indexOf("firefox") || -1 != ua.indexOf("mozzila")))) {
obj = data.playlist_arr[data.current_img_no].sources_ogg;
if ("" != template(data)) {
obj = data.playlist_arr[data.current_img_no].sources_mp3;
}
}
if (-1 != ua.indexOf("chrome") || (-1 != ua.indexOf("msie") || -1 != ua.indexOf("safari"))) {
obj = data.playlist_arr[data.current_img_no].sources_mp3;
if (-1 != ua.indexOf("opr")) {
obj = data.playlist_arr[data.current_img_no].sources_ogg;
if ("" != template(data)) {
obj = data.playlist_arr[data.current_img_no].sources_mp3;
}
}
}
if (-1 != ua.indexOf("android")) {
obj = data.playlist_arr[data.current_img_no].sources_mp3;
}
if ("iOS" === data.userOS) {
obj = data.playlist_arr[data.current_img_no].sources_mp3;
}
/** @type {string} */
s.src = obj;
document.getElementById(data.audioID).load();
if (!(-1 != ua.indexOf("android"))) {
if (!("iOS" === data.userOS && data.is_very_first)) {
if (!!options.autoPlay) {
update();
document.getElementById(data.audioID).play();
head.addClass("AudioPause");
}
}
}
}
/**
* @param {number} x
* @return {?}
*/
function loop(x) {
/** @type {(number|string)} */
var mx = 10 > Math.floor(x / 60) ? "0" + Math.floor(x / 60) : Math.floor(x / 60);
return mx + ":" + (10 > Math.floor(x - 60 * mx) ? "0" + Math.floor(x - 60 * mx) : Math.floor(x - 60 * mx));
}
/**
* @param {Object} data
* @param {Date} options
* @param {?} var_args
* @param {Object} self
* @param {Object} element
* @param {Object} body
* @param {Object} elm
* @param {?} type
* @return {undefined}
*/
function create(data, options, var_args, self, element, body, elm, type) {
/** @type {boolean} */
data.is_changeSrc = false;
if (data.is_very_first) {
/** @type {boolean} */
data.is_very_first = false;
}
element.width(data.audioPlayerWidth);
self.width(data.audioPlayerWidth);
self.slider({
value : 0,
step : 0.01,
orientation : "horizontal",
range : "min",
max : data.totalTime,
/**
* @return {undefined}
*/
slide : function() {
/** @type {boolean} */
data.is_seeking = true;
},
/**
* @param {boolean} gotoEnd
* @param {Object} e
* @return {undefined}
*/
stop : function(gotoEnd, e) {
/** @type {boolean} */
data.is_seeking = false;
document.getElementById(data.audioID).currentTime = e.value;
if (0 != document.getElementById(data.audioID).paused) {
document.getElementById(data.audioID).play();
elm.addClass("AudioPause");
}
},
/**
* @param {?} var_args
* @param {?} minutes
* @return {undefined}
*/
create : function(var_args, minutes) {
/** @type {boolean} */
options.isSliderInitialized = true;
}
});
$(".ui-slider-range", self).css({
background : options.seekbarColor
});
element.progressbar({
value : 0,
/**
* @return {undefined}
*/
complete : function() {
/** @type {boolean} */
data.is_buffer_complete = true;
},
/**
* @param {?} var_args
* @param {?} minutes
* @return {undefined}
*/
create : function(var_args, minutes) {
/** @type {boolean} */
options.isProgressInitialized = true;
}
});
$(".ui-widget-header", element).css({
background : options.bufferFullColor
});
}
/**
* @param {Object} data
* @param {Date} options
* @param {?} to
* @param {Object} self
* @param {Object} element
* @param {Object} body
* @param {Object} e
* @param {?} event
* @param {?} d
* @param {Object} ui
* @return {undefined}
*/
function start(data, options, to, self, element, body, e, event, d, ui) {
if (!data.isAuthorTitleInsideScrolling && (5 <= data.authorTitleInsideWait && (ui.width() > data.audioPlayerWidth && !data.isMinimized))) {
/** @type {boolean} */
data.isAuthorTitleInsideScrolling = true;
/** @type {number} */
data.authorTitleInsideWait = 0;
ui.html(data.curSongText + " **** " + data.curSongText + " **** " + data.curSongText + " **** " + data.curSongText + " **** " + data.curSongText + " **** ");
ui.css({
"margin-left" : 0
});
ui.stop().animate({
"margin-left" : data.audioPlayerWidth - ui.width() + "px"
}, parseInt(1E4 * (ui.width() - data.audioPlayerWidth) / 150, 10), "linear", function() {
/** @type {boolean} */
data.isAuthorTitleInsideScrolling = false;
});
} else {
if (!data.isAuthorTitleInsideScrolling) {
if (ui.width() > data.audioPlayerWidth) {
data.authorTitleInsideWait++;
}
}
}
curTime = document.getElementById(data.audioID).currentTime;
/** @type {number} */
bufferedTime = 0;
if (data.is_changeSrc) {
if (!isNaN(data.totalTime)) {
if ("Infinity" != data.totalTime) {
create(data, options, to, self, element, body, e, event);
if (-1 != ua.indexOf("android")) {
if (options.autoPlay) {
document.getElementById(data.audioID).play();
e.addClass("AudioPause");
} else {
e.removeClass("AudioPause");
}
}
}
}
}
if (!data.is_seeking) {
if (options.isSliderInitialized) {
self.slider("value", curTime);
}
}
if (-1 != ua.indexOf("android")) {
if (data.totalTime != document.getElementById(data.audioID).duration) {
if (0 < document.getElementById(data.audioID).duration) {
data.totalTime = document.getElementById(data.audioID).duration;
if (options.isSliderInitialized) {
self.slider("destroy");
/** @type {boolean} */
options.isSliderInitialized = false;
}
if (options.isProgressInitialized) {
element.progressbar("destroy");
/** @type {boolean} */
options.isProgressInitialized = false;
}
create(data, options, to, self, element, body, e, event);
}
}
element.css({
background : options.bufferFullColor
});
if (isNaN(data.totalTime) || "Infinity" == data.totalTime) {
body.text("00:00 / " + loop(0));
} else {
body.text(loop(curTime) + " / " + loop(data.totalTime));
}
} else {
if (document.getElementById(data.audioID).buffered.length) {
bufferedTime = document.getElementById(data.audioID).buffered.end(document.getElementById(data.audioID).buffered.length - 1);
if (0 < bufferedTime) {
if (!data.is_buffer_complete) {
if (!isNaN(data.totalTime)) {
if ("Infinity" != data.totalTime) {
if (options.isProgressInitialized) {
element.progressbar({
value : 100 * bufferedTime / data.totalTime
});
}
}
}
}
}
}
body.text(loop(curTime) + " / " + loop(bufferedTime));
}
setCookie(options, "cookie_timePlayed", curTime);
}
/**
* @param {number} height
* @param {Object} a
* @param {Date} b
* @param {?} model
* @param {?} element
* @param {Object} s
* @return {undefined}
*/
function callback(height, a, b, model, element, s) {
/** @type {number} */
var width = (model.height() + 1) * (a.total_images - b.numberOfThumbsPerScreen);
s.stop(true, true);
if (-1 == height || a.isCarouselScrolling) {
if (!a.isCarouselScrolling) {
if (a.total_images > b.numberOfThumbsPerScreen) {
/** @type {boolean} */
a.isCarouselScrolling = true;
/** @type {number} */
height = -1 * parseInt((model.height() + 1) * a.current_img_no, 10);
if (Math.abs(height) > width) {
/** @type {number} */
height = -1 * width;
}
if (a.total_images > b.numberOfThumbsPerScreen) {
if (b.showPlaylist) {
element.slider("value", 100 + parseInt(100 * height / width));
}
}
s.animate({
top : height + "px"
}, 500, "easeOutCubic", function() {
/** @type {boolean} */
a.isCarouselScrolling = false;
});
}
}
} else {
/** @type {boolean} */
a.isCarouselScrolling = true;
if (1 >= height) {
/** @type {number} */
height = 0;
}
/** @type {number} */
height = 2 >= height ? -1 * width : parseInt(width * (height - 100) / 100, 10);
if (0 < height) {
/** @type {number} */
height = 0;
}
s.animate({
top : height + "px"
}, 1100, "easeOutQuad", function() {
/** @type {boolean} */
a.isCarouselScrolling = false;
});
}
}
/**
* @param {Object} options
* @param {?} type
* @param {Object} node
* @param {Object} el
* @param {Object} row
* @param {Object} region
* @param {Object} input
* @param {Object} $container
* @param {Object} element
* @param {Object} body
* @param {Object} a
* @param {Object} object
* @param {Object} elem
* @param {Object} target
* @param {?} readBuffer
* @param {Object} f
* @param {Object} self
* @param {Object} form
* @param {Object} container
* @param {Object} content
* @param {?} callback
* @param {Date} opts
* @param {number} delta
* @param {boolean} rows
* @param {boolean} in_recursion
* @param {boolean} ctxt
* @param {boolean} firstTime
* @param {boolean} opt_scope
* @param {boolean} dataAndEvents
* @param {boolean} deepDataAndEvents
* @param {boolean} eventName
* @param {boolean} mojitType
* @param {boolean} context
* @param {boolean} instance
* @param {boolean} scene
* @param {boolean} dt
* @return {undefined}
*/
function render(options, type, node, el, row, region, input, $container, element, body, a, object, elem, target, readBuffer, f, self, form, container, content, callback, opts, delta, rows, in_recursion, ctxt, firstTime, opt_scope, dataAndEvents, deepDataAndEvents, eventName, mojitType, context, instance, scene, dt) {
f.css({
background : opts.playerBg,
padding : delta + "px"
});
if ("iOS" === options.userOS) {
if (options.isMinimized) {
f.css({
"padding-top" : "0px"
});
}
}
/** @type {number} */
options.audioPlayerWidth = 0;
if (options.isMinimized) {
el.css({
"margin-top" : "0px",
"margin-bottom" : "0px",
"margin-left" : "0px"
});
$container.css({
"margin-top" : parseInt((el.height() - $container.height()) / 2, 10) + "px",
"margin-bottom" : "0px"
});
element.css({
"margin-top" : parseInt((el.height() - element.height()) / 2, 10) + "px",
"margin-bottom" : "0px",
"margin-right" : "0px"
});
} else {
el.css({
"margin-top" : options.origPlayButMarginTop,
"margin-bottom" : options.origPlayButMarginBottom,
"margin-left" : options.origPlayButMarginLeft
});
$container.css({
"margin-top" : options.origVolumeButMarginTop,
"margin-bottom" : options.origVolumeButMarginBottom
});
element.css({
"margin-top" : options.origVolumeSliderMarginTop,
"margin-bottom" : options.origVolumeSliderMarginBottom,
"margin-right" : options.origVolumeSliderMarginRight
});
}
if (rows) {
node.removeClass("cancelDiv");
options.audioPlayerWidth += node.width() + parseInt(node.css("margin-left").substring(0, node.css("margin-left").length - 2)) + parseInt(node.css("margin-right").substring(0, node.css("margin-right").length - 2));
} else {
node.addClass("cancelDiv");
}
if (in_recursion) {
el.removeClass("cancelDiv");
options.audioPlayerWidth += el.width() + parseInt(el.css("margin-left").substring(0, el.css("margin-left").length - 2)) + parseInt(el.css("margin-right").substring(0, el.css("margin-right").length - 2));
} else {
el.addClass("cancelDiv");
}
if (ctxt) {
row.removeClass("cancelDiv");
options.audioPlayerWidth += row.width() + parseInt(row.css("margin-left").substring(0, row.css("margin-left").length - 2)) + parseInt(row.css("margin-right").substring(0, row.css("margin-right").length - 2));
} else {
row.addClass("cancelDiv");
}
if (firstTime) {
region.removeClass("cancelDiv");
options.audioPlayerWidth += region.width() + parseInt(region.css("margin-left").substring(0, region.css("margin-left").length - 2)) + parseInt(region.css("margin-right").substring(0, region.css("margin-right").length - 2));
} else {
region.addClass("cancelDiv");
}
if (opt_scope) {
input.removeClass("cancelDiv");
options.audioPlayerWidth += input.width() + parseInt(input.css("margin-left").substring(0, input.css("margin-left").length - 2)) + parseInt(input.css("margin-right").substring(0, input.css("margin-right").length - 2));
} else {
input.addClass("cancelDiv");
}
if (dataAndEvents) {
$container.removeClass("cancelDiv");
options.audioPlayerWidth += $container.width() + parseInt($container.css("margin-left").substring(0, $container.css("margin-left").length - 2)) + parseInt($container.css("margin-right").substring(0, $container.css("margin-right").length - 2));
} else {
$container.addClass("cancelDiv");
}
if (deepDataAndEvents) {
element.removeClass("cancelDiv");
options.audioPlayerWidth += element.width() + parseInt(element.css("margin-left").substring(0, element.css("margin-left").length - 2)) + parseInt(element.css("margin-right").substring(0, element.css("margin-right").length - 2));
} else {
element.addClass("cancelDiv");
}
if (eventName) {
body.removeClass("cancelDiv");
options.audioPlayerWidth += body.width() + parseInt(body.css("margin-left").substring(0, body.css("margin-left").length - 2)) + parseInt(body.css("margin-right").substring(0, body.css("margin-right").length - 2));
} else {
body.addClass("cancelDiv");
}
if (mojitType) {
a.css({
display : "block"
});
object.css({
display : "block"
});
} else {
a.css({
display : "none"
});
object.css({
display : "none"
});
}
body.css({
color : opts.timerColor
});
elem.css({
color : opts.songAuthorTitleColor
});
if ("iOS" === options.userOS) {
if (8 > Number(options.userOSver.charAt(0))) {
options.audioPlayerWidth -= 9;
}
} else {
options.audioPlayerWidth -= 9;
}
if (-1 != ua.indexOf("android")) {
opts.playlistTopPos -= 0;
} else {
if ("iOS" === options.userOS) {
if (options.isMinimized) {
if (8 > Number(options.userOSver.charAt(0))) {
target.css("margin-top", "-14px");
} else {
target.css("margin-top", "2px");
}
} else {
if (8 > Number(options.userOSver.charAt(0))) {
target.css("margin-top", "-16px");
opts.playlistTopPos -= 5;
} else {
target.css("margin-top", "-2px");
}
}
}
}
elem.width(options.audioPlayerWidth);
readBuffer.width(options.audioPlayerWidth + 10);
if (0 < options.audioPlayerHeight) {
if (options.isMinimized) {
f.height(el.height());
options.audioPlayerHeight = f.height() + 2 * delta;
} else {
f.height(options.audioOrigPlayerHeight - 2 * delta);
options.audioPlayerHeight = options.audioOrigPlayerHeight;
}
} else {
options.audioPlayerHeight = f.height() + 2 * delta;
options.audioOrigPlayerHeight = options.audioPlayerHeight;
}
if (mojitType) {
if (!options.isMinimized) {
create(options, opts, f, object, a, body, el, type);
}
} else {
if (!options.isMinimized) {
readBuffer.height(options.audioPlayerHeight - 4);
}
}
if (context || instance) {
form.css({
display : "block"
});
} else {
if (!options.isMinimized) {
readBuffer.height(options.audioPlayerHeight - 22);
}
form.css({
display : "none"
});
}
if (scene) {
self.css({
display : "block"
});
} else {
self.css({
display : "none"
});
}
if (dt) {
self.removeClass("cancelThumbsHolderWrapper");
} else {
self.addClass("cancelThumbsHolderWrapper");
}
if (options.total_images > opts.numberOfThumbsPerScreen && scene) {
container.css({
display : "inline"
});
} else {
container.css({
display : "none"
});
}
if (options.isMinimized) {
content.addClass("AudioOpenBut");
content.css({
right : -content.width() - 1 + "px",
"margin-top" : "0px"
});
if ("iOS" === options.userOS) {
content.height(options.origCloseButHeight - 3);
}
} else {
content.removeClass("AudioOpenBut");
content.css({
right : options.origCloseButRight,
"margin-top" : options.origCloseButMarginTop
});
}
}
/**
* @param {Date} date
* @param {string} name
* @param {Object} value
* @param {number} days
* @return {undefined}
*/
function setCookie(date, name, value, days) {
if (date.continuouslyPlayOnAllPages) {
/** @type {Date} */
date = new Date;
date.setDate(date.getDate() + days);
/** @type {string} */
value = escape(value) + (null == days ? "" : "; expires=" + date.toUTCString()) + ";path=/";
/** @type {string} */
document.cookie = name + "=" + value;
}
}
/**
* @param {Date} immediate
* @param {string} ch
* @return {?}
*/
function check(immediate, ch) {
if (immediate.continuouslyPlayOnAllPages) {
var i;
var name;
var result;
/** @type {Array.<string>} */
var ARRcookies = document.cookie.split(";");
/** @type {number} */
i = 0;
for (;i < ARRcookies.length;i++) {
if (name = ARRcookies[i].substr(0, ARRcookies[i].indexOf("=")), result = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1), name = name.replace(/^\s+|\s+$/g, ""), name == ch) {
return unescape(result);
}
}
}
}
/**
* @param {Date} args
* @param {?} element
* @return {undefined}
*/
function f(args, element) {
/** @type {number} */
var value = Math.ceil(Math.random() * (element.total_images - 1));
/** @type {number} */
element.current_img_no = value != element.current_img_no ? value : Math.ceil(Math.random() * (element.total_images - 1));
}
/**
* @param {Date} node
* @param {?} options
* @param {?} element
* @param {number} other
* @param {?} container
* @return {undefined}
*/
function toggle(node, options, element, other, container) {
other = container.width() + 1;
if (!options.isMinimized) {
/** @type {number} */
other = 0;
}
/** @type {string} */
options.playerNewLeft = "0px";
/** @type {number} */
options.playerMarginLeft = 0;
switch(node.playerPossition) {
case "left":
/** @type {string} */
options.playerNewLeft = node.playerAdditionalLeftMargin + "px";
break;
case "center":
/** @type {string} */
options.playerNewLeft = "50%";
options.playerMarginLeft = -1 * (element.width() + other) / 2 + node.playerAdditionalLeftMargin;
break;
case "right":
/** @type {string} */
options.playerNewLeft = "100%";
/** @type {number} */
options.playerMarginLeft = -1 * element.width() - other - node.playerAdditionalLeftMargin;
break;
default:
/** @type {number} */
options.playerNewLeft = 0;
options.playerMarginLeft = node.playerAdditionalLeftMargin;
}
}
/**
* @return {?}
*/
function getIEVersion() {
/** @type {number} */
var cDigit = -1;
if ("Microsoft Internet Explorer" == navigator.appName) {
if (null != /MSIE ([0-9]{1,}[.0-9]{0,})/.exec(navigator.userAgent)) {
/** @type {number} */
cDigit = parseFloat(RegExp.$1);
}
}
return parseInt(cDigit, 10);
}
/**
* @return {undefined}
*/
function update() {
$("audio").each(function() {
$(".AudioPlay").removeClass("AudioPause");
$(this)[0].pause();
});
}
/** @type {string} */
var ua = navigator.userAgent.toLowerCase();
/**
* @param {Date} options
* @return {?}
*/
$.fn.audio3_html5 = function(options) {
options = $.extend({}, $.fn.audio3_html5.defaults, options);
return this.each(function() {
var head = $(this);
var div = $('<div class="AudioControls"> <a class="AudioRewind" title="Rewind"></a><a class="AudioPrev" title="Previous"></a><a class="AudioPlay" title="Play/Pause"></a><a class="AudioNext" title="Next"></a><a class="AudioShuffle" title="Shuffle"></a><a class="VolumeButton" title="Mute/Unmute"></a><div class="VolumeSlider"></div> <div class="AudioTimer">00:00 / 00:00</div> </div> <div class="AudioBuffer"></div><div class="AudioSeek"></div><div class="songAuthorTitle"><div class="songAuthorTitleInside">AA</div></div> <div class="thumbsHolderWrapper"><div class="playlistPadding"><div class="thumbsHolderVisibleWrapper"><div class="thumbsHolder"></div></div></div></div> <div class="slider-vertical"></div>');
var label = $('<div class="AudioCloseBut"></div>');
var obj = head.parent(".audio3_html5");
var readBuffer = $(this).parent();
var wrapper = obj.parent(".audio3_html5_bottom_div");
wrapper.append(label);
wrapper.addClass(options.skin);
obj.addClass(options.skin);
obj.append(div);
var results = $(".AudioControls", obj);
var holder = $(".AudioRewind", obj);
var e = $(".AudioPlay", obj);
var r = $(".AudioPrev", obj);
var center = $(".AudioNext", obj);
var d = $(".AudioShuffle", obj);
var $div = $(".VolumeButton", obj);
var element = $(".VolumeSlider", obj);
var i = $(".AudioTimer", obj);
var c = $(".songAuthorTitle", obj);
var value = $(".songAuthorTitleInside", obj);
var tmp = $(".AudioBuffer", obj);
var self = $(".AudioSeek", obj);
var item = $(".thumbsHolderWrapper", obj);
div = $(".playlistPadding", obj);
var target = $(".thumbsHolderVisibleWrapper", obj);
var node = $(".thumbsHolder", obj);
var el = $(".slider-vertical", obj);
var restoreScript = getIEVersion();
var data = {
current_img_no : 0,
is_very_first : true,
total_images : 0,
is_seeking : false,
is_changeSrc : false,
is_buffer_complete : false,
timeupdateInterval : "",
totalTime : "",
playlist_arr : "",
isCarouselScrolling : false,
isAuthorTitleInsideScrolling : false,
curSongText : "",
authorTitleInsideWait : 0,
audioPlayerWidth : 0,
audioPlayerHeight : 0,
audioOrigPlayerHeight : 0,
audioID : "",
audioObj : "",
cookie_timePlayed : 0,
cookie_current_img_no : 0,
cookie_initialVolume : 0,
cookie_muteVolume : 0,
cookie_autoPlay : false,
cookie_shuffle : false,
isMinimized : false,
playerNewLeft : 0,
playerMarginLeft : 0,
closeTime : 10,
origPlayButMarginTop : 0,
origPlayButMarginBottom : 0,
origPlayButMarginLeft : 0,
origPlayButMarginRight : 0,
origVolumeButMarginTop : 0,
origVolumeButMarginBottom : 0,
origVolumeButMarginLeft : 0,
origVolumeButMarginRight : 0,
origVolumeSliderMarginTop : 0,
origVolumeSliderMarginBottom : 0,
origVolumeSliderMarginLeft : 0,
origVolumeSliderMarginRight : 0,
origCloseButMarginTop : 0,
origCloseButRight : 0,
origCloseButHeight : 0,
userOS : "",
userOSver : 0
};
data.audioID = head.attr("id");
data.origPlayButMarginTop = e.css("margin-top");
data.origPlayButMarginBottom = e.css("margin-bottom");
data.origPlayButMarginLeft = e.css("margin-left");
data.origPlayButMarginRight = e.css("margin-right");
data.origVolumeButMarginTop = $div.css("margin-top");
data.origVolumeButMarginBottom = $div.css("margin-bottom");
data.origVolumeButMarginLeft = $div.css("margin-left");
data.origVolumeButMarginRight = $div.css("margin-right");
data.origVolumeSliderMarginTop = element.css("margin-top");
data.origVolumeSliderMarginBottom = element.css("margin-bottom");
data.origVolumeSliderMarginLeft = element.css("margin-left");
data.origVolumeSliderMarginRight = element.css("margin-right");
data.origCloseButMarginTop = label.css("margin-top");
data.origCloseButRight = label.css("right");
label.addClass("AudioOpenBut");
data.origCloseButHeight = label.height();
label.removeClass("AudioOpenBut");
label.css({
"background-color" : options.playerBg
});
parse(data);
render(data, head, holder, e, r, center, d, $div, element, i, tmp, self, c, results, readBuffer, obj, item, value, el, label, restoreScript, options, options.playerPadding, options.showRewindBut, options.showPlayBut, options.showPreviousBut, options.showNextBut, options.showShuffleBut, options.showVolumeBut, options.showVolumeSliderBut, options.showTimer, options.showSeekBar, options.showAuthor, options.showTitle, options.showPlaylist, options.showPlaylistOnInit);
item.css({
width : obj.width() + 2 * options.playerPadding + "px",
top : data.audioPlayerHeight + options.playlistTopPos + "px",
left : "0px",
background : options.playlistBgColor
});
target.width(obj.width() + 1 + 2 * options.playerPadding);
/** @type {Array} */
data.playlist_arr = [];
$(".xaudioplaylist", obj).children().each(function() {
currentElement = $(this);
data.total_images++;
/** @type {Array} */
data.playlist_arr[data.total_images - 1] = [];
/** @type {string} */
data.playlist_arr[data.total_images - 1].title = "";
/** @type {string} */
data.playlist_arr[data.total_images - 1].author = "";
/** @type {string} */
data.playlist_arr[data.total_images - 1].thumb = "";
/** @type {string} */
data.playlist_arr[data.total_images - 1].sources_mp3 = "";
/** @type {string} */
data.playlist_arr[data.total_images - 1].sources_ogg = "";
if (null != currentElement.find(".xtitle").html()) {
data.playlist_arr[data.total_images - 1].title = currentElement.find(".xtitle").html();
}
if (null != currentElement.find(".xauthor").html()) {
data.playlist_arr[data.total_images - 1].author = currentElement.find(".xauthor").html();
}
if (null != currentElement.find(".xthumb").html()) {
data.playlist_arr[data.total_images - 1].thumb = currentElement.find(".xthumb").html();
}
if (null != currentElement.find(".xsources_mp3").html()) {
data.playlist_arr[data.total_images - 1].sources_mp3 = currentElement.find(".xsources_mp3").html();
}
if (null != currentElement.find(".xsources_ogg").html()) {
data.playlist_arr[data.total_images - 1].sources_ogg = currentElement.find(".xsources_ogg").html();
}
thumbsHolder_Thumb = $('<div class="thumbsHolder_ThumbOFF" rel="' + (data.total_images - 1) + '"><div class="padding">' + (options.showPlaylistNumber ? data.total_images + ". " : "") + data.playlist_arr[data.total_images - 1].title + "</div></div>");
node.append(thumbsHolder_Thumb);
thumbsHolder_Thumb.css({
top : (thumbsHolder_Thumb.height() + 1) * data.total_images + "px",
background : options.playlistRecordBgOffColor,
"border-bottom-color" : options.playlistRecordBottomBorderOffColor,
color : options.playlistRecordTextOffColor
});
if (1 === data.total_images) {
thumbsHolder_Thumb.css({
background : options.playlistRecordBgOnColor,
"border-bottom-color" : options.playlistRecordBottomBorderOnColor,
color : options.playlistRecordTextOnColor
});
}
});
item.height(2 * options.playlistPadding + (thumbsHolder_Thumb.height() + 1) * (options.numberOfThumbsPerScreen < data.total_images ? options.numberOfThumbsPerScreen : data.total_images));
target.height((thumbsHolder_Thumb.height() + 1) * (options.numberOfThumbsPerScreen < data.total_images ? options.numberOfThumbsPerScreen : data.total_images));
div.css({
padding : options.playlistPadding + "px"
});
if (data.total_images > options.numberOfThumbsPerScreen && options.showPlaylist) {
el.slider({
orientation : "vertical",
range : "min",
min : 1,
max : 100,
step : 1,
value : 100,
/**
* @param {?} ui
* @param {Attr} f
* @return {undefined}
*/
slide : function(ui, f) {
callback(f.value, data, options, thumbsHolder_Thumb, el, node);
}
});
el.css({
display : "inline",
position : "absolute",
height : item.height() - 16 - 2 * options.playlistPadding + "px",
left : obj.width() + 2 * options.playerPadding - el.width() - options.playlistPadding + "px",
top : data.audioPlayerHeight + options.playlistTopPos + options.playlistPadding + "px"
});
if (!options.showPlaylistOnInit) {
el.css({
opacity : 0,
display : "none"
});
}
$(".thumbsHolder_ThumbOFF", obj).css({
width : obj.width() + 2 * options.playerPadding - el.width() - 3 * options.playlistPadding + "px"
});
} else {
$(".thumbsHolder_ThumbOFF", obj).css({
width : obj.width() + 2 * options.playerPadding - 2 * options.playlistPadding + "px"
});
}
/*
target.mousewheel(function(value, text, dataAndEvents, deepDataAndEvents) {
value.preventDefault();
value = el.slider("value");
if (1 < parseInt(value) && -1 == parseInt(text) || 100 > parseInt(value) && 1 == parseInt(text)) {
value += text;
el.slider("value", value);
callback(value, data, options, thumbsHolder_Thumb, el, node);
}
});
*/
var $this = $(".thumbsHolder_ThumbOFF", obj);
$this.css({
background : options.playlistRecordBgOffColor,
"border-bottom-color" : options.playlistRecordBottomBorderOffColor,
color : options.playlistRecordTextOffColor
});
$this.click(function() {
if (!data.is_changeSrc) {
/** @type {boolean} */
options.autoPlay = true;
var type = $(this).attr("rel");
$this.css({
background : options.playlistRecordBgOffColor,
"border-bottom-color" : options.playlistRecordBottomBorderOffColor,
color : options.playlistRecordTextOffColor
});
data.current_img_no = type;
setCookie(options, "cookie_current_img_no", data.current_img_no);
initialize(data, options, $this, thumbsHolder_Thumb, el, node, obj, e, self, tmp, i, c, value, head);
}
});
$this.mouseover(function() {
$(this).css({
background : options.playlistRecordBgOnColor,
"border-bottom-color" : options.playlistRecordBottomBorderOnColor,
color : options.playlistRecordTextOnColor
});
});
$this.mouseout(function() {
var $this = $(this);
var rel = $this.attr("rel");
if (data.current_img_no != rel) {
$this.css({
background : options.playlistRecordBgOffColor,
"border-bottom-color" : options.playlistRecordBottomBorderOffColor,
color : options.playlistRecordTextOffColor
});
}
});
toggle(options, data, wrapper, item, label);
wrapper.css({
bottom : options.playerAdditionalBottomMargin + "px",
left : data.playerNewLeft,
"margin-left" : data.playerMarginLeft + "px",
height : data.audioPlayerHeight + options.playlistTopPos + item.height() + "px"
});
label.click(function() {
/** @type {number} */
var imageHeight = 0;
if (data.isMinimized) {
/** @type {boolean} */
data.isMinimized = false;
render(data, head, holder, e, r, center, d, $div, element, i, tmp, self, c, results, readBuffer, obj, item, value, el, label, restoreScript, options, options.playerPadding, options.showRewindBut, options.showPlayBut, options.showPreviousBut, options.showNextBut, options.showShuffleBut, options.showVolumeBut, options.showVolumeSliderBut, options.showTimer, options.showSeekBar, options.showAuthor, options.showTitle, options.showPlaylist, options.showPlaylistOnInit);
imageHeight = data.audioPlayerHeight + options.playlistTopPos + item.height();
} else {
/** @type {boolean} */
data.isMinimized = true;
render(data, head, holder, e, r, center, d, $div, element, i, tmp, self, c, results, readBuffer, obj, item, value, el, label, restoreScript, options, 3, false, true, false, false, false, true, true, false, false, false, false, false, false);
imageHeight = readBuffer.height() + 4;
}
toggle(options, data, wrapper, item, label);
wrapper.animate({
height : imageHeight + "px",
"margin-left" : data.playerMarginLeft
}, data.closeTime, "easeOutQuint", function() {
wrapper.css({
bottom : options.playerAdditionalBottomMargin + "px"
});
});
});
if (options.startMinified) {
label.click();
}
/** @type {number} */
data.closeTime = 450;
data.cookie_initialVolume = check(options, "cookie_initialVolume");
if (data.cookie_initialVolume) {
options.initialVolume = data.cookie_initialVolume;
}
element.slider({
value : options.initialVolume,
step : 0.05,
orientation : "horizontal",
range : "min",
max : 1,
animate : true,
/**
* @param {?} f
* @param {Attr} ui
* @return {undefined}
*/
slide : function(f, ui) {
document.getElementById(data.audioID).volume = ui.value;
setCookie(options, "cookie_initialVolume", ui.value);
},
/**
* @param {boolean} gotoEnd
* @param {boolean} dataAndEvents
* @return {undefined}
*/
stop : function(gotoEnd, dataAndEvents) {
}
});
document.getElementById(data.audioID).volume = options.initialVolume;
element.css({
background : options.volumeOffColor
});
$(".ui-slider-range", element).css({
background : options.volumeOnColor
});
e.click(function() {
var paused = document.getElementById(data.audioID).paused;
update();
if (0 == paused) {
document.getElementById(data.audioID).pause();
e.removeClass("AudioPause");
setCookie(options, "cookie_autoPlay", false);
} else {
document.getElementById(data.audioID).play();
e.addClass("AudioPause");
setCookie(options, "cookie_autoPlay", true);
}
});
holder.click(function() {
/** @type {number} */
document.getElementById(data.audioID).currentTime = 0;
update();
document.getElementById(data.audioID).play();
e.addClass("AudioPause");
});
center.click(function() {
if (!data.is_changeSrc || data.is_very_first) {
/** @type {boolean} */
options.autoPlay = true;
$this.css({
background : options.playlistRecordBgOffColor,
"border-bottom-color" : options.playlistRecordBottomBorderOffColor,
color : options.playlistRecordTextOffColor
});
if (options.shuffle) {
f(options, data);
} else {
if (data.current_img_no == data.total_images - 1) {
/** @type {number} */
data.current_img_no = 0;
} else {
data.current_img_no++;
}
}
setCookie(options, "cookie_current_img_no", data.current_img_no);
initialize(data, options, $this, thumbsHolder_Thumb, el, node, obj, e, self, tmp, i, c, value, head);
}
});
r.click(function() {
if (!data.is_changeSrc || data.is_very_first) {
/** @type {boolean} */
options.autoPlay = true;
$this.css({
background : options.playlistRecordBgOffColor,
"border-bottom-color" : options.playlistRecordBottomBorderOffColor,
color : options.playlistRecordTextOffColor
});
if (options.shuffle) {
f(options, data);
} else {
if (0 > data.current_img_no - 1) {
/** @type {number} */
data.current_img_no = data.total_images - 1;
} else {
data.current_img_no--;
}
}
setCookie(options, "cookie_current_img_no", data.current_img_no);
initialize(data, options, $this, thumbsHolder_Thumb, el, node, obj, e, self, tmp, i, c, value, head);
}
});
d.click(function() {
if (options.shuffle) {
d.removeClass("AudioShuffleON");
/** @type {boolean} */
options.shuffle = false;
setCookie(options, "cookie_shuffle", false);
} else {
d.addClass("AudioShuffleON");
/** @type {boolean} */
options.shuffle = true;
setCookie(options, "cookie_shuffle", true);
}
});
$div.click(function() {
if (document.getElementById(data.audioID).muted) {
/** @type {boolean} */
document.getElementById(data.audioID).muted = false;
$div.removeClass("VolumeButtonMuted");
setCookie(options, "cookie_muteVolume", 0);
} else {
/** @type {boolean} */
document.getElementById(data.audioID).muted = true;
$div.addClass("VolumeButtonMuted");
setCookie(options, "cookie_muteVolume", 1);
}
});
node.swipe({
/**
* @param {?} dataAndEvents
* @param {?} deepDataAndEvents
* @param {string} direction
* @param {number} ignoreMethodDoesntExist
* @param {?} textAlt
* @param {?} keepData
* @return {undefined}
*/
swipeStatus : function(dataAndEvents, deepDataAndEvents, direction, ignoreMethodDoesntExist, textAlt, keepData) {
if (!("up" != direction && "down" != direction)) {
if (!(0 == ignoreMethodDoesntExist)) {
currentScrollVal = el.slider("value");
currentScrollVal = "up" == direction ? currentScrollVal - 1.5 : currentScrollVal + 1.5;
el.slider("value", currentScrollVal);
callback(currentScrollVal, data, options, thumbsHolder_Thumb, el, node);
}
}
},
threshold : 100,
maxTimeThreshold : 500,
fingers : "all"
});
document.getElementById(data.audioID).addEventListener("ended", function() {
if (options.loop) {
center.click();
}
});
data.cookie_timePlayed = check(options, "cookie_timePlayed");
data.cookie_current_img_no = check(options, "cookie_current_img_no");
data.cookie_autoPlay = check(options, "cookie_autoPlay");
data.cookie_shuffle = check(options, "cookie_shuffle");
if (data.cookie_current_img_no) {
data.current_img_no = data.cookie_current_img_no;
} else {
if (options.shuffle) {
f(options, data);
d.addClass("AudioShuffleON");
}
}
if (void 0 != data.cookie_autoPlay) {
/** @type {boolean} */
options.autoPlay = "true" == data.cookie_autoPlay ? true : false;
}
if (void 0 != data.cookie_shuffle) {
if ("true" == data.cookie_shuffle) {
/** @type {boolean} */
options.shuffle = true;
d.addClass("AudioShuffleON");
} else {
/** @type {boolean} */
options.shuffle = false;
d.removeClass("AudioShuffleON");
}
}
initialize(data, options, $this, thumbsHolder_Thumb, el, node, obj, e, self, tmp, i, c, value, head);
data.cookie_muteVolume = check(options, "cookie_muteVolume");
if (1 <= data.cookie_muteVolume) {
$div.click();
}
/** @type {number} */
data.timeupdateInterval = setInterval(function() {
start(data, options, obj, self, tmp, i, e, head, c, value);
}, 300);
document.getElementById(data.audioID).addEventListener("durationchange", function() {
if (data.is_changeSrc) {
data.totalTime = document.getElementById(data.audioID).duration;
}
});
if (options.autoPlay) {
update();
document.getElementById(data.audioID).play();
e.addClass("AudioPause");
} else {
e.removeClass("AudioPause");
}
document.getElementById(data.audioID).addEventListener("canplay", function() {
if (data.cookie_timePlayed) {
document.getElementById(data.audioID).currentTime = data.cookie_timePlayed;
/** @type {null} */
data.cookie_timePlayed = null;
}
if ("iOS" === data.userOS) {
if (data.totalTime != document.getElementById(data.audioID).duration) {
if (options.isSliderInitialized) {
self.slider("destroy");
/** @type {boolean} */
options.isSliderInitialized = false;
}
if (options.isProgressInitialized) {
tmp.progressbar("destroy");
/** @type {boolean} */
options.isProgressInitialized = false;
}
data.totalTime = document.getElementById(data.audioID).duration;
create(data, options, obj, self, tmp, i, e, head);
if (options.isProgressInitialized) {
tmp.progressbar({
value : data.audioPlayerWidth
});
}
}
}
if (-1 == ua.indexOf("opera")) {
if (options.autoPlay) {
update();
document.getElementById(data.audioID).play();
e.addClass("AudioPause");
} else {
e.removeClass("AudioPause");
}
}
});
});
};
$.fn.audio3_html5.defaults = {
skin : "whiteControllers",
initialVolume : 0.5,
autoPlay : false,
loop : true,
shuffle : false,
playerPadding : 5,
playerBg : "#000000",
bufferEmptyColor : "#929292",
bufferFullColor : "#454545",
seekbarColor : "#ffffff",
volumeOffColor : "#454545",
volumeOnColor : "#ffffff",
timerColor : "#ffffff",
songAuthorTitleColor : "#fffff",
showRewindBut : false,
showPlayBut : true,
showPreviousBut : true,
showNextBut : true,
showShuffleBut : true,
showVolumeBut : true,
showVolumeSliderBut : true,
showTimer : true,
showSeekBar : true,
showAuthor : true,
showTitle : true,
showPlaylist : true,
showPlaylistOnInit : true,
playlistTopPos : 0,
playlistBgColor : "#000000",
playlistRecordBgOffColor : "#000000",
playlistRecordBgOnColor : "#333333",
playlistRecordBottomBorderOffColor : "#333333",
playlistRecordBottomBorderOnColor : "#FFFFFF",
playlistRecordTextOffColor : "#777777",
playlistRecordTextOnColor : "#FFFFFF",
numberOfThumbsPerScreen : 7,
playlistPadding : 4,
showPlaylistNumber : true,
continuouslyPlayOnAllPages : true,
playerAdditionalBottomMargin : 1,
playerAdditionalLeftMargin : 1,
playerPossition : "left",
startMinified : true,
isSliderInitialized : false,
isProgressInitialized : false
};
})(jQuery);
Modifié par kuremo (10 May 2017 - 22:57)