js-image-zoom - npm Package Compare versions

Comparing version 0.0.2 to 0.1.0

js-image-zoom.js

@@ -15,2 +15,4 @@ (function (root, factory) {
      *          @param {string} img Url of image to zoom. If provided container children is ignored
+     *          @param {number} scale Zoom scale. If provided zoomWidth param is ignored
+     *          @param {object} offset {vertical, horizontal} offset in pixels between original image and zoomed image
      */
@@ -22,5 +24,26 @@ return function ImageZoom(container, options) {
         }
-        var image;
-        var originalImgWidth;
-        var originalImgHeight;
+        var data = {
+            sourceImg: {
+                element: null,
+                width: 0,
+                height: 0,
+                naturalWidth: 0,
+                naturalHeight: 0
+            },
+            zoomedImgOffset: {
+                vertical: 0,
+                horizontal: 0
+            },
+            zoomedImg: {
+                element: null,
+                width: 0,
+                height: 0
+            },
+            zoomLens: {
+                element: null,
+                width: 0,
+                height: 0
+            }
+        };
+
         var div = document.createElement('div');
@@ -33,4 +56,3 @@ var lensDiv = document.createElement('div');
         var offset;
-        var zoomLensWidth;
-        var zoomLensHeight;
+        data.zoomedImgOffset = options.offset || {vertical: 0, horizontal: 0};
 
@@ -69,3 +91,3 @@ function getOffset(el) {
         function zoomLensLeft(left) {
-            var leftMin = zoomLensWidth / 2;
+            var leftMin = data.zoomLens.width / 2;
             return getPosition(left, leftMin, leftLimit(leftMin));
@@ -75,3 +97,3 @@ }
         function zoomLensTop(top) {
-            var topMin = zoomLensHeight / 2;
+            var topMin = data.zoomLens.height / 2;
             return getPosition(top, topMin, topLimit(topMin));
@@ -84,41 +106,58 @@ }
                 img.src = options.img;
-                image = container.appendChild(img);
+                data.sourceImg.element = container.appendChild(img);
             } else {
-                image = container.children[0];
+                data.sourceImg.element = container.children[0];
             }
             options = options || {};
             container.style.position = 'absolute';
-            image.style.width = options.width + 'px' || 'auto';
-            image.style.height = options.height + 'px' || 'auto';
-            zoomLens = container.appendChild(lensDiv);
-            zoomLens.style.display = 'none';
-            zoomDiv = container.appendChild(div);
-            zoomDiv.style.width = options.zoomWidth + 'px';
-            zoomDiv.style.height = image.style.height;
-            zoomDiv.style.display = 'inline-block';
-            zoomDiv.style.backgroundImage = 'url(' + image.src + ')';
-            zoomDiv.style.backgroundRepeat = 'no-repeat';
-            zoomDiv.style.display = 'none';
+            data.sourceImg.element.style.width = options.width + 'px' || 'auto';
+            data.sourceImg.element.style.height = options.height + 'px' || 'auto';
 
-            image.onload = function () {
-                originalImgWidth = image.naturalWidth;
-                originalImgHeight = image.naturalHeight;
-                zoomDiv.style.backgroundSize = originalImgWidth + 'px ' + originalImgHeight + 'px';
-                scaleX = originalImgWidth / options.width;
-                scaleY = originalImgHeight / options.height;
-                offset = getOffset(image);
-                zoomLensWidth = options.zoomWidth / scaleX;
-                zoomLensHeight = options.height / scaleY;
-                zoomLens.style.width = zoomLensWidth + 'px';
-                zoomLens.style.height = zoomLensHeight + 'px';
-                zoomLens.style.position = 'absolute';
-                zoomLens.style.background = 'white';
-                zoomLens.style.opacity = 0.4;
-                zoomLens.pointerEvents = 'none';
+            data.zoomLens.element = container.appendChild(lensDiv);
+            data.zoomLens.element.style.display = 'none';
+            data.zoomedImg.element = container.appendChild(div);
+            if (options.scale) {
+                data.zoomedImg.element.style.width = options.width * options.scale + 'px';
+                data.zoomedImg.element.style.height = options.height * options.scale + 'px';
+            } else {
+                data.zoomedImg.element.style.width = options.zoomWidth + 'px';
+                data.zoomedImg.element.style.height = data.sourceImg.element.style.height;
+            }
+            data.zoomedImg.element.style.position = 'absolute';
+            data.zoomedImg.element.style.top = data.zoomedImgOffset.vertical + 'px';
+            data.zoomedImg.element.style.left = options.width + data.zoomedImgOffset.horizontal + 'px';
+            data.zoomedImg.element.style.backgroundImage = 'url(' + data.sourceImg.element.src + ')';
+            data.zoomedImg.element.style.backgroundRepeat = 'no-repeat';
+            data.zoomedImg.element.style.display = 'none';
 
+
+            data.sourceImg.element.onload = function () {
+                data.sourceImg.naturalWidth = data.sourceImg.element.naturalWidth;
+                data.sourceImg.naturalHeight = data.sourceImg.element.naturalHeight;
+                data.zoomedImg.element.style.backgroundSize = data.sourceImg.naturalWidth + 'px ' + data.sourceImg.naturalHeight + 'px';
+                scaleX = data.sourceImg.naturalWidth / options.width;
+                scaleY = data.sourceImg.naturalHeight / options.height;
+                offset = getOffset(data.sourceImg.element);
+
+                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 {
+                    data.zoomLens.width = options.zoomWidth / scaleX;
+                    data.zoomLens.height = options.height / scaleY;
+                }
+                data.zoomLens.element.style.width = data.zoomLens.width + 'px';
+                data.zoomLens.element.style.height = data.zoomLens.height + 'px';
+                data.zoomLens.element.style.position = 'absolute';
+                data.zoomLens.element.style.background = 'white';
+                data.zoomLens.element.style.opacity = 0.4;
+                data.zoomLens.element.pointerEvents = 'none';
+
             };
             container.addEventListener('mousemove', events, false);
             container.addEventListener('mouseenter', events, false);
-            zoomLens.addEventListener('mouseleave', events, false);
-            window.addEventListener('scroll', events, false)
+            container.addEventListener('mouseleave', events, false);
+            data.zoomLens.element.addEventListener('mouseleave', events, false);
+            window.addEventListener('scroll', events, false);
+            return data;
         }
@@ -147,17 +186,20 @@
                     backgroundPosition = '-' + backgroundTop + 'px ' +  '-' + backgroundRight + 'px';
-                    zoomDiv.style.backgroundPosition = backgroundPosition;
-                    zoomLens.style.top = offsetY + 'px';
-                    zoomLens.style.left = offsetX + 'px';
+                    data.zoomedImg.element.style.backgroundPosition = backgroundPosition;
+                    data.zoomLens.element.style.cssText = data.zoomLens.element.style.cssText + 'top:' + offsetY + 'px;' + 'left:' + offsetX + 'px;';
+
                 }
             },
             handleMouseEnter: function() {
-                zoomDiv.style.display  = 'inline-block';
-                zoomLens.style.display = 'block';
+                data.zoomedImg.element.style.display  = 'block';
+                data.zoomLens.element.style.display = 'block';
+
             },
             handleMouseLeave: function() {
-                zoomDiv.style.display  = 'none';
-                zoomLens.style.display = 'none';
+                data.zoomedImg.element.style.display  = 'none';
+                data.zoomLens.element.style.display = 'none';
+
+
             },
             handleScroll: function() {
-                offset = getOffset(image);
+                offset = getOffset(data.sourceImg.element);
             }
