js-image-zoom - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

js-image-zoom.js

@@ -11,14 +11,17 @@ (function (root, factory) {
      * @param {Object} options js-image-zoom options (required)
-     *          @param {number} width Image width (required)
-     *          @param {number} height Image height (optional)
-     *          @param {number} zoomWidth  Zoomed image width optional if scale param is provided
-     *          @param {string} img Url of image to zoom. If provided container children is ignored (optional)
-     *          @param {number} scale Zoom scale. If provided zoomWidth param is ignored (optional if zoomWidth param is provided)
-     *          @param {object} offset {vertical, horizontal} offset in pixels between original image and zoomed image (optional)
-     *          @param {string} zoomStyle custom style applied to the zoomed image (i.e. 'opacity: 0.1;background-color: white;')
-     *          @param {string} zoomLensStyle custom style applied to to zoom lents (i.e. 'opacity: 0.1;background-color: white;')
+     * **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)
+     * **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)
+     * **zoomContainer** (node) - DOM node reference where zoomedImage will be appended to (default to the container element of image)
+     * **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)
+     * **zoomLensStyle** (string) custom style applied to to zoom lents (i.e. 'opacity: 0.1;background-color: white;')
      */
     return function ImageZoom(container, opts) {
         "use strict";
-        var options = JSON.parse(JSON.stringify(opts));
+        var options = opts;
         if (!container) {
@@ -56,3 +59,9 @@ return;
         var offset;
-        data.zoomedImgOffset = options.offset || {vertical: 0, horizontal: 0};
+        data.zoomedImgOffset = {
+            vertical: options.offset && options.offset.vertical ? options.offset.vertical : 0,
+            horizontal: options.offset && options.offset.horizontal ? options.offset.horizontal : 0
+        };
+        data.zoomPosition = options.zoomPosition || 'right';
+        data.zoomContainer = (options.zoomContainer) ? options.zoomContainer : container;
+        data.zoomDefaultPosition = (options.zoomDefaultPosition) ? options.zoomDefaultPosition : true;
 
@@ -120,7 +129,8 @@ function getOffset(el) {
             data.zoomedImg.element.style.backgroundSize = data.sourceImg.naturalWidth + 'px ' + data.sourceImg.naturalHeight + 'px';
+
             if (options.zoomStyle) {
-                data.zoomedImg.element.style.cssText +=  options.zoomStyle;
+                data.zoomedImg.element.style.cssText += options.zoomStyle;
             }
             if (options.zoomLensStyle) {
-                data.zoomLens.element.style.cssText +=  options.zoomLensStyle;
+                data.zoomLens.element.style.cssText += options.zoomLensStyle;
             } else {
@@ -130,5 +140,7 @@ data.zoomLens.element.style.background = 'white';
             }
+
             scaleX = data.sourceImg.naturalWidth / options.width;
             scaleY = data.sourceImg.naturalHeight / options.height;
             offset = getOffset(data.sourceImg.element);
+
             if (options.scale) {
@@ -141,2 +153,3 @@ data.zoomLens.width = options.width / (data.sourceImg.naturalWidth / (options.width * options.scale));
             }
+
             data.zoomLens.element.style.position = 'absolute';
@@ -156,3 +169,2 @@ data.zoomLens.element.style.width = data.zoomLens.width + 'px';
             }
-            data.sourceImg.element.onload = onSourceImgLoad;
             options = options || {};
@@ -165,10 +177,43 @@ container.style.position = 'relative';
             data.zoomLens.element.style.display = 'none';
-            data.zoomedImg.element = container.appendChild(div);
+            data.zoomLens.element.classList.add('js-image-zoom__zoomed-area');
 
-            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 = data.zoomContainer.appendChild(div);
+            data.zoomedImg.element.classList.add('js-image-zoom__zoomed-image');
+            data.zoomedImg.element.style.backgroundImage = "url('" + data.sourceImg.element.src + "')";
             data.zoomedImg.element.style.backgroundRepeat = 'no-repeat';
             data.zoomedImg.element.style.display = 'none';
+
+            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;
+
+                    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;
+
+                    // 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;
+                }
+            }
+
             container.addEventListener('mousemove', events, false);
@@ -180,2 +225,3 @@ container.addEventListener('mouseenter', events, false);
             window.addEventListener('scroll', events, false);
+
             return data;
@@ -191,9 +237,15 @@ }
             window.removeEventListener('scroll', events, false);
