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 !