From 6fe4462e53ea300d3734301edba33cb1866fa777 Mon Sep 17 00:00:00 2001
From: alexanderdavide <alexeble1998@gmail.com>
Date: Thu, 24 Jun 2021 20:34:12 +0000
Subject: [PATCH] style: prettier format all files
---
assets/js/medium-zoom.js | 945 +++++++++++++++++++++++++++++++----------------------------
1 files changed, 497 insertions(+), 448 deletions(-)
diff --git a/assets/js/medium-zoom.js b/assets/js/medium-zoom.js
index 9459f8a..7a9a878 100644
--- a/assets/js/medium-zoom.js
+++ b/assets/js/medium-zoom.js
@@ -1,458 +1,507 @@
/*!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());
+ 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];
- }
- }
+ '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;
+ }
+ 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() {
- }
+ 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;
+ 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,
+ });
};
- return mediumZoom;
+ 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'));
--
Gitblit v1.10.0