wip #1487 @7

diff --git a/js/libs/fluidbook/fluidbook.touch.js b/js/libs/fluidbook/fluidbook.touch.js
index be7bf333cf8119147de968fa0325908542928165..6607e62e19b89453cbc3ac8fe6fdbd3f0b138e89 100644 (file)
--- a/js/libs/fluidbook/fluidbook.touch.js
+++ b/js/libs/fluidbook/fluidbook.touch.js
@@ -5,6 +5,8 @@ function FluidbookTouch(fluidbook) {
     this.startY = 0;
     this.offsetX = 0;
     this.offsetY = 0;
+    this.panX = 0;
+    this.panY = 0;
 
     this.zoomAtPinchStart = 0;
 
@@ -39,7 +41,10 @@ FluidbookTouch.prototype = {
         var $this = this;
 
         // Double tap
-        var hm = new Hammer(document);
+        var hm = new Hammer.Manager(document.getElementById('fluidbook'), {domEvents: false});
+        hm.add(new Hammer.Tap({event: 'doubletap', taps: 2, interval: 500}));
+        hm.add(new Hammer.Pinch({threshold: 0}));
+        hm.add(new Hammer.Pan({threshold: 0}));
         hm.get('pinch').set({enable: true});
         hm.on('doubletap', function (event) {
             console.log(event);
@@ -53,100 +58,103 @@ FluidbookTouch.prototype = {
             }
             event.preventDefault();
         });
+        // Pinch
         hm.on('pinchstart', function (event) {
-            console.log('start');
+            $this.setZoomOriginFromEvent({'pageX': event.center.x, 'pageY': event.center.y});
             $this.zoomAtPinchStart = $this.fluidbook.zoom.zoom;
-            $this.pinchZoom(event.scale, true);
+            $this.pinchZoom(event.scale, false);
             event.preventDefault();
         });
         hm.on('pinch', function (event) {
-            console.log('pinch');
             if ($this.zoomAtPinchStart != 0) {
                 $this.pinchZoom(event.scale, false);
                 event.preventDefault();
             }
-        })
+        });
         hm.on('pinchend pinchcancel', function (event) {
-            console.log('end');
             $this.pinchZoom(event.scale, true);
-            $this.zoomAtPinchStart = 0;
+            $this.zoomAtPinchStart = $this.fluidbook.zoom.zoom;
+            event.preventDefault();
+        });
+        hm.on('panmove', function (event) {
+            $this.drag(event);
+            event.preventDefault();
+        });
+        hm.on('panend', function (event) {
+            $this.drag(event, true);
+            $this.startX = $this.startY = -1;
+            $this.panX = $this.panY = 0;
             event.preventDefault();
         });
-
     },
 
-    /*initInteractGestures: function () {
-     var $this = this;
-
-     // Pinch to zoom
-     interact(document.getElementById("z")).gesturable({
-     onstart: function (event) {
-     if ($this.fluidbook.zoom.zoom == 1) {
-     $this.setZoomOriginFromEvent(event);
-     }
-     return false;
-     },
-     onmove: function (event) {
-     var ds = event.ds;
-
-     if (ds > 0) {
-     ds *= 0.25;
-     } else {
-     ds *= 0.75;
-     }
-     var s = $this.fluidbook.zoom.zoom * (1 + ds);
-     $this.pinchZoom(s);
-     return false;
-     },
-     onend: function (event) {
-     return false;
-     },
-     styleCursor: false,
-     enabled: true,
-     });
-
-     interact(document.getElementById("z")).ignoreFrom('.link a').draggable({
-     inertia: true,
-     onmove: function (event) {
-     return $this.dragzoom(event);
-     },
-     onend: function (event) {
-     $this.resetSlide();
-     }, styleCursor: false, enabled: true,
-     });
-     },*/
-
     pinchZoom: function (s, end) {
+
         this.fluidbook.zoom.setTransition(false);
-        var amplitudeRegulation = 0.25;
+        var amplitudeRegulation = 0.2 * this.zoomAtPinchStart;
         var dir;
         if (s > 1) {
             s = 1 + ((s - 1) * amplitudeRegulation);
             dir = 1;
         } else if (s < 1) {
-            var amplitude = (1 - s) * amplitudeRegulation;
-            s = 1 - amplitude;
+            s /= 1;
+            s = 1 + ((s - 1) * amplitudeRegulation);
+            s /= 1;
             dir = -1;
         }
+        this.fluidbook.zoom.setZoom(this.zoomAtPinchStart * s, dir, end);
+    },
 
 
-        this.fluidbook.zoom.setZoom(this.zoomAtPinchStart * s, dir, end);
+    drag: function (e, end) {
+        if (end == undefined) {
+            end = false;
+        }
+        if (this.fluidbook.zoom.zoom == 1) {
+            if (this.startX == -1) {
+                this.startX = e.center.x;
+            }
+            if (this.startY == -1) {
+                this.startY = e.center.y;
+            }
+            this.offsetX = (e.center.x - this.startX) / this.fluidbook.resize.ww;
+            this.offsetY = (e.center.y - this.startY) / this.fluidbook.resize.hh;
+
+            this.testSlideOffset();
+        } else {
+            this.resetSlide();
+            if (end) {
+                e.deltaX += e.velocityX * 200;
+                e.deltaY += e.velocityY * 200;
+                this.dragZoom(e, end);
+            } else {
+                this.dragZoom(e, end);
+            }
+        }
     },
 
