UNPKG

@ezuikit/theme-plugin-zoom

Version:

zoom

9 lines (8 loc) • 9 kB
1
2
3
4
5
6
7
8
9
/* * * @ezuikit/theme-plugin-zoom v0.1.0 * Copyright (c) 2024-3-23 Ezviz-OpenBiz * Released under MIT the License. * */ import{plusCircleIcon as t,minusCircleIcon as e,zoomIcon as o}from"@ezuikit/icons";import{FOOTER_LEFT_CLS as i,FOOTER_TOP_CLS as n}from"@ezuikit/theme-plugin-footer";import{throttle as r}from"lodash-es";import{addClass as s,PREFIX_CLASS_NAME as c,removeClass as h}from"@ezuikit/utils-dom";!function(t,e){void 0===e&&(e={});var o=e.insertAt;if(t&&"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=t:n.appendChild(document.createTextNode(t))}}(':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}');const l={maxScale:8,left:0,bottom:0,scale:1,onClick:()=>{}},a="ezui-zoom-tool";class d{constructor(t,e={},o){this._current=1,this.$container=t,this.options=Object.assign({},l,e),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",(t=>{"appearFirstFrameCallback"===t.data.type&&this._resetZoom()}))}get current(){return this._current}set current(t){if(t<=0||t>this.options.maxScale)return;this._current=+t.toFixed();const e=this.$container.querySelector(`.${a}-current`);e&&(e.innerHTML=`${this._current.toFixed()}X`),this._renderProgressPercent()}show(){this.$zoomToolContainer.style.display="inline-block"}hide(){this.$zoomToolContainer.style.display="none",this._resetZoom()}_renderProgressPercent(){const t=this.$container.querySelector(`.${a}-progress-percent`);if(t){let e=this._current/this.options.maxScale*100;e<0&&(e=0),e>100&&(e=100),t.style.height=`${e}%`}}render(){var o,i,n,s;const c=document.createElement("div");return c.classList.add(a),c.style.bottom=this.options.bottom+"px",c.style.left=this.options.left+"px",c.style.transform="scale("+this.options.scale+")",c.innerHTML=`\n <div class="${a}-container">\n <div class="${a}-current">1.0X</div>\n <div class="${a}-btn-plus"></div>\n <div class="${a}-progress">\n <div class="${a}-progress-percent"></div>\n </div>\n <div class="${a}-btn-minus"></div>\n </div>`,null===(o=c.querySelector(`.${a}-btn-plus`))||void 0===o||o.appendChild(t()),null===(i=c.querySelector(`.${a}-btn-plus`))||void 0===i||i.addEventListener("click",(t=>{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),t.stopPropagation(),t.preventDefault()})),null===(n=c.querySelector(`.${a}-btn-minus`))||void 0===n||n.appendChild(e()),null===(s=c.querySelector(`.${a}-btn-minus`))||void 0===s||s.addEventListener("click",r((()=>{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(c),this._event(),c}_event(){const t=setInterval((()=>{const e=document.getElementById(`${this._theme.options.id}-container-container-0`);clearInterval(t),this._theme.options.isMobile?e&&(e.addEventListener("touchstart",(t=>this.onTouchstart(t))),e.addEventListener("touchend",(t=>this.onTouchend(t)))):e&&(e.addEventListener("mousedown",(t=>this.onMouseDown(t))),e.addEventListener("mouseup",(t=>this.onMouseUp(t))))}),100)}onMouseDown(t){1!==this.current&&(this._moveX=t.clientX,this._moveY=t.clientY)}onMouseUp(t){const{currentPosition:e}=this;1!==this.current&&(e.left=e.left-(t.clientX-this._moveX),e.top=e.top-(t.clientY-this._moveY),this.doScale())}onTouchstart(t){if(1===this.current)return;if(!this.inited){const t=this._theme.getFrameInfo(0);this.videoWidth=t.width,this.videoHeight=t.height,this.currentPosition.left=0,this.currentPosition.top=0,this.isMobileFullScreen?(this.currentPosition.right=t.height,this.currentPosition.bottom=t.width):(this.currentPosition.right=t.width,this.currentPosition.bottom=t.height),this.inited=!0}const e=t.touches[0];if(e){const t={clientX:0,clientY:0};t.clientX=e.clientX,t.clientY=e.clientY,this._point1=t}}onTouchend(t){const e=this,{currentPosition:o}=this;if(1===this.current)return;const i=t.changedTouches[0];this.isMobileFullScreen?(o.left=o.left-(i.clientY-e._point1.clientY),o.top=o.top+(i.clientX-e._point1.clientX)):(o.left=o.left-(i.clientX-e._point1.clientX),o.top=o.top-(i.clientY-e._point1.clientY)),e.doScale()}doScale(){const{currentPosition:t,current:e}=this;t.left=t.left+t.xPercent*(t.right-t.left)-this.videoWidth/e*.5,t.left<=0?t.left=0:t.left>this.videoWidth-this.videoWidth/e&&(t.left=this.videoWidth-this.videoWidth/e),t.right=t.left+this.videoWidth/e,t.top=t.top+t.yPercent*(t.bottom-t.top)-this.videoHeight/e*.5,t.top<=0?t.top=0:t.top>this.videoHeight-this.videoHeight/e&&(t.top=this.videoHeight-this.videoHeight/e),t.bottom=t.top+this.videoHeight/e,t.left=parseInt(t.left,10),t.right=parseInt(t.right,10),t.top=parseInt(t.top,10),t.bottom=parseInt(t.bottom,10);try{t.left<t.right&&t.top<t.bottom&&t.bottom<=this.videoHeight&&t.right<=this.videoWidth&&this._setDisplayRegion(t.left,t.right,t.top,t.bottom,1!==e)}catch(t){}}_resetZoom(){this.current=1;const t=this._theme.getFrameInfo(0);this.videoWidth=t.width,this.videoHeight=t.height,this.currentPosition.left=0,this.currentPosition.top=0,this.currentPosition.right=t.width,this.currentPosition.bottom=t.height,this.videoHeight&&this.videoWidth&&this._setDisplayRegion(0,this.videoWidth,0,this.videoHeight,!1),this.enableZoom=!1}_setDisplayRegion(t,e,o,i,n){this._theme&&this._theme.setDisplayRegion(t,e,o,i,n,this.isMobileFullScreen)}get isMobileFullScreen(){return!(!this._theme.options.isMobile||!this._theme.mobileFullScreen)}}function p(t){return function(e){const r=e;let l=!1;const a=o(null==t?void 0:t.icon),p=r.$container.querySelector(`.${i}`),u=r.$container.querySelector(`.${n}`);if(s(a,`${c}-disable`),u){const t=8,o=new d(u,{bottom:e.options.isMobile?40:80,left:12,maxScale:t,scale:r.options.isMobile?.8:1,onClick:o=>{o===t&&e.message.show(`<span style="padding: 4px 16px;background: #00000080;color: #FFFFFF;font-size: 14px">已经放大到最大倍数${t.toFixed(1)}X</span>`,2e3),1===o&&e.message.show('<span style="padding: 4px 16px;background: #00000080;color: #FFFFFF;font-size: 14px">已经缩小到最小倍数1.0X</span>',2e3)}},e);a.addEventListener("click",(()=>{a.classList.contains(`${c}-disable`)||(l?(o.hide(),h(a,`${c}-active`)):(o.show(),s(a,`${c}-active`)),l=!l)})),r.event.on("EVENT_CALLBACK",(t=>{"appearFirstFrameCallback"===t.data.type&&h(a,`${c}-disable`)})),r.event.on("urlChange",(()=>{o.hide(),l=!1,h(a,`${c}-active`)}))}return p&&p.appendChild(a),a}}export{p as default};