From: Vincent Vanwaelscappel Date: Wed, 3 Apr 2019 12:05:07 +0000 (+0200) Subject: wip #2657 @9 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=8871ad8818808f384b975e6da7e5d39e7bc601ce;p=fluidbook-html5.git wip #2657 @9 --- diff --git a/_index.html b/_index.html index 4f281629..915aa3f3 100644 --- a/_index.html +++ b/_index.html @@ -59,27 +59,29 @@
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+ +
+
+
+
-
- -
-
-
-
diff --git a/images/interface.svg b/images/interface.svg index a258cba8..aa0b0aeb 100644 --- a/images/interface.svg +++ b/images/interface.svg @@ -22,11 +22,21 @@ - + + + + + + + - + 1); + return {previous: previous, next: next}; + }, + hideUnnecessaryButtons: function (page) { + var speed = 500; + if (page === undefined) { + page = this.currentPage; + speed = 0; + } + + var visibility = this.getButtonsVisibility(page); if (Modernizr.csstransitions) { - if (next) { + if (visibility.next) { $("#next").removeClass('hidden'); } else { $("#next").addClass('hidden'); } - if (previous) { + if (visibility.previous) { $("#previous").removeClass('hidden'); } else { $("#previous").addClass('hidden'); @@ -545,13 +551,13 @@ Fluidbook.prototype = { } else { $("#previous,#next").removeClass('hidden'); - if (previous) { + if (visibility.previous) { $("#previous:hidden").fadeIn(speed); } else { $("#previous:visible").fadeOut(speed); } - if (next) { + if (visibility.next) { $("#next:hidden").fadeIn(speed); } else { $("#next:visible").fadeOut(speed); diff --git a/js/libs/fluidbook/fluidbook.mobilefirst.js b/js/libs/fluidbook/fluidbook.mobilefirst.js index b564bb63..cf42df4b 100644 --- a/js/libs/fluidbook/fluidbook.mobilefirst.js +++ b/js/libs/fluidbook/fluidbook.mobilefirst.js @@ -13,4 +13,38 @@ FluidbookMobileFirst.prototype = { $("html").addClass('mobilefirst'); this.fluidbook.datas.soundTheme = ''; }, + + beforeTransition: function (page) { + TweenLite.to("#scroll", this.fluidbook.pagetransitions.getTransitionDuration(page), {scrollTo: 0}); + }, + + afterTransition: function (page) { + $('#pages .mf-nav').remove(); + $("#pages").append(this.getFooterNavigation(page)); + this.fluidbook.resize.resize(); + }, + + resize: function () { + var h = $(".doublePage").outerHeight(); + $('#pages .mf-nav').css('top', h); + h += $("#pages .mf-nav").outerHeight(); + + $("#pages,#fluidbook").css({height: h}); + $("#pages").css('maxHeight', h); + }, + + getFooterNavigation: function (page) { + var visibility = this.fluidbook.getButtonsVisibility(page); + var footer = '
'; + if (visibility.previous) { + footer += ''; + } + footer += '' + page + '/' + this.fluidbook.datas.pages + ''; + if (visibility.next) { + footer += ''; + } + footer += '
'; + + return footer; + }, } \ No newline at end of file diff --git a/js/libs/fluidbook/fluidbook.pagetransitions.js b/js/libs/fluidbook/fluidbook.pagetransitions.js index 997a733f..f21eba19 100644 --- a/js/libs/fluidbook/fluidbook.pagetransitions.js +++ b/js/libs/fluidbook/fluidbook.pagetransitions.js @@ -394,6 +394,11 @@ FluidbookPageTransition.prototype = { $(".axis_y").removeClass('axis_y'); $(".axis_x").removeClass('axis_x'); $("#links").hide(); + + if (this.fluidbook.mobilefirst.enabled) { + this.fluidbook.mobilefirst.beforeTransition(page); + } + this.fluidbook.hideLoader(); this.fluidbook.hideUnnecessaryButtons(page); var animationDuration = transition <= 1 ? 0 : parseFloat(this.fluidbook.datas.mobileTransitionDuration); @@ -464,6 +469,9 @@ FluidbookPageTransition.prototype = { $this.transitionning = false; }, 10); this.fluidbook.links.initLinks(); + if (this.fluidbook.mobilefirst.enabled) { + this.fluidbook.mobilefirst.afterTransition(page); + } $(this.fluidbook).trigger('fluidbook.page.change.end', [this.fluidbook.currentPage]); }, diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js index 9ba72422..cb6ed12e 100644 --- a/js/libs/fluidbook/fluidbook.resize.js +++ b/js/libs/fluidbook/fluidbook.resize.js @@ -129,7 +129,7 @@ FluidbookResize.prototype = { var cssNavScale = [navScale, navScale]; var cssHeaderScale = [headerScale, headerScale]; - $("#main,#z").css({ + $("#main,#z,#scroll").css({ width: this.ww, height: this.hh }); @@ -166,26 +166,41 @@ FluidbookResize.prototype = { } this.bookScale = Math.min(aw / fww, ah / fhh); + var origin = ['50%', '50%']; + if (this.fluidbook.mobilefirst.enabled) { + this.bookScale = Math.min(aw / fww, 1); + origin[1] = '0%'; + } var fw = this.bookScale * fww; var fh = this.bookScale * fhh; $("#fluidbook,#shadow").transform({ scale: [this.bookScale, this.bookScale], - origin: ['50%', '50%'] + origin: origin }); // Hack to fix #2552 if (this.fluidbook.support.iOS && this.fluidbook.pagetransitions.getTransitionType() === 'flip3d') { $('#fluidbook').css('transform', 'translate3d(0,0,-1px) scale(' + this.bookScale + ',' + this.bookScale + ')'); } + var top = marginTop + (ah - fhh) / 2; + var left = marginLeft + (aw - fww) / 2; + if (this.fluidbook.mobilefirst.enabled) { + top = marginTop; + } $("#fluidbook,#shadow").css({ top: top, left: left, width: fww, height: fhh }); + + if (this.fluidbook.mobilefirst.enabled) { + this.fluidbook.mobilefirst.resize(); + } + this.centerOffset = fw / 4; this.fluidbook.pagetransitions.centerBook(); @@ -244,7 +259,7 @@ FluidbookResize.prototype = { $('#loader').css({top: this.hh / 2, left: this.ww / 2}); this.fluidbook.background.resize(this.ww, this.hh); if (this.fluidbook.slider) { - this.fluidbook.slider.resize(this.ww, this.hh, this.orientation == 'portrait'); + this.fluidbook.slider.resize(this.ww, this.hh, this.orientation === 'portrait'); } var timeout = 0; diff --git a/style/fluidbook.less b/style/fluidbook.less index 89f35d0b..38c4be0d 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -367,7 +367,8 @@ body, html { position: absolute; top: 0px; left: 0px; - overflow: hidden; + overflow-x: hidden; + overflow-y: hidden; } /* Search */ @@ -649,6 +650,16 @@ body, html { } } +#scroll { + position: absolute; + top: 0; + left: 0; + z-index: 11; + overflow-x: hidden; + overflow-y: auto; + .hidescrollbar(); +} + /* Fluidbook */ #fluidbook { position: absolute; @@ -2949,3 +2960,5 @@ body > input { #loadedcontents { display: none; } + +@import "mobilefirst.less"; \ No newline at end of file diff --git a/style/mixins.less b/style/mixins.less index c0a2c9f7..b2e9e7d3 100644 --- a/style/mixins.less +++ b/style/mixins.less @@ -1,73 +1,81 @@ .overlayBackground() { - background-color: @menu-overlay; - transition: opacity 400ms; - opacity: 0; + background-color: @menu-overlay; + transition: opacity 400ms; + opacity: 0; } .hideifnot(@display) when not (@display) { - display: none; + display: none; } .highlight-area(@color) { - border-color: @color; - background-color: fade(@color, 30%); + border-color: @color; + background-color: fade(@color, 30%); } .page-transition(@factor) { - -moz-transition: all unit(@page-transition-duration*@factor, s) ease-in-out; - -webkit-transition: all unit(@page-transition-duration*@factor, s) ease-in-out; - -ms-transition: all unit(@page-transition-duration*@factor, s) ease-in-out; - -o-transition: all unit(@page-transition-duration*@factor, s) ease-in-out; - transition: all unit(@page-transition-duration*@factor, s) ease-in-out; + -moz-transition: all unit(@page-transition-duration*@factor, s) ease-in-out; + -webkit-transition: all unit(@page-transition-duration*@factor, s) ease-in-out; + -ms-transition: all unit(@page-transition-duration*@factor, s) ease-in-out; + -o-transition: all unit(@page-transition-duration*@factor, s) ease-in-out; + transition: all unit(@page-transition-duration*@factor, s) ease-in-out; } .menu-color(@base-color) { - @green: max(45, min(255 - 45, green(@base-color))); - @red: max(45, min(255 - 45, red(@base-color))); - @blue: max(45, min(255 - 45, blue(@base-color))); - @secondary: overlay(rgb(@red, @green, @blue), #c0c0c0); - .menu-color-a(@base-color, @secondary); + @green: max(45, min(255 - 45, green(@base-color))); + @red: max(45, min(255 - 45, red(@base-color))); + @blue: max(45, min(255 - 45, blue(@base-color))); + @secondary: overlay(rgb(@red, @green, @blue), #c0c0c0); + .menu-color-a(@base-color, @secondary); } .menu-color(@base-color,@secondary) { - .menu-color-a(@base-color, @secondary); + .menu-color-a(@base-color, @secondary); } .menu-color-a(@background,@button) { - background: @background; + background: @background; - input[type="text"] { - background: @button; - } + input[type="text"] { + background: @button; + } - .fonctions { - a { - background-color: @button; - } - } + .fonctions { + a { + background-color: @button; + } + } - .caption { - div.button, a { - &.back { - background-color: @button; - } - } - } + .caption { + div.button, a { + &.back { + background-color: @button; + } + } + } - .chapters { - a:hover { + .chapters { + a:hover { - background-color: @button; - } - } + background-color: @button; + } + } } .shadowedge-fade-item() { - transition-property: opacity; - &.hidden { - opacity: 0; - } - .ios & { - transition: none !important; - } + transition-property: opacity; + &.hidden { + opacity: 0; + } + .ios & { + transition: none !important; + } } + +.hidescrollbar() { + scrollbar-width: none; + -ms-overflow-style: none; + &::-webkit-scrollbar { + display: none; + } +} \ No newline at end of file diff --git a/style/mobilefirst.less b/style/mobilefirst.less new file mode 100644 index 00000000..8aac51fc --- /dev/null +++ b/style/mobilefirst.less @@ -0,0 +1,72 @@ +#shadow { + .mobilefirst & { + display: none; + } +} + +.mf-nav { + position: absolute; + left: 0; + width: 100%; + height: unit(110*@css-scale, px); + padding: unit(30*@css-scale, px) 0; + color: @page-number-color; + font-size: unit(20*@css-scale, px); + font-weight: 600; + @media @small { + @s: 1.25; + font-size: unit(20*@s*@css-scale, px); + padding: unit(30*@s*@css-scale, px) 0; + height: unit(110*@s*@css-scale, px); + } + + span { + display: block; + text-align: center; + margin-top: 0.9em; + @media @small { + margin-top: 0.7em; + } + } + + a { + display: inline-block; + color: @arrows-color; + background-color: @arrows-background; + font-size: 1.1em; + line-height: 1; + font-weight: 400; + position: absolute; + top: 1.5em; + height: 2.5em; + width: 30%; + text-align: center; + padding-top: 0.7em; + @media @small { + width: 40%; + } + + &.next { + right: 0; + + svg { + right: .8em; + } + } + + &.previous { + left: 0; + + svg { + left: .8em; + } + } + + svg { + position: absolute; + top: 0.8em; + height: 1em; + width: auto; + } + } +} \ No newline at end of file diff --git a/style/variables.less b/style/variables.less index c3e2e461..6e399671 100644 --- a/style/variables.less +++ b/style/variables.less @@ -1,2 +1,4 @@ @import "book-variables"; -@font: 'Open Sans', Arial, Helvetica, sans-serif; \ No newline at end of file + +@font: 'Open Sans', Arial, Helvetica, sans-serif; +@small: ~"screen and (max-width: 640px)"; \ No newline at end of file