From ee043b676846bd81f7e33b871a86af3713b35be7 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Thu, 19 Oct 2017 19:08:08 +0200 Subject: [PATCH] wip #1739 @1.5 --- _index.html | 53 ++++++++++++++------------- js/libs/fluidbook/fluidbook.js | 51 +++++++++++++++++++++++--- js/libs/fluidbook/fluidbook.resize.js | 1 + style/fluidbook.less | 17 +++++++++ style/mixins.less | 8 ++++ 5 files changed, 100 insertions(+), 30 deletions(-) diff --git a/_index.html b/_index.html index 8f70248e..e1b137b2 100644 --- a/_index.html +++ b/_index.html @@ -25,12 +25,13 @@
- -
-
-
-
-
+
+
+
+
+
+
+
@@ -44,27 +45,29 @@
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js index 5093584e..c547a3bb 100644 --- a/js/libs/fluidbook/fluidbook.js +++ b/js/libs/fluidbook/fluidbook.js @@ -379,7 +379,6 @@ Fluidbook.prototype = { return this.pageTransition3D(pageNr); }, pageTransition3D: function (pageNr) { - var $this = this; if ($("#pages").hasClass('_3dtransition')) { return; @@ -395,7 +394,7 @@ Fluidbook.prototype = { $("#pages").addClass('_3dtransition'); $this.loader.setContentsInDoublePage(currentDoublePage, turning.flat, true, function () { $this.loader.setContentsInDoublePage(doublePage, turning.flip, true, function () { - $this.beforeTransition(pageNr, 3, turning.flip); + $this.beforeTransition(pageNr, 3, turning); $(doublePage).addClass(turning.nextFromClass + 'end').one($this.support.getTransitionEndEvent(), function () { if ($this.transitionning == false) { return; @@ -420,6 +419,33 @@ Fluidbook.prototype = { }); }); }, + + centerBook: function (center, animationDuration) { + var animate = animationDuration != undefined && animationDuration > 0; + var move = $("#center-fluidbook,#center-shadow"); + var currentLeft = $("#center-fluidbook").data('left'); + var left = 0; + if (center != 0) { + left = this.resize.centerOffset * center; + } + + + if (currentLeft == left) { + return; + } + + $("#center-fluidbook").data('left', left); + + if (animate) { + $(move).addClass('animate'); + } else { + $(move).removeClass('animate'); + } + setTimeout(function () { + move.css('left', left); + }, 10); + }, + getTurningPages: function (newPage) { var res = {}; res.dir = 1; @@ -441,6 +467,7 @@ Fluidbook.prototype = { res.flat = [newPage, res.currentRight]; res.flip = [res.currentLeft, newPage + 1]; } + res['end'] = [newPage, newPage + 1]; } else { res.currentRight = this.currentPage - this.currentPage % 2; @@ -463,8 +490,20 @@ Fluidbook.prototype = { res.end = [newPage + 1, newPage]; } } + + var center = !!this.datas.centerBook && !this.displayOnePage; + res.center = 0; + if (center) { + if (newPage <= 1) { + res.center = -1; + } else if (this.datas.pages % 2 == 0 && newPage == this.datas.pages) { + res.center = 1; + } + } + res.loading = [res.currentLeft, res.currentRight]; - return json_parse(JSON.stringify(res)); + res = json_parse(JSON.stringify(res)); + return res; }, reloadCurrentPage: function () { this.pageTransition(this.currentPage); @@ -617,7 +656,7 @@ Fluidbook.prototype = { this.hidePage('right'); } var turning = this.getTurningPages(pageNr); - this.beforeTransition(pageNr,1, turning); + this.beforeTransition(pageNr, 1, turning); this.loader.setContentsInDoublePage(doublePage, turning.end, true, function () { $this.afterTransition(page); }); @@ -626,7 +665,7 @@ Fluidbook.prototype = { if (d == undefined) { d = 1; } - $(this).trigger('fluidbook.page.change.start', [page, {transition: d, page: page, turningPages: turning}]); + $(this).trigger('fluidbook.page.change.start', [page, {transition: d, page: page, turningPages: turning.flip}]); this.tooltip.hideTooltip(); $(".axis_y").removeClass('axis_y'); $(".axis_x").removeClass('axis_x'); @@ -635,6 +674,8 @@ Fluidbook.prototype = { this.hideUnnecessaryButtons(page); var animationDuration = d <= 1 ? 0 : parseFloat(this.datas.mobileTransitionDuration); this.updateShadows(page, animationDuration); + this.centerBook(turning.center, animationDuration); + try { this.search.clearHighlights(); } catch (err) { diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js index 6d162edd..426675d0 100644 --- a/js/libs/fluidbook/fluidbook.resize.js +++ b/js/libs/fluidbook/fluidbook.resize.js @@ -137,6 +137,7 @@ FluidbookResize.prototype = { width: fww, height: fhh }); + this.centerOffset = fw / 4; if ($("#pagesnumbers").data('size') == null) { $("#pagesnumbers").data('size', parseInt($("#pagesnumbers").css('font-size'))); diff --git a/style/fluidbook.less b/style/fluidbook.less index 0fb168be..66163aa9 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -585,6 +585,17 @@ body, html { @import "slider"; +/* Center */ +#center-fluidbook, #center-shadow { + position: absolute; + top: 0; + left: 0; + + &.animate { + .page-transition(0.7); + } +} + /* Fluidbook */ #fluidbook { position: absolute; @@ -1904,6 +1915,12 @@ ul.chapters { /* Transitions */ +.doublePage { + &._2d, &._3d { + .page-transition(1); + } +} + /* 2D */ .doublePage._2d.sliding { -moz-transition: none; diff --git a/style/mixins.less b/style/mixins.less index 7ec6c1ac..cbd47273 100644 --- a/style/mixins.less +++ b/style/mixins.less @@ -11,4 +11,12 @@ .highlight-area(@color) { 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; } \ No newline at end of file -- 2.39.5