From 0f9991dd746e2069c82e32c2e36f8b5a36a74c29 Mon Sep 17 00:00:00 2001 From: s-yadav Date: Sun, 7 Apr 2019 17:51:50 +0530 Subject: [PATCH] =?UTF-8?q?Released=202.0.0=20=F0=9F=8E=89=20-=20Added=20c?= =?UTF-8?q?ode=20sandbox=20link=20for=20examples=20-=20Fixed=20#46?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 5 ++ dist/iv-viewer.es.js | 4 +- dist/iv-viewer.js | 4 +- dist/iv-viewer.min.js | 2 +- example/container-mode/example.js | 88 +++++++++++++++--------------- example/fullscreen-mode/example.js | 12 ++-- example/image-mode/example.js | 6 +- example/index.css | 19 +++++++ example/index.html | 15 +++-- lib/ImageViewer.js | 2 +- package.json | 2 +- src/ImageViewer.js | 2 +- 12 files changed, 93 insertions(+), 68 deletions(-) create mode 100644 example/index.css diff --git a/README.md b/README.md index 1378b86..0e66843 100644 --- a/README.md +++ b/README.md @@ -210,6 +210,11 @@ In all of the above example it will first try to display the first image and the The second image is optional, which you should pass when you feel you can improve the image loading experience by first showing low quality image and then progressively update it with high quality image. +### Demo +codesandbox preview link: [https://8ypwzryom0.codesandbox.io/](https://8ypwzryom0.codesandbox.io/) + +codesandbox link: [https://codesandbox.io/s/8ypwzryom0](https://codesandbox.io/s/8ypwzryom0) + ### Like this [:star: this repo](https://github.com/s-yadav/iv-viewer) diff --git a/dist/iv-viewer.es.js b/dist/iv-viewer.es.js index 37e95b7..15bc480 100644 --- a/dist/iv-viewer.es.js +++ b/dist/iv-viewer.es.js @@ -1,5 +1,5 @@ /** - * iv-viewer - 2.0.0-beta5 + * iv-viewer - 2.0.0 * Author : Sudhanshu Yadav * Copyright (c) 2019 to Sudhanshu Yadav, released under the MIT license. * git+https://github.com/s-yadav/iv-viewer.git @@ -1006,7 +1006,7 @@ function () { _this7._clearFrames(); // cross-browser wheel delta - var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail)); + var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail || -e.deltaY)); var newZoomValue = zoomValue * (100 + delta * ZOOM_CONSTANT) / 100; if (!(newZoomValue >= 100 && newZoomValue <= _options.maxZoom)) { diff --git a/dist/iv-viewer.js b/dist/iv-viewer.js index 38d97ad..f2ddadd 100644 --- a/dist/iv-viewer.js +++ b/dist/iv-viewer.js @@ -1,5 +1,5 @@ /** - * iv-viewer - 2.0.0-beta5 + * iv-viewer - 2.0.0 * Author : Sudhanshu Yadav * Copyright (c) 2019 to Sudhanshu Yadav, released under the MIT license. * git+https://github.com/s-yadav/iv-viewer.git @@ -1012,7 +1012,7 @@ _this7._clearFrames(); // cross-browser wheel delta - var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail)); + var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail || -e.deltaY)); var newZoomValue = zoomValue * (100 + delta * ZOOM_CONSTANT) / 100; if (!(newZoomValue >= 100 && newZoomValue <= _options.maxZoom)) { diff --git a/dist/iv-viewer.min.js b/dist/iv-viewer.min.js index b6f78cb..887bb91 100644 --- a/dist/iv-viewer.min.js +++ b/dist/iv-viewer.min.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).ImageViewer=t()}(this,function(){"use strict";function l(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){for(var n=0;n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n',parent:e}),function t(n,e){var i=e.split(" ");1\n
\n',parent:document.body}),o=a.querySelector(".iv-fullscreen-container");return n=this,i=s(r).call(this,o,m({},t,{refreshOnResize:!1})),c(u(e=!i||"object"!=typeof i&&"function"!=typeof i?u(n):i),"hide",function(){x(e._elements.fullScreen,{display:"none"}),p(document.querySelector("html"),"overflow"),e._events.onWindowResize()}),e._elements.fullScreen=a,e._initFullScreenEvents(),e}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&n(e,t)}(r,S),t(r,[{key:"_initFullScreenEvents",value:function(){var e=this._elements.fullScreen.querySelector(".iv-fullscreen-close");this._events.onCloseBtnClick=g(e,"click",this.hide)}},{key:"show",value:function(e,t){x(this._elements.fullScreen,{display:"block"}),e&&this.load(e,t),this._events.onWindowResize=g(window,"resize",this.refresh),x(document.querySelector("html"),{overflow:"hidden"})}},{key:"destroy",value:function(){var e=this._elements.fullScreen;a(s(r.prototype),"destroy",this).call(this),f(e)}}]),r}();return S.FullScreenViewer=e,S}); +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).ImageViewer=t()}(this,function(){"use strict";function l(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){for(var n=0;n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n',parent:e}),function t(n,e){var i=e.split(" ");1\n
\n',parent:document.body}),o=a.querySelector(".iv-fullscreen-container");return n=this,i=s(r).call(this,o,m({},t,{refreshOnResize:!1})),c(u(e=!i||"object"!=typeof i&&"function"!=typeof i?u(n):i),"hide",function(){x(e._elements.fullScreen,{display:"none"}),p(document.querySelector("html"),"overflow"),e._events.onWindowResize()}),e._elements.fullScreen=a,e._initFullScreenEvents(),e}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&n(e,t)}(r,S),t(r,[{key:"_initFullScreenEvents",value:function(){var e=this._elements.fullScreen.querySelector(".iv-fullscreen-close");this._events.onCloseBtnClick=g(e,"click",this.hide)}},{key:"show",value:function(e,t){x(this._elements.fullScreen,{display:"block"}),e&&this.load(e,t),this._events.onWindowResize=g(window,"resize",this.refresh),x(document.querySelector("html"),{overflow:"hidden"})}},{key:"destroy",value:function(){var e=this._elements.fullScreen;a(s(r.prototype),"destroy",this).call(this),f(e)}}]),r}();return S.FullScreenViewer=e,S}); diff --git a/example/container-mode/example.js b/example/container-mode/example.js index 6f16efb..1683eda 100644 --- a/example/container-mode/example.js +++ b/example/container-mode/example.js @@ -1,49 +1,47 @@ import ImageViewer from '../../src/ImageViewer'; -document.addEventListener('DOMContentLoaded', function () { - const images = [{ - small: '../images/1.jpg', - big: '../images/1_big.jpg', - }, { - small: '../images/2.jpg', - big: '../images/2_big.jpg', - }, { - small: '../images/3.jpg', - big: '../images/3_big.jpg', - }, { - small: '../images/4.jpg', - big: '../images/4_big.jpg', - }]; - - let curImageIdx = 1; - - const total = images.length; - const wrapper = document.getElementById('image-gallery'); - - const curSpan = wrapper.querySelector('.current'); - const viewer = new ImageViewer(wrapper.querySelector('.image-container')); - window.viewer = viewer; - // display total count - wrapper.querySelector('.total').innerHTML = total; - - function showImage () { - const imgObj = images[curImageIdx - 1]; - viewer.load(imgObj.small, imgObj.big); - curSpan.innerHTML = curImageIdx; - } - - wrapper.querySelector('.next').addEventListener('click', function (evt) { - curImageIdx++; - if (curImageIdx > total) curImageIdx = 1; - showImage(); - }); - - wrapper.querySelector('.prev').addEventListener('click', function (evt) { - curImageIdx--; - if (curImageIdx < 0) curImageIdx = total; - showImage(); - }); - - // initially show image +const images = [{ + small: '../images/1.jpg', + big: '../images/1_big.jpg', +}, { + small: '../images/2.jpg', + big: '../images/2_big.jpg', +}, { + small: '../images/3.jpg', + big: '../images/3_big.jpg', +}, { + small: '../images/4.jpg', + big: '../images/4_big.jpg', +}]; + +let curImageIdx = 1; + +const total = images.length; +const wrapper = document.getElementById('image-gallery'); + +const curSpan = wrapper.querySelector('.current'); +const viewer = new ImageViewer(wrapper.querySelector('.image-container')); +window.viewer = viewer; +// display total count +wrapper.querySelector('.total').innerHTML = total; + +function showImage () { + const imgObj = images[curImageIdx - 1]; + viewer.load(imgObj.small, imgObj.big); + curSpan.innerHTML = curImageIdx; +} + +wrapper.querySelector('.next').addEventListener('click', function (evt) { + curImageIdx++; + if (curImageIdx > total) curImageIdx = 1; showImage(); }); + +wrapper.querySelector('.prev').addEventListener('click', function (evt) { + curImageIdx--; + if (curImageIdx < 0) curImageIdx = total; + showImage(); +}); + +// initially show image +showImage(); diff --git a/example/fullscreen-mode/example.js b/example/fullscreen-mode/example.js index 37f8a33..6fbaeb6 100644 --- a/example/fullscreen-mode/example.js +++ b/example/fullscreen-mode/example.js @@ -2,12 +2,10 @@ import FullScreenViewer from '../../src/FullScreen'; const viewer = new FullScreenViewer(); -document.addEventListener('DOMContentLoaded', function () { - Array.from(document.querySelectorAll('.gallery-items')).forEach((elem) => { - elem.addEventListener('click', function (ev) { - const imgSrc = elem.src; - const highResolutionImage = elem.getAttribute('data-high-res-src'); - viewer.show(imgSrc, highResolutionImage); - }); +Array.from(document.querySelectorAll('.gallery-items')).forEach((elem) => { + elem.addEventListener('click', function (ev) { + const imgSrc = elem.src; + const highResolutionImage = elem.getAttribute('data-high-res-src'); + viewer.show(imgSrc, highResolutionImage); }); }); diff --git a/example/image-mode/example.js b/example/image-mode/example.js index d38bbb5..f29d2d1 100644 --- a/example/image-mode/example.js +++ b/example/image-mode/example.js @@ -1,7 +1,5 @@ import ImageViewer from '../../src/ImageViewer'; -document.addEventListener('DOMContentLoaded', function () { - Array.from(document.querySelectorAll('.pannable-image')).forEach((elem) => { - new ImageViewer(elem); - }); +Array.from(document.querySelectorAll('.pannable-image')).forEach((elem) => { + new ImageViewer(elem); }); diff --git a/example/index.css b/example/index.css new file mode 100644 index 0000000..e6e7022 --- /dev/null +++ b/example/index.css @@ -0,0 +1,19 @@ +body, +html { + margin: 0; +} + +.header { + border-bottom: 1px solid #ccc; + text-align: center; + padding: 10px; +} + +.nav-link { + text-decoration: none; + padding: 10px; +} + +nav { + text-align: center; +} diff --git a/example/index.html b/example/index.html index 1e06f30..bec6bcf 100644 --- a/example/index.html +++ b/example/index.html @@ -1,10 +1,17 @@ + + Image Viewer Example + + + +

ImageViewer examples

- diff --git a/lib/ImageViewer.js b/lib/ImageViewer.js index e52f353..11e4616 100644 --- a/lib/ImageViewer.js +++ b/lib/ImageViewer.js @@ -610,7 +610,7 @@ function () { _this7._clearFrames(); // cross-browser wheel delta - var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail)); + var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail || -e.deltaY)); var newZoomValue = zoomValue * (100 + delta * _util.ZOOM_CONSTANT) / 100; if (!(newZoomValue >= 100 && newZoomValue <= _options.maxZoom)) { diff --git a/package.json b/package.json index 4d42596..7dd34cc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "iv-viewer", - "version": "2.0.0-beta5", + "version": "2.0.0", "description": "A zooming and panning plugin inspired by google photos for your web images.", "main": "lib/index.js", "repository": { diff --git a/src/ImageViewer.js b/src/ImageViewer.js index e2ca9dc..5039c77 100644 --- a/src/ImageViewer.js +++ b/src/ImageViewer.js @@ -466,7 +466,7 @@ class ImageViewer { this._clearFrames(); // cross-browser wheel delta - const delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail)); + const delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail || -e.deltaY)); const newZoomValue = zoomValue * (100 + delta * ZOOM_CONSTANT) / 100;