From 93a29862f8d0caa763af4515b74498e40abfeb23 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Thu, 8 Jun 2017 18:35:55 +0200 Subject: [PATCH] wip #1445 @1 --- js/libs/fluidbook/fluidbook.js | 2 + js/libs/fluidbook/fluidbook.resize.js | 7 +- js/libs/fluidbook/fluidbook.slider.js | 57 +++++++++ style/00-import.less | 2 + style/fluidbook.less | 173 +------------------------- style/lib/perfect-scrollbar.less | 169 +++++++++++++++++++++++++ style/slider.less | 15 +++ 7 files changed, 254 insertions(+), 171 deletions(-) create mode 100644 js/libs/fluidbook/fluidbook.slider.js create mode 100644 style/00-import.less create mode 100644 style/lib/perfect-scrollbar.less create mode 100644 style/slider.less diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js index 5baf47d4..a0f9c081 100644 --- a/js/libs/fluidbook/fluidbook.js +++ b/js/libs/fluidbook/fluidbook.js @@ -153,6 +153,7 @@ Fluidbook.prototype = { this.isReady = true; $("#main").css('display', 'block'); this.nav = new FluidbookNav(this); + this.slider = new FluidbookSlider(this); this.help = new FluidbookHelp(this); this.help.displayAtStartup(); resize(); @@ -668,6 +669,7 @@ Fluidbook.prototype = { this.audiodescription.setupPages(); } + $(this).trigger('fluidbook.page.change.end',[this.currentPage]); }, setPageNumbers: function () { $("#pagesnumbers .left").html(this.getPageNumberOfSide('left')); diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js index 5f15b459..ea21e1e2 100644 --- a/js/libs/fluidbook/fluidbook.resize.js +++ b/js/libs/fluidbook/fluidbook.resize.js @@ -1,11 +1,11 @@ function FluidbookResize(fluidbook) { this.fluidbook = fluidbook; - var marginX = 50; + var marginX = 60; var marginY = 20; this.marginleft = marginX + parseInt(this.fluidbook.datas.extraXSpace); this.margintop = marginY + parseInt(this.fluidbook.datas.extraYSpace); - this.marginbottom = marginY; + this.marginbottom = marginY + 20; this.marginright = marginX; this.corr = 0.8; this.referenceWidthLandscape = 1024; @@ -173,6 +173,9 @@ FluidbookResize.prototype = { } this.fluidbook.coquillette.resize(this.ww, this.hh); this.fluidbook.background.resize(this.ww, this.hh); + if (this.fluidbook.slider) { + this.fluidbook.slider.resize(this.ww, this.hh, this.orientation == 'portrait'); + } var timeout = 0; if (this.fluidbook.support.android) { diff --git a/js/libs/fluidbook/fluidbook.slider.js b/js/libs/fluidbook/fluidbook.slider.js new file mode 100644 index 00000000..90f0a58c --- /dev/null +++ b/js/libs/fluidbook/fluidbook.slider.js @@ -0,0 +1,57 @@ +function FluidbookSlider(fluidbook) { + this.fluidbook = fluidbook; + this.sliderWidth = 0; + this.cursorWidth = 0; + this.init(); +} + +FluidbookSlider.prototype = { + init: function () { + $("#interface").append('
'); + var $this = this; + $(this.fluidbook).on('fluidbook.page.change.end', function (e, page) { + $this.updateCursorPosition(); + }); + }, + resize: function (ww, hh, single) { + + if (single) { + this.sliderWidth = ww / 2; + } else { + this.sliderWidth = ww / 3; + } + this.sliderWidth = Math.round(this.sliderWidth); + $("#slider").css({width: this.sliderWidth, left: (ww - this.sliderWidth) / 2, top: hh - 32}); + + var nb = this.fluidbook.datas.pages; + if (!single) { + nb /= 2; + } + this.cursorWidth = Math.max(30, this.sliderWidth / (nb - 1)); + $("#slidercursor").css('width', this.cursorWidth); + this.updateCursorPosition(); + }, + + updateCursorPosition: function () { + var diff = this.sliderWidth - this.cursorWidth; + var left; + if (this.fluidbook.resize.orientation == 'portrait') { + left = diff * ((this.fluidbook.currentPage - 1) / (this.fluidbook.datas.pages - 1)); + } else { + var total = this.fluidbook.datas.pages; + var current = this.fluidbook.currentPage; + if (total % 2 == 1) { + total++; + } + if (current % 2 == 1 && this.fluidbook.currentPage != this.fluidbook.datas.pages) { + current--; + } + + console.log(current + '::' + total); + + left = diff * (current / total); + } + + $("#slidercursor").css('left', left); + } +}; \ No newline at end of file diff --git a/style/00-import.less b/style/00-import.less new file mode 100644 index 00000000..e9336edb --- /dev/null +++ b/style/00-import.less @@ -0,0 +1,2 @@ +@import "variables"; +@import "mixins"; \ No newline at end of file diff --git a/style/fluidbook.less b/style/fluidbook.less index 8e03a536..d24f1505 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -1,5 +1,4 @@ -@import "variables"; -@import "mixins"; +@import "00-import"; /* Screenshot */ .screenshot .mview { @@ -362,6 +361,8 @@ body, html { } } +@import "slider"; + /* Fluidbook */ #fluidbook { position: absolute; @@ -1867,173 +1868,7 @@ ul.chapters { } } -@rail-background: @menu-button-background; -@rail-opacity: 1; -@handle: @menu-button-background; -@handle-hover: @menu-text; -@scroll-border-radius: 0px; - -// Scrollbars -/* perfect-scrollbar v0.7.1 */ -.ps { - -ms-touch-action: auto; - touch-action: auto; - overflow: hidden !important; - -ms-overflow-style: none; -} - -@supports (-ms-overflow-style: none) { - .ps { - overflow: auto !important; - } -} - -@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - .ps { - overflow: auto !important; - } -} - -.ps.ps--active-x > .ps__scrollbar-x-rail, -.ps.ps--active-y > .ps__scrollbar-y-rail { - display: block; - background-color: transparent; -} - -.ps.ps--in-scrolling.ps--x > .ps__scrollbar-x-rail { - background-color: @rail-background; - opacity: @rail-opacity; -} - -.ps.ps--in-scrolling.ps--x > .ps__scrollbar-x-rail > .ps__scrollbar-x { - background-color: @handle-hover; - height: 11px; -} - -.ps.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail { - background-color: @rail-background; - opacity: @rail-opacity; -} - -.ps.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail > .ps__scrollbar-y { - background-color: @handle-hover; - width: 11px; -} - -.ps > .ps__scrollbar-x-rail { - display: none; - position: absolute; - /* please don't change 'position' */ - opacity: 0; - -webkit-transition: background-color .2s linear, opacity .2s linear; - -o-transition: background-color .2s linear, opacity .2s linear; - -moz-transition: background-color .2s linear, opacity .2s linear; - transition: background-color .2s linear, opacity .2s linear; - bottom: 0px; - /* there must be 'bottom' for ps__scrollbar-x-rail */ - height: 15px; -} - -.ps > .ps__scrollbar-x-rail > .ps__scrollbar-x { - position: absolute; - /* please don't change 'position' */ - background-color: @handle; - -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; - -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; - transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; - transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; - bottom: 2px; - /* there must be 'bottom' for ps__scrollbar-x */ - height: 6px; -} - -.ps > .ps__scrollbar-x-rail:hover > .ps__scrollbar-x, .ps > .ps__scrollbar-x-rail:active > .ps__scrollbar-x { - height: 11px; -} - -.ps > .ps__scrollbar-y-rail { - display: none; - position: absolute; - /* please don't change 'position' */ - opacity: 0; - -webkit-transition: background-color .2s linear, opacity .2s linear; - -o-transition: background-color .2s linear, opacity .2s linear; - -moz-transition: background-color .2s linear, opacity .2s linear; - transition: background-color .2s linear, opacity .2s linear; - right: 0; - /* there must be 'right' for ps__scrollbar-y-rail */ - width: 15px; -} - -.ps > .ps__scrollbar-y-rail > .ps__scrollbar-y { - position: absolute; - /* please don't change 'position' */ - background-color: @handle; - -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; - -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; - transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; - transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; - right: 2px; - /* there must be 'right' for ps__scrollbar-y */ - width: 6px; -} - -.ps > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y, .ps > .ps__scrollbar-y-rail:active > .ps__scrollbar-y { - width: 11px; -} - -.ps:hover.ps--in-scrolling.ps--x > .ps__scrollbar-x-rail { - background-color: @rail-background; - opacity: @rail-opacity; -} - -.ps:hover.ps--in-scrolling.ps--x > .ps__scrollbar-x-rail > .ps__scrollbar-x { - background-color: @handle-hover; - height: 11px; -} - -.ps:hover.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail { - background-color: @rail-background; - opacity: @rail-opacity; -} - -.ps:hover.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail > .ps__scrollbar-y { - background-color: @handle-hover; - width: 11px; -} - -.ps:hover > .ps__scrollbar-x-rail, -.ps:hover > .ps__scrollbar-y-rail { - opacity: 0.6; -} - -.ps:hover > .ps__scrollbar-x-rail:hover { - background-color: @rail-background; - opacity: @rail-opacity; -} - -.ps:hover > .ps__scrollbar-x-rail:hover > .ps__scrollbar-x { - background-color: @handle-hover; -} - -.ps:hover > .ps__scrollbar-y-rail:hover { - background-color: @rail-background; - opacity: @rail-opacity; -} - -.ps:hover > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y { - background-color: @handle-hover; -} +@import "lib/perfect-scrollbar"; @media handled and (orientation: portrait) { #ol { diff --git a/style/lib/perfect-scrollbar.less b/style/lib/perfect-scrollbar.less new file mode 100644 index 00000000..ab7b1026 --- /dev/null +++ b/style/lib/perfect-scrollbar.less @@ -0,0 +1,169 @@ +@import "../00-import"; + +@rail-background: @menu-button-background; +@rail-opacity: 1; +@handle: @menu-button-background; +@handle-hover: @menu-text; +@scroll-border-radius: 0px; + +// Scrollbars +/* perfect-scrollbar v0.7.1 */ +.ps { + -ms-touch-action: auto; + touch-action: auto; + overflow: hidden !important; + -ms-overflow-style: none; +} + +@supports (-ms-overflow-style: none) { + .ps { + overflow: auto !important; + } +} + +@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + .ps { + overflow: auto !important; + } +} + +.ps.ps--active-x > .ps__scrollbar-x-rail, +.ps.ps--active-y > .ps__scrollbar-y-rail { + display: block; + background-color: transparent; +} + +.ps.ps--in-scrolling.ps--x > .ps__scrollbar-x-rail { + background-color: @rail-background; + opacity: @rail-opacity; +} + +.ps.ps--in-scrolling.ps--x > .ps__scrollbar-x-rail > .ps__scrollbar-x { + background-color: @handle-hover; + height: 11px; +} + +.ps.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail { + background-color: @rail-background; + opacity: @rail-opacity; +} + +.ps.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail > .ps__scrollbar-y { + background-color: @handle-hover; + width: 11px; +} + +.ps > .ps__scrollbar-x-rail { + display: none; + position: absolute; + /* please don't change 'position' */ + opacity: 0; + -webkit-transition: background-color .2s linear, opacity .2s linear; + -o-transition: background-color .2s linear, opacity .2s linear; + -moz-transition: background-color .2s linear, opacity .2s linear; + transition: background-color .2s linear, opacity .2s linear; + bottom: 0px; + /* there must be 'bottom' for ps__scrollbar-x-rail */ + height: 15px; +} + +.ps > .ps__scrollbar-x-rail > .ps__scrollbar-x { + position: absolute; + /* please don't change 'position' */ + background-color: @handle; + -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; + -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; + transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; + transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; + bottom: 2px; + /* there must be 'bottom' for ps__scrollbar-x */ + height: 6px; +} + +.ps > .ps__scrollbar-x-rail:hover > .ps__scrollbar-x, .ps > .ps__scrollbar-x-rail:active > .ps__scrollbar-x { + height: 11px; +} + +.ps > .ps__scrollbar-y-rail { + display: none; + position: absolute; + /* please don't change 'position' */ + opacity: 0; + -webkit-transition: background-color .2s linear, opacity .2s linear; + -o-transition: background-color .2s linear, opacity .2s linear; + -moz-transition: background-color .2s linear, opacity .2s linear; + transition: background-color .2s linear, opacity .2s linear; + right: 0; + /* there must be 'right' for ps__scrollbar-y-rail */ + width: 15px; +} + +.ps > .ps__scrollbar-y-rail > .ps__scrollbar-y { + position: absolute; + /* please don't change 'position' */ + background-color: @handle; + -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; + -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; + transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; + transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; + right: 2px; + /* there must be 'right' for ps__scrollbar-y */ + width: 6px; +} + +.ps > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y, .ps > .ps__scrollbar-y-rail:active > .ps__scrollbar-y { + width: 11px; +} + +.ps:hover.ps--in-scrolling.ps--x > .ps__scrollbar-x-rail { + background-color: @rail-background; + opacity: @rail-opacity; +} + +.ps:hover.ps--in-scrolling.ps--x > .ps__scrollbar-x-rail > .ps__scrollbar-x { + background-color: @handle-hover; + height: 11px; +} + +.ps:hover.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail { + background-color: @rail-background; + opacity: @rail-opacity; +} + +.ps:hover.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail > .ps__scrollbar-y { + background-color: @handle-hover; + width: 11px; +} + +.ps:hover > .ps__scrollbar-x-rail, +.ps:hover > .ps__scrollbar-y-rail { + opacity: 0.6; +} + +.ps:hover > .ps__scrollbar-x-rail:hover { + background-color: @rail-background; + opacity: @rail-opacity; +} + +.ps:hover > .ps__scrollbar-x-rail:hover > .ps__scrollbar-x { + background-color: @handle-hover; +} + +.ps:hover > .ps__scrollbar-y-rail:hover { + background-color: @rail-background; + opacity: @rail-opacity; +} + +.ps:hover > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y { + background-color: @handle-hover; +} diff --git a/style/slider.less b/style/slider.less new file mode 100644 index 00000000..d0593074 --- /dev/null +++ b/style/slider.less @@ -0,0 +1,15 @@ +#slider { + position: absolute; + height: 6px; + bottom: 20px; + background-color: rgba(0, 0, 0, 0.1); + cursor: pointer; + + #slidercursor { + background-color: #fff; + height: 6px; + position: absolute; + left: 0; + top: 0; + } +} \ No newline at end of file -- 2.39.5