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

import ngModule from '../module';

export function directive($timeout) {
    let idContainer = 'zoomImage';
    let container;
    let background;

    function createContainers(src) {
        if (document.getElementById(idContainer)) {
            destroyContainers();
        }
        container = document.createElement('div');
        container.id = idContainer;

        background = document.createElement('div');
        background.className = 'zoomImage-background';
        background.style.backgroundImage = `url(${src})`;
        container.appendChild(background);

        document.body.appendChild(container);
    }

    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) {
        if (event.keyCode === 27) {
            destroyContainers();
        }
    }

    function destroyContainers() {
        if (document.getElementById(idContainer)) {
            removeListeners();
            container.parentNode.removeChild(container);
        }

        container = undefined;
        background = undefined;
    }

    return {
        restrict: 'A',
        priority: 9999,
        link: function($scope, $element, $attrs) {
            $element.on('click', function(event) {
                let src = $attrs.zoomImage || $attrs.src;
                if (src) {
                    createContainers(src);
                    addListeners();
                } else
                    throw new Error('No image source detected');

                event.preventDefault();
            });
        }
    };
}
directive.$inject = ['$timeout'];

ngModule.directive('zoomImage', directive);