From d7e4796722a26582ca28c59f4fc58f2c355548d3 Mon Sep 17 00:00:00 2001
From: Alexander Bilz <mail@alexbilz.com>
Date: Tue, 15 Sep 2020 08:25:36 +0000
Subject: [PATCH] 🧹 Code reformat and house keeping
---
assets/js/medium-zoom.js | 842 ++++++++++++++++++++++++++++---------------------------
1 files changed, 425 insertions(+), 417 deletions(-)
diff --git a/assets/js/medium-zoom.js b/assets/js/medium-zoom.js
index c1c0238..a190f27 100644
--- a/assets/js/medium-zoom.js
+++ b/assets/js/medium-zoom.js
@@ -1,450 +1,458 @@
/*! 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() {
+(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];
- }
+ 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;
+ return target;
};
var isSupported = function isSupported(node) {
- return node.tagName === "IMG";
+ return node.tagName === "IMG";
};
var isNodeList = function isNodeList(selector) {
- return NodeList.prototype.isPrototypeOf(selector);
+ return NodeList.prototype.isPrototypeOf(selector);
};
var isNode = function isNode(selector) {
- return selector && selector.nodeType === 1;
+ return selector && selector.nodeType === 1;
};
var isSvg = function isSvg(image) {
- var source = image.currentSrc || image.src;
- return source.substr(-4).toLowerCase() === ".svg";
+ 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);
+ 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");
}
- 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 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 _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 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
+ var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+ var Promise = window.Promise || function Promise(fn) {
+ function noop() {
}
- }));
- });
- 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;
- }
+
+ fn(noop, noop);
};
- 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
+ var _handleClick = function _handleClick(event) {
+ var target = event.target;
+ if (target === overlay) {
+ close();
+ return;
}
- }));
- 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();
+ if (images.indexOf(target) === -1) {
+ return;
+ }
+ toggle({
+ target: target
});
- } 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);
+ };
+ var _handleScroll = function _handleScroll() {
+ if (isAnimating || !active.original) {
+ return;
}
- document.body.removeChild(overlay);
- active.zoomed.classList.remove("medium-zoom-image--opened");
- if (active.template) {
- document.body.removeChild(active.template);
+ var currentScroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+ if (Math.abs(scrollTop - currentScroll) > zoomOptions.scrollOffset) {
+ setTimeout(close, 150);
}
- 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
+ };
+ var _handleKeyUp = function _handleKeyUp(event) {
+ var key = event.key || event.keyCode;
+ if (key === "Escape" || key === "Esc" || key === 27) {
+ close();
}
- }));
- 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();
+ };
+ 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);
}
- 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;
+ 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'));
\ No newline at end of file
+mediumZoom(document.querySelectorAll('div.post-content img'));
--
Gitblit v1.10.0