diff --git a/build/build.js b/build/build.js index cc5dd62a..e87cb233 100644 --- a/build/build.js +++ b/build/build.js @@ -10,7 +10,12 @@ var build = function (opts) { rollup .rollup({ entry: 'src/' + opts.entry, - plugins: (opts.plugins || []).concat([buble(), commonjs(), nodeResolve()]) + plugins: (opts.plugins || []).concat([ + string({ include: '**/*.css' }), + buble(), + commonjs(), + nodeResolve() + ]) }) .then(function (bundle) { var dest = 'lib/' + (opts.output || opts.entry) @@ -45,12 +50,7 @@ plugins.forEach(item => { build({ entry: 'plugins/' + item.entry, output: 'plugins/' + item.name + '.js', - moduleName: 'D.' + item.moduleName, - plugins: [ - string({ - include: '**/*.css' - }) - ] + moduleName: 'D.' + item.moduleName }) }) diff --git a/docs/_coverpage.md b/docs/_coverpage.md index 3958c72f..ee6f6300 100644 --- a/docs/_coverpage.md +++ b/docs/_coverpage.md @@ -1,6 +1,6 @@ ![logo](_media/icon.svg) -# docsify 3.3 +# docsify 3.4 > A magical documentation site generator. diff --git a/lib/plugins/zoom-image.js b/lib/plugins/zoom-image.js new file mode 100644 index 00000000..910c3b36 --- /dev/null +++ b/lib/plugins/zoom-image.js @@ -0,0 +1,304 @@ +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); + +}()); diff --git a/lib/plugins/zoom-image.min.js b/lib/plugins/zoom-image.min.js new file mode 100644 index 00000000..af290c6b --- /dev/null +++ b/lib/plugins/zoom-image.min.js @@ -0,0 +1 @@ +this.D=this.D||{},function(){"use strict";function t(t,e){return e={exports:{}},t(e,e.exports),e.exports}function e(t){var e,n=Docsify.dom;n.appendTo(n.head,n.create("style",i)),t.doneEach(function(t){var i=n.findAll("img:not(.emoji)");Array.isArray(e)&&e.length&&(e.forEach(function(t){return t()}),e=[]),e=i.map(o)})}var n="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},o=t(function(t,e){!function(e,n){t.exports=n()}(n,function(){function t(){g===-1&&(g=window.pageYOffset);var t=Math.abs(g-window.pageYOffset);t>=40&&a()}function e(t){27===t.keyCode&&a()}function n(t){var e=t.touches[0];null!==e&&(y=e.pageY,t.target.addEventListener("touchmove",o))}function o(t){var e=t.touches[0];null!==e&&Math.abs(e.pageY-y)>10&&(a(),t.target.removeEventListener("touchmove",o))}function i(){a()}function r(){document.addEventListener("scroll",t),document.addEventListener("keyup",e),document.addEventListener("touchstart",n),document.addEventListener("click",i,!0)}function s(){document.removeEventListener("scroll",t),document.removeEventListener("keyup",e),document.removeEventListener("touchstart",n),document.removeEventListener("click",i,!0)}function a(t){null!==h&&(t?h.dispose():h.close(),s(),h=null)}function c(t){if(!document.body.classList.contains("zoom-overlay-open"))return t.metaKey||t.ctrlKey?void window.open(t.target.getAttribute("data-original")||t.target.src,"_blank"):void(t.target.width>=m()-v||(a(!0),h=new p(t.target,v),h.zoom(),r()))}var m=function(){return document.documentElement.clientWidth},u=function(){return document.documentElement.clientHeight},d=function(t){var e=t.getBoundingClientRect(),n=document.documentElement,o=window;return{top:e.top+o.pageYOffset-n.clientTop,left:e.left+o.pageXOffset-n.clientLeft}},l=function(t,e,n){var o=function(t){t.target.removeEventListener(e,o),n()};t.addEventListener(e,o)},f=function(t,e){this.w=t,this.h=e},p=function(t,e){this.img=t,this.preservedTransform=t.style.transform,this.wrap=null,this.overlay=null,this.offset=e};p.prototype.forceRepaint=function(){this.img.offsetWidth},p.prototype.zoom=function(){var t=new f(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 e=this.calculateScale(t);this.forceRepaint(),this.animate(e),document.body.classList.add("zoom-overlay-open")},p.prototype.calculateScale=function(t){var e=t.w/this.img.width,n=m()-this.offset,o=u()-this.offset,i=t.w/t.h,r=n/o;return t.w