this.D = this.D || {}; (function () { 'use strict'; var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; function createCommonjsModule(fn, module) { return module = { exports: {} }, fn(module, module.exports), module.exports; } var zoomImage = createCommonjsModule(function (module, exports) { (function (global, factory) { module.exports = factory(); }(commonjsGlobal, (function () { 'use strict'; var windowWidth = function () { return document.documentElement.clientWidth; }; var windowHeight = function () { return document.documentElement.clientHeight; }; var elemOffset = function (elem) { var rect = elem.getBoundingClientRect(); var docElem = document.documentElement; var win = window; return { top: rect.top + win.pageYOffset - docElem.clientTop, left: rect.left + win.pageXOffset - docElem.clientLeft } }; var once = function (elem, type, handler) { var fn = function (e) { e.target.removeEventListener(type, fn); handler(); }; elem.addEventListener(type, fn); }; var Size = function Size(w, h) { this.w = w; this.h = h; }; var ZoomImage = function ZoomImage(img, offset) { this.img = img; this.preservedTransform = img.style.transform; this.wrap = null; this.overlay = null; this.offset = offset; }; ZoomImage.prototype.forceRepaint = function forceRepaint () { var _ = this.img.offsetWidth; return }; ZoomImage.prototype.zoom = function zoom () { var size = new Size(this.img.naturalWidth, this.img.naturalHeight); this.wrap = document.createElement('div'); this.wrap.classList.add('zoom-img-wrap'); this.img.parentNode.insertBefore(this.wrap, this.img); this.wrap.appendChild(this.img); this.img.classList.add('zoom-img'); this.img.setAttribute('data-action', 'zoom-out'); this.overlay = document.createElement('div'); this.overlay.classList.add('zoom-overlay'); document.body.appendChild(this.overlay); this.forceRepaint(); var scale = this.calculateScale(size); this.forceRepaint(); this.animate(scale); document.body.classList.add('zoom-overlay-open'); }; ZoomImage.prototype.calculateScale = function calculateScale (size) { var maxScaleFactor = size.w / this.img.width; var viewportWidth = (windowWidth() - this.offset); var viewportHeight = (windowHeight() - this.offset); var imageAspectRatio = size.w / size.h; var viewportAspectRatio = viewportWidth / viewportHeight; if (size.w < viewportWidth && size.h < viewportHeight) { return maxScaleFactor } else if (imageAspectRatio < viewportAspectRatio) { return (viewportHeight / size.h) * maxScaleFactor } return (viewportWidth / size.w) * maxScaleFactor }; ZoomImage.prototype.animate = function animate (scale) { var imageOffset = elemOffset(this.img); var scrollTop = window.pageYOffset; var viewportX = (windowWidth() / 2); var viewportY = scrollTop + (windowHeight() / 2); var imageCenterX = imageOffset.left + (this.img.width / 2); var imageCenterY = imageOffset.top + (this.img.height / 2); var tx = viewportX - imageCenterX; var ty = viewportY - imageCenterY; var tz = 0; var imgTr = "scale(" + scale + ")"; var wrapTr = "translate3d(" + tx + "px, " + ty + "px, " + tz + "px)"; this.img.style.transform = imgTr; this.wrap.style.transform = wrapTr; }; ZoomImage.prototype.dispose = function dispose () { if (this.wrap === null || this.wrap.parentNode === null) { return } this.img.classList.remove('zoom-img'); this.img.setAttribute('data-action', 'zoom'); this.wrap.parentNode.insertBefore(this.img, this.wrap); this.wrap.parentNode.removeChild(this.wrap); document.body.removeChild(this.overlay); document.body.classList.remove('zoom-overlay-transitioning'); }; ZoomImage.prototype.close = function close () { var this$1 = this; document.body.classList.add('zoom-overlay-transitioning'); this.img.style.transform = this.preservedTransform; if (this.img.style.length === 0) { this.img.removeAttribute('style'); } this.wrap.style.transform = 'none'; once(this.img, 'transitionend', function () { this$1.dispose(); // remove class should happen after dispose. Otherwise, // a new click event could fire and create a duplicate ZoomImage for // the same element. document.body.classList.remove('zoom-overlay-open'); }); }; /** * Pure JavaScript implementation of zoom.js. * * Original preamble: * zoom.js - It's the best way to zoom an image * @version v0.0.2 * @link https://github.com/fat/zoom.js * @license MIT * * Needs a related CSS file to work. See the README at * https://github.com/nishanths/zoom.js for more info. * * This is a fork of the original zoom.js implementation by @fat. * Copyrights for the original project are held by @fat. All other copyright * for changes in the fork are held by Nishanth Shanmugham. * * Copyright (c) 2013 @fat * The MIT License. Copyright © 2016 Nishanth Shanmugham. */ var current = null; var offset = 80; var initialScrollPos = -1; var initialTouchPos = -1; function handleScroll() { if (initialScrollPos === -1) { initialScrollPos = window.pageYOffset; } var deltaY = Math.abs(initialScrollPos - window.pageYOffset); if (deltaY >= 40) { closeCurrent(); } } function handleKeyup(e) { if (e.keyCode === 27) { closeCurrent(); } } function handleTouchStart(e) { var t = e.touches[0]; if (t === null) { return } initialTouchPos = t.pageY; e.target.addEventListener('touchmove', handleTouchMove); } function handleTouchMove(e) { var t = e.touches[0]; if (t === null) { return } if (Math.abs(t.pageY - initialTouchPos) > 10) { closeCurrent(); e.target.removeEventListener('touchmove', handleTouchMove); } } function handleClick() { closeCurrent(); } function addCloseListeners() { document.addEventListener('scroll', handleScroll); document.addEventListener('keyup', handleKeyup); document.addEventListener('touchstart', handleTouchStart); document.addEventListener('click', handleClick, true); } function removeCloseListeners() { document.removeEventListener('scroll', handleScroll); document.removeEventListener('keyup', handleKeyup); document.removeEventListener('touchstart', handleTouchStart); document.removeEventListener('click', handleClick, true); } function closeCurrent(force) { if (current === null) { return } if (force) { current.dispose(); } else { current.close(); } removeCloseListeners(); current = null; } function prepareZoom(e) { if (document.body.classList.contains('zoom-overlay-open')) { return } if (e.metaKey || e.ctrlKey) { window.open((e.target.getAttribute('data-original') || e.target.src), '_blank'); return } if (e.target.width >= windowWidth() - offset) { return } closeCurrent(true); current = new ZoomImage(e.target, offset); current.zoom(); addCloseListeners(); } var zoom = function (el) { el.setAttribute('data-action', 'zoom'); el.addEventListener('click', prepareZoom); return function () { return el.removeEventListener('click', prepareZoom); } }; return zoom; }))); }); var style = "img[data-action=\"zoom\"] {\n cursor: pointer;\n cursor: -webkit-zoom-in;\n cursor: zoom-in;\n}\n.zoom-img,\n.zoom-img-wrap {\n position: relative;\n z-index: 666;\n transition: -webkit-transform 300ms cubic-bezier(.2,0,.2,1);\n transition: transform 300ms cubic-bezier(.2,0,.2,1);\n transition: transform 300ms cubic-bezier(.2,0,.2,1), -webkit-transform 300ms cubic-bezier(.2,0,.2,1);\n}\n.zoom-overlay {\n z-index: 420;\n background: #fff;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n opacity: 0;\n transition: opacity 300ms;\n}\n.zoom-overlay-open .zoom-overlay {\n opacity: 1;\n}\n.zoom-overlay-open {\n cursor: pointer;\n cursor: -webkit-zoom-out;\n cursor: zoom-out;\n}\n.zoom-overlay-transitioning {\n cursor: default;\n}\n.zoom-overlay-open.zoom-overlay-transitioning .zoom-overlay{\n opacity: 0;\n}\n"; function install (hook) { var dom = Docsify.dom; var destroys; // add style dom.appendTo(dom.head, dom.create('style', style)); hook.doneEach(function (_) { var images = dom.findAll('img:not(.emoji)'); if (Array.isArray(destroys) && destroys.length) { destroys.forEach(function (o) { return o(); }); destroys = []; } destroys = images.map(zoomImage); }); } $docsify.plugins = [].concat(install, $docsify.plugins); }());