/*!medium-zoom 1.0.5 | MIT License | https://github.com/francoischalifour/medium-zoom*/ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? (module.exports = factory()) : typeof define === 'function' && define.amd ? define(factory) : ((global = global || self), (global.mediumZoom = factory())); })(this, function () { 'use strict'; var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; var isSupported = function isSupported(node) { return node.tagName === 'IMG'; }; var isNodeList = function isNodeList(selector) { return NodeList.prototype.isPrototypeOf(selector); }; var isNode = function isNode(selector) { return selector && selector.nodeType === 1; }; var isSvg = function isSvg(image) { var source = image.currentSrc || image.src; return source.substr(-4).toLowerCase() === '.svg'; }; var getImagesFromSelector = function getImagesFromSelector(selector) { try { if (Array.isArray(selector)) { return selector.filter(isSupported); } if (isNodeList(selector)) { return [].slice.call(selector).filter(isSupported); } if (isNode(selector)) { return [selector].filter(isSupported); } if (typeof selector === 'string') { return [].slice.call(document.querySelectorAll(selector)).filter(isSupported); } return []; } catch (err) { throw new TypeError( 'The provided selector is invalid.\n' + 'Expects a CSS selector, a Node element, a NodeList or an array.\n' + 'See: https://github.com/francoischalifour/medium-zoom', ); } }; var createOverlay = function createOverlay() { var overlay = document.createElement('div'); overlay.classList.add('medium-zoom-overlay'); return overlay; }; var cloneTarget = function cloneTarget(template) { var _template$getBounding = template.getBoundingClientRect(), top = _template$getBounding.top, left = _template$getBounding.left, width = _template$getBounding.width, height = _template$getBounding.height; var clone = template.cloneNode(); var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0; clone.removeAttribute('id'); clone.style.position = 'absolute'; clone.style.top = top + scrollTop + 'px'; clone.style.left = left + scrollLeft + 'px'; clone.style.width = width + 'px'; clone.style.height = height + 'px'; clone.style.transform = ''; return clone; }; var createCustomEvent = function createCustomEvent(type, params) { var eventParams = _extends( { bubbles: false, cancelable: false, detail: undefined, }, params, ); if (typeof window.CustomEvent === 'function') { return new CustomEvent(type, eventParams); } var customEvent = document.createEvent('CustomEvent'); customEvent.initCustomEvent(type, eventParams.bubbles, eventParams.cancelable, eventParams.detail); return customEvent; }; var mediumZoom = function mediumZoom(selector) { var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var Promise = window.Promise || function Promise(fn) { function noop() {} fn(noop, noop); }; var _handleClick = function _handleClick(event) { var target = event.target; if (target === overlay) { close(); return; } if (images.indexOf(target) === -1) { return; } toggle({ target: target, }); }; var _handleScroll = function _handleScroll() { if (isAnimating || !active.original) { return; } var currentScroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; if (Math.abs(scrollTop - currentScroll) > zoomOptions.scrollOffset) { setTimeout(close, 150); } }; var _handleKeyUp = function _handleKeyUp(event) { var key = event.key || event.keyCode; if (key === 'Escape' || key === 'Esc' || key === 27) { close(); } }; var update = function update() { var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; var newOptions = options; if (options.container && options.container instanceof Object) { newOptions.container = _extends({}, zoomOptions.container, options.container); } if (options.template) { var template = isNode(options.template) ? options.template : document.querySelector(options.template); newOptions.template = template; } zoomOptions = _extends({}, zoomOptions, newOptions); images.forEach(function (image) { image.dispatchEvent( createCustomEvent('medium-zoom:update', { detail: { zoom: zoom, }, }), ); }); return zoom; }; var clone = function clone() { var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; return mediumZoom(_extends({}, zoomOptions, options)); }; var attach = function attach() { for (var _len = arguments.length, selectors = Array(_len), _key = 0; _key < _len; _key++) { selectors[_key] = arguments[_key]; } var newImages = selectors.reduce(function (imagesAccumulator, currentSelector) { return [].concat(imagesAccumulator, getImagesFromSelector(currentSelector)); }, []); newImages .filter(function (newImage) { return images.indexOf(newImage) === -1; }) .forEach(function (newImage) { images.push(newImage); newImage.classList.add('medium-zoom-image'); }); eventListeners.forEach(function (_ref) { var type = _ref.type, listener = _ref.listener, options = _ref.options; newImages.forEach(function (image) { image.addEventListener(type, listener, options); }); }); return zoom; }; var detach = function detach() { for (var _len2 = arguments.length, selectors = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { selectors[_key2] = arguments[_key2]; } if (active.zoomed) { close(); } var imagesToDetach = selectors.length > 0 ? selectors.reduce(function (imagesAccumulator, currentSelector) { return [].concat(imagesAccumulator, getImagesFromSelector(currentSelector)); }, []) : images; imagesToDetach.forEach(function (image) { image.classList.remove('medium-zoom-image'); image.dispatchEvent( createCustomEvent('medium-zoom:detach', { detail: { zoom: zoom, }, }), ); }); images = images.filter(function (image) { return imagesToDetach.indexOf(image) === -1; }); return zoom; }; var on = function on(type, listener) { var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; images.forEach(function (image) { image.addEventListener('medium-zoom:' + type, listener, options); }); eventListeners.push({ type: 'medium-zoom:' + type, listener: listener, options: options, }); return zoom; }; var off = function off(type, listener) { var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; images.forEach(function (image) { image.removeEventListener('medium-zoom:' + type, listener, options); }); eventListeners = eventListeners.filter(function (eventListener) { return !( eventListener.type === 'medium-zoom:' + type && eventListener.listener.toString() === listener.toString() ); }); return zoom; }; var open = function open() { var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, target = _ref2.target; var _animate = function _animate() { var container = { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight, left: 0, top: 0, right: 0, bottom: 0, }; var viewportWidth = void 0; var viewportHeight = void 0; if (zoomOptions.container) { if (zoomOptions.container instanceof Object) { container = _extends({}, container, zoomOptions.container); viewportWidth = container.width - container.left - container.right - zoomOptions.margin * 2; viewportHeight = container.height - container.top - container.bottom - zoomOptions.margin * 2; } else { var zoomContainer = isNode(zoomOptions.container) ? zoomOptions.container : document.querySelector(zoomOptions.container); var _zoomContainer$getBou = zoomContainer.getBoundingClientRect(), _width = _zoomContainer$getBou.width, _height = _zoomContainer$getBou.height, _left = _zoomContainer$getBou.left, _top = _zoomContainer$getBou.top; container = _extends({}, container, { width: _width, height: _height, left: _left, top: _top, }); } } viewportWidth = viewportWidth || container.width - zoomOptions.margin * 2; viewportHeight = viewportHeight || container.height - zoomOptions.margin * 2; var zoomTarget = active.zoomedHd || active.original; var naturalWidth = isSvg(zoomTarget) ? viewportWidth : zoomTarget.naturalWidth || viewportWidth; var naturalHeight = isSvg(zoomTarget) ? viewportHeight : zoomTarget.naturalHeight || viewportHeight; var _zoomTarget$getBoundi = zoomTarget.getBoundingClientRect(), top = _zoomTarget$getBoundi.top, left = _zoomTarget$getBoundi.left, width = _zoomTarget$getBoundi.width, height = _zoomTarget$getBoundi.height; var scaleX = Math.min(naturalWidth, viewportWidth) / width; var scaleY = Math.min(naturalHeight, viewportHeight) / height; var scale = Math.min(scaleX, scaleY); var translateX = (-left + (viewportWidth - width) / 2 + zoomOptions.margin + container.left) / scale; var translateY = (-top + (viewportHeight - height) / 2 + zoomOptions.margin + container.top) / scale; var transform = 'scale(' + scale + ') translate3d(' + translateX + 'px, ' + translateY + 'px, 0)'; active.zoomed.style.transform = transform; if (active.zoomedHd) { active.zoomedHd.style.transform = transform; } }; return new Promise(function (resolve) { if (target && images.indexOf(target) === -1) { resolve(zoom); return; } var _handleOpenEnd = function _handleOpenEnd() { isAnimating = false; active.zoomed.removeEventListener('transitionend', _handleOpenEnd); active.original.dispatchEvent( createCustomEvent('medium-zoom:opened', { detail: { zoom: zoom, }, }), ); resolve(zoom); }; if (active.zoomed) { resolve(zoom); return; } if (target) { active.original = target; } else if (images.length > 0) { var _images = images; active.original = _images[0]; } else { resolve(zoom); return; } active.original.dispatchEvent( createCustomEvent('medium-zoom:open', { detail: { zoom: zoom, }, }), ); scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; isAnimating = true; active.zoomed = cloneTarget(active.original); document.body.appendChild(overlay); if (zoomOptions.template) { var template = isNode(zoomOptions.template) ? zoomOptions.template : document.querySelector(zoomOptions.template); active.template = document.createElement('div'); active.template.appendChild(template.content.cloneNode(true)); document.body.appendChild(active.template); } document.body.appendChild(active.zoomed); window.requestAnimationFrame(function () { document.body.classList.add('medium-zoom--opened'); }); active.original.classList.add('medium-zoom-image--hidden'); active.zoomed.classList.add('medium-zoom-image--opened'); active.zoomed.addEventListener('click', close); active.zoomed.addEventListener('transitionend', _handleOpenEnd); if (active.original.getAttribute('data-zoom-src')) { active.zoomedHd = active.zoomed.cloneNode(); active.zoomedHd.removeAttribute('srcset'); active.zoomedHd.removeAttribute('sizes'); active.zoomedHd.src = active.zoomed.getAttribute('data-zoom-src'); active.zoomedHd.onerror = function () { clearInterval(getZoomTargetSize); console.warn('Unable to reach the zoom image target ' + active.zoomedHd.src); active.zoomedHd = null; _animate(); }; var getZoomTargetSize = setInterval(function () { if (active.zoomedHd.complete) { clearInterval(getZoomTargetSize); active.zoomedHd.classList.add('medium-zoom-image--opened'); active.zoomedHd.addEventListener('click', close); document.body.appendChild(active.zoomedHd); _animate(); } }, 10); } else if (active.original.hasAttribute('srcset')) { active.zoomedHd = active.zoomed.cloneNode(); active.zoomedHd.removeAttribute('sizes'); var loadEventListener = active.zoomedHd.addEventListener('load', function () { active.zoomedHd.removeEventListener('load', loadEventListener); active.zoomedHd.classList.add('medium-zoom-image--opened'); active.zoomedHd.addEventListener('click', close); document.body.appendChild(active.zoomedHd); _animate(); }); } else { _animate(); } }); }; var close = function close() { return new Promise(function (resolve) { if (isAnimating || !active.original) { resolve(zoom); return; } var _handleCloseEnd = function _handleCloseEnd() { active.original.classList.remove('medium-zoom-image--hidden'); document.body.removeChild(active.zoomed); if (active.zoomedHd) { document.body.removeChild(active.zoomedHd); } document.body.removeChild(overlay); active.zoomed.classList.remove('medium-zoom-image--opened'); if (active.template) { document.body.removeChild(active.template); } isAnimating = false; active.zoomed.removeEventListener('transitionend', _handleCloseEnd); active.original.dispatchEvent( createCustomEvent('medium-zoom:closed', { detail: { zoom: zoom, }, }), ); active.original = null; active.zoomed = null; active.zoomedHd = null; active.template = null; resolve(zoom); }; isAnimating = true; document.body.classList.remove('medium-zoom--opened'); active.zoomed.style.transform = ''; if (active.zoomedHd) { active.zoomedHd.style.transform = ''; } if (active.template) { active.template.style.transition = 'opacity 150ms'; active.template.style.opacity = 0; } active.original.dispatchEvent( createCustomEvent('medium-zoom:close', { detail: { zoom: zoom, }, }), ); active.zoomed.addEventListener('transitionend', _handleCloseEnd); }); }; var toggle = function toggle() { var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, target = _ref3.target; if (active.original) { return close(); } return open({ target: target, }); }; var getOptions = function getOptions() { return zoomOptions; }; var getImages = function getImages() { return images; }; var getZoomedImage = function getZoomedImage() { return active.original; }; var images = []; var eventListeners = []; var isAnimating = false; var scrollTop = 0; var zoomOptions = options; var active = { original: null, zoomed: null, zoomedHd: null, template: null, }; if (Object.prototype.toString.call(selector) === '[object Object]') { zoomOptions = selector; } else if (selector || typeof selector === 'string') { attach(selector); } zoomOptions = _extends( { margin: 0, scrollOffset: 40, container: null, template: null, }, zoomOptions, ); var overlay = createOverlay(); document.addEventListener('click', _handleClick); document.addEventListener('keyup', _handleKeyUp); document.addEventListener('scroll', _handleScroll); window.addEventListener('resize', close); var zoom = { open: open, close: close, toggle: toggle, update: update, clone: clone, attach: attach, detach: detach, on: on, off: off, getOptions: getOptions, getImages: getImages, getZoomedImage: getZoomedImage, }; return zoom; }; return mediumZoom; }); mediumZoom(document.querySelectorAll('div.post__content img'));