js-image-zoom - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

js-image-zoom.js

@@ -11,6 +11,6 @@ (function (root, factory) {
      * @param {Object} options js-image-zoom options (required)
-     * **width** (number) - width of the source image(required)
-     * **height** (number) - height of the source image(optional).
-     * **zoomWidth** (number) - width of the zoomed image. Zoomed image height equals source image height(optional if scale param is provided)
-     * **img** (string) - url of the source image. Provided if container does not contain img element as a tag(optional)
+     * **width** (number) - width of the source image (optional)
+     * **height** (number) - height of the source image (optional).
+     * **zoomWidth** (number) - width of the zoomed image. Zoomed image height equals source image height (optional)
+     * **img** (string) - url of the source image. Provided if container does not contain img element as a tag (optional)
      * **scale** (number) - zoom scale. if not provided, scale is calculated as natural image size / image size, provided in params (optional if zoomWidth param is provided)
@@ -20,4 +20,3 @@ * **offset** (object) - {vertical: number, horizontal: number}. Zoomed image offset (optional)
      * **zoomStyle** (string) - custom style applied to the zoomed image (i.e. 'opacity: 0.1;background-color: white;')
-     * **zoomPosition** (string) - position of zoomed image. It can be:  'top', 'left', 'bottom' or the default 'right'. (Ignored if `zoomDefaultPosition` is false)
-     * **zoomDefaultPosition** (boolean) Disable the default position styles in zoomedImage if `false`. (default: true)
+     * **zoomPosition** (string) - position of zoomed image. It can be:  `top`, `left`, `bottom`, `original` or the default `right`.
      * **zoomLensStyle** (string) custom style applied to to zoom lents (i.e. 'opacity: 0.1;background-color: white;')
@@ -66,4 +65,2 @@ */
         data.zoomContainer = (options.zoomContainer) ? options.zoomContainer : container;
-        data.zoomDefaultPosition = (options.zoomDefaultPosition) ? options.zoomDefaultPosition : true;
-
         function getOffset(el) {
@@ -114,5 +111,8 @@ if (el) {
                 data.zoomedImg.element.style.height = options.height * options.scale + 'px';
-            } else {
+            } else if (options.zoomWidth) {
                 data.zoomedImg.element.style.width = options.zoomWidth + 'px';
                 data.zoomedImg.element.style.height = data.sourceImg.element.style.height;
+            } else {
+                data.zoomedImg.element.style.width = '100%';
+                data.zoomedImg.element.style.height = '100%';
             }
@@ -122,6 +122,10 @@ }
         function onSourceImgLoad() {
-            // use height, determined by browser if height is not set in options
+            // use height determined by browser if height is not set in options
             options.height = options.height || data.sourceImg.element.height;
             data.sourceImg.element.style.height = options.height + 'px';
 
+            // use width determined by browser if width is not set in options
+            options.width = options.width || data.sourceImg.element.width;
+            data.sourceImg.element.style.width = options.width + 'px';
+
             setZoomedImgSize(options, data);
@@ -140,3 +144,3 @@
                 data.zoomLens.element.style.background = 'white';
-                data.zoomLens.element.style.opacity = 0.4;
+                data.zoomLens.element.style.opacity = '0.4';
             }
@@ -148,6 +152,11 @@
 
+            // set zoomLens dimensions
+            // if custom scale is set
             if (options.scale) {
                 data.zoomLens.width = options.width / (data.sourceImg.naturalWidth / (options.width * options.scale));
                 data.zoomLens.height = options.height / (data.sourceImg.naturalHeight / (options.height * options.scale));
-            } else {
+            }
+
+            // else if zoomWidth is set
+            else if (options.zoomWidth) {
                 data.zoomLens.width = options.zoomWidth / scaleX;
@@ -157,2 +166,10 @@ data.zoomLens.height = options.height / scaleY;
 
+            // else read from the zoomedImg
+            else {
+                data.zoomedImg.element.style.display = 'block';
+                data.zoomLens.width = data.zoomedImg.element.clientWidth / scaleX;
+                data.zoomLens.height = data.zoomedImg.element.clientHeight / scaleY;
+                data.zoomedImg.element.style.display = 'none';
+            }
+
             data.zoomLens.element.style.position = 'absolute';
@@ -162,5 +179,6 @@ data.zoomLens.element.style.width = data.zoomLens.width + 'px';
             data.zoomLens.element.pointerEvents = 'none';
-        };
+        }
 
         function setup() {
+            // create sourceImg element
             if (options.img) {
@@ -170,8 +188,17 @@ var img = document.createElement('img');
                 data.sourceImg.element = container.appendChild(img);
-            } else {
+            }
+
+            // or get sourceImg element from specified container
+            else {
                 data.sourceImg.element = container.children[0];
+
+                // if sourceImg is not an img (might be a picture element), try to find one
+                if (data.sourceImg.element.nodeName !== "IMG") {
+                    data.sourceImg.element = data.sourceImg.element.querySelector('img');
+                }
             }
+
             options = options || {};
             container.style.position = 'relative';
-            data.sourceImg.element.style.width = options.width + 'px' || 'auto';
+            data.sourceImg.element.style.width = options.width ? options.width + 'px' : 'auto';
             data.sourceImg.element.style.height = options.height ? options.height + 'px' : 'auto';
@@ -189,35 +216,41 @@
 
-            if (data.zoomDefaultPosition) {
-                switch (data.zoomPosition) {
-                    case 'left':
-                        data.zoomedImg.element.style.position = 'absolute';
-                        data.zoomedImg.element.style.top = data.zoomedImgOffset.vertical + 'px';
-                        data.zoomedImg.element.style.left = data.zoomedImgOffset.horizontal - (data.zoomedImgOffset.horizontal * 2) + 'px';
-                        data.zoomedImg.element.style.transform = 'translateX(-100%)';
-                        break;
+            switch (data.zoomPosition) {
+                case 'left':
+                    data.zoomedImg.element.style.position = 'absolute';
+                    data.zoomedImg.element.style.top = data.zoomedImgOffset.vertical + 'px';
+                    data.zoomedImg.element.style.left = data.zoomedImgOffset.horizontal - (data.zoomedImgOffset.horizontal * 2) + 'px';
+                    data.zoomedImg.element.style.transform = 'translateX(-100%)';
+                    break;
 
-                    case 'top':
-                        data.zoomedImg.element.style.position = 'absolute';
-                        data.zoomedImg.element.style.top = data.zoomedImgOffset.vertical - (data.zoomedImgOffset.vertical * 2) + 'px';
-                        data.zoomedImg.element.style.left = 'calc(50% + ' + data.zoomedImgOffset.horizontal + 'px)';
-                        data.zoomedImg.element.style.transform = 'translate3d(-50%, -100%, 0)';
-                        break;
+                case 'top':
+                    data.zoomedImg.element.style.position = 'absolute';
+                    data.zoomedImg.element.style.top = data.zoomedImgOffset.vertical - (data.zoomedImgOffset.vertical * 2) + 'px';
+                    data.zoomedImg.element.style.left = 'calc(50% + ' + data.zoomedImgOffset.horizontal + 'px)';
+                    data.zoomedImg.element.style.transform = 'translate3d(-50%, -100%, 0)';
+                    break;
 
-                    case 'bottom':
-                        data.zoomedImg.element.style.position = 'absolute';
-                        data.zoomedImg.element.style.bottom = data.zoomedImgOffset.vertical - (data.zoomedImgOffset.vertical * 2) + 'px';
-                        data.zoomedImg.element.style.left = 'calc(50% + ' + data.zoomedImgOffset.horizontal + 'px)';
-                        data.zoomedImg.element.style.transform = 'translate3d(-50%, 100%, 0)';
-                        break;
+                case 'bottom':
+                    data.zoomedImg.element.style.position = 'absolute';
+                    data.zoomedImg.element.style.bottom = data.zoomedImgOffset.vertical - (data.zoomedImgOffset.vertical * 2) + 'px';
+                    data.zoomedImg.element.style.left = 'calc(50% + ' + data.zoomedImgOffset.horizontal + 'px)';
+                    data.zoomedImg.element.style.transform = 'translate3d(-50%, 100%, 0)';
+                    break;
 
-                    // Right Position
-                    default:
-                        data.zoomedImg.element.style.position = 'absolute';
-                        data.zoomedImg.element.style.top = data.zoomedImgOffset.vertical + 'px';
-                        data.zoomedImg.element.style.right = data.zoomedImgOffset.horizontal - (data.zoomedImgOffset.horizontal * 2) + 'px';
-                        data.zoomedImg.element.style.transform = 'translateX(100%)';
-                        break;
-                }
+                case 'original':
+                    data.zoomedImg.element.style.position = 'absolute';
+                    data.zoomedImg.element.style.top = '0px';
+                    data.zoomedImg.element.style.left = '0px';
+                    break;
+
+                // Right Position
+                default:
+                    data.zoomedImg.element.style.position = 'absolute';
+                    data.zoomedImg.element.style.top = data.zoomedImgOffset.vertical + 'px';
+                    data.zoomedImg.element.style.right = data.zoomedImgOffset.horizontal - (data.zoomedImgOffset.horizontal * 2) + 'px';
+                    data.zoomedImg.element.style.transform = 'translateX(100%)';
+                    break;
             }
 
+
+            // setup event listeners
             container.addEventListener('mousemove', events, false);
@@ -234,2 +267,4 @@ container.addEventListener('mouseenter', events, false);
         function kill() {
+
+            // remove event listeners
             container.removeEventListener('mousemove', events, false);
@@ -242,2 +277,3 @@ container.removeEventListener('mouseenter', events, false);
 
+            // remove dom nodes
             if (data.zoomLens && data.zoomedImg) {
@@ -244,0 +280,0 @@ container.removeChild(data.zoomLens.element);

package.json

 {
   "name": "js-image-zoom",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "main": "js-image-zoom.js",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -52,13 +52,10 @@ # js-image-zoom
 
-
-
-
 ## Arguments
 
-- **container** (Object) - DOM element, which contains an source image
+- **container** (Object) - DOM element, which contains a source image
 - **options** (Object) - js-image-zoom options
-     * **width** (number) - width of the source image(required)
-     * **height** (number) - height of the source image(optional).
-     * **zoomWidth** (number) - width of the zoomed image. Zoomed image height equals source image height(optional if scale param is provided)
-     * **img** (string) - url of the source image. Provided if container does not contain img element as a tag(optional)
+     * **width** (number) - width of the source image (optional)
+     * **height** (number) - height of the source image (optional).
+     * **zoomWidth** (number) - width of the zoomed image. Zoomed image height equals source image height (optional)
+     * **img** (string) - url of the source image. Provided if container does not contain img element as a tag (optional)
      * **scale** (number) - zoom scale. if not provided, scale is calculated as natural image size / image size, provided in params (optional if zoomWidth param is provided)
@@ -68,4 +65,3 @@ * **offset** (object) - {vertical: number, horizontal: number}. Zoomed image offset (optional)
      * **zoomStyle** (string) - custom style applied to the zoomed image (i.e. 'opacity: 0.1;background-color: white;')
-     * **zoomPosition** (string) - position of zoomed image. It can be:  'top', 'left', 'bottom' or the default 'right'. (Ignored if `zoomDefaultPosition` is false)
-     * **zoomDefaultPosition** (boolean) Disable the default position styles in zoomedImage if `false`. (default: true)
+     * **zoomPosition** (string) - position of zoomed image. It can be:  `top`, `left`, `bottom`, `original` or the default `right`.
      * **zoomLensStyle** (string) custom style applied to to zoom lents (i.e. 'opacity: 0.1;background-color: white;')
@@ -72,0 +68,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

18490

increased by6.09%

Lines of code

309

increased by9.96%

Worsened metrics

Number of lines in readme file

77

decreased by-4.94%

No dependency changes