trilium/libraries/wheel-zoom.min.js

(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 n=Math.abs;function a(a){var b=a.getBoundingClientRect(),c=document,d=c.body,e=c.documentElement,f=window.pageYOffset||e.scrollTop||d.scrollTop,g=window.pageXOffset||e.scrollLeft||d.scrollLeft,h=e.clientTop||d.clientTop||0,i=e.clientLeft||d.clientLeft||0,j=b.top+f-h,k=b.left+g-i;return{top:j,left:k}}function b(a,b){if(a&&b)for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a}function c(a,b,c){var d=!!(3<arguments.length&&void 0!==arguments[3])&&arguments[3];a.addEventListener(b,c,d)}function d(a,b,c){var d=!!(3<arguments.length&&void 0!==arguments[3])&&arguments[3];a.removeEventListener(b,c,d)}function e(){return"ontouchstart"in window||0<navigator.MaxTouchPoints||0<navigator.msMaxTouchPoints}function f(a){return"wheel"===a.type||"mousedown"===a.type||"mousemove"===a.type||"mouseup"===a.type?a.clientX:a.changedTouches[0].clientX}function g(a){return"wheel"===a.type||"mousedown"===a.type||"mousemove"===a.type||"mouseup"===a.type?a.clientY:a.changedTouches[0].clientY}function h(a,d){var f=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),this.options=b({smoothExtinction:!1,onGrab:null,onMove:null,onDrop:null},f),this.isTouch=e(),this.events=this.isTouch?{grab:"touchstart",move:"touchmove",drop:"touchend"}:{grab:"mousedown",move:"mousemove",drop:"mouseup"},this.events.options=!!this.isTouch&&{passive:!0},this.window=a,this.content=d,c(this.content.$element,this.events.grab,this._grabHandler,this.events.options)}function i(a,b){var c=b.left,d=b.top,e=b.scale;a.style.transform="translate3d(".concat(c,"px, ").concat(d,"px, 0px) scale(").concat(e,")")}function j(a){var d=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=k.bind(this),this._downHandler=l.bind(this),this._upHandler=m.bind(this),this.content={},this.window={},this.isTouch=!1,this.events=null,this.direction=1,this.options=null,this.dragScrollable=null,this.clickExpired=!0;if(this.content.$element=document.querySelector(a),this.isTouch=e(),this.events=this.isTouch?{down:"touchstart",up:"touchend"}:{down:"mousedown",up:"mouseup"},this.events.options=!!this.isTouch&&{passive:!0},this.content.$element)if(this.options=b({type:"image",width:null,height:null,dragScrollable:!0,dragScrollableOptions:{},minScale:null,maxScale:1,speed:50,zoomOnClick:!0,watchImageChange:!0},d),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 f=!1;this.content.$element.complete&&(this._init(),f=!0),f&&!0!==this.options.watchImageChange||c(this.content.$element,"load",this._init,!this.options.watchImageChange&&{once:!0})}else this._init()}function k(a){a.preventDefault(),this._transform(this._computeNewPosition(this._computeNewScale(a.deltaY),{x:f(a),y:g(a)}))}function l(a){var b=this;(this.isTouch&&1===a.touches.length||1===a.buttons)&&(this.clickExpired=!1,setTimeout(function(){return b.clickExpired=!0},150))}function m(a){this.clickExpired||(this._transform(this._computeNewPosition(1===this.direction?this.content.maxScale:this.content.minScale,{x:f(a),y:g(a)})),this.direction*=-1)}return h.prototype={constructor:h,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)&&(!this.isTouch&&a.preventDefault(),this.isGrab=!0,this.coordinates={left:f(a),top:g(a)},this.speed={x:0,y:0},c(document,this.events.drop,this._dropHandler,this.events.options),c(document,this.events.move,this._moveHandler,this.events.options),"function"==typeof this.options.onGrab&&this.options.onGrab())},_dropHandler:function(a){this.isTouch||a.preventDefault(),this.isGrab=!1,d(document,this.events.drop,this._dropHandler),d(document,this.events.move,this._moveHandler),"function"==typeof this.options.onDrop&&this.options.onDrop()},_moveHandler:function(a){this.isTouch||a.preventDefault();var b=this.window,c=this.content,d=this.speed,e=this.coordinates,h=this.options;d.x=f(a)-e.left,d.y=g(a)-e.top,clearTimeout(this.moveTimer),this.moveTimer=setTimeout(function(){d.x=0,d.y=0},50);var j=c.currentLeft+d.x,k=c.currentTop+d.y,l=(c.currentWidth-b.originalWidth)/2+c.correctX,m=(c.currentHeight-b.originalHeight)/2+c.correctY;n(j)<=l&&(c.currentLeft=j),n(k)<=m&&(c.currentTop=k),i(c.$element,{left:c.currentLeft,top:c.currentTop,scale:c.currentScale}),e.left=f(a),e.top=g(a),"function"==typeof h.onMove&&h.onMove()},destroy:function(){for(var a in d(this.content.$element,this.events.grab,this._grabHandler,this.events.options),this)this.hasOwnProperty(a)&&(this[a]=null)}},j.prototype={constructor:j,_init:function(){this._prepare(),!0===this.options.dragScrollable&&(this.dragScrollable&&this.dragScrollable.destroy(),this.dragScrollable=new h(this.window,this.content,this.options.dragScrollableOptions)),c(this.content.$element,"wheel",this._wheelHandler),this.options.zoomOnClick&&(c(this.content.$element,this.events.down,this._downHandler,this.events.options),c(this.content.$element,this.events.up,this._upHandler,this.events.options))},_prepare:function(){var b=Math.max,c=Math.min,d=a(this.window.$element);this.window.originalWidth=this.window.$element.offsetWidth,this.window.originalHeight=this.window.$element.offsetHeight,this.window.positionLeft=d.left,this.window.positionTop=d.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,this.content.currentLeft=0,this.content.currentTop=0,this.content.currentScale=this.content.minScale,this.content.correctX=b(0,(this.window.originalWidth-this.content.currentWidth)/2),this.content.correctY=b(0,(this.window.originalHeight-this.content.currentHeight)/2),this.content.$element.style.transform="translate3d(0px, 0px, 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,h=f.originalHeight*a,i=document,j=i.body,k=i.documentElement,l=e.pageXOffset||k.scrollLeft||j.scrollLeft,m=e.pageYOffset||k.scrollTop||j.scrollTop,o=c+l-e.positionLeft,p=e.originalWidth/2-o,q=p+f.currentLeft,r=q*(g/f.currentWidth)-q+f.currentLeft;if(-1===this.direction&&(g-e.originalWidth)/2+f.correctX<n(r)){var s=0>r?-1:1;r=((g-e.originalWidth)/2+f.correctX)*s}var t=d+m-e.positionTop,u=e.originalHeight/2-t,v=u+f.currentTop,w=v*(h/f.currentHeight)-v+f.currentTop;if(-1===this.direction&&(h-e.originalHeight)/2+f.correctY<n(w)){var x=0>w?-1:1;w=((h-e.originalHeight)/2+f.correctY)*x}a===this.content.minScale&&(r=w=0);var y={currentLeft:f.currentLeft,newLeft:r,currentTop:f.currentTop,newTop:w,currentScale:f.currentScale,newScale:a};return f.currentWidth=g,f.currentHeight=h,f.currentLeft=r,f.currentTop=w,f.currentScale=a,y},_transform:function(a){a.currentLeft;var b=a.newLeft;a.currentTop;var c=a.newTop;a.currentScale;var d=a.newScale;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(b){var c=a(this.window.$element),d=this.window,e=document,f=e.body,g=e.documentElement,h=d.pageXOffset||g.scrollLeft||f.scrollLeft,i=d.pageYOffset||g.scrollTop||f.scrollTop;this._transform(this._computeNewPosition(this._computeNewScale(b),{x:c.left+this.window.originalWidth/2-h,y:c.top+this.window.originalHeight/2-i}))},prepare:function(){this._prepare()},zoomUp:function(){this._zoom(-1)},zoomDown:function(){this._zoom(1)},destroy:function(){for(var a in this.content.$element.style.transform="","image"===this.options.type&&d(this.content.$element,"load",this._init),d(this.window.$element,"wheel",this._wheelHandler),this.options.zoomOnClick&&(d(this.window.$element,this.events.down,this._downHandler,this.events.options),d(this.window.$element,this.events.up,this._upHandler,this.events.options)),this.dragScrollable&&this.dragScrollable.destroy(),this)this.hasOwnProperty(a)&&(this[a]=null)}},j.create=function(a,b){return new j(a,b)},j});