Image zoom bugs solved

client/core/src/directives/specs/zoom-image.spec.js

@@ -1,5 +1,4 @@
 describe('Directive zoomImage', () => {
-    let idContainer = 'zoomImage';
     let compile;
     let scope;
     let srcDefault = 'http://default.img.jpg/';
@@ -16,7 +15,6 @@ describe('Directive zoomImage', () => {
     }));
 
     afterEach(() => {
-        findContainer = document.getElementById(idContainer);
         if (findContainer) {
             findContainer.parentNode.removeChild(findContainer);
             findContainer = undefined;
@@ -33,7 +31,8 @@ describe('Directive zoomImage', () => {
     it('should create zoom container when click into image', () => {
         let image = getCompiledImage(`<img src="${srcDefault}" zoom-image>`);
         image[0].click();
-        findContainer = document.getElementById(idContainer);
+
+        findContainer = document.querySelector('.vn-zoom-image');
 
         expect(findContainer).not.toBeNull();
     });
@@ -42,10 +41,10 @@ describe('Directive zoomImage', () => {
         let image = getCompiledImage(`<img src="${srcDefault}" zoom-image>`);
         image[0].click();
 
-        let findOutsideImage = document.querySelector('.zoomImage-background');
-        findOutsideImage.click();
+        findContainer = document.querySelector('.vn-zoom-image');
+        findContainer.click();
 
-        findContainer = document.getElementById(idContainer);
+        findContainer = document.querySelector('.vn-zoom-image');
 
         expect(findContainer).toBeNull();
     });
@@ -53,18 +52,20 @@ describe('Directive zoomImage', () => {
     it('should create new image, into zoom container, with src as original image src', () => {
         let image = getCompiledImage(`<img src="${srcDefault}" zoom-image>`);
         image[0].click();
-        findContainer = document.getElementById(idContainer);
-        let findNewImage = findContainer.querySelector('.zoomImage-background');
+        findContainer = document.querySelector('.vn-zoom-image');
 
-        expect(findNewImage.style.backgroundImage).toEqual(`url("${srcDefault}")`);
+        let zoomedImg = findContainer.querySelector('img');
+
+        expect(zoomedImg.src).toEqual(srcDefault);
     });
 
     it('should create new image, into zoom container, with src likes zoomImage value', () => {
         let image = getCompiledImage(`<img src="${srcDefault}" zoom-image="${srcZoom}">`);
         image[0].click();
-        findContainer = document.getElementById(idContainer);
-        let findNewImage = findContainer.querySelector('.zoomImage-background');
+        findContainer = document.querySelector('.vn-zoom-image');
 
-        expect(findNewImage.style.backgroundImage).toEqual(`url("${srcZoom}")`);
+        let zoomedImg = findContainer.querySelector('img');
+
+        expect(zoomedImg.src).toEqual(srcZoom);
     });
 });

client/core/src/directives/zoom-image.js

@@ -1,66 +1,56 @@
 import ngModule from '../module';
 
 export function directive($timeout) {
-    let idContainer = 'zoomImage';
     let container;
-    let background;
+    let keyDownHandler;
 
     function createContainers(src) {
-        if (document.getElementById(idContainer)) {
-            destroyContainers();
-        }
-        container = document.createElement('div');
-        container.id = idContainer;
+        destroyContainers();
 
-        background = document.createElement('div');
-        background.className = 'zoomImage-background';
-        background.style.backgroundImage = `url(${src})`;
-        container.appendChild(background);
+        container = document.createElement('div');
+        container.className = 'vn-zoom-image';
+        container.addEventListener('click', destroyContainers);
+
+        let wrapper = document.createElement('div');
+        container.appendChild(wrapper);
+
+        let background = document.createElement('img');
+        background.src = src;
+        wrapper.appendChild(background);
 
         document.body.appendChild(container);
+        keyDownHandler = e => onKeyDown(e);
+        document.addEventListener('keydown', keyDownHandler);
     }
 
-    function addListeners() {
-        background.addEventListener('click', destroyContainers);
-        document.addEventListener('keydown', e => keyDownHandler(e));
-    }
-
-    function removeListeners() {
-        if (container) {
-            background.removeEventListener('click', destroyContainers);
-            document.removeEventListener('keydown', e => keyDownHandler(e));
-        }
-    }
-
-    function keyDownHandler(event) {
+    function onKeyDown(event) {
         if (event.keyCode === 27) {
             destroyContainers();
         }
     }
 
     function destroyContainers() {
-        if (document.getElementById(idContainer)) {
-            removeListeners();
-            container.parentNode.removeChild(container);
-        }
+        if (!container) return;
 
+        container.removeEventListener('click', destroyContainers);
+        container.parentNode.removeChild(container);
         container = undefined;
-        background = undefined;
+
+        document.removeEventListener('keydown', keyDownHandler);
+        keyDownHandler = undefined;
     }
 
     return {
         restrict: 'A',
-        priority: 9999,
         link: function($scope, $element, $attrs) {
             $element.on('click', function(event) {
+                event.preventDefault();
+
                 let src = $attrs.zoomImage || $attrs.src;
                 if (src) {
                     createContainers(src);
-                    addListeners();
                 } else
                     throw new Error('No image source detected');
-
-                event.preventDefault();
             });
         }
     };

client/core/src/styles/index.js

@@ -1,5 +1,5 @@
 import './mdl-override.css';
 import './mdi-override.css';
-import './zoom-image.css';
+import './zoom-image.scss';
 import './fontello-head.css';
 import './fontello-icons.css';

client/core/src/styles/zoom-image.css

@@ -1,19 +0,0 @@
-img[zoom-image]{
-    cursor: zoom-in;
-}
-
-div#zoomImage, div#zoomImage .zoomImage-background {
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    top: 0;
-    z-index: 11;
-}
-
-div#zoomImage .zoomImage-background{
-    background-color: rgba(1, 1, 1, 0.6);
-    cursor: zoom-out;
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: auto 98%;
-}

client/core/src/styles/zoom-image.scss

@@ -0,0 +1,29 @@
+img[zoom-image]{
+    cursor: zoom-in;
+}
+
+.vn-zoom-image {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    z-index: 11;
+    background-color: rgba(1, 1, 1, 0.6);
+
+    & > div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: inherit;
+        height: inherit;
+        box-sizing: border-box;
+        padding: 1em;
+
+        & > img {
+            cursor: zoom-out;
+            max-height: 100%;
+            max-width: 100%;
+            border-radius: .2em;
+        }
+    }
+}