From 98388dde85216a083b647cc5f740268370744869 Mon Sep 17 00:00:00 2001 From: Juan Date: Thu, 1 Mar 2018 19:35:32 +0100 Subject: [PATCH] Image zoom bugs solved --- .../src/directives/specs/zoom-image.spec.js | 25 +++++---- client/core/src/directives/zoom-image.js | 56 ++++++++----------- client/core/src/styles/index.js | 2 +- client/core/src/styles/zoom-image.css | 19 ------- client/core/src/styles/zoom-image.scss | 29 ++++++++++ 5 files changed, 66 insertions(+), 65 deletions(-) delete mode 100644 client/core/src/styles/zoom-image.css create mode 100644 client/core/src/styles/zoom-image.scss diff --git a/client/core/src/directives/specs/zoom-image.spec.js b/client/core/src/directives/specs/zoom-image.spec.js index 53640558c..1891f738a 100644 --- a/client/core/src/directives/specs/zoom-image.spec.js +++ b/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(``); 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(``); 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(``); 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(``); 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); }); }); diff --git a/client/core/src/directives/zoom-image.js b/client/core/src/directives/zoom-image.js index 0bae2ef8b..db7de27be 100644 --- a/client/core/src/directives/zoom-image.js +++ b/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(); }); } }; diff --git a/client/core/src/styles/index.js b/client/core/src/styles/index.js index a93f8a6d9..a8ed4b937 100644 --- a/client/core/src/styles/index.js +++ b/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'; diff --git a/client/core/src/styles/zoom-image.css b/client/core/src/styles/zoom-image.css deleted file mode 100644 index 896028531..000000000 --- a/client/core/src/styles/zoom-image.css +++ /dev/null @@ -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%; -} \ No newline at end of file diff --git a/client/core/src/styles/zoom-image.scss b/client/core/src/styles/zoom-image.scss new file mode 100644 index 000000000..cc0212006 --- /dev/null +++ b/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; + } + } +}