verdnatura/salix
verdnatura
/
salix
3
5
Fork 2
Code Issues Pull Requests 70 Releases Wiki Activity

refactor zoomImage

This commit is contained in:
Daniel Herrero 2018-02-14 09:21:43 +01:00
parent fd0d5b70be
commit 087b1d9a61
2 changed files with 5 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
client/core/src/directives/zoom-image.js
View File

@ -4,7 +4,6 @@ export function directive($timeout) {
let idContainer = 'zoomImage'; let idContainer = 'zoomImage';
let container; let container;
let background; let background;
let image;
function createContainers(src) { function createContainers(src) {
if (document.getElementById(idContainer)) { if (document.getElementById(idContainer)) {
@ -15,31 +14,21 @@ export function directive($timeout) {
background = document.createElement('div'); background = document.createElement('div');
background.className = 'zoomImage-background'; background.className = 'zoomImage-background';
background.style.backgroundImage = `url(${src})`;
container.appendChild(background); container.appendChild(background);
image = document.createElement('img');
image.src = src;
container.appendChild(image);
document.body.appendChild(container); document.body.appendChild(container);
$timeout(() => {
resizeImage();
container.className = 'open';
}, 250);
} }
function addListeners() { function addListeners() {
background.addEventListener('click', destroyContainers); background.addEventListener('click', destroyContainers);
document.addEventListener('keydown', e => keyDownHandler(e)); document.addEventListener('keydown', e => keyDownHandler(e));
window.addEventListener('resize', resizeImage);
} }
function removeListeners() { function removeListeners() {
if (container) { if (container) {
background.removeEventListener('click', destroyContainers); background.removeEventListener('click', destroyContainers);
document.removeEventListener('keydown', e => keyDownHandler(e)); document.removeEventListener('keydown', e => keyDownHandler(e));
window.removeEventListener('resize', resizeImage);
} }
} }
@ -60,13 +49,6 @@ export function directive($timeout) {
image = 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 { return {
restrict: 'A', restrict: 'A',
priority: 9999, priority: 9999,

29
client/core/src/styles/zoom-image.css
View File

@ -9,32 +9,11 @@ div#zoomImage, div#zoomImage .zoomImage-background {
top: 0; top: 0;
z-index: 11; z-index: 11;
} }
div#zoomImage{
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
div#zoomImage .zoomImage-background{ div#zoomImage .zoomImage-background{
background: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
cursor: zoom-out; cursor: zoom-out;
} background-repeat: no-repeat;
div#zoomImage img{ background-position: center center;
z-index: 12; background-size: auto 98%;
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;
} }