From 40589e41ace955977935a3e3f3ce3a95fca4f614 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Mon, 14 Apr 2014 15:42:18 +0000 Subject: [PATCH] --- js/libs/fluidbook/fluidbook.js | 22 + js/libs/fluidbook/fluidbook.resize.js | 600 +++++++++++++------------- 2 files changed, 328 insertions(+), 294 deletions(-) diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js index 7f43000a..aeba36b2 100644 --- a/js/libs/fluidbook/fluidbook.js +++ b/js/libs/fluidbook/fluidbook.js @@ -753,6 +753,8 @@ Fluidbook.prototype = { } } else if (view == 'video') { this.openVideo(param1, cb); + } else if (view == 'audio') { + this.openAudio(param1, cb); } else if (view == 'webvideo') { this.openWebVideo(param1, param2, cb); } else if (view == 'multimedia') { @@ -906,6 +908,26 @@ Fluidbook.prototype = { callback(); } }, + openAudio: function(audio, callback) { + var a = $('a[href="#/audio/' + audio + '"]'); + var markup = decodeURIComponent($(a).attr('data-audio')); + var view = '
' + this.l10n.__('back') + '
'; + view += '
'; + view += markup; + view += '
'; + $("#view").append('
' + view + '
'); + this.stats.track(11); + var $this = this; + var times = [250, 500, 750, 1000, 1250]; + $.each(times, function(k, v) { + setTimeout(function() { + $this.resize.resizePopupAudios(); + }, v); + }); + if (callback != undefined) { + callback(); + } + }, openWebVideo: function(service, video, callback) { var view = '
' + this.l10n.__('back') + '
'; diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js index 77deb90d..e8a8358c 100644 --- a/js/libs/fluidbook/fluidbook.resize.js +++ b/js/libs/fluidbook/fluidbook.resize.js @@ -1,294 +1,306 @@ -function FluidbookResize(fluidbook) { - this.fluidbook = fluidbook; - this.marginw = 50; - this.marginh = 20; - this.corr = 0.8; - this.referenceWidthLandscape = 1024; - this.referenceWidthPortrait =400; - this.referenceHeight = 600; - this.orientation = ''; - this.textScale = 2; - this.bookScale = 1; - this.ww = $(window).width(); - this.hh = $(window).height(); - this.init(); - this.navresizeTimeout = 0; -} - -FluidbookResize.prototype = { - init: function() { - - var left = this.fluidbook.l10n.dir == 'ltr' ? '0%' : '100%'; - var right = this.fluidbook.l10n.dir == 'ltr' ? '100%' : '0%'; - - $("#nav,#searchHints").transform({ - origin: [left, '0%'] - }); - - $("#logo").transform({ - origin: [right, '0%'] - }); - - $("#footer").transform({ - origin: [right, '100%'] - }); - - $("#next").transform({ - origin: [right, '50%'] - }); - - $("#previous").transform({ - origin: [left, '50%'] - }); - }, - resize: function(init) { - if (init == undefined || init == null) { - init = false; - } - - $("#main").hide(); - - var $this = this; - this.updateWindow(); - this.handleOrientation(); - - var interfaceScale; - if (this.orientation == 'landscape') { - interfaceScale = Math.min(1, this.ww / this.referenceWidthLandscape, this.hh / this.referenceHeight); - } else if (this.orientation == 'portrait') { - var nminwidth = ($("#nav a").length * 51) + 205+50; - var refWidth = Math.max(this.referenceWidthPortrait, nminwidth); - - interfaceScale = Math.min(1, this.ww / refWidth, this.hh / this.referenceHeight); - } - var navScale = interfaceScale * parseInt(this.fluidbook.datas.mobileNavScale) / 100; - var cssInterfaceScale = [interfaceScale, interfaceScale]; - var cssNavScale = [navScale, navScale]; - - $("#main").css({ - width: this.ww, - height: this.hh - }); - - this.resizeView(); - - var marginY, marginX, marginTop, marginBottom, marginLeft, marginRight; - - if (this.fluidbook.pad.enabled) { - marginY = 0; - marginX = 0; - extraX = 0; - marginTop = 0; - marginBottom = 0; - marginLeft = 0; - marginRight = 0; - } else { - marginX = 50; - marginY = 20; - - var extraX = parseInt(this.fluidbook.datas.mobileExtraXSpace); - if (isNaN(extraX)) { - extraX = 0; - } - - marginTop = (this.fluidbook.datas.menuHeight + marginY) * interfaceScale; - marginBottom = (10 + marginY) * interfaceScale; - marginLeft = (marginX + extraX) * interfaceScale; - marginRight = marginLeft; - } - - var aw = this.ww - marginLeft - marginRight; - var ah = this.hh - marginTop - marginBottom; - var fhh = this.fluidbook.datas.height; - var fww = this.fluidbook.datas.width; - if (this.orientation == 'landscape') { - fww *= 2; - } - - this.bookScale = Math.min(aw / fww, ah / fhh); - var fw = this.bookScale * fww; - var fh = this.bookScale * fhh; - $("#fluidbook").transform({ - scale: [this.bookScale, this.bookScale], - origin: ['50%', '50%'] - }); - var top = marginTop + (ah - fhh) / 2; - var left = marginLeft + (aw - fww) / 2; - $("#fluidbook").css({ - top: top, - left: left, - width: fww, - height: fhh - }); - - - $("#next").transform({ - scale: cssInterfaceScale, - translateX: 40 * (1 - interfaceScale) + 'px' - }); - - $("#previous").transform({ - scale: cssInterfaceScale, - translateX: -40 * (1 - interfaceScale) + 'px' - }) - - $("#nav,#logo,footer,#searchHints").transform({ - scale: navScale - }); - - var headerHeight = this.fluidbook.datas.menuHeight * navScale; - $('header').css({ - height: headerHeight, - backgroundSize: '100% ' + headerHeight + 'px' - }); - - this.refw = fw; - this.refh = fh; - - if (this.fluidbook.help) { - this.fluidbook.help.resize(this.ww, this.hh, interfaceScale, navScale); - } - this.fluidbook.coquillette.resize(this.ww, this.hh); - this.fluidbook.background.resize(this.ww, this.hh); - - var timeout = 0; - if (this.fluidbook.support.android) { - timeout = 1000; - } - - if (timeout > 0) { - $("#next,#previous").hide(); - clearTimeout(this.navresizeTimeout); - this.navresizeTimeout = setTimeout(function() { - $this.resizeNav(interfaceScale) - }, timeout); - } else { - this.resizeNav(interfaceScale); - } - - - - this.resizePopupVideos(); - this.resizeSplash(); - - if (this.fluidbook.form) { - this.fluidbook.form.resize(); - } - - $("#main").show(); - }, - resizeNav: function(interfaceScale) { - var topNext = (this.hh - 100 * interfaceScale) / 2; - $("#next,#previous").css({ - top: topNext - }); - $("#next,#previous").show(); - }, - resizePopupVideos: function() { - var maxh = this.hh - 80; - $(".mview .videoContainer video").each(function() { - var w = $(window).width() - 40; - - var ratio = parseInt($(this).attr('data-width')) / parseInt($(this).attr('data-height')); - var h = w / ratio; - $(this).css({ - height: h, - maxHeight: maxh - }); - }); - }, - resizeSplash: function() { - if ($("#splash").length == 0) { - return; - } - $("#splash").css({ - width: this.ww, - height: this.hh - }); - - if ($("#splash").css('opacity') == 0) { - $("#splash").css('opacity', 1); - } - - var lw = $("#splash .logo").width(); - var lh = $("#splash .logo").height(); - - $("#splash .logo").css({ - top: (this.hh / 2) - 30 - lh - 10, - left: (this.ww - lw) / 2 - }); - }, - updateWindow: function() { - this.ww = $(window).width(); - this.hh = $(window).height(); - }, - resizeView: function() { - var $this = this; - this.updateWindow(); - - $(".mview").css({ - width: this.ww, - minHeight: this.hh, - maxHeight: this.hh, - height: this.hh - }); - - $(".mview").find('.caption,.content').css({ - width: this.ww - }); - - - $(".mview .caption h2").each(function() { - var wavailable = $this.ww; - $(this).parent().find('a.back').each(function() { - wavailable -= ($(this).outerWidth() + 10) * 2; - }); - $(this).css('max-width', wavailable); - }); - - if ($("#archivesview").length == 1) { - var w = this.fluidbook.datas.filesInfos.archives.width; - var ratio = $("#archivesview img").width() / w; - $("#archivesview .links").transform({scale: [ratio]}); - } - - $(".bookmarkView").each(function() { - var w = $(this).parent().width(); - var perCol = Math.floor(w / 120); - - var uw = perCol * 120; - var m = (w - uw) / 2; - $(this).css({ - width: uw, - margin: '0 auto' - }) - }); - }, - handleOrientation: function() { - var changeOrientation = this.orientation != ''; - var o = this.fluidbook.support.getOrientation(); - var newo; - if (o == 0 || o == 180) { - newo = 'portrait'; - $('body').removeClass('landscape'); - } else { - newo = 'landscape'; - $('body').removeClass('portrait'); - } - var force = this.fluidbook.datas.mobileNavigationType != 'book'; - if (!force && this.orientation == newo) { - return; - } - this.orientation = newo; - - $('body').addClass(this.orientation); - - this.fluidbook.displayOnePage = (this.orientation == 'portrait'); - - if (changeOrientation) { - this.fluidbook.resetZoom(); - this.fluidbook.pageTransition(); - } - } -}; - +function FluidbookResize(fluidbook) { + this.fluidbook = fluidbook; + this.marginw = 50; + this.marginh = 20; + this.corr = 0.8; + this.referenceWidthLandscape = 1024; + this.referenceWidthPortrait = 400; + this.referenceHeight = 600; + this.orientation = ''; + this.textScale = 2; + this.bookScale = 1; + this.ww = $(window).width(); + this.hh = $(window).height(); + this.init(); + this.navresizeTimeout = 0; +} + +FluidbookResize.prototype = { + init: function() { + + var left = this.fluidbook.l10n.dir == 'ltr' ? '0%' : '100%'; + var right = this.fluidbook.l10n.dir == 'ltr' ? '100%' : '0%'; + + $("#nav,#searchHints").transform({ + origin: [left, '0%'] + }); + + $("#logo").transform({ + origin: [right, '0%'] + }); + + $("#footer").transform({ + origin: [right, '100%'] + }); + + $("#next").transform({ + origin: [right, '50%'] + }); + + $("#previous").transform({ + origin: [left, '50%'] + }); + }, + resize: function(init) { + if (init == undefined || init == null) { + init = false; + } + + $("#main").hide(); + + var $this = this; + this.updateWindow(); + this.handleOrientation(); + + var interfaceScale; + if (this.orientation == 'landscape') { + interfaceScale = Math.min(1, this.ww / this.referenceWidthLandscape, this.hh / this.referenceHeight); + } else if (this.orientation == 'portrait') { + var nminwidth = ($("#nav a").length * 51) + 205 + 50; + var refWidth = Math.max(this.referenceWidthPortrait, nminwidth); + + interfaceScale = Math.min(1, this.ww / refWidth, this.hh / this.referenceHeight); + } + var navScale = interfaceScale * parseInt(this.fluidbook.datas.mobileNavScale) / 100; + var cssInterfaceScale = [interfaceScale, interfaceScale]; + var cssNavScale = [navScale, navScale]; + + $("#main").css({ + width: this.ww, + height: this.hh + }); + + this.resizeView(); + + var marginY, marginX, marginTop, marginBottom, marginLeft, marginRight; + + if (this.fluidbook.pad.enabled) { + marginY = 0; + marginX = 0; + extraX = 0; + marginTop = 0; + marginBottom = 0; + marginLeft = 0; + marginRight = 0; + } else { + marginX = 50; + marginY = 20; + + var extraX = parseInt(this.fluidbook.datas.mobileExtraXSpace); + if (isNaN(extraX)) { + extraX = 0; + } + + marginTop = (this.fluidbook.datas.menuHeight + marginY) * interfaceScale; + marginBottom = (10 + marginY) * interfaceScale; + marginLeft = (marginX + extraX) * interfaceScale; + marginRight = marginLeft; + } + + var aw = this.ww - marginLeft - marginRight; + var ah = this.hh - marginTop - marginBottom; + var fhh = this.fluidbook.datas.height; + var fww = this.fluidbook.datas.width; + if (this.orientation == 'landscape') { + fww *= 2; + } + + this.bookScale = Math.min(aw / fww, ah / fhh); + var fw = this.bookScale * fww; + var fh = this.bookScale * fhh; + $("#fluidbook").transform({ + scale: [this.bookScale, this.bookScale], + origin: ['50%', '50%'] + }); + var top = marginTop + (ah - fhh) / 2; + var left = marginLeft + (aw - fww) / 2; + $("#fluidbook").css({ + top: top, + left: left, + width: fww, + height: fhh + }); + + + $("#next").transform({ + scale: cssInterfaceScale, + translateX: 40 * (1 - interfaceScale) + 'px' + }); + + $("#previous").transform({ + scale: cssInterfaceScale, + translateX: -40 * (1 - interfaceScale) + 'px' + }) + + $("#nav,#logo,footer,#searchHints").transform({ + scale: navScale + }); + + var headerHeight = this.fluidbook.datas.menuHeight * navScale; + $('header').css({ + height: headerHeight, + backgroundSize: '100% ' + headerHeight + 'px' + }); + + this.refw = fw; + this.refh = fh; + + if (this.fluidbook.help) { + this.fluidbook.help.resize(this.ww, this.hh, interfaceScale, navScale); + } + this.fluidbook.coquillette.resize(this.ww, this.hh); + this.fluidbook.background.resize(this.ww, this.hh); + + var timeout = 0; + if (this.fluidbook.support.android) { + timeout = 1000; + } + + if (timeout > 0) { + $("#next,#previous").hide(); + clearTimeout(this.navresizeTimeout); + this.navresizeTimeout = setTimeout(function() { + $this.resizeNav(interfaceScale) + }, timeout); + } else { + this.resizeNav(interfaceScale); + } + + + + this.resizePopupVideos(); + this.resizeSplash(); + + if (this.fluidbook.form) { + this.fluidbook.form.resize(); + } + + $("#main").show(); + }, + resizeNav: function(interfaceScale) { + var topNext = (this.hh - 100 * interfaceScale) / 2; + $("#next,#previous").css({ + top: topNext + }); + $("#next,#previous").show(); + }, + resizePopupVideos: function() { + var maxh = this.hh - 80; + $(".mview .videoContainer video").each(function() { + var w = $(window).width() - 40; + + var ratio = parseInt($(this).attr('data-width')) / parseInt($(this).attr('data-height')); + var h = w / ratio; + $(this).css({ + height: h, + maxHeight: maxh + }); + }); + }, + resizePopupAudios: function() { + $(".mview audio").each(function() { + var w = $(window).width() - 200; + var h = 30; + $(this).css({ + height: h, + width: w, + display: 'block', + margin: '40px auto' + }); + }); + }, + resizeSplash: function() { + if ($("#splash").length == 0) { + return; + } + $("#splash").css({ + width: this.ww, + height: this.hh + }); + + if ($("#splash").css('opacity') == 0) { + $("#splash").css('opacity', 1); + } + + var lw = $("#splash .logo").width(); + var lh = $("#splash .logo").height(); + + $("#splash .logo").css({ + top: (this.hh / 2) - 30 - lh - 10, + left: (this.ww - lw) / 2 + }); + }, + updateWindow: function() { + this.ww = $(window).width(); + this.hh = $(window).height(); + }, + resizeView: function() { + var $this = this; + this.updateWindow(); + + $(".mview").css({ + width: this.ww, + minHeight: this.hh, + maxHeight: this.hh, + height: this.hh + }); + + $(".mview").find('.caption,.content').css({ + width: this.ww + }); + + + $(".mview .caption h2").each(function() { + var wavailable = $this.ww; + $(this).parent().find('a.back').each(function() { + wavailable -= ($(this).outerWidth() + 10) * 2; + }); + $(this).css('max-width', wavailable); + }); + + if ($("#archivesview").length == 1) { + var w = this.fluidbook.datas.filesInfos.archives.width; + var ratio = $("#archivesview img").width() / w; + $("#archivesview .links").transform({scale: [ratio]}); + } + + $(".bookmarkView").each(function() { + var w = $(this).parent().width(); + var perCol = Math.floor(w / 120); + + var uw = perCol * 120; + var m = (w - uw) / 2; + $(this).css({ + width: uw, + margin: '0 auto' + }) + }); + }, + handleOrientation: function() { + var changeOrientation = this.orientation != ''; + var o = this.fluidbook.support.getOrientation(); + var newo; + if (o == 0 || o == 180) { + newo = 'portrait'; + $('body').removeClass('landscape'); + } else { + newo = 'landscape'; + $('body').removeClass('portrait'); + } + var force = this.fluidbook.datas.mobileNavigationType != 'book'; + if (!force && this.orientation == newo) { + return; + } + this.orientation = newo; + + $('body').addClass(this.orientation); + + this.fluidbook.displayOnePage = (this.orientation == 'portrait'); + + if (changeOrientation) { + this.fluidbook.resetZoom(); + this.fluidbook.pageTransition(); + } + } +}; + -- 2.39.5