trilium/libraries/wheel-zoom.min.js

1 line
14 KiB
JavaScript

(function(a,b){"object"==typeof exports&&"undefined"!=typeof module?module.exports=b():"function"==typeof define&&define.amd?define(b):(a="undefined"==typeof globalThis?a||self:globalThis,a.WZoom=b())})(this,function(){'use strict';var C=Math.min,D=Math.abs;function a(a,e){return b(a)||c(a,e)||d(a,e)||f()}function b(a){if(Array.isArray(a))return a}function c(a,b){var c=null==a?null:"undefined"!=typeof Symbol&&a[Symbol.iterator]||a["@@iterator"];if(null!=c){var d,e,f=[],g=!0,h=!1;try{for(c=c.call(a);!(g=(d=c.next()).done)&&(f.push(d.value),!(b&&f.length===b));g=!0);}catch(a){h=!0,e=a}finally{try{g||null==c["return"]||c["return"]()}finally{if(h)throw e}}return f}}function d(a,b){if(a){if("string"==typeof a)return e(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);return"Object"===c&&a.constructor&&(c=a.constructor.name),"Map"===c||"Set"===c?Array.from(a):"Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)?e(a,b):void 0}}function e(a,b){(null==b||b>a.length)&&(b=a.length);for(var c=0,d=Array(b);c<b;c++)d[c]=a[c];return d}function f(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function g(a){var b=a.getBoundingClientRect(),c=document,d=c.body,e=c.documentElement,f=i(),g=h(),j=e.clientTop||d.clientTop||0,k=e.clientLeft||d.clientLeft||0,l=b.top+f-j,m=b.left+g-k;return{top:l,left:m}}function h(){var a=void 0!==window.pageXOffset,b="CSS1Compat"===(document.compatMode||"");return a?window.pageXOffset:b?document.documentElement.scrollLeft:document.body.scrollLeft}function i(){var a=void 0!==window.pageYOffset,b="CSS1Compat"===(document.compatMode||"");return a?window.pageYOffset:b?document.documentElement.scrollTop:document.body.scrollTop}function j(a,b){if(a&&b)for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a}function k(a,b,c){var d=!!(3<arguments.length&&void 0!==arguments[3])&&arguments[3];a.addEventListener(b,c,d)}function l(a,b,c){var d=!!(3<arguments.length&&void 0!==arguments[3])&&arguments[3];a.removeEventListener(b,c,d)}function m(){return"ontouchstart"in window||0<navigator.MaxTouchPoints||0<navigator.msMaxTouchPoints}function n(a){return"wheel"===a.type||"pointerup"===a.type||"pointerdown"===a.type||"pointermove"===a.type||"mousedown"===a.type||"mousemove"===a.type||"mouseup"===a.type?a.clientX:a.changedTouches[0].clientX}function o(a){return"wheel"===a.type||"pointerup"===a.type||"pointerdown"===a.type||"pointermove"===a.type||"mousedown"===a.type||"mousemove"===a.type||"mouseup"===a.type?a.clientY:a.changedTouches[0].clientY}function p(a,b){var c=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{};this._dropHandler=this._dropHandler.bind(this),this._grabHandler=this._grabHandler.bind(this),this._moveHandler=this._moveHandler.bind(this),c.smoothExtinction=+c.smoothExtinction,isNaN(c.smoothExtinction)&&(c.smoothExtinction=.25),this.options=j({smoothExtinction:.25,onGrab:null,onMove:null,onDrop:null},c),this.isTouch=m(),this.events=this.isTouch?{grab:"touchstart",move:"touchmove",drop:"touchend"}:{grab:"mousedown",move:"mousemove",drop:"mouseup"},this.events.options=!!this.isTouch&&{passive:!1},this.window=a,this.content=b,k(this.content.$element,this.events.grab,this._grabHandler,this.events.options)}function q(a,b,c){var d=b.left,e=b.top,f=b.scale;c.smoothExtinction?a.style.transition="transform ".concat(c.smoothExtinction,"s"):a.style.removeProperty("transition"),a.style.transform="translate3d(".concat(d,"px, ").concat(e,"px, 0px) scale(").concat(f,")")}function r(a){var b=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};this._init=this._init.bind(this),this._prepare=this._prepare.bind(this),this._computeNewScale=this._computeNewScale.bind(this),this._computeNewPosition=this._computeNewPosition.bind(this),this._transform=this._transform.bind(this),this._wheelHandler=s.bind(this),this._downHandler=t.bind(this),this._upHandler=u.bind(this),this._zoomTwoFingers_TouchmoveHandler=v.bind(this),this._zoomTwoFingers_TouchendHandler=w.bind(this),this.content={},this.window={},this.isTouch=!1,this.events=null,this.direction=1,this.options=null,this.dragScrollable=null,this.coordsOnMouseDown=null;var c={type:"image",width:null,height:null,dragScrollable:!0,dragScrollableOptions:{},minScale:null,maxScale:1,speed:50,zoomOnClick:!0,watchImageChange:!0,smoothExtinction:.3,alignContent:"center",disableWheelZoom:!1};if("string"==typeof a)this.content.$element=document.querySelector(a);else if(a instanceof HTMLElement)this.content.$element=a;else throw"WZoom: `selectorOrHTMLElement` must be selector or HTMLElement, and not ".concat({}.toString.call(a));if(this.isTouch=m(),this.events=this.isTouch?{down:"touchstart",up:"touchend"}:{down:"mousedown",up:"mouseup"},this.events.options=!!this.isTouch&&{passive:!0},this.content.$element)if(b.smoothExtinction=+b.smoothExtinction,isNaN(b.smoothExtinction)&&(b.smoothExtinction=c.smoothExtinction),this.options=j(c,b),this.options.minScale&&this.options.minScale>=this.options.maxScale&&(this.options.minScale=null),this.window.$element=this.content.$element.parentNode,"image"===this.options.type){var d=!1;this.content.$element.complete&&(this._init(),d=!0),d&&!0!==this.options.watchImageChange||k(this.content.$element,"load",this._init,!this.options.watchImageChange&&{once:!0})}else this._init()}function s(a){this.options.disableWheelZoom||(a.preventDefault(),this._transform(this._computeNewPosition(this._computeNewScale(a.deltaY),{x:n(a),y:o(a)})))}function t(a){(this.isTouch&&1===a.touches.length||1===a.buttons)&&(this.coordsOnMouseDown={x:n(a),y:o(a)})}function u(a){this.coordsOnMouseDown&&this.coordsOnMouseDown.x===n(a)&&this.coordsOnMouseDown.y===o(a)&&(this._transform(this._computeNewPosition(1===this.direction?this.content.maxScale:this.content.minScale,{x:n(a),y:o(a)})),this.direction*=-1),this.coordsOnMouseDown=null}function v(a){var b=Math.round,c=Math.sqrt,d=Math.pow;if(2===a.targetTouches.length){var e=a.targetTouches[0].clientX,f=a.targetTouches[0].clientY,g=a.targetTouches[1].clientX,h=a.targetTouches[1].clientY,i=b(c(d(D(e-g),2)+d(D(f-h),2))),j=0;if(i>this.fingersHypot+5&&(j=-1),i<this.fingersHypot-5&&(j=1),0!==j){if(null!==this.fingersHypot||1===j){var k=new Event("wheel");k.deltaY=j,k.clientX=C(e,g)+D(e-g)/2,k.clientY=C(f,h)+D(f-h)/2,this._wheelHandler(k)}this.fingersHypot=i,this.zoomPinchWasDetected=!0}}}function w(){this.zoomPinchWasDetected&&(this.fingersHypot=null,this.zoomPinchWasDetected=!1)}function x(a,b,c){var d=0,e=0;switch(a.alignContent){case"left":d=(b.currentWidth-c.originalWidth)/2;break;case"top":e=(b.currentHeight-c.originalHeight)/2;break;case"right":d=-1*((b.currentWidth-c.originalWidth)/2);break;case"bottom":e=-1*((b.currentHeight-c.originalHeight)/2);}return[d,e]}function y(a,b,c){var d=Math.max,e=d(0,(c.originalWidth-b.currentWidth)/2),f=d(0,(c.originalHeight-b.currentHeight)/2);return"left"===a.alignContent?e*=2:"right"===a.alignContent&&(e=0),"bottom"===a.alignContent?f*=2:"top"===a.alignContent&&(f=0),[e,f]}function z(a,b,c,d,e,f){var g=e/2-(a+b-c)+d;return g*f-g+d}function A(a,b,c,d,e){switch(a.alignContent){case"left":d/2-e<b/2&&(e=(d-b)/2);break;case"right":d/2+e<b/2&&(e=-1*((d-b)/2));break;default:if((d-b)/2+c<D(e)){var f=0>e?-1:1;e=((d-b)/2+c)*f}}return e}function B(a){var b=g(a.$element);return{x:b.left+a.originalWidth/2-h(),y:b.top+a.originalHeight/2-i()}}return p.prototype={constructor:p,window:null,content:null,isTouch:!1,isGrab:!1,events:null,moveTimer:null,options:{},coordinates:null,speed:null,_grabHandler:function(a){(this.isTouch&&1===a.touches.length||1===a.buttons)&&(a.preventDefault(),this.isGrab=!0,this.coordinates={left:n(a),top:o(a)},this.speed={x:0,y:0},k(document,this.events.drop,this._dropHandler,this.events.options),k(document,this.events.move,this._moveHandler,this.events.options),"function"==typeof this.options.onGrab&&this.options.onGrab(a))},_dropHandler:function(a){a.preventDefault(),this.isGrab=!1,l(document,this.events.drop,this._dropHandler),l(document,this.events.move,this._moveHandler),"function"==typeof this.options.onDrop&&this.options.onDrop(a)},_moveHandler:function(a){if(this.isTouch&&1<a.touches.length)return!1;a.preventDefault();var b=this.window,c=this.content,d=this.speed,e=this.coordinates,f=this.options;d.x=n(a)-e.left,d.y=o(a)-e.top,clearTimeout(this.moveTimer),this.moveTimer=setTimeout(function(){d.x=0,d.y=0},50);var g=c.currentLeft+d.x,h=c.currentTop+d.y,i=(c.currentWidth-b.originalWidth)/2+c.correctX,j=(c.currentHeight-b.originalHeight)/2+c.correctY;D(g)<=i&&(c.currentLeft=g),D(h)<=j&&(c.currentTop=h),q(c.$element,{left:c.currentLeft,top:c.currentTop,scale:c.currentScale},this.options),e.left=n(a),e.top=o(a),"function"==typeof f.onMove&&f.onMove(a)},destroy:function(){for(var a in l(this.content.$element,this.events.grab,this._grabHandler,this.events.options),this)this.hasOwnProperty(a)&&(this[a]=null)}},r.prototype={constructor:r,_init:function(){this._prepare(),this.isTouch&&(this.fingersHypot=null,this.zoomPinchWasDetected=!1,k(this.content.$element,"touchmove",this._zoomTwoFingers_TouchmoveHandler),k(this.content.$element,"touchend",this._zoomTwoFingers_TouchendHandler)),!0===this.options.dragScrollable&&(this.dragScrollable&&this.dragScrollable.destroy(),this.setDragScrollable(new p(this.window,this.content,this.options.dragScrollableOptions))),k(this.content.$element,"wheel",this._wheelHandler),this.options.zoomOnClick&&(k(this.content.$element,this.events.down,this._downHandler,this.events.options),k(this.content.$element,this.events.up,this._upHandler,this.events.options))},_prepare:function(){var b=g(this.window.$element);this.window.originalWidth=this.window.$element.offsetWidth,this.window.originalHeight=this.window.$element.offsetHeight,this.window.positionLeft=b.left,this.window.positionTop=b.top,"image"===this.options.type?(this.content.originalWidth=this.options.width||this.content.$element.naturalWidth,this.content.originalHeight=this.options.height||this.content.$element.naturalHeight):(this.content.originalWidth=this.options.width||this.content.$element.offsetWidth,this.content.originalHeight=this.options.height||this.content.$element.offsetHeight),this.content.minScale=this.options.minScale||C(this.window.originalWidth/this.content.originalWidth,this.window.originalHeight/this.content.originalHeight),this.content.maxScale=this.options.maxScale,this.content.currentWidth=this.content.originalWidth*this.content.minScale,this.content.currentHeight=this.content.originalHeight*this.content.minScale;var c=x(this.options,this.content,this.window),d=a(c,2),e=d[0],f=d[1];this.content.alignPointX=e,this.content.alignPointY=f;var h=y(this.options,this.content,this.window),i=a(h,2),j=i[0],k=i[1];this.content.correctX=j,this.content.correctY=k,this.content.currentLeft=this.content.alignPointX,this.content.currentTop=this.content.alignPointY,this.content.currentScale=this.content.minScale,this.content.$element.style.transform="translate3d(".concat(this.content.alignPointX,"px, ").concat(this.content.alignPointY,"px, 0px) scale(").concat(this.content.minScale,")"),"function"==typeof this.options.prepare&&this.options.prepare()},_computeNewScale:function(a){this.direction=0>a?1:-1;var b=this.content,c=b.minScale,d=b.maxScale,e=b.currentScale,f=e+this.direction/this.options.speed;return f<c?this.direction=1:f>d&&(this.direction=-1),f<c?c:f>d?d:f},_computeNewPosition:function(a,b){var c=b.x,d=b.y,e=this.window,f=this.content,g=f.originalWidth*a,j=f.originalHeight*a,k=h(),l=i(),m=z(c,k,e.positionLeft,f.currentLeft,e.originalWidth,g/f.currentWidth),n=z(d,l,e.positionTop,f.currentTop,e.originalHeight,j/f.currentHeight);-1===this.direction&&(m=A(this.options,e.originalWidth,f.correctX,g,m),n=A(this.options,e.originalHeight,f.correctY,j,n)),a===this.content.minScale&&(m=this.content.alignPointX,n=this.content.alignPointY);var o={currentLeft:f.currentLeft,newLeft:m,currentTop:f.currentTop,newTop:n,currentScale:f.currentScale,newScale:a};return f.currentWidth=g,f.currentHeight=j,f.currentLeft=m,f.currentTop=n,f.currentScale=a,o},_transform:function(a){a.currentLeft;var b=a.newLeft;a.currentTop;var c=a.newTop;a.currentScale;var d=a.newScale;this.options.smoothExtinction?this.content.$element.style.transition="transform ".concat(this.options.smoothExtinction,"s"):this.content.$element.style.removeProperty("transition"),this.content.$element.style.transform="translate3d(".concat(b,"px, ").concat(c,"px, 0px) scale(").concat(d,")"),"function"==typeof this.options.rescale&&this.options.rescale()},_zoom:function(a,b){(void 0===b||void 0===b.x||void 0===b.y)&&(b=B(this.window)),this._transform(this._computeNewPosition(a,b))},prepare:function(){this._prepare()},zoomUp:function(){this._zoom(this._computeNewScale(-1))},zoomDown:function(){this._zoom(this._computeNewScale(1))},maxZoomUp:function(){this._zoom(this.content.maxScale)},maxZoomDown:function(){this._zoom(this.content.minScale)},zoomUpToPoint:function(a){this._zoom(this._computeNewScale(-1),a)},zoomDownToPoint:function(a){this._zoom(this._computeNewScale(1),a)},maxZoomUpToPoint:function(a){this._zoom(this.content.maxScale,a)},setDragScrollable:function(a){this.dragScrollable=a},destroy:function(){for(var a in this.content.$element.style.transform="","image"===this.options.type&&l(this.content.$element,"load",this._init),this.isTouch&&(l(this.content.$element,"touchmove",this._zoomTwoFingers_TouchmoveHandler),l(this.content.$element,"touchend",this._zoomTwoFingers_TouchendHandler)),l(this.content.$element,"wheel",this._wheelHandler),this.options.zoomOnClick&&(l(this.content.$element,this.events.down,this._downHandler,this.events.options),l(this.content.$element,this.events.up,this._upHandler,this.events.options)),this.dragScrollable&&this.dragScrollable.destroy(),this)this.hasOwnProperty(a)&&(this[a]=null)}},r.create=function(a,b){return new r(a,b)},r});