Implement event delegation!

[artknight]

Issue: dynamically added elements DO NOT get picked up for zooming Solution: Implement event delegation!

I ended up making changes to the zooming.js lib ( which in usually a bad idea ) but I am hoping by posting a solution here that it will get implemented :)

1st change: Added event delegation to the listen method

createClass(Zooming, [{
    key: 'listen',
    value: function listen$$1(el='.img-preview') {
        let selector = el,
            _handler = this.handler;

        document.querySelector('body').addEventListener('click', function(event){
            for (let target=event.target; target && target!=this; target=target.parentNode) {
                //loop parent nodes from the target to the delegation node
                if (target.matches(selector)){
                    _handler.click(target, event);
                    break;
                }
            }
        }, { passive:false });

        if (this.options.preloadImage) {
            loadImage(getOriginalSource(el));
        }

        return this;
    }

    /**
        * Update options or return current options if no argument is provided.
        * @param  {Object} options An Object that contains this.options.
        * @return {this|this.options}
        */

}, {

2nd change: Updated the click method to accept two arguments ( target & event )

click: function click(target,e) {
    e.preventDefault();

    if (isPressingMetaKey(e)) {
        return window.open(this.target.srcOriginal || target.src, '_blank');
    } else {
        if (this.shown) {
            if (this.released) {
                this.close();
            } else {
                this.release();
            }
        } else {
            this.open(target);
        }
    }
},

3rd change: Added CSS to handle relevant elms

.img-preview {
    cursor: zoom-in;
}

Here you go, now all dynamically added elms get picked up !