wip #2286 @4

diff --git a/js/libs/fluidbook/fluidbook.desktop.js b/js/libs/fluidbook/fluidbook.desktop.js
index 9183b291c3315deee82987192b45190791b7a1f8..25fb63c7d6ba6d03db6a75eacfe70c4932ea5bdc 100644 (file)
--- a/js/libs/fluidbook/fluidbook.desktop.js
+++ b/js/libs/fluidbook/fluidbook.desktop.js
@@ -23,8 +23,8 @@ FluidbookDesktop.prototype = {
             e.stopPropagation();
         })
 
-        $("body").mousewheel(function (e, delta, deltaX, deltaY) {
-            $this.wheelZoom(deltaY);
+        $(document).on('mousewheel', function (e) {
+            $this.wheelZoom(e.deltaY);
         })
 
 

diff --git a/js/libs/fluidbook/links/fluidbook.links.zoomhd.js b/js/libs/fluidbook/links/fluidbook.links.zoomhd.js
index 413210fcacf5244838696752738f4eaabb273b72..97fa3dc87bc6aaad637a61d2c624faa7a88a95be 100644 (file)
--- a/js/libs/fluidbook/links/fluidbook.links.zoomhd.js
+++ b/js/libs/fluidbook/links/fluidbook.links.zoomhd.js
@@ -1,5 +1,24 @@
 function FluidbookLinksZoomHD(fluidbook) {
     this.fluidbook = fluidbook;
+    this.scale = 1;
+    this.refScale = 1;
+    this.element;
+    this.image;
+    this.mouseX;
+    this.mouseY;
+    this.ah;
+    this.aw;
+
+    this.draging = false;
+    this.dragX = 0;
+    this.dragY = 0;
+    this.dragMinX = 0;
+    this.dragMaxX = 0;
+    this.dragMinY = 0;
+    this.dragMaxY = 0;
+    this.dragXPct = 0.5;
+    this.dragYPct = 0.5;
+
     this.init();
 }
 
@@ -10,32 +29,157 @@ FluidbookLinksZoomHD.prototype = {
             $this.openZoomhd(p1, p2, p3);
         };
 
+        $(this.fluidbook).on('fluidbook.resize', function () {
+            try {
+                $this.resize();
+            } catch (e) {
+
+            }
+        });
+
+        $(document).on('click', '.zoomhdControls a', function () {
+            var s = $this.scale;
+            if ($(this).hasClass('minus')) {
+                s -= 0.5;
+            } else {
+                s += 0.5;
+            }
+            $this.scale = $this.normalizeScale(s);
+            $this.resize();
+            return false;
+        });
+
+        $(document).on('mousewheel', function (e) {
+            var s = $this.scale;
+            s += 0.25 * e.deltaY;
+            $this.scale = $this.normalizeScale(s);
+            $this.resize();
+            return false;
+        });
+    },
+
+    normalizeScale: function (s) {
+        return Math.max(1, Math.min(3.5, s));
     },
 
     openZoomhd: function (p1, p2, callback) {
+        var $this = this;
         var link = this.fluidbook.links.getLinkDataById(p1);
 
-        var image = new Image();
-        image.src = 'data/links/' + link.to;
+        this.fluidbook.displayLoader();
 
         view = '<div class="caption">' + this.fluidbook.menu.closeButton() + '</div>';
-        view += '<div class="content"><div class="zoomhdHolder"><div class="zoomhdScale">';
-        view += '</div><div class="zoomhdControls"><a href="#" class="minus">'+getSpriteIcon('interface-minus')+'</a><a href="#" class="plus">'+getSpriteIcon('interface-plus')+'</a></div></div></div>';
+        view += '<div class="content"><div class="zoomhdHolder"><div class="zoomhdMove"><div class="zoomhdRefScale"><div class="zoomhdScale"><div class="zoomhdImage"></div>';
+        view += '</div></div></div><div class="zoomhdControls"><a href="#" class="minus">' + getSpriteIcon('interface-minus') + '</a><a href="#" class="plus">' + getSpriteIcon('interface-plus') + '</a></div></div></div>';
 
         $("#view").append('<div class="mview" dir="ltr" data-menu="zoomhd" data-fullscreen="1">' + view + '</div>');
+        this.element = $("#view").find('.zoomhdScale');
 
-        var e = $("#view").find('.zoomhdScale');
-        e.append(image);
-
-        this.initZoomHD(e);
+        this.image = fluidbook.loader.loadImage('data/links/' + link.to, null, null, null, function () {
+            setTimeout(function () {
+                $this.initZoomHD();
+                setTimeout(function () {
+                    $($this.image).closest('.zoomhdImage').css('opacity', 1);
+                }, 10)
+                setTimeout(function () {
+                    $this.fluidbook.hideLoader();
+                }, 200)
+            }, 1000);
+        }).get(0);
 
         if (callback != undefined) {
             callback();
         }
     },
 
-    initZoomHD: function (e) {
+    initZoomHD: function () {
+        var $this = this;
+
+        var i = this.element.find('.zoomhdImage');
+        i.append(this.image);
+        this.scale = 1;
+
+        this.isDragging = false;
+
+        var h = this.element.closest('.zoomhdHolder');
+        var m = this.element.closest('.zoomhdMove');
+        var mc = new Hammer(h.get(0));
+
+        mc.get('pan').set({direction: Hammer.DIRECTION_ALL});
+        mc.on('pan', function (e) {
+            if ($this.scale == 1) {
+                return false;
+            }
+            if (!$this.dragging) {
+                $this.dragging = true;
+                $this.dragY = parseFloat(m.css('top'));
+                $this.dragX = parseFloat(m.css('left'));
+                $this.calcDragLimits();
+            }
+
+            $this.setMovePos($this.dragX + e.deltaX, $this.dragY + e.deltaY);
+
+
+            if (e.isFinal) {
+                $this.dragging = false;
+                $this.dragX = $this.dragY = 0;
+            }
+            return false;
+        });
+
+        i.css(
+            {
+                left: this.image.naturalWidth / -2,
+                top: this.image.naturalHeight / -2
+            }
+        );
+        this.resize();
+    },
+
+    updateMovePosPct: function () {
+        this.calcDragLimits();
+        this.setMovePos(this.dragXPct * (this.dragMaxX - this.dragMinX), this.dragYPct * (this.dragMaxY - this.dragMinY));
+    },
+
+    setMovePos: function (x, y) {
+        x = Math.max(this.dragMinX, Math.min(this.dragMaxX, x));
+        y = Math.max(this.dragMinY, Math.min(this.dragMaxY, y));
+
+        this.dragXPct = (x - this.dragMinX) / (this.dragMaxX - this.dragMinX);
+        this.dragYPct = (y - this.dragMinY) / (this.dragMaxY - this.dragMinY);
+
+        this.element.closest('.zoomhdMove').css({
+            top: y,
+            left: x
+        });
+    },
+
+    calcDragLimits: function () {
+        if (this.scale <= 1) {
+            this.dragMinX = this.dragMaxX = this.dragMinY = this.dragMaxY = 0;
+            return;
+        }
+        var irect = this.element.find('.zoomhdImage').get(0).getBoundingClientRect();
+
+        this.dragMaxX = 60 + Math.abs(this.fluidbook.resize.ww - irect.width) / 2;
+        this.dragMinX = -this.dragMaxX;
+        this.dragMaxY = 60 + Math.abs(this.fluidbook.resize.hh - irect.height) / 2;
+        this.dragMinY = -this.dragMaxY;
+    },
+
+    resize: function () {
+        var ww = this.fluidbook.resize.ww;
+        var hh = this.fluidbook.resize.hh;
+
+        this.aw = ww - 60;
+        this.ah = hh - 110;
+
+        this.refScale = Math.min(this.aw / this.image.naturalWidth, this.ah / this.image.naturalHeight);
+
+        this.element.closest('.zoomhdRefScale').css({transform: 'scale(' + this.refScale + ')'});
+        this.element.css({transform: 'scale(' + this.scale + ')'});
 
+        this.updateMovePosPct();
     },
 }
 

diff --git a/js/main.js b/js/main.js
index 58e2e7c169e6ce148c9372788cbc47d599faf513..327df710357d2449906246dcb53685f79f7cbc75 100644 (file)
--- a/js/main.js
+++ b/js/main.js
@@ -284,7 +284,7 @@ try {
                 return false;
             });
 
