viewerjs - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

CHANGELOG.md

 # Changelog
 
+## 1.1.0 (May 27, 2018)
+
+- Add 2 new events: `zoom` and `zoomed` (#144).
+- Make the touch zooming more smoother (#162).
+
 ## 1.0.1 (May 20, 2018)
@@ -4,0 +9,0 @@

package.json

 {
   "name": "viewerjs",
   "description": "JavaScript image viewer.",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "main": "dist/viewer.common.js",
@@ -80,8 +80,8 @@ "module": "dist/viewer.esm.js",
     "puppeteer": "^1.4.0",
-    "rollup": "^0.59.1",
+    "rollup": "^0.59.3",
     "rollup-plugin-babel": "^3.0.4",
     "rollup-watch": "^4.3.1",
     "stylefmt": "^6.0.0",
-    "uglify-js": "^3.3.25"
+    "uglify-js": "^3.3.27"
   }
 }

README.md

@@ -27,5 +27,5 @@ # Viewer.js
 
-- Supports 34 [options](#options)
+- Supports 36 [options](#options)
 - Supports 23 [methods](#methods)
-- Supports 7 [events](#events)
+- Supports 9 [events](#events)
 - Supports modal and inline modes
@@ -455,2 +455,16 @@ - Supports touch
 
+### zoom
+
+- Type: `Function`
+- Default: `null`
+
+A shortcut of the `zoom` event.
+
+### zoomed
+
+- Type: `Function`
+- Default: `null`
+
+A shortcut of the `zoomed` event.
+
 [⬆ back to top](#table-of-contents)
@@ -799,2 +813,24 @@
 
+### zoom
+
+- **event.detail.originalEvent**:
+  - Type: `Event`
+  - Options: `wheel`, `touchmove`.
+
+- **event.detail.oldRatio**:
+  - Type: `Number`
+  - The old (current) ratio of the image.
+
+- **event.detail.ratio**:
+  - Type: `Number`
+  - The new (next) ratio of the image (`imageData.width / imageData.naturalWidth`).
+
+This event fires when a viewer starts to zoom (in or out) an image.
+
+### zoomed
+
+- **event.detail**: the same as the `zoom` event.
+
+This event fires when a viewer has zoomed (in or out) an image.
+
 [⬆ back to top](#table-of-contents)
@@ -801,0 +837,0 @@

src/js/constants.js

@@ -37,2 +37,4 @@ export const IN_BROWSER = typeof window !== 'undefined';
 export const EVENT_VIEWED = 'viewed';
+export const EVENT_ZOOM = 'zoom';
+export const EVENT_ZOOMED = 'zoomed';
 export const EVENT_CLICK = 'click';
@@ -39,0 +41,0 @@ export const EVENT_DRAG_START = 'dragstart';

src/js/defaults.js

@@ -94,2 +94,4 @@ export default {
   viewed: null,
+  zoom: null,
+  zoomed: null,
 };

src/js/handlers.js

@@ -23,3 +23,2 @@ import {
   getTransforms,
-  hasClass,
   isFunction,
@@ -305,2 +304,6 @@ removeClass,
 
+    if (options.transition && (action === ACTION_MOVE || action === ACTION_ZOOM)) {
+      removeClass(this.image, CLASS_TRANSITION);
+    }
+
     this.action = action;
@@ -311,6 +314,4 @@ },
     const {
-      options,
       pointers,
       action,
-      image,
     } = this;
@@ -332,6 +333,2 @@
 
-    if (action === ACTION_MOVE && options.transition && hasClass(image, CLASS_TRANSITION)) {
-      removeClass(image, CLASS_TRANSITION);
-    }
-
     this.change(e);
@@ -357,3 +354,3 @@ },
 
-    if (action === ACTION_MOVE && this.options.transition) {
+    if (this.options.transition && (action === ACTION_MOVE || action === ACTION_ZOOM)) {
       addClass(this.image, CLASS_TRANSITION);
@@ -360,0 +357,0 @@ }

src/js/methods.js

@@ -19,2 +19,4 @@ import {
   EVENT_VIEWED,
+  EVENT_ZOOM,
+  EVENT_ZOOMED,
   NAMESPACE,
@@ -425,3 +427,8 @@ } from './constants';
   zoomTo(ratio, hasTooltip = false, _originalEvent = null, _zoomable = false) {
-    const { options, pointers, imageData } = this;
+    const {
+      element,
+      options,
+      pointers,
+      imageData,
+    } = this;
 
@@ -444,3 +451,20 @@ ratio = Math.max(0, ratio);
       const newHeight = imageData.naturalHeight * ratio;
+      const oldRatio = imageData.width / imageData.naturalWidth;
 
+      if (isFunction(options.zoom)) {
+        addListener(element, EVENT_ZOOM, options.zoom, {
+          once: true,
+        });
+      }
+
+      if (dispatchEvent(element, EVENT_ZOOM, {
+        ratio,
+        oldRatio,
+        originalEvent: _originalEvent,
+      }) === false) {
+        return this;
+      }
+
+      this.zooming = true;
+
       if (_originalEvent) {
@@ -469,4 +493,18 @@ const offset = getOffset(this.viewer);
       imageData.ratio = ratio;
-      this.renderImage();
+      this.renderImage(() => {
+        this.zooming = false;
 
+        if (isFunction(options.zoomed)) {
+          addListener(element, EVENT_ZOOMED, options.zoomed, {
+            once: true,
+          });
+        }
+
+        dispatchEvent(element, EVENT_ZOOMED, {
+          ratio,
+          oldRatio,
+          originalEvent: _originalEvent,
+        });
+      });
+
       if (hasTooltip) {
@@ -473,0 +511,0 @@ this.tooltip();

src/js/render.js

@@ -222,3 +222,3 @@ import {
     if (done) {
-      if (this.viewing && this.options.transition) {
+      if ((this.viewing || this.zooming) && this.options.transition) {
         const onTransitionEnd = () => {
@@ -225,0 +225,0 @@ this.imageRendering = false;

src/js/viewer.js

@@ -77,2 +77,3 @@ import DEFAULTS from './defaults';
     this.wheeling = false;
+    this.zooming = false;
     this.init();
@@ -79,0 +80,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

848458

increased by93.02%

Number of package files

29

increased by11.54%

Lines of code

10688

increased by1.21%

Number of lines in readme file

870

increased by4.32%

No dependency changes