-    dragzoom: function (e) {
+    dragZoom: function (e, inertia) {
+        e.dx = e.deltaX - this.panX;
+        e.dy = e.deltaY - this.panY;
+
+        this.panX = e.deltaX;
+        this.panY = e.deltaY;
+
         if (e.dx == 0 && e.dy == 0) {
             return;
         }
-        var currentX = (parseFloat(this.fluidbook.zoom.origin[0]) / 100) * this.fluidbook.resize.ww * this.fluidbook.zoom.zoom;
-        var currentY = (parseFloat(this.fluidbook.zoom.origin[1]) / 100) * this.fluidbook.resize.hh * this.fluidbook.zoom.zoom;
 
-        var m = 2;
+        var diffx = this.fluidbook.resize.ww * (this.fluidbook.zoom.zoom - 1);
+        var diffy = this.fluidbook.resize.hh * (this.fluidbook.zoom.zoom - 1);
 
-        var x = currentX - e.dx * m;
-        var y = currentY - e.dy * m;
+        var currentX = (parseFloat(this.fluidbook.zoom.origin[0]) / 100) * diffx;
+        var currentY = (parseFloat(this.fluidbook.zoom.origin[1]) / 100) * diffy;
 
-        x *= 100 / this.fluidbook.resize.ww / this.fluidbook.zoom.zoom;
-        y *= 100 / this.fluidbook.resize.hh / this.fluidbook.zoom.zoom;
+        var x = currentX - e.dx;
+        var y = currentY - e.dy;
+
+        x *= 100 / diffx;
+        y *= 100 / diffy;
 
         x = Math.max(0, Math.min(100, x));
         y = Math.max(0, Math.min(100, y));
@@ -154,22 +162,8 @@ FluidbookTouch.prototype = {
         this.fluidbook.zoom.setOrigin(
             x + '%',
             y + '%',
-            true);
-
-        if (this.fluidbook.zoom.zoom == 1) {
-            if (this.startX == -1) {
-                this.startX = e.clientX;
-            }
-            if (this.startY == -1) {
-                this.startY = e.clientY;
-            }
-            this.offsetX = (e.clientX - this.startX) / this.fluidbook.resize.ww;
-            this.offsetY = (e.clientY - this.startY) / this.fluidbook.resize.hh;
+            true, inertia);
 
-            this.testSlideOffset();
-        } else {
-            this.resetSlide();
-        }
         return false;
     },
 
@@ -243,9 +237,19 @@ FluidbookTouch.prototype = {
     setZoomOriginFromEvent: function (event) {
         var cx = event.clientX || event.pageX;
         var cy = event.clientY || event.pageY;
+
+        var z = this.fluidbook.zoom.zoom;
+        var zrect = $("#z").get(0).getBoundingClientRect();
+
+        var ox = cx - zrect.left;
+        var oy = cy - zrect.top;
+
+        ox = (ox / (this.fluidbook.resize.ww * z));
+        oy = (oy / (this.fluidbook.resize.hh * z));
+
         this.fluidbook.zoom.setOrigin(
-            ((cx / this.fluidbook.resize.ww) * 100) + '%',
-            ((cy / this.fluidbook.resize.hh) * 100) + '%',
+            (ox * 100) + '%',
+            (oy * 100) + '%',
             true);
     },
 };

diff --git a/js/libs/fluidbook/fluidbook.zoom.js b/js/libs/fluidbook/fluidbook.zoom.js
index c54dd513a3ab8f5d2924590ddafdbba40da7dc64..7d2c914efb29478c7381501b8f2762d0850363e3 100644 (file)
--- a/js/libs/fluidbook/fluidbook.zoom.js
+++ b/js/libs/fluidbook/fluidbook.zoom.js
@@ -4,6 +4,7 @@ function FluidbookZoom(fluidbook) {
     this.origin = ['0%', '0%'];
     this.max = this.fluidbook.datas.zoomw / 100;
     this.transition = true;
+    this.hideInterfaceTimeout;
     this.init();
 }
 
@@ -51,29 +52,32 @@ FluidbookZoom.prototype = {
         if (this.fluidbook.menu.viewMode()) {
             zoom = 1;
         }
-        if (this.zoom == zoom) {
-            return;
-        }
-        if (!this.transition && end == true) {
+
+        console.log(end);
+        if (end) {
+            console.log(direction + ' || ' + zoom);
 
             if (direction == 1) {
-                if (zoom < 1.25) {
-                    zoom = 2;
+                if (zoom < 1.5) {
+                    zoom = 1.5;
                     this.setTransition(true);
                 }
             } else if (direction == -1) {
-                if (zoom < 1.25) {
+                if (zoom < 1.5) {
                     zoom = 1;
                     this.setTransition(true);
                 }
             }
 
+            console.log(' === ' + zoom + ' (' + this.zoom + ')');
+
         }
         if (this.zoom == zoom) {
+
             return;
         }
         this.zoom = zoom;
-        this.updateZoom(direction);
+        this.updateZoom();
     },
 
     setTransition: function (transition) {
@@ -93,23 +97,31 @@ FluidbookZoom.prototype = {
         this.setZoom(1, -1);
     },
 
-    setOrigin: function (x, y, force) {
+    setOrigin: function (x, y, force, inertia) {
         if (force == undefined) {
             force = false;
         }
+        if (inertia == undefined) {
+            inertia = false;
+        }
         this.origin = [x, y];
         if (!force && this.fluidbook.zoom.zoom == 1) {
             return;
         } else {
+            if (inertia) {
+                $("#z").addClass('transition-inertia');
+            } else {
+                $("#z").removeClass('transition-inertia');
+            }
             $("#z").transform({
                 origin: this.origin
             }, {
                 preserve: true
-            })
+            });
         }
     },
 
-    updateZoom: function (direction) {
+    updateZoom: function () {
         var $this = this;
 
         if (this.zoom > 1) {
@@ -126,10 +138,18 @@ FluidbookZoom.prototype = {
             animation.origin = this.origin;
         }
 
+        var hiddenElements = $("header,footer,#interface");
+
         if (this.zoom != 1) {
-            $("header,footer,#interface").addClass('hidden');
+            if (!$('header').hasClass('hidden')) {
+                $(hiddenElements).addClass('hidden');
+                this.hideInterfaceTimeout = setTimeout(function () {
+                    $(hiddenElements).hide();
+                }, 500);
+            }
         } else {
-            $("header,footer,#interface").removeClass('hidden');
+            clearTimeout(this.hideInterfaceTimeout);
+            $(hiddenElements).show().removeClass('hidden');
         }
         $("#z").transform(animation);
         $this.triggerEvent(((this.zoom == 1) ? 'out' : 'in') + '.start');

diff --git a/style/fluidbook.less b/style/fluidbook.less
index 158f6f4841cc68788f8d499bdac801e39c8f826e..0f63dc05017d66ab91a5bf650cd7c3dc4c60ae06 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -342,6 +342,7 @@ body, html {
 }
 
 @zoomtransition: 350ms;
+@zoomtransitioninertia:400ms;
 
 #z {
        position: absolute;
@@ -351,7 +352,7 @@ body, html {
        left: 0;
 
        -moz-transition: -moz-transform @zoomtransition ease-out, transform @zoomtransition ease-out;
-       -webkit-transition: -moz-transform @zoomtransition ease-out, transform @zoomtransition ease-out;
+       -webkit-transition: -webkit-transform @zoomtransition ease-out, transform @zoomtransition ease-out;
        -o-transition: -o-transform @zoomtransition ease-out, transform @zoomtransition ease-out;
        -ms-transition: -ms-transform @zoomtransition ease-out, transform @zoomtransition ease-out;
        transition: transform @zoomtransition ease-out;
@@ -364,6 +365,14 @@ body, html {
                transition: none;
        }
 
+       &.transition-inertia{
+               -moz-transition: -moz-transform-origin @zoomtransitioninertia ease-out, transform-origin @zoomtransitioninertia ease-out;
+               -webkit-transition: -webkit-transform-origin @zoomtransitioninertia ease-out, transform-origin @zoomtransitioninertia ease-out;
+               -o-transition: -o-transform-origin @zoomtransitioninertia ease-out, transform-origin @zoomtransitioninertia ease-out;
+               -ms-transition: -ms-transform-origin @zoomtransitioninertia ease-out, transform-origin @zoomtransitioninertia ease-out;
+               transition: transform-origin @zoomtransitioninertia ease-out;
+       }
+
        &.nozoom {
                height: 0 !important;
        }
@@ -697,12 +706,13 @@ footer a {
 /* Fluidbook zooming */
 
 footer, header, #interface {
-       -moz-transition: opacity 400ms ease-in;
-       -webkit-transition: opacity 400ms ease-in;
-       -o-transition: opacity 400ms ease-in;
-       -ms-transition: opacity 400ms ease-in;
-       transition: opacity 400ms ease-in;
+       -moz-transition: opacity 400ms ease-in, visibility 400ms ease-in;
+       -webkit-transition: opacity 400ms ease-in, visibility 400ms ease-in;
+       -o-transition: opacity 400ms ease-in, visibility 400ms ease-in;
+       -ms-transition: opacity 400ms ease-in, visibility 400ms ease-in;
+       transition: opacity 400ms ease-in, visibility 400ms ease-in;
        &.hidden {
+               visibility: hidden;
                opacity: 0;
                z-index: 0;
        }