@@ -174,10 +216,18 @@ };
                 container.removeEventListener('mouseenter', events, false);
-                zoomLens.removeEventListener('mouseleave', events, false);
+                container.removeEventListener('mouseleave', events, false);
+                data.zoomLens.element.removeEventListener('mouseleave', events, false);
+
+                data.zoomLens.element.removeEventListener('mouseleave', events, false);
                 if (zoomLens && zoomDiv) {
-                    container.removeChild(zoomLens);
-                    container.removeChild(zoomDiv);
+                    container.removeChild(data.zoomLens.element);
+                    container.removeChild(data.zoomedImg.element);
                 }
                 if (options.img) {
-                    container.removeChild(image);
+                    container.removeChild(data.sourceImg.element);
                 }
+            },
+            _getPrivateFunctions: function() {
+                return {
+                    setup: setup
+                }
             }
@@ -184,0 +234,0 @@ }

package.json

 {
   "name": "js-image-zoom",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "main": "js-image-zoom.js",
@@ -14,3 +14,12 @@ "repository": {
     "node": ">=0.8.0"
-  }
+  },
+  "description": "",
+  "bugs": {
+    "url": "https://github.com/malaman/js-image-zoom/issues"
+  },
+  "homepage": "https://github.com/malaman/js-image-zoom#readme",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Andrii Malaman <[e-mail]>"
 }

README.md

@@ -1,11 +0,25 @@
-js-image-zoom
-==========
+#js-image-zoom
 
-Overview
----------
+
+##Overview
+
 Pure JavaScript utility for desktop browsers for image zoom on mouse hover. No external dependencies required.
 
-Demo
-------
-[Demo](http://malaman.github.io/js-image-zoom/)
+##Demo
 
+[Demo](http://malaman.github.io/js-image-zoom/example)
+
+##Arguments
+
+- **container** (Object) - DOM element, which contains an source image
+- **options** (Object) - js-image-zoom options
+    * **width** (number) - width of the source image(required)
+    * **height** (number) - height of the source image(required)
+    * **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)    
+    * **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)
+    * **offset** (object) - {vertical: number, horizontal: number}. Zoomed image offset (optional)
+
+##RouteMap
+
+- [ ] extend testing coverage

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

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

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

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

10896

increased by48.43%

Lines of code

207

increased by24.7%

Number of low maintenance alerts

1

decreased by-66.67%

Number of lines in readme file

26

increased by116.67%

Worsened metrics

Number of package files

3

decreased by-25%

No dependency changes