-            $(document).mousedown(function (e) {
+            $(document).on('mousedown',function (e) {
                 if (e.button == 2) {
                     return false;
                 } else {
@@ -293,7 +293,7 @@ try {
             });
         }
 
-        $(window).bind('hashchange', function () {
+        $(window).on('hashchange', function () {
             if (maskHashChange) {
                 return;
             }

diff --git a/style/fluidbook.less b/style/fluidbook.less
index e5bd76392ceb3b1cdbbcb56d3037ac1c10c1533d..b0f4359431613755683898e24a7faff06128c68a 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1450,15 +1450,34 @@ html.ios body.portrait #interface {
                        }
                }
 
-               .zoomhdScale {
+               .zoomhdMove {
                        position: absolute;
-                       top: 50%;
-                       left: 50%;
-                       img{
-                               display: block;
+                       width: 100%;
+                       height: 100%;
+                       top: 0;
+                       left: 0;
+
+                       .zoomhdRefScale {
+                               pointer-events: none;
                                position: absolute;
-                               top: -50%;
-                               left: -50%;
+                               margin-top: -30px;
+                               top: 50%;
+                               left: 50%;
+
+                               .zoomhdScale {
+                                       position: absolute;
+                                       top: 50%;
+                                       left: 50%;
+
+                                       .zoomhdImage {
+                                               opacity: 0;
+                                               transition: opacity 500ms;
+                                               position: absolute;
+                                       }
+                                       img {
+                                               display: block;
+                                       }
+                               }
                        }
                }