diff --git a/client/core/src/directives/specs/zoom-image.spec.js b/client/core/src/directives/specs/zoom-image.spec.js index 1ee7bbd79..85787bd4b 100644 --- a/client/core/src/directives/specs/zoom-image.spec.js +++ b/client/core/src/directives/specs/zoom-image.spec.js @@ -55,17 +55,17 @@ describe('Directive zoomImage', () => { let image = getCompiledImage(``); image[0].click(); findContainer = document.getElementById(idContainer); - let findNewImage = findContainer.querySelector('img'); + let findNewImage = findContainer.querySelector('.zoomImage-background'); - expect(findNewImage.src).toEqual(srcDefault); + expect(findNewImage.style.backgroundImage).toEqual(`url("${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('img'); + let findNewImage = findContainer.querySelector('.zoomImage-background'); - expect(findNewImage.src).toEqual(srcZoom); + expect(findNewImage.style.backgroundImage).toEqual(`url("${srcZoom}")`); }); }); diff --git a/client/core/src/directives/zoom-image.js b/client/core/src/directives/zoom-image.js index dc75eda40..0bae2ef8b 100644 --- a/client/core/src/directives/zoom-image.js +++ b/client/core/src/directives/zoom-image.js @@ -4,7 +4,6 @@ export function directive($timeout) { let idContainer = 'zoomImage'; let container; let background; - let image; function createContainers(src) { if (document.getElementById(idContainer)) { @@ -15,31 +14,21 @@ export function directive($timeout) { background = document.createElement('div'); background.className = 'zoomImage-background'; + background.style.backgroundImage = `url(${src})`; container.appendChild(background); - image = document.createElement('img'); - image.src = src; - container.appendChild(image); - document.body.appendChild(container); - - $timeout(() => { - resizeImage(); - container.className = 'open'; - }, 250); } function addListeners() { background.addEventListener('click', destroyContainers); document.addEventListener('keydown', e => keyDownHandler(e)); - window.addEventListener('resize', resizeImage); } function removeListeners() { if (container) { background.removeEventListener('click', destroyContainers); document.removeEventListener('keydown', e => keyDownHandler(e)); - window.removeEventListener('resize', resizeImage); } } @@ -57,14 +46,6 @@ export function directive($timeout) { container = undefined; background = undefined; - image = undefined; - } - - function resizeImage() { - if (image) { - image.style.marginLeft = `-${Math.floor(image.clientWidth / 2)}px`; - image.style.marginTop = `-${Math.floor(image.clientHeight / 2)}px`; - } } return { diff --git a/client/core/src/styles/zoom-image.css b/client/core/src/styles/zoom-image.css index f21db8d13..87130d918 100644 --- a/client/core/src/styles/zoom-image.css +++ b/client/core/src/styles/zoom-image.css @@ -9,32 +9,11 @@ div#zoomImage, div#zoomImage .zoomImage-background { top: 0; z-index: 11; } -div#zoomImage{ - opacity: 0; - transition: visibility 0s, opacity 0.5s linear; -} div#zoomImage .zoomImage-background{ - background: rgba(0, 0, 0, 0.7); + background-color: rgba(0, 0, 0, 0.7); cursor: zoom-out; -} -div#zoomImage img{ - z-index: 12; - position: fixed; - max-height: 98%; - max-width: 98%; - left: 50%; - top: 50%; - opacity: 0; - transition: visibility 0s, opacity 1s linear; -} - -div#zoomImage.open { - visibility: visible; - opacity: 1; -} - -div#zoomImage.open img{ - visibility: visible; - opacity: 1; + background-repeat: no-repeat; + background-position: center center; + background-size: auto 98%; } \ No newline at end of file diff --git a/client/modules.yml b/client/modules.yml index 0236ce1e3..95ce80525 100644 --- a/client/modules.yml +++ b/client/modules.yml @@ -1,8 +1,8 @@ -salix: [] auth: [] -core: [] client: [] -production: [] -route: [] -locator: [] +core: [] item: [] +locator: [] +production: [] +salix: [] +route: [] diff --git a/client/salix/src/components/main-menu/main-menu.html b/client/salix/src/components/main-menu/main-menu.html index 4bd1f950f..116aab0c9 100644 --- a/client/salix/src/components/main-menu/main-menu.html +++ b/client/salix/src/components/main-menu/main-menu.html @@ -1,14 +1,5 @@