wip #1445 @1

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 5baf47d44e59cb55949bfe9cd85a4c36f3f74f79..a0f9c0819dd0304136a3258a4308f70b7f9fb86e 100644 (file)
--- 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 5f15b45926d5b9a27fb040f138f102c6b43107af..ea21e1e2bf1964a48a12765a63f97b1e3359fb00 100644 (file)
--- 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 (file)
index 0000000..90f0a58
--- /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('<div id="slider"><div id="slidercursor"></div></div>');
+        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 (file)
index 0000000..e9336ed
--- /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 8e03a53685b1d918504ff4661cce4d3ef183916b..d24f1505fba6a6f99398bc5910607fd617a612cf 100644 (file)
--- 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 (file)
index 0000000..ab7b102
--- /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 (file)
index 0000000..d059307
--- /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