+
             if (data.zoomLens && data.zoomedImg) {
                 container.removeChild(data.zoomLens.element);
-                container.removeChild(data.zoomedImg.element);
+                data.zoomContainer.removeChild(data.zoomedImg.element);
             }
+
             if (options.img) {
                 container.removeChild(data.sourceImg.element);
+            } else {
+                data.sourceImg.element.style.width = '';
+                data.sourceImg.element.style.height = '';
             }
+
             return data;
@@ -203,11 +255,15 @@ }
         var events = {
-            handleEvent: function(event) {
-                switch(event.type) {
-                    case 'mousemove': return this.handleMouseMove(event);
-                    case 'mouseenter': return this.handleMouseEnter(event);
-                    case 'mouseleave': return this.handleMouseLeave(event);
-                    case 'scroll': return this.handleScroll(event);
+            handleEvent: function (event) {
+                switch (event.type) {
+                    case 'mousemove':
+                        return this.handleMouseMove(event);
+                    case 'mouseenter':
+                        return this.handleMouseEnter(event);
+                    case 'mouseleave':
+                        return this.handleMouseLeave(event);
+                    case 'scroll':
+                        return this.handleScroll(event);
                 }
             },
-            handleMouseMove: function(event) {
+            handleMouseMove: function (event) {
                 var offsetX;
@@ -223,3 +279,3 @@ var offsetY;
                     backgroundRight = offsetY * scaleY;
-                    backgroundPosition = '-' + backgroundTop + 'px ' +  '-' + backgroundRight + 'px';
+                    backgroundPosition = '-' + backgroundTop + 'px ' + '-' + backgroundRight + 'px';
                     data.zoomedImg.element.style.backgroundPosition = backgroundPosition;
@@ -230,25 +286,33 @@ data.zoomLens.element.style.cssText += 'top:' + offsetY + 'px;' + 'left:' + offsetX + 'px;display: block;';
             },
-            handleMouseEnter: function() {
-                data.zoomedImg.element.style.display  = 'block';
+            handleMouseEnter: function () {
+                data.zoomedImg.element.style.display = 'block';
                 data.zoomLens.element.style.display = 'block';
 
             },
-            handleMouseLeave: function() {
-                data.zoomedImg.element.style.display  = 'none';
+            handleMouseLeave: function () {
+                data.zoomedImg.element.style.display = 'none';
                 data.zoomLens.element.style.display = 'none';
             },
-            handleScroll: function() {
+            handleScroll: function () {
                 offset = getOffset(data.sourceImg.element);
             }
         };
+
+        // Setup/Initialize library
         setup();
 
+        if (data.sourceImg.element.complete) {
+            onSourceImgLoad();
+        } else {
+            data.sourceImg.element.onload = onSourceImgLoad;
+        }
+
         return {
-            setup: function() {
+            setup: function () {
                 setup();
             },
-            kill: function() {
+            kill: function () {
                 kill();
             },
-            _getInstanceInfo: function() {
+            _getInstanceInfo: function () {
                 return {
@@ -255,0 +319,0 @@ setup: setup,

package.json

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

README.md

@@ -33,3 +33,3 @@ # js-image-zoom
     <div id="img-container" style="width: 400px">
-        <img src="https://static.franks-travelbox.com/e/7/4/9/e749959ea9e2864e304a5024754efbeaa6e71b59/allerlei-leckereien-und-der-exklusive-rathausmarkt-gluehwein-laden-zum-schauen-shoppen-und-schlemmen-am-weihnachtsmarkt-vor-dem-hamburger-rathaus-ein-deutschland.jpg" />
+        <img src="https://github.com/malaman/js-image-zoom/blob/master/example/1.jpg" />
     <div>
@@ -60,10 +60,13 @@ <script>
 - **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)
-    * **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)
-    * **zoomStyle** (string) - custom style applied to the zoomed image (i.e. 'opacity: 0.1;background-color: white;')
-    * **zoomLensStyle** (string) custom style applied to to zoom lents (i.e. 'opacity: 0.1;background-color: white;')
+     * **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)
+     * **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)
+     * **zoomContainer** (node) - DOM node reference where zoomedImage will be appended to (default to the container element of image)
+     * **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)
+     * **zoomLensStyle** (string) custom style applied to to zoom lents (i.e. 'opacity: 0.1;background-color: white;')
 
@@ -79,2 +82,2 @@ ## For react users
 - [ ] extend testing coverage
-- [ ] add aditioinal examples
+- [ ] add additional examples

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

17429

increased by24.97%

Lines of code

281

increased by21.12%

Number of lines in readme file

81

increased by3.85%

No dependency changes