From: Vincent Vanwaelscappel Date: Mon, 15 Oct 2018 10:36:12 +0000 (+0200) Subject: wip #2286 @4 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=d075ffef6fc9ed705933020b30b30044f3bbd1e3;p=fluidbook-html5.git wip #2286 @4 --- diff --git a/js/libs/fluidbook/fluidbook.desktop.js b/js/libs/fluidbook/fluidbook.desktop.js index 9183b291..25fb63c7 100644 --- 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 413210fc..97fa3dc8 100644 --- 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 = '
' + this.fluidbook.menu.closeButton() + '
'; - view += '
'; - view += '
'+getSpriteIcon('interface-minus')+''+getSpriteIcon('interface-plus')+'
'; + view += '
'; + view += '
' + getSpriteIcon('interface-minus') + '' + getSpriteIcon('interface-plus') + '
'; $("#view").append('
' + view + '
'); + 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 58e2e7c1..327df710 100644 --- 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 e5bd7639..b0f43594 100644 --- 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; + } + } } }