]> _ Git - fluidbook-html5.git/commitdiff
wip #5158 @0.5
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Fri, 1 Apr 2022 16:24:26 +0000 (18:24 +0200)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Fri, 1 Apr 2022 16:24:26 +0000 (18:24 +0200)
js/libs/fluidbook/fluidbook.interface.js
js/libs/fluidbook/fluidbook.js
js/libs/fluidbook/fluidbook.touch.js
js/libs/fluidbook/fluidbook.zoom.js

index a906201131383ff9086ae5ddc4c6b0246b7a1964..e7afff074eb77546532e4fdf3984bc8d8878eab2 100644 (file)
@@ -81,7 +81,13 @@ FluidbookInterface.prototype = {
                 return false;
             });
 
-            this.initArrowsVisibilityManagement();
+            $(this.fluidbook).on('fluidbook.lib.ready', function () {
+                setTimeout(function(){
+                    $this.initArrowsVisibilityManagement();
+                },1000)
+
+            });
+
         }
 
         $(this.fluidbook).on('fluidbook.resize, fluidbook.resize.orientation', function () {
index 9f13a245b2d339febe1159f3b39fbb5cd832ec37..b44d4e543add13213e6aa7cbd1135f6e7847a632 100644 (file)
@@ -102,9 +102,7 @@ Fluidbook.prototype = {
         this.desktop = new FluidbookDesktop(this);
         this.share = new FluidbookShare(this);
         this.firstTransition = true;
-        if (this.input.hasTouch) {
-            this.touch = new FluidbookTouch(this);
-        }
+        this.touch = new FluidbookTouch(this);
         this.background = new FluidbookBackground(this);
         this.video = new FluidbookVideo(this);
         this.audioplayer = new FluidbookAudioPlayer(this);
@@ -169,6 +167,8 @@ Fluidbook.prototype = {
         this.help = new FluidbookHelp(this);
         this.articles = new FluidbookArticles(this);
 
+        $(this).trigger('fluidbook.lib.ready');
+
         this.initTheme();
         this.initLoading();
 
index 243f2a4c8db649b320de5d78ca800b6bd4b10e6f..ca12c435e44d32cf35813c16e3e67e6ea92763ae 100644 (file)
@@ -7,14 +7,26 @@ function FluidbookTouch(fluidbook) {
     this.offsetY = 0;
     this.panX = 0;
     this.panY = 0;
+    this.panInited = false;
+
+    this.touchAction = 'compute';
+    this.elementId = 'main';
+    this.panElementId = 'fluidbook';
 
     this.zoomAtPinchStart = 0;
 
+    this.options = {
+        domEvents: false,
+        touchAction: 'compute'
+    };
+
     this.triggerOffset = this.fluidbook.mobilefirst.enabled ? 0.1 : 0.05;
 
     this.draggingFromOutside = false;
 
-    this.init();
+    if (this.fluidbook.input.hasTouch) {
+        this.init();
+    }
 }
 
 FluidbookTouch.prototype = {
@@ -48,14 +60,12 @@ FluidbookTouch.prototype = {
         var pinchEnabled = true;
         var doubletapEnabled = true;
         var panEnabled = true;
-        var touchAction = 'compute';
-        var elementId = 'main';
-        var panElementId = 'fluidbook';
+
 
         if (this.fluidbook.mobilefirst.enabled) {
-            touchAction = 'auto';
-            elementId = 'scroll';
-            panElementId = 'scroll';
+            this.touchAction = 'auto';
+            this.elementId = 'scroll';
+            this.panElementId = 'scroll';
         }
 
         var $this = this;
@@ -64,15 +74,12 @@ FluidbookTouch.prototype = {
             return;
         }
 
-        var options = {
+        this.options = {
             domEvents: this.fluidbook.mobilefirst.enabled,
             touchAction: touchAction
         };
-        Hammer.defaults.domEvents = options.domEvents;
-        Hammer.defaults.touchAction = options.touchAction;
 
-        var hm = new Hammer.Manager(document.getElementById(elementId), options);
-        this.hm = hm;
+        this.initHammerManager();
 
         if (doubletapEnabled) {
             hm.add(new Hammer.Tap({event: 'doubletap', taps: 2, interval: 500}));
@@ -136,31 +143,57 @@ FluidbookTouch.prototype = {
         }
 
         if (panEnabled) {
-            var hmf = new Hammer.Manager(document.getElementById(panElementId), options);
-            hmf.add(new Hammer.Pan({threshold: 0}));
-            hmf.on('pan', function (event) {
+            this.initPan(panElementId);
+        }
+    },
 
-            });
-            hmf.on('panstart', function (event) {
-                console.log(event);
-                if ($this.drag(event, 'start')) {
-                    event.preventDefault();
-                }
-            });
-            hmf.on('panmove', function (event) {
-                if ($this.drag(event, 'move')) {
-                    event.preventDefault();
-                }
-            });
-            hmf.on('panend', function (event) {
-                var prevent = $this.drag(event, 'end');
-                $this.startX = $this.startY = -1;
-                $this.panX = $this.panY = 0;
-                if (prevent) {
-                    event.preventDefault();
-                }
-            });
+    initHammerManager: function () {
+        if (this.hm !== undefined && this.hm !== null) {
+            return;
+        }
+
+        Hammer.defaults.domEvents = this.options.domEvents;
+        Hammer.defaults.touchAction = this.options.touchAction;
+
+        this.hm = new Hammer.Manager(document.getElementById(this.elementId), this.options);
+    },
+
+    initPan(panElementId) {
+        if (this.panInited) {
+            return;
+        }
+        var $this=this;
+
+        this.panInited = true;
+        if (panElementId === undefined) {
+            panElementId = 'fluidbook';
         }
+
+        this.initHammerManager();
+
+        var hmf = new Hammer.Manager(document.getElementById(panElementId), this.options);
+        hmf.add(new Hammer.Pan({threshold: 0}));
+        hmf.on('pan', function (event) {
+
+        });
+        hmf.on('panstart', function (event) {
+            if ($this.drag(event, 'start')) {
+                event.preventDefault();
+            }
+        });
+        hmf.on('panmove', function (event) {
+            if ($this.drag(event, 'move')) {
+                event.preventDefault();
+            }
+        });
+        hmf.on('panend', function (event) {
+            var prevent = $this.drag(event, 'end');
+            $this.startX = $this.startY = -1;
+            $this.panX = $this.panY = 0;
+            if (prevent) {
+                event.preventDefault();
+            }
+        });
     },
 
     pinchZoom: function (s, end) {
@@ -203,15 +236,16 @@ FluidbookTouch.prototype = {
             if (type === 'end') {
                 e.deltaX += e.velocityX * 200;
                 e.deltaY += e.velocityY * 200;
-                this.dragZoom(e, true);
+                this.dragZoom(e, this.fluidbook.input.usingTouch);
             } else {
-                this.dragZoom(e, true);
+                this.dragZoom(e, this.fluidbook.input.usingTouch);
             }
             return true;
         }
     },
 
     dragZoom: function (e, inertia) {
+
         e.dx = e.deltaX - this.panX;
         e.dy = e.deltaY - this.panY;
 
@@ -255,6 +289,10 @@ FluidbookTouch.prototype = {
 
             }
 
+            if(this.fluidbook.input.usingMouse){
+                return false;
+            }
+
             if (this.fluidbook.mobilefirst.enabled && this.fluidbook.mobilefirst.isScrolling) {
                 return false;
             }
@@ -312,7 +350,9 @@ FluidbookTouch.prototype = {
         this.startY = -1;
         this.offsetX = 0;
         this.offsetY = 0;
-    }, setZoomOriginFromEvent: function (event) {
+    },
+
+    setZoomOriginFromEvent: function (event) {
         var cx = event.pageX;
         var cy = event.pageY;
 
index 2eaad2b491a10d77915e5482b6fb06549bd63a6d..66bc77d5c2ae35b29a20c97a9d4a49bd0205fdf1 100644 (file)
@@ -28,6 +28,12 @@ FluidbookZoom.prototype = {
 
         this.initMouseWheel();
 
+        $(this.fluidbook).on('fluidbook.lib.ready', function () {
+            if ($this.fluidbook.settings.zoomMouseMoveMode) {
+                $this.fluidbook.touch.initPan('fluidbook');
+            }
+        });
+
         // Zoom icon
         $(document).on(this.fluidbook.input.clickEvent, '.icon-zoomin', function (e) {
             if ($this.fluidbook.settings.zoomMouseMoveMode !== 'dragndrop') {
@@ -39,6 +45,7 @@ FluidbookZoom.prototype = {
 
             return false;
         });
+
         $(document).on(this.fluidbook.input.clickEvent, '.icon-zoomout', function (e) {
             $this.fluidbook.zoom.zoomOutFromMenu();
             return false;
@@ -260,6 +267,9 @@ FluidbookZoom.prototype = {
         x = Math.min(1, Math.max(0, x));
         y = Math.min(1, Math.max(0, y));
         this.originpct = [x, y];
+        if (this.fluidbook.resize !== undefined) {
+            this.originpx = [x * this.fluidbook.resize.ww, y * this.fluidbook.resize.hh];
+        }
         if (!force && this.fluidbook.zoom.zoom == 1) {
             return;
         } else {