From e70f43559e022316f675bd75a7416f67258410e6 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Wed, 21 Jun 2017 20:37:52 +0200 Subject: [PATCH] wip #1471 @5 --- js/libs/fix/detect-zoom.js | 242 ------------------------- js/libs/fix/ios-orientation.js | 56 ------ js/libs/fluidbook/fluidbook.js | 11 +- js/libs/fluidbook/fluidbook.links.js | 4 +- js/libs/fluidbook/fluidbook.resize.js | 1 - js/libs/fluidbook/fluidbook.support.js | 24 --- js/libs/fluidbook/fluidbook.touch.js | 11 ++ js/libs/interact.js | 101 ++++++----- js/main.js | 4 - 9 files changed, 65 insertions(+), 389 deletions(-) delete mode 100644 js/libs/fix/detect-zoom.js delete mode 100644 js/libs/fix/ios-orientation.js diff --git a/js/libs/fix/detect-zoom.js b/js/libs/fix/detect-zoom.js deleted file mode 100644 index 01422919..00000000 --- a/js/libs/fix/detect-zoom.js +++ /dev/null @@ -1,242 +0,0 @@ -// detect-zoom is dual-licensed under the WTFPL and MIT license, -// at the recipient's choice. -// https://github.com/yonran/detect-zoom/ -var DetectZoom = { - mediaQueryBinarySearch: function( - property, unit, a, b, maxIter, epsilon) { - var matchMedia; - var head, style, div - if (window.matchMedia) { - matchMedia = window.matchMedia; - } else { - head = document.getElementsByTagName('head')[0]; - style = document.createElement('style'); - div = document.createElement('div'); - div.className = 'mediaQueryBinarySearch'; - head.appendChild(style); - div.style.display = 'none'; - document.body.appendChild(div); - matchMedia = function(query) { - style.sheet.insertRule('@media ' + query + - '{.mediaQueryBinarySearch ' + - '{text-decoration: underline} }', 0); - var matched = getComputedStyle(div, null).textDecoration - == 'underline'; - style.sheet.deleteRule(0); - return {matches: matched}; - } - } - var r = binarySearch(a, b, maxIter); - if (div) { - head.removeChild(style); - document.body.removeChild(div); - } - return r; - - function binarySearch(a, b, maxIter) { - var mid = (a + b) / 2; - if (maxIter == 0 || b - a < epsilon) - return mid; - var query = "(" + property + ":" + mid + unit + ")"; - if (matchMedia(query).matches) { - return binarySearch(mid, b, maxIter - 1); - } else { - return binarySearch(a, mid, maxIter - 1); - } - } - }, - _zoomIe7: function() { - // the trick: body's offsetWidth was in CSS pixels, while - // getBoundingClientRect() was in system pixels in IE7. - // Thanks to http://help.dottoro.com/ljgshbne.php - var rect = document.body.getBoundingClientRect(); - var z = (rect.right - rect.left) / document.body.offsetWidth; - z = Math.round(z * 100) / 100; - return {zoom: z, devicePxPerCssPx: z}; - }, - _zoomIe8: function() { - // IE 8+: no trick needed! - // TODO: MSDN says that logicalXDPI and deviceXDPI existed since IE6 - // (which didn't even have whole-page zoom). Check to see whether - // this method would also work in IE7. - var zoom = screen.deviceXDPI / screen.logicalXDPI; - return { - zoom: zoom, - devicePxPerCssPx: zoom - }; - }, - _zoomWebkitMobile: function() { - // the trick: window.innerWIdth is in CSS pixels, while - // screen.width and screen.height are in system pixels. - // And there are no scrollbars to mess up the measurement. - var devicePixelRatio = window.devicePixelRatio != null ? window.devicePixelRatio : 1 - , deviceWidth; - if (Math.abs(window.orientation) == 90) { - deviceWidth = screen.height; - } else { - deviceWidth = screen.width; - } - var z = deviceWidth / window.innerWidth; - // return immediately; don't round at the end. - return {zoom: z, devicePxPerCssPx: z * devicePixelRatio}; - }, - _zoomWebkit: function() { - // the trick: an element's clientHeight is in CSS pixels, while you can - // set its line-height in system pixels using font-size and - // -webkit-text-size-adjust:none. - // device-pixel-ratio: http://www.webkit.org/blog/55/high-dpi-web-sites/ - - // Previous trick (used before http://trac.webkit.org/changeset/100847): - // documentElement.scrollWidth is in CSS pixels, while - // document.width was in system pixels. Note that this is the - // layout width of the document, which is slightly different from viewport - // because document width does not include scrollbars and might be wider - // due to big elements. - - var devicePixelRatio = window.devicePixelRatio != null ? window.devicePixelRatio : 1; - - // The container exists so that the div will be laid out in its own flow - // while not impacting the layout, viewport size, or display of the - // webpage as a whole. - var container = document.createElement('div') - , div = document.createElement('div'); - - // Add !important and relevant CSS rule resets - // so that other rules cannot affect the results. - var important = function(str) { - return str.replace(/;/g, " !important;"); - }; - - container.setAttribute('style', important('width:0; height:0; overflow:hidden; visibility:hidden; position: absolute;')); - div.innerHTML = "1
2
3
4
5
6
7
8
9
0"; - div.setAttribute('style', important('font: 100px/1em sans-serif; -webkit-text-size-adjust: none; height: auto; width: 1em; padding: 0; overflow: visible;')); - - container.appendChild(div); - document.body.appendChild(container); - var z = 1000 / div.clientHeight; - z = Math.round(z * 100) / 100; - var r = { - zoom: z, - devicePxPerCssPx: devicePixelRatio * z - }; - document.body.removeChild(container); - return r; - }, - _zoomFF35: function() { - // the trick for FF3.5 ONLY: device-width gives CSS pixels, while - // screen.width gave system pixels. Thanks to QuirksMode's widths table, - // which called it a bug. http://www.quirksmode.org/m/widths.html - var z = screen.width / - this.mediaQueryBinarySearch('min-device-width', 'px', 0, 6000, 20, .0001); - z = Math.round(z * 100) / 100; - return {zoom: z, devicePxPerCssPx: z}; - }, - _zoomFF36: function() { - // the hack for FF3.6: you can measure scrollbar's width in CSS pixels, - // while in system pixels it's 15px (verified in Ubuntu). - - // TODO: verify for every platform that a scrollbar is exactly 15px wide. - var container = document.createElement('div') - , outerDiv = document.createElement('div'); - // The container exists so that the div will be laid out in its own flow - // while not impacting the layout, viewport size, or display of the - // webpage as a whole. - container.setAttribute('style', 'width:0; height:0; overflow:hidden;' + - 'visibility:hidden; position: absolute'); - outerDiv.style.width = outerDiv.style.height = '500px'; // enough for all the scrollbars - var div = outerDiv; - for (var i = 0; i < 10; ++i) { - var child = document.createElement('div'); - child.style.overflowY = 'scroll'; - div.appendChild(child); - div = child; - } - container.appendChild(outerDiv); - document.body.appendChild(container); - var outerDivWidth = outerDiv.clientWidth; - var innerDivWidth = div.clientWidth; - var scrollbarWidthCss = (outerDivWidth - innerDivWidth) / 10; - document.body.removeChild(container); - var scrollbarWidthDevice = 15; // Mac and Linux: scrollbars are 15px wide - if (-1 != navigator.platform.indexOf('Win')) { - scrollbarWidthDevice = 17; - } - var z = scrollbarWidthDevice / scrollbarWidthCss; - z = Math.round(z * 100) / 100; - return {zoom: z, devicePxPerCssPx: z}; - }, - _zoomFF4: function() { - // no real trick; device-pixel-ratio is the ratio of device dpi / css dpi. - // (Note that this is a different interpretation than Webkit's device - // pixel ratio, which is the ratio device dpi / system dpi). - // TODO: is mozmm vs. mm promising? - var z = this.mediaQueryBinarySearch( - 'min--moz-device-pixel-ratio', - '', 0, 10, 20, .0001); - z = Math.round(z * 100) / 100; - return {zoom: z, devicePxPerCssPx: z}; - }, - _zoomOperaOlder: function() { - // 10.00 (or before) to 11.01: - // the trick: a div with position:fixed;width:100%'s offsetWidth is the - // viewport width in CSS pixels, while window.innerWidth was in system - // pixels. Thanks to: - // http://virtuelvis.com/2005/05/how-to-detect-zoom-level-in-opera/ - // TODO: fix bug: when there is a scrollbar, fixed div does NOT - // include the scrollbar, while window.outerWidth DOES. This causes the - // calculation to be off by a few percent. - var fixedDiv = document.createElement('div'); - fixedDiv.style.position = 'fixed'; - fixedDiv.style.width = '100%'; - fixedDiv.style.height = '100%'; - fixedDiv.style.top = fixedDiv.style.left = '0'; - fixedDiv.style.visibility = 'hidden'; - document.body.appendChild(fixedDiv); - var z = window.innerWidth / fixedDiv.offsetWidth; - document.body.removeChild(fixedDiv); - return {zoom: z, devicePxPerCssPx: z}; - }, - _zoomOpera11: function() { - // works starting Opera 11.11 - // the trick: outerWidth is the viewport width including scrollbars in - // system px, while innerWidth is the viewport width including scrollbars - // in CSS px; - var z = window.outerWidth / window.innerWidth; - z = Math.round(z * 100) / 100; - return {zoom: z, devicePxPerCssPx: z}; - }, - ratios: function() { - var r; - if (Modernizr.ftouch) { - return this._zoomWebkitMobile(); - } else if (!isNaN(screen.logicalXDPI) && !isNaN(screen.systemXDPI)) { - return this._zoomIe8(); - } else if ('ontouchstart' in window && document.body.style.webkitTextSizeAdjust != null) { - return this._zoomWebkitMobile(); - } else if (document.body.style.webkitTextSizeAdjust != null) { // webkit - return this._zoomWebkit(); - } else if (-1 != navigator.userAgent.indexOf('Firefox/3.5')) { - return this._zoomFF35(); - } else if (-1 != navigator.userAgent.indexOf('Firefox/3.6')) { - return this._zoomFF36(); - } else if (-1 != navigator.appVersion.indexOf("MSIE 7.")) { - return this._zoomIe7(); - } else if (-1 != navigator.userAgent.indexOf('Opera')) { - var versionIdx = navigator.userAgent.indexOf('Version/'); - if (11.01 < parseFloat(navigator.userAgent.substr(versionIdx + 8))) - return this._zoomOpera11(); - else - return this._zoomOperaOlder(); - } else if (0.001 < (r = this._zoomFF4()).zoom) { - return r; - } else { - return {zoom: 1, devicePxPerCssPx: 1} - } - }, - zoom: function() { - return this.ratios().zoom; - }, - device: function() { - return this.ratios().devicePxPerCssPx; - } -}; \ No newline at end of file diff --git a/js/libs/fix/ios-orientation.js b/js/libs/fix/ios-orientation.js deleted file mode 100644 index 1d5bd272..00000000 --- a/js/libs/fix/ios-orientation.js +++ /dev/null @@ -1,56 +0,0 @@ -(function(w) { - - // This fix addresses an iOS bug, so return early if the UA claims it's something else. - var ua = navigator.userAgent; - if (!(/iPhone|iPad|iPod/.test(navigator.platform))) { - //return; - } - - var doc = w.document; - - if (!doc.querySelector) { - return; - } - - var meta = doc.querySelector("meta[name=viewport]"), - initialContent = meta && meta.getAttribute("content"), - disabledZoom = initialContent + ",maximum-scale=1", - enabledZoom = initialContent + ",maximum-scale=1", - enabled = true, - x, y, z, aig; - - if (!meta) { - return; - } - - function restoreZoom() { - meta.setAttribute("content", enabledZoom); - enabled = true; - } - - function disableZoom() { - meta.setAttribute("content", disabledZoom); - enabled = false; - } - - function checkTilt(e) { - aig = e.accelerationIncludingGravity; - x = Math.abs(aig.x); - y = Math.abs(aig.y); - z = Math.abs(aig.z); - - // If portrait orientation and in one of the danger zones - if ((!w.orientation || w.orientation === 180) && (x > 7 || ((z > 6 && y < 8 || z < 8 && y > 6) && x > 5))) { - if (enabled) { - disableZoom(); - } - } - else if (!enabled) { - restoreZoom(); - } - } - - w.addEventListener("orientationchange", restoreZoom, false); - w.addEventListener("devicemotion", checkTilt, false); - -})(this); \ No newline at end of file diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js index 1c9847c4..86c0ed09 100644 --- a/js/libs/fluidbook/fluidbook.js +++ b/js/libs/fluidbook/fluidbook.js @@ -974,16 +974,7 @@ Fluidbook.prototype = { $('body').removeClass('loading'); } }, - pollZoom: function () { - var z = this.support.getZoomLevel(); - //console.log(z); - $('html').attr('data-zoom', z); - if (z <= 1) { - $("html").removeClass('pan'); - } else { - $("html").addClass('pan'); - } - }, + intentShare: function (subject, body) { if (subject == undefined) { subject = this.datas.title; diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js index 33f6cea7..35882a1a 100644 --- a/js/libs/fluidbook/fluidbook.links.js +++ b/js/libs/fluidbook/fluidbook.links.js @@ -73,10 +73,10 @@ FluidbookLinks.prototype = { var $this = this; var links = $(".link a.displayArea"); - $(links).addClass('animating').css('opacity', 1); + $(links).css('opacity', 1); TweenMax.to($(links), $this.fluidbook.datas.linkBlinkTime, { opacity: 0, delay: 0.1, onComplete: function () { - $(links).removeClass('animating').css('opacity', 1) + $(links).css('opacity', 1) } }); }, diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js index 56d256aa..0665ed7c 100644 --- a/js/libs/fluidbook/fluidbook.resize.js +++ b/js/libs/fluidbook/fluidbook.resize.js @@ -52,7 +52,6 @@ FluidbookResize.prototype = { init = false; } - // $("#main").hide(); var $this = this; this.updateWindow(); diff --git a/js/libs/fluidbook/fluidbook.support.js b/js/libs/fluidbook/fluidbook.support.js index 0f8cd733..26576260 100644 --- a/js/libs/fluidbook/fluidbook.support.js +++ b/js/libs/fluidbook/fluidbook.support.js @@ -32,14 +32,6 @@ function FluidbookSupport(fluidbook) { this.screenHeight = Math.max(window.screen.availWidth, window.screen.availHeight); this._orientation = this.getOrientation(); - this.initialZoomPortrait = 0; - this.initialZoomLandscape = 0; - var z = DetectZoom.zoom(); - if (this._orientation == 0) { - this.initialZoomPortrait = z; - } else { - this.initialZoomLandscape = z; - } this.initEvents(); } @@ -159,21 +151,5 @@ FluidbookSupport.prototype = { } return $("#op").is(':visible') ? 0 : 90; - }, - getZoomLevel: function () { - var tzoom = DetectZoom.zoom(); - var iz; - if (this._orientation == 0) { - iz = this.initialZoomPortrait; - if (iz == 0) { - iz = this.initialZoomPortrait = tzoom; - } - } else { - iz = this.initialZoomLandscape; - if (iz == 0) { - iz = this.initialZoomLandscape = tzoom; - } - } - return Math.round(tzoom / iz * 10) / 10; } } diff --git a/js/libs/fluidbook/fluidbook.touch.js b/js/libs/fluidbook/fluidbook.touch.js index 7c632e54..ac1b824e 100644 --- a/js/libs/fluidbook/fluidbook.touch.js +++ b/js/libs/fluidbook/fluidbook.touch.js @@ -17,6 +17,17 @@ FluidbookTouch.prototype = { init: function () { var $this = this; + // Disable native zoom + document.addEventListener('touchmove', function (event) { + if (event.scale !== 1) { + event.preventDefault(); + } + }, false); + + $(this.fluidbook).on('fluidbook.page.change.end', function () { + $this.resetSlide(); + }); + // Pinch to zoom interact(document.getElementById("z")).gesturable({ onstart: function (event) { diff --git a/js/libs/interact.js b/js/libs/interact.js index ebc763b6..d2ba9359 100644 --- a/js/libs/interact.js +++ b/js/libs/interact.js @@ -1,5 +1,5 @@ /** - * interact.js v1.2.6 + * interact.js v1.2.8 * * Copyright (c) 2012-2015 Taye Adeyemi * Open source under the MIT License. @@ -244,7 +244,8 @@ supportsTouch = (('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch), // Does the browser support PointerEvents - supportsPointerEvent = !!PointerEvent, + // Avoid PointerEvent bugs introduced in Chrome 55 + supportsPointerEvent = PointerEvent && !/Chrome/.test(navigator.userAgent), // Less Precision with touch input margin = supportsTouch || supportsPointerEvent? 20: 10, @@ -259,38 +260,38 @@ // Check if is IE9 or older actionCursors = (document.all && !window.atob) ? { - drag : 'move', - resizex : 'e-resize', - resizey : 's-resize', - resizexy: 'se-resize', - - resizetop : 'n-resize', - resizeleft : 'w-resize', - resizebottom : 's-resize', - resizeright : 'e-resize', - resizetopleft : 'se-resize', - resizebottomright: 'se-resize', - resizetopright : 'ne-resize', - resizebottomleft : 'ne-resize', - - gesture : '' - } : { - drag : 'move', - resizex : 'ew-resize', - resizey : 'ns-resize', - resizexy: 'nwse-resize', - - resizetop : 'ns-resize', - resizeleft : 'ew-resize', - resizebottom : 'ns-resize', - resizeright : 'ew-resize', - resizetopleft : 'nwse-resize', - resizebottomright: 'nwse-resize', - resizetopright : 'nesw-resize', - resizebottomleft : 'nesw-resize', - - gesture : '' - }, + drag : 'move', + resizex : 'e-resize', + resizey : 's-resize', + resizexy: 'se-resize', + + resizetop : 'n-resize', + resizeleft : 'w-resize', + resizebottom : 's-resize', + resizeright : 'e-resize', + resizetopleft : 'se-resize', + resizebottomright: 'se-resize', + resizetopright : 'ne-resize', + resizebottomleft : 'ne-resize', + + gesture : '' + } : { + drag : 'move', + resizex : 'ew-resize', + resizey : 'ns-resize', + resizexy: 'nwse-resize', + + resizetop : 'ns-resize', + resizeleft : 'ew-resize', + resizebottom : 'ns-resize', + resizeright : 'ew-resize', + resizetopleft : 'nwse-resize', + resizebottomright: 'nwse-resize', + resizetopright : 'nesw-resize', + resizebottomleft : 'nesw-resize', + + gesture : '' + }, actionIsEnabled = { drag : true, @@ -380,10 +381,10 @@ targets.push(target); attachedListeners.push((useAttachEvent ? { - supplied: [], - wrapped : [], - useCount: [] - } : null)); + supplied: [], + wrapped : [], + useCount: [] + } : null)); } if (!target.events[type]) { @@ -1377,14 +1378,14 @@ this.pointerHover(pointer, event, this.matches, this.matchElements); events.add(eventTarget, - PointerEvent? pEventTypes.move : 'mousemove', + supportsPointerEvent? pEventTypes.move : 'mousemove', listeners.pointerHover); } else if (this.target) { if (nodeContains(prevTargetElement, eventTarget)) { this.pointerHover(pointer, event, this.matches, this.matchElements); events.add(this.element, - PointerEvent? pEventTypes.move : 'mousemove', + supportsPointerEvent? pEventTypes.move : 'mousemove', listeners.pointerHover); } else { @@ -1436,7 +1437,7 @@ // Remove temporary event listeners for selector Interactables if (!interactables.get(eventTarget)) { events.remove(eventTarget, - PointerEvent? pEventTypes.move : 'mousemove', + supportsPointerEvent? pEventTypes.move : 'mousemove', listeners.pointerHover); } @@ -1555,7 +1556,7 @@ // If it is the second touch of a multi-touch gesture, keep the // target the same and get a new action if a target was set by the // first touch - if (this.pointerIds.length > 1 && this.target._element === this.element) { + if (this.pointerIds.length > 1 && this.target && this.target._element && this.target._element === this.element) { var newAction = validateAction(forceAction || this.target.getAction(pointer, event, this, this.element), this.target); if (withinInteractionLimit(this.target, this.element, newAction)) { @@ -1707,7 +1708,7 @@ * * Start an action with the given Interactable and Element as tartgets. The * action must be enabled for the target Interactable and an appropriate number - * of pointers must be held down – 1 for drag/resize, 2 for gesture. + * of pointers must be held down – 1 for drag/resize, 2 for gesture. * * Use it with `interactable.able({ manualStart: false })` to always * [start actions manually](https://github.com/taye/interact.js/issues/114) @@ -1748,7 +1749,7 @@ // set the startCoords if there was no prepared action if (!this.prepared.name) { - this.setEventXY(this.startCoords); + this.setEventXY(this.startCoords, this.pointers); } this.prepared.name = action.name; @@ -2843,9 +2844,9 @@ pointerEvent.type = eventType; pointerEvent.pointerId = getPointerId(pointer); pointerEvent.pointerType = this.mouse? 'mouse' : !supportsPointerEvent? 'touch' - : isString(pointer.pointerType) - ? pointer.pointerType - : [,,'touch', 'pen', 'mouse'][pointer.pointerType]; + : isString(pointer.pointerType) + ? pointer.pointerType + : [,,'touch', 'pen', 'mouse'][pointer.pointerType]; } if (eventType === 'tap') { @@ -3930,7 +3931,7 @@ if (isElement(element, _window)) { - if (PointerEvent) { + if (supportsPointerEvent) { events.add(this._element, pEventTypes.down, listeners.pointerDown ); events.add(this._element, pEventTypes.move, listeners.pointerHover); } @@ -5775,7 +5776,7 @@ events.add(doc, eventType, delegateUseCapture, true); } - if (PointerEvent) { + if (supportsPointerEvent) { if (PointerEvent === win.MSPointerEvent) { pEventTypes = { up: 'MSPointerUp', down: 'MSPointerDown', over: 'mouseover', @@ -5973,4 +5974,4 @@ realWindow.interact = interact; } -} (typeof window === 'undefined'? undefined : window)); \ No newline at end of file +} (typeof window === 'undefined'? undefined : window)); diff --git a/js/main.js b/js/main.js index 566df181..36025035 100644 --- a/js/main.js +++ b/js/main.js @@ -400,10 +400,6 @@ try { resize(); }, 1000); - setInterval(function () { - fluidbook.pollZoom(); - }, 250); - if (!startAfterLoading) { fluidbook.changeAddress(); } -- 2.39.5