From 9dd3cb4c0fc52118063f7158b722f5814135842c Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Wed, 31 May 2017 19:09:52 +0200 Subject: [PATCH] wip #1388 @7 --- _index.html | 1 + js/libs/fluidbook/fluidbook.menu.js | 121 ++++++++++++++++++---- js/libs/fluidbook/fluidbook.resize.js | 84 ---------------- js/main.js | 6 +- style/fluidbook.less | 138 ++++++++++++++++++-------- style/variables.less | 11 +- 6 files changed, 216 insertions(+), 145 deletions(-) diff --git a/_index.html b/_index.html index 39cd025e..ffa6246d 100644 --- a/_index.html +++ b/_index.html @@ -53,6 +53,7 @@
+
diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js index dc2d9e51..cd2d92be 100644 --- a/js/libs/fluidbook/fluidbook.menu.js +++ b/js/libs/fluidbook/fluidbook.menu.js @@ -77,7 +77,7 @@ FluidbookMenu.prototype = { } }, openingView: function (callback) { - console.log('openingView'); + $("#viewOverlay").show(); var $this = this; this.fluidbook.resize.resizeView(); this.fluidbook.tooltip.hideTooltip(); @@ -197,7 +197,7 @@ FluidbookMenu.prototype = { var times = [250, 500, 750, 1000, 1250]; $.each(times, function (k, v) { setTimeout(function () { - $this.fluidbook.resize.resizePopupVideos(); + $this.resize(); }, v); }); if (callback != undefined) { @@ -228,7 +228,7 @@ FluidbookMenu.prototype = { var times = [250, 500, 750, 1000, 1250]; $.each(times, function (k, v) { setTimeout(function () { - $this.fluidbook.resize.resizePopupAudios(); + $this.resize(); }, v); }); if (callback != undefined) { @@ -241,21 +241,15 @@ FluidbookMenu.prototype = { var view = '
' + this.closeButton() + '
'; view += '
'; - var h = this.fluidbook.resize.getPopupWebVideoHeight(); - if (service == 'youtube') { - view += ''; + view += ''; } else if (service == 'dailymotion') { - view += '' + view += '' } else if (service == 'brightcove') { - view += '' + view += '' } view += '
'; - $("#view").append('
' + view + '
'); - $("#view .mview:last iframe").each(function () { - $(this).attr('height', h); - $(this).css('height', h); - }); + $("#view").append('
' + view + '
'); this.fluidbook.stats.track(11); if (callback != undefined) { callback(); @@ -388,6 +382,7 @@ FluidbookMenu.prototype = { } , closeView: function (callback, all, animate) { + $("#viewOverlay").hide(); var $this = this; if (all == undefined) { all = false; @@ -427,27 +422,34 @@ FluidbookMenu.prototype = { autoAlpha: 0, onComplete: function () { $this.fluidbook.video.killVideosIn(mview); mview.remove(); - + callback(); } }); - callback(); + if (all) { $("#main").show(); $('body').removeClass('view'); } resize(); - } - , + }, resize: function (ww, hh) { + if (ww == undefined) { + ww = this.fluidbook.resize.ww; + } + if (hh == undefined) { + hh = this.fluidbook.resize.hh; + } var m = $(".mview"); var w = ww * 0.6; var h = hh * 0.8; var forceHeight = false; var fullscreen = false; + $("#viewOverlay").css({width: ww, height: hh}); + switch (m.data('menu')) { case 'chapters': w = this.fluidbook.datas.chaptersColMaxWidth * 1.5; @@ -459,10 +461,80 @@ FluidbookMenu.prototype = { case 'share': w = 200; break; + case 'locales': + w = 300; + break; case 'bookmarks': var max = Math.floor((ww * 0.8) / 120) * 120 + 40; w = Math.min(max, Math.max(m.find('.doubleThumb').length, 4) * 120 + 40); break; + case 'webvideo': + var w = Math.max(ww * 0.8, 600); + h = (w / 16) * 9; + forceHeight = true; + if (w > ww * 0.9) { + fullscreen = true; + w = ww; + } + break; + case 'video': + var video = m.find('video'); + + nw = parseInt($(video).data('width')); + nh = parseInt($(video).data('height')); + + forceHeight = true; + + var w = Math.max(ww * 0.8); + var h = Math.max(hh * 0.8); + if (ww < 600) { + w = ww; + h = hh; + fullscreen = true; + } + + var s = Math.min(w / nw, h / nh); + + if (!fullscreen) { + w = nw * s; + h = nh * s; + m.find('.videoContainer').css({paddingLeft: 0, paddingTop: 0}); + } else { + m.find('.videoContainer').css({paddingLeft: (w - nw * s) / 2, paddingTop: (h - nh * s) / 2}); + } + m.find('.videoContainer').css({width: w, height: h}); + + break; + case 'multimedia': + var iframe = m.find('iframe,img'); + + nw = parseInt($(iframe).data('width')); + nh = parseInt($(iframe).data('height')); + + forceHeight = true; + + var w = Math.max(ww * 0.8); + var h = Math.max(hh * 0.8); + if (ww < 600) { + w = ww; + h = hh; + fullscreen = true; + } + + var s = Math.min(w / nw, h / nh); + console.log('scale : ' + s); + if (iframe.is('img')) { + s = Math.min(1, s); + } + if (!fullscreen) { + w = nw * s; + h = nh * s; + } + var x = ( w - (nw * s) ) / 2; + var y = (h - (nh * s)) / 2; + + m.find('.multimediaScale').css({width: nw, height: nh, overflow: 'hidden'}).transform({translateX: x + 'px', translateY: y + 'px', scale: [s, s], origin: [0, 0]}).css('text-align', 'left'); + break; default: break; } @@ -505,5 +577,18 @@ FluidbookMenu.prototype = { var ratio = $("#archivesview img").width() / w; $("#archivesview .links").transform({scale: [ratio]}); } - } + }, + + 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' + }); + }); + }, }; \ No newline at end of file diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js index f0fa937c..7ad8f0d2 100644 --- a/js/libs/fluidbook/fluidbook.resize.js +++ b/js/libs/fluidbook/fluidbook.resize.js @@ -196,8 +196,6 @@ FluidbookResize.prototype = { this.resizeNav(interfaceScale); } - - this.resizePopupVideos(); this.resizeSplash(); /*if (this.fluidbook.support.ie9) { this.resizeIE9Multimedia(); @@ -220,89 +218,7 @@ FluidbookResize.prototype = { $("#next,#previous").show(); }, - getPopupVideoHeight: function () { - this.updateWindow(); - return this.hh - 80; - }, - - getPopupWebVideoHeight: function () { - return $(window).height() - 44; - }, - - //resizeIE9Multimedia: function () { - //return; - // var links = $("#links .link.multimedia"); - // $(links).each(function () { - // $(this).css('zoom', (this.bookScale)); - // var i = $(this).find("iframe") - // var scale = this.bookScale * $(this).transform('scale'); - // if ($(i).length) { - // var iframe = $(i).contents(); - // // $(iframe).find('#swiffycontainer>div').css('zoom', (1 / this.bookScale)); - // } - // }); - //}, - - resizePopupVideos: function () { - var $this = this; - var maxh = this.getPopupVideoHeight(); - var maxw = $(window).width() - 40; - var w; - var h; - - $(".mview .videoContainer video").each(function () { - if ($(this).data('width') !== null) { - w = parseInt($(this).data('width')); - h = parseInt($(this).data('height')); - var s = Math.min(maxw / w, maxh / h); - w *= s; - h *= s; - - $(this).css({ - width: w - }); - if (Modernizr.ios7) { - $(this).css({ - height: h - }); - } - } - - $(this).css({ - maxHeight: maxh, - maxWidth: maxw - }); - }); - - - $(".mview .webvideo").each(function () { - $(this).css('height', $this.getPopupWebVideoHeight()); - }); - - $(".mview .multimediaScale").each(function () { - var iframe = $(this).find('iframe'); - - w = parseInt($(iframe).attr('width')); - h = parseInt($(iframe).attr('height')); - var s = Math.min(maxw / w, maxh / h); - var x = ( $(window).width() - (w * s) ) / 2; - - $(this).transform({translateX: x + 'px', scale: [s, s], origin: [0, 0]}).css('text-align', 'left'); - }); - }, - 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; diff --git a/js/main.js b/js/main.js index 4ce48657..88f80589 100644 --- a/js/main.js +++ b/js/main.js @@ -370,7 +370,7 @@ try { $(document).on('click', ".mview .back", function () { if ($(this).hasClass('closeView')) { - fluidbook.closeView(function () { + fluidbook.menu.closeView(function () { }, false); if ($(this).attr('href') != '#') { maskHashChange = true; @@ -383,7 +383,7 @@ try { return false; } if ($(this).hasClass('one')) { - fluidbook.closeView(function () { + fluidbook.menu.closeView(function () { }, false); if ($(this).attr('href') != '#') { @@ -414,7 +414,7 @@ try { $(document).on('click', '.share', function () { var f = 'send' + ucfirst($(this).data('service')); fluidbook[f](); - fluidbook.closeView(function () { + fluidbook.menu.closeView(function () { }, false); return false; }); diff --git a/style/fluidbook.less b/style/fluidbook.less index a88da8de..d1cd412a 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -801,7 +801,7 @@ footer.hidden, header.hidden, #interface.hidden { opacity: 0.01; display: block; cursor: pointer; - [data-enabled], :hover { + &[data-enabled], &:hover { opacity: 1 !important; -moz-transition: none; -webkit-transition: none; @@ -827,6 +827,16 @@ footer.hidden, header.hidden, #interface.hidden { @menu-padding: 30px; /* View */ +#viewOverlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 21; + cursor: default; +} + .mview { background-color: @menu-background; color: @menu-text; @@ -841,6 +851,32 @@ footer.hidden, header.hidden, #interface.hidden { max-width: 600px; width: 100%; + &[data-menu="multimedia"], &[data-menu="webvideo"], &[data-menu="video"] { + .caption { + height: 0; + padding: 0; + .back { + opacity: 0; + transition: opacity 300ms; + } + } + + &:hover { + .caption { + .back { + opacity: 1; + } + } + } + } + + &[data-menu="video"] { + iframe { + width: 100%; + height: 100%; + } + } + .fonctions { padding: 0 @menu-padding @menu-padding 0; text-align: right; @@ -894,6 +930,7 @@ footer.hidden, header.hidden, #interface.hidden { height: 60px; padding: 22px; background-color: @menu-button-background; + z-index: 1; } } } @@ -912,6 +949,9 @@ form input[type="text"], form input[type="email"] { color: @menu-field-text; } +//$res[] = '#indexView .thumb img{width:100px;height:' . $thumbh . 'px;}'; +//$res[] = '#indexView .doubleThumb{height:' . $thumbh . 'px;' . wsHTML5::writeCSSUA('box-shadow', '0 0 3px ' . $shadowColor) . '}'; + #indexView { margin: auto; .doubleThumb, .padding { @@ -930,49 +970,71 @@ form input[type="text"], form input[type="email"] { padding: 20px @padding 0; .doubleThumb { width: 100px; - &.left { - margin-right: 10px; + } + } + + .doubleThumb { + height: @thumb-height; + &.left { + margin-right: 10px; + } + &.simple { + .overlay { + width: 100px; } - &.simple { - overlay { - .overlay { - width: 100px; - } + &.left { + .hits { + left: -50px; } } - .overlay { - background-color: rgba(0, 0, 0, 0.5); - position: absolute; - top: 0px; - left: 0px; - width: 200px; - z-index: 4; - } - - .hits { - position: relative; - display: inline; - top: 30px; - z-index: 5; - font-size: 12px; - &.yes { - padding: 5px; - border-radius: 5px; + &.right { + .hits { + left: 50px; } } + } + .overlay { + background-color: rgba(0, 0, 0, 0.5); + position: absolute; + top: 0px; + left: 0px; + width: 200px; + z-index: 4; + } + + @hits-top: (@thumb-height - 26) / 2; - .padding { - height: 1px; + .hits { + position: relative; + display: inline; + + z-index: 5; + font-size: 12px; + height: 26px; + top: @hits-top; + &.yes { + padding: 5px; + border-radius: 5px; + color: @menu-text; + background-color: @menu-background; + } } } + + .padding { + height: 1px; + } + .thumb { position: absolute; top: 0px; left: 0px; font-size: 12px; img { - background: #fff; + width: 100px; + height: @thumb-height; + background: #fff } .number { text-align: center; @@ -983,7 +1045,6 @@ form input[type="text"], form input[type="email"] { } &.right { left: 100px; - left: 0; } &.simple { width: 100px; @@ -1280,8 +1341,6 @@ ul.chapters.shareList a.level0 img { /* Videos */ .mview .videoContainer { - - padding: 20px; width: 100%; height: 100%; } @@ -1303,7 +1362,7 @@ ul.chapters.shareList a.level0 img { /* multimedia */ .mview .multimediaContainer { - padding: 20px 20px 20px 20px; + padding: 0; } .mview img.multimedia { @@ -1797,6 +1856,7 @@ a.button { @rail-opacity: 1; @handle: @menu-button-background; @handle-hover: @menu-text; +@scroll-border-radius: 0px; // Scrollbars /* perfect-scrollbar v0.7.1 */ @@ -1863,9 +1923,9 @@ a.button { position: absolute; /* please don't change 'position' */ background-color: @handle; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; + -webkit-border-radius: @scroll-border-radius; + -moz-border-radius: @scroll-border-radius; + border-radius: @scroll-border-radius; -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out; transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out; -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; @@ -1899,9 +1959,9 @@ a.button { position: absolute; /* please don't change 'position' */ background-color: @handle; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; + -webkit-border-radius: @scroll-border-radius; + -moz-border-radius: @scroll-border-radius; + border-radius: @scroll-border-radius; -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out; transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out; -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; diff --git a/style/variables.less b/style/variables.less index 29ab5cfc..98baff6a 100644 --- a/style/variables.less +++ b/style/variables.less @@ -1,4 +1,13 @@ @import "book-variables"; -@menu-button-background: overlay(@menu-background, #c0c0c0); +.menu-button-overlay() when not (@menu-background = #ffffff) { + @menu-button-background: overlay(@menu-background, #c0c0c0); +} + +.menu-button-overlay() when (@menu-background = #ffffff) { + @menu-button-background: screen(@menu-text, #c0c0c0); +} + +.menu-button-overlay(); + @font: 'Open Sans', Arial, Helvetica, sans-serif; \ No newline at end of file -- 2.39.5