UNPKG

@ezuikit/theme-plugin-zoom

Version:

zoom

23 lines (22 loc) • 18.5 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* * * @ezuikit/theme-plugin-zoom v0.1.0 * Copyright (c) 2024-3-23 Ezviz-OpenBiz * Released under MIT the License. * */ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).ThemePluginZoom=t()}(this,(function(){"use strict"; /* * * @ezuikit/utils-dom v1.0.1-alpha.1 * Copyright (c) 2024-3-23 Ezviz-OpenBiz * Released under MIT the License. * */var e="ezui";function t(e){for(var t=arguments.length,o=new Array(t>1?t-1:0),i=1;i<t;i++)o[i-1]=arguments[i];var n;e&&(o=o.filter((function(e){return e&&!!e.replace(/ /g,"")})),(n=e.classList).add.apply(n,[].concat(o)))}function o(e){for(var t=arguments.length,o=new Array(t>1?t-1:0),i=1;i<t;i++)o[i-1]=arguments[i];var n;e&&(n=e.classList).remove.apply(n,[].concat(o))} /* * * @ezuikit/icons v0.1.0 * Copyright (c) 2024-3-23 Ezviz-OpenBiz * Released under MIT the License. * */function i(o){var i;const n=`${e}-icon`,r=document.createElement("span");return r.className="",t(r,`${n}`,`${n}-${o.name}`,null!==(i=null==o?void 0:o.className)&&void 0!==i?i:""),r.setAttribute("role","img"),r.innerHTML=o.svg,r}!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===o&&i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(".ezui-icon{align-items:center;color:inherit;display:inline-flex;font-style:normal;line-height:0;text-align:center;text-rendering:optimizeLegibility;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ezui-icon svg{display:inline-block}");!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===o&&i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(":root{--font-size:14px;--color:#fff;--background-color:#000;--active-color:#1890ff;--botton-color:var(--color);--botton-border-color:var(--color);--footer-height:48px;--footer-icon-size:27px;--footer-color:--color;--footer-background-color:var(--background-color,#000);--footer-active-color:var(--active-color,#1890ff);--header-height:var(--footer-height,48px);--header-icon-size:27px;--header-color:var(--footer-color);--header-background-color:var(-footer-bg-color,#000);--header-active-color:var(--footer-active-color,#1890ff);--date-picker-header-height:34px;--date-picker-color:#595959;--date-picker-primary-color:#1890ff;--date-picker-font-size:14px;--date-picker-border-color:rgba(5,5,5,.06);--date-picker-disable-border-color:rgba(0,0,0,.2);--data-picker-scrollbar-width:8px;--data-picker-border-radius:2px}.ezui-footer{background-color:#000;bottom:0;box-sizing:border-box;color:var(--ezui-footer-color,#fff);display:flex;flex-direction:column;height:var(--ezui-footer-height,48px);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.ezui-footer-top{background-color:var(--ezui-footer-background-color,rgba(0,0,0,.5));bottom:var(--ezui-footer-height,48px);display:flex;flex-direction:row;justify-content:space-between;left:0;opacity:1;pointer-events:all;position:absolute;right:0;transition:opacity .3s ease;z-index:999}.ezui-footer-top-hidden{opacity:0;pointer-events:none}.ezui-footer-bottom .ezui-footer-item,.ezui-footer-left>.ezui-footer-item,.ezui-footer-left>span,.ezui-footer-right>.ezui-footer-item,.ezui-footer-right>span{align-items:center;cursor:pointer;display:inline-flex;font-size:var(--ezui-footer-icon-size,27px);justify-content:center;min-height:var(--ezui-footer-height,48px);width:var(--ezui-footer-height,48px)}.ezui-footer-left,.ezui-footer-right{box-sizing:border-box;display:flex;padding-left:12px;padding-right:12px}.ezui-footer-bottom{background-color:#000;color:#fff;display:flex;flex-direction:row;height:var(--ezui-footer-height,48px);justify-content:space-between}.ezui-footer-bottom .ezui-footer-bottom-item{align-items:center;cursor:pointer;display:inline-flex;font-size:20px;justify-content:center;min-height:var(--ezui-footer-height,48px);width:var(--ezui-footer-height,48px)}.ezui-footer-bottom-left{flex:1 1 auto}.ezui-footer-bottom-right{align-items:center;display:inline-flex;flex-direction:row;font-size:22px;justify-content:flex-end}.ezui-footer-bottom-right .ezui-icon{align-items:center;box-sizing:border-box;cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;padding-left:9px;padding-right:9px}.ezui-footer-mobile-extend{background-color:#fff;color:#000;display:flex;flex-direction:column}.ezui-footer-mobile-extend-type{display:flex;justify-content:space-between}.ezui-footer-mobile-extend-type .ezui-icon{color:#000}.ezui-theme-mobile .ezui-footer-top{bottom:0}");const n=`${e}-footer`,r=`${n}-top`,s=`${n}-left`;!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===o&&i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(':root{--font-size:14px;--color:#fff;--background-color:#000;--active-color:#1890ff;--botton-color:var(--color);--botton-border-color:var(--color);--footer-height:48px;--footer-icon-size:27px;--footer-color:--color;--footer-background-color:var(--background-color,#000);--footer-active-color:var(--active-color,#1890ff);--header-height:var(--footer-height,48px);--header-icon-size:27px;--header-color:var(--footer-color);--header-background-color:var(-footer-bg-color,#000);--header-active-color:var(--footer-active-color,#1890ff);--date-picker-header-height:34px;--date-picker-color:#595959;--date-picker-primary-color:#1890ff;--date-picker-font-size:14px;--date-picker-border-color:rgba(5,5,5,.06);--date-picker-disable-border-color:rgba(0,0,0,.2);--data-picker-scrollbar-width:8px;--data-picker-border-radius:2px}.ezui-zoom-tool{bottom:80px;display:none;left:12px;position:absolute;transform:scale(1);transform-origin:0 100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ezui-zoom-tool-container{align-items:center;background:rgba(0,0,0,.6);border-radius:2px;display:inline-flex;flex-direction:column;height:160px;justify-content:space-between;width:36px}.ezui-zoom-tool-current{color:#fff;font-size:12px;margin:10px 0}.ezui-zoom-tool-btn-minus,.ezui-zoom-tool-btn-plus{color:#fff;cursor:pointer;font-size:20px;height:20px;margin-bottom:4px;width:20px}.ezui-zoom-tool-btn-minus{margin:4px 0 10px}.ezui-zoom-tool-progress{align-items:center;background:hsla(0,0%,100%,.75);border-radius:2px;display:flex;flex-direction:column;height:64px;justify-content:flex-end;position:relative;width:2px}.ezui-zoom-tool-progress-percent{background:#407aff;border-radius:2px;bottom:0;min-height:8px;position:relative;width:2px}.ezui-zoom-tool-progress-percent:before{background:#fff;border:1px solid #407aff;border-radius:100%;box-sizing:border-box;content:"";height:8px;left:-3px;position:absolute;top:0;width:8px}');var c="object"==typeof global&&global&&global.Object===Object&&global,l="object"==typeof self&&self&&self.Object===Object&&self,a=c||l||Function("return this")(),h=a.Symbol,d=Object.prototype,u=d.hasOwnProperty,f=d.toString,p=h?h.toStringTag:void 0;var g=Object.prototype.toString;var m="[object Null]",v="[object Undefined]",b=h?h.toStringTag:void 0;function x(e){return null==e?void 0===e?v:m:b&&b in Object(e)?function(e){var t=u.call(e,p),o=e[p];try{e[p]=void 0;var i=!0}catch(e){}var n=f.call(e);return i&&(t?e[p]=o:delete e[p]),n}(e):function(e){return g.call(e)}(e)}var y="[object Symbol]";var z=/\s/;var k=/^\s+/;function w(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&z.test(e.charAt(t)););return t}(e)+1).replace(k,""):e}function $(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var _=NaN,C=/^[-+]0x[0-9a-f]+$/i,S=/^0b[01]+$/i,T=/^0o[0-7]+$/i,P=parseInt;function F(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&x(e)==y}(e))return _;if($(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=$(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=w(e);var o=S.test(e);return o||T.test(e)?P(e.slice(2),o?2:8):C.test(e)?_:+e}var E=function(){return a.Date.now()},j="Expected a function",M=Math.max,L=Math.min;function X(e,t,o){var i,n,r,s,c,l,a=0,h=!1,d=!1,u=!0;if("function"!=typeof e)throw new TypeError(j);function f(t){var o=i,r=n;return i=n=void 0,a=t,s=e.apply(r,o)}function p(e){var o=e-l;return void 0===l||o>=t||o<0||d&&e-a>=r}function g(){var e=E();if(p(e))return m(e);c=setTimeout(g,function(e){var o=t-(e-l);return d?L(o,r-(e-a)):o}(e))}function m(e){return c=void 0,u&&i?f(e):(i=n=void 0,s)}function v(){var e=E(),o=p(e);if(i=arguments,n=this,l=e,o){if(void 0===c)return function(e){return a=e,c=setTimeout(g,t),h?f(e):s}(l);if(d)return clearTimeout(c),c=setTimeout(g,t),f(l)}return void 0===c&&(c=setTimeout(g,t)),s}return t=F(t)||0,$(o)&&(h=!!o.leading,r=(d="maxWait"in o)?M(F(o.maxWait)||0,t):r,u="trailing"in o?!!o.trailing:u),v.cancel=function(){void 0!==c&&clearTimeout(c),a=0,i=l=n=c=void 0},v.flush=function(){return void 0===c?s:m(E())},v}const H={maxScale:8,left:0,bottom:0,scale:1,onClick:()=>{}},W="ezui-zoom-tool";class N{constructor(e,t={},o){this._current=1,this.$container=e,this.options=Object.assign({},H,t),this.$zoomToolContainer=this.render(),this._theme=o,this.currentPosition={x:0,y:0,xPercent:.1,yPercent:.1,xCurrentVideo:0,yCurrentVideo:0,left:0,top:0,right:1920,bottom:1080},this._registerEvent()}_registerEvent(){this._theme.event.on("EVENT_CALLBACK",(e=>{"appearFirstFrameCallback"===e.data.type&&this._resetZoom()}))}get current(){return this._current}set current(e){if(e<=0||e>this.options.maxScale)return;this._current=+e.toFixed();const t=this.$container.querySelector(`.${W}-current`);t&&(t.innerHTML=`${this._current.toFixed()}X`),this._renderProgressPercent()}show(){this.$zoomToolContainer.style.display="inline-block"}hide(){this.$zoomToolContainer.style.display="none",this._resetZoom()}_renderProgressPercent(){const e=this.$container.querySelector(`.${W}-progress-percent`);if(e){let t=this._current/this.options.maxScale*100;t<0&&(t=0),t>100&&(t=100),e.style.height=`${t}%`}}render(){var e,t,o,n;const r=document.createElement("div");return r.classList.add(W),r.style.bottom=this.options.bottom+"px",r.style.left=this.options.left+"px",r.style.transform="scale("+this.options.scale+")",r.innerHTML=`\n <div class="${W}-container">\n <div class="${W}-current">1.0X</div>\n <div class="${W}-btn-plus"></div>\n <div class="${W}-progress">\n <div class="${W}-progress-percent"></div>\n </div>\n <div class="${W}-btn-minus"></div>\n </div>`,null===(e=r.querySelector(`.${W}-btn-plus`))||void 0===e||e.appendChild((e=>{const t="plus-circle";return i({name:t,svg:null!=e?e:`<svg version="1.1" viewBox="0 0 20 20" focusable="false" data-icon="${t}" width="1em" height="1em" fill="currentColor" aria-hidden="true">\n <g>\n <g>\n <path d="m10,3.8c3.5,0 6.2,2.8 6.2,6.2s-2.8,6.2 -6.2,6.2s-6.2,-2.7 -6.2,-6.2s2.7,-6.2 6.2,-6.2zm0,1.2c-2.8,0 -5,2.2 -5,5s2.2,5 5,5s5,-2.2 5,-5s-2.2,-5 -5,-5z"/>\n </g>\n <g>\n <path d="m12.5,10.6l-5,0c-0.3,0 -0.6,-0.3 -0.6,-0.6s0.3,-0.6 0.6,-0.6l5,0c0.3,0 0.6,0.3 0.6,0.6s-0.3,0.6 -0.6,0.6z"/>\n </g>\n <g>\n <path d="m10,13.1c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-5c0,-0.3 0.3,-0.6 0.6,-0.6s0.6,0.3 0.6,0.6l0,5c0,0.3 -0.3,0.6 -0.6,0.6z"/>\n </g>\n </g>\n </svg>`})})()),null===(t=r.querySelector(`.${W}-btn-plus`))||void 0===t||t.addEventListener("click",(e=>{this._current>=this.options.maxScale?this._current=this.options.maxScale:this.current=this._current+1,this.currentPosition.xPercent=.5,this.currentPosition.yPercent=.5,this.doScale(),"function"==typeof this.options.onClick&&this.options.onClick(this.current),e.stopPropagation(),e.preventDefault()})),null===(o=r.querySelector(`.${W}-btn-minus`))||void 0===o||o.appendChild((e=>{const t="minus-circle";return i({name:t,svg:null!=e?e:`<svg\n viewBox="0 0 20 20"\n focusable="false"\n data-icon="${t}"\n width="1em"\n height="1em"\n fill="currentColor"\n aria-hidden="true"\n >\n <g>\n <g>\n <path d="m10,3.8c3.5,0 6.2,2.8 6.2,6.2s-2.8,6.2 -6.2,6.2s-6.2,-2.7 -6.2,-6.2s2.7,-6.2 6.2,-6.2zm0,1.2c-2.8,0 -5,2.2 -5,5s2.2,5 5,5s5,-2.2 5,-5s-2.2,-5 -5,-5z"/>\n </g>\n <g>\n <path d="m12.5,10.6l-5,0c-0.3,0 -0.6,-0.3 -0.6,-0.6s0.3,-0.6 0.6,-0.6l5,0c0.3,0 0.6,0.3 0.6,0.6s-0.3,0.6 -0.6,0.6z"/>\n </g>\n </g>\n </svg>`})})()),null===(n=r.querySelector(`.${W}-btn-minus`))||void 0===n||n.addEventListener("click",function(e,t,o){var i=!0,n=!0;if("function"!=typeof e)throw new TypeError("Expected a function");return $(o)&&(i="leading"in o?!!o.leading:i,n="trailing"in o?!!o.trailing:n),X(e,t,{leading:i,maxWait:t,trailing:n})}((()=>{this._current<=1?this._current=1:this.current=this._current-1,this.currentPosition.xPercent=.5,this.currentPosition.yPercent=.5,this.doScale(),"function"==typeof this.options.onClick&&this.options.onClick(this.current)}),200)),this.$container.appendChild(r),this._event(),r}_event(){const e=setInterval((()=>{const t=document.getElementById(`${this._theme.options.id}-container-container-0`);clearInterval(e),this._theme.options.isMobile?t&&(t.addEventListener("touchstart",(e=>this.onTouchstart(e))),t.addEventListener("touchend",(e=>this.onTouchend(e)))):t&&(t.addEventListener("mousedown",(e=>this.onMouseDown(e))),t.addEventListener("mouseup",(e=>this.onMouseUp(e))))}),100)}onMouseDown(e){1!==this.current&&(this._moveX=e.clientX,this._moveY=e.clientY)}onMouseUp(e){const{currentPosition:t}=this;1!==this.current&&(t.left=t.left-(e.clientX-this._moveX),t.top=t.top-(e.clientY-this._moveY),this.doScale())}onTouchstart(e){if(1===this.current)return;if(!this.inited){const e=this._theme.getFrameInfo(0);this.videoWidth=e.width,this.videoHeight=e.height,this.currentPosition.left=0,this.currentPosition.top=0,this.isMobileFullScreen?(this.currentPosition.right=e.height,this.currentPosition.bottom=e.width):(this.currentPosition.right=e.width,this.currentPosition.bottom=e.height),this.inited=!0}const t=e.touches[0];if(t){const e={clientX:0,clientY:0};e.clientX=t.clientX,e.clientY=t.clientY,this._point1=e}}onTouchend(e){const t=this,{currentPosition:o}=this;if(1===this.current)return;const i=e.changedTouches[0];this.isMobileFullScreen?(o.left=o.left-(i.clientY-t._point1.clientY),o.top=o.top+(i.clientX-t._point1.clientX)):(o.left=o.left-(i.clientX-t._point1.clientX),o.top=o.top-(i.clientY-t._point1.clientY)),t.doScale()}doScale(){const{currentPosition:e,current:t}=this;e.left=e.left+e.xPercent*(e.right-e.left)-this.videoWidth/t*.5,e.left<=0?e.left=0:e.left>this.videoWidth-this.videoWidth/t&&(e.left=this.videoWidth-this.videoWidth/t),e.right=e.left+this.videoWidth/t,e.top=e.top+e.yPercent*(e.bottom-e.top)-this.videoHeight/t*.5,e.top<=0?e.top=0:e.top>this.videoHeight-this.videoHeight/t&&(e.top=this.videoHeight-this.videoHeight/t),e.bottom=e.top+this.videoHeight/t,e.left=parseInt(e.left,10),e.right=parseInt(e.right,10),e.top=parseInt(e.top,10),e.bottom=parseInt(e.bottom,10);try{e.left<e.right&&e.top<e.bottom&&e.bottom<=this.videoHeight&&e.right<=this.videoWidth&&this._setDisplayRegion(e.left,e.right,e.top,e.bottom,1!==t)}catch(e){}}_resetZoom(){this.current=1;const e=this._theme.getFrameInfo(0);this.videoWidth=e.width,this.videoHeight=e.height,this.currentPosition.left=0,this.currentPosition.top=0,this.currentPosition.right=e.width,this.currentPosition.bottom=e.height,this.videoHeight&&this.videoWidth&&this._setDisplayRegion(0,this.videoWidth,0,this.videoHeight,!1),this.enableZoom=!1}_setDisplayRegion(e,t,o,i,n){this._theme&&this._theme.setDisplayRegion(e,t,o,i,n,this.isMobileFullScreen)}get isMobileFullScreen(){return!(!this._theme.options.isMobile||!this._theme.mobileFullScreen)}}return function(n){return function(c){const l=c;let a=!1;const h=(e=>{const t="zoom";return i({name:t,svg:null!=e?e:`<svg\n viewBox="1 1 19 19"\n focusable="false"\n data-icon="${t}"\n width="1em"\n height="1em"\n fill="currentColor"\n aria-hidden="true"\n >\n <path\n d="M8.8,2.6c3.5,0,6.2,2.8,6.2,6.2s-2.8,6.2-6.2,6.2s-6.2-2.8-6.2-6.2S5.3,2.6,8.8,2.6z M8.8,3.9\n c-2.8,0-5,2.2-5,5s2.2,5,5,5s5-2.2,5-5S11.5,3.9,8.8,3.9z M12.7,12.7l3.9,3.9"\n ></path>\n <path d="M11.2,9.5h-5c-0.3,0-0.6-0.3-0.6-0.6s0.3-0.6,0.6-0.6h5c0.3,0,0.6,0.3,0.6,0.6S11.6,9.5,11.2,9.5z"></path>\n <path d="M8.7,12c-0.3,0-0.6-0.3-0.6-0.6v-5c0-0.3,0.3-0.6,0.6-0.6s0.6,0.3,0.6,0.6v5C9.3,11.8,9.1,12,8.7,12z"></path>\n <path\n d="M16.9,17.6c-0.1,0-0.3-0.1-0.4-0.2l-3.9-3.9c-0.2-0.2-0.2-0.6,0-0.8s0.6-0.2,0.8,0l3.9,3.9\n c0.2,0.2,0.2,0.6,0,0.8C17.2,17.5,17,17.6,16.9,17.6z"\n ></path>\n </svg>`})})(null==n?void 0:n.icon),d=l.$container.querySelector(`.${s}`),u=l.$container.querySelector(`.${r}`);if(t(h,`${e}-disable`),u){const i=8,n=new N(u,{bottom:c.options.isMobile?40:80,left:12,maxScale:i,scale:l.options.isMobile?.8:1,onClick:e=>{e===i&&c.message.show(`<span style="padding: 4px 16px;background: #00000080;color: #FFFFFF;font-size: 14px">已经放大到最大倍数${i.toFixed(1)}X</span>`,2e3),1===e&&c.message.show('<span style="padding: 4px 16px;background: #00000080;color: #FFFFFF;font-size: 14px">已经缩小到最小倍数1.0X</span>',2e3)}},c);h.addEventListener("click",(()=>{h.classList.contains(`${e}-disable`)||(a?(n.hide(),o(h,`${e}-active`)):(n.show(),t(h,`${e}-active`)),a=!a)})),l.event.on("EVENT_CALLBACK",(t=>{"appearFirstFrameCallback"===t.data.type&&o(h,`${e}-disable`)})),l.event.on("urlChange",(()=>{n.hide(),a=!1,o(h,`${e}-active`)}))}return d&&d.appendChild(h),h}}}));