sonist/dist/layer/index.js

"use strict";import "../drag/index.js";importCss("/css/layer-normal.css");Anot.ui.layer="1.0.0-normal";const LANGUAGES={en:{TITLE:"Dialog",YES_BTN:"OK",NO_BTN:"Cancel",ERROR:"The layer instance is not exists",NEED_CONTAINER:'layer "tips" require a DOM object as container'},zh:{TITLE:"提示",YES_BTN:"确定",NO_BTN:"取消",ERROR:"要关闭的layer实例不存在",NEED_CONTAINER:"tips类型需要指定一个元素节点作为容器"},"zh-TW":{TITLE:"提示",YES_BTN:"確定",NO_BTN:"取消",ERROR:"要關閉的layer實例不存在",NEED_CONTAINER:"tips类型需要指定一個元素節點作爲容器"}};LANGUAGES["zh-CN"]=LANGUAGES.zh;const lang=LANGUAGES[window.__ENV_LANG__||navigator.language]||LANGUAGES.en;let layerDom={},layerObj={},unique=null,lid=0,defconf={type:1,background:"#fff",mask:!0,maskClose:!1,maskColor:null,radius:"0px",area:["auto","auto"],title:lang.TITLE,menubar:!0,content:"",fixed:!1,shift:"cc",offset:[],btns:[lang.YES_BTN,lang.NO_BTN]};const $doc=Anot(document),uuid=function(){return"layer-"+lid++},close=function(e){if("string"!=typeof e&&"number"!=typeof e)return Anot.error(lang.ERROR);if(/^layerwrap\-/.test(e)||layerObj["layerwrap-"+e])try{if(e=(layerObj["layerwrap-"+e]?"layerwrap-":"")+e,!layerObj[e].show)return;layerObj[e].parentElem.replaceChild(layerObj[e].wrap,layerDom[e][0]),layerObj[e].wrap.style.display="none",layerObj[e].show=!1}catch(e){}else{unique=null;try{layerDom[e][0].classList.add("shift"),layerDom[e][1].classList.add("shift"),layerDom[e][0].style.opacity="",layerDom[e][1].style.opacity=0,setTimeout(function(){layerDom[e][0].parentNode.removeChild(layerDom[e][0]),delete layerDom[e],delete Anot.vmodels[e]},200)}catch(e){}}document.body.style.overflow=""},repeat=function(e,t){let o=0,s="";for(;o<t;)s+=e,o++;return s},fixOffset=function(e){return e||0===e?e:"auto"};class __layer__{get dot(){return{1:1,2:1,3:5,4:5,5:9}}constructor(e){if(e){let{yes:t,no:o,success:s}=e;delete e.yes,delete e.no,delete e.success,this.__init__({state:{...e},props:{yes:t,no:o,success:s}}).append().show()}this.timeout=null}__init__(e){let t=e.$id||uuid();return this.init={$id:t,state:{...defconf,...e.state},props:e.props,skip:["area","shift","offset","mask","maskClose","container","follow"],methods:{shake(){this.$refs.layer.classList.add("scale"),setTimeout(()=>{this.$refs.layer.classList.remove("scale")},100)},onMaskClick:function(){this.type<4&&!this.maskClose?this.shake():this.maskClose&&this.close()},handleConfirm:function(){if(3===this.type&&!this.prompt)return this.shake();if("function"==typeof this.props.yes){let e=[this.$id];3===this.type&&e.unshift(this.prompt),this.props.yes.apply(this,e)}else this.close()},handleCancel:function(){"function"==typeof this.props.no?this.props.no.call(this,this.$id):this.close()},close:function(){close(this.$id)},cancelBubble:function(e){e.cancelBubble=!0}},mounted:function(){"function"==typeof this.props.success&&this.props.success.call(this)}},4===this.init.state.type&&(this.init.methods.autoSize=function(){let{layer:e,frame:t}=this.$refs;t.onload=function(){setTimeout(function(){try{let o=t.contentWindow.document.body,{clientWidth:s,clientHeight:n}=o;Anot(e).css({width:s,height:n,marginLeft:-s/2,marginTop:-n/2}),Anot(t).css({height:n})}catch(e){}},500)}}),this}create(){let{state:e,$id:t}=this.init,o=document.createElement("div"),s=document.createElement("div");if(o.setAttribute("anot",t),o.setAttribute(":click","onMaskClick"),o.classList.add("do-layer"),e.mask&&(o.classList.add("mask"),e.container&&e.container!==document.body&&o.classList.add("inner")),e.maskColor&&(o.style.background=e.maskColor),s.classList.add("layer-box"),s.classList.add("skin-normal"),e.extraClass&&(s.classList.add(e.extraClass),delete e.extraClass),"string"==typeof e.shift)s.classList.add("__"+e.shift);else for(let t in e.shift){let o=e.shift[t];o+=isFinite(o)?"px":"",s.style.cssText+=`${t}: ${o};`}e.toast?s.classList.add("type-toast"):s.classList.add("type-"+e.type),s.setAttribute("ref","layer"),s.setAttribute(":click","cancelBubble"),s.style.cssText+="border-radius:"+e.radius+"px",e.menubar||e.fixed||(s.setAttribute(":drag",""),s.setAttribute("data-limit","window"));var n="";"auto"!==e.area[0]&&(n+="width: "+e.area[0]+";"),"auto"!==e.area[1]&&(n+="height: "+e.area[1]+";");let i="";return 5===e.type&&(i+='<i class="arrow"></i>'),s.innerHTML=`\n      ${this.mkMenubar()}\n      <div\n        class="layer-content do-fn-cl"\n        style="${n}"\n        ${e.wrap||6===e.type?"":':html="content"'}>\n\n        ${6===e.type?this.mkLoading(e.load):""}\n      </div>\n      ${this.mkCtrl()}\n      ${i}\n    `,delete e.wrap,o.appendChild(s),[o,s]}mkLoading(e){return`\n      <div class="loading style-${e}">\n        <span class="dot-box">\n          ${repeat(1===e?'<i class="do-icon-loading"></i>':2===e?'<i class="do-icon-app2"></i>':"<i></i>",this.dot[e])}\n        </span>\n      </div>\n    `}mkMenubar(){let{menubar:e,fixed:t}=this.init.state,o="";return e&&(o=`\n        <div class="layer-title do-fn-noselect"\n          :text="title"\n          ${t?"":':drag="layer-box" data-limit="window"'}>\n        </div>\n      `),o}mkCtrl(){let{type:e}=this.init.state;if(e>3)return"";{let t="",o='\n        <a class="action-yes"\n          :click="handleConfirm"\n          tabindex="-1"\n          :text="btns[0]"\n          ></a>\n        ';return e>1&&(o='\n        <a class="action-no"\n          :click="handleCancel"\n          :text="btns[1]"\n          ></a>\n        '+o),t=`\n        <div class="layer-ctrl do-fn-noselect">\n          ${o}\n        </div>\n      `}}append(){let{state:e,$id:t}=this.init,o=e.container;return e.type<4&&(unique&&close(unique),unique=t),layerDom[t]=this.create(),delete e.toast,this.toast=!0,o||(o=document.body),o.appendChild(layerDom[t][0]),this.vm=Anot(this.init),this}show(){let{state:e,$id:t}=this.init,o=(this.vm,e.container);setTimeout(function(){let s={background:e.background},n=getComputedStyle(layerDom[t][1]);if(5===e.type){s.color=e.color,s.opacity=1;let i=Anot(o),a=i[0].querySelector(".arrow"),r=i.innerWidth(),l=i.innerHeight(),c=i.offset().left-$doc.scrollLeft(),d=i.offset().top-$doc.scrollTop(),p=parseInt(n.width),f=parseInt(n.height),y=["top"];Anot(layerDom[t][1]).css(s),i.bind("mouseenter",o=>{let s={visibility:"visible"};c=i.offset().left-$doc.scrollLeft(),(d=i.offset().top-$doc.scrollTop())+18<f?(y[0]="bottom",a.style.borderBottomColor=e.background,s.top=d+l+8):(a.style.borderTopColor=e.background,s.top=d-f-8),c+.7*r+p>window.innerWidth?(s.left=c+.3*r-p,y[1]="left"):s.left=c+.7*r,a.classList.add("offset-"+y.join("-")),Anot(layerDom[t][1]).css(s)}),i.bind("mouseleave",()=>{setTimeout(()=>{a.classList.remove("offset-"+y.join("-")),y=["top"],a.style.borderBottomColor="",a.style.borderTopColor="",layerDom[t][1].style.visibility="hidden"},100)})}else{let o={opacity:1};e.offset?(o.top=fixOffset(e.offset[0]),o.right=fixOffset(e.offset[1]),o.bottom=fixOffset(e.offset[2]),o.left=fixOffset(e.offset[3]),"auto"===o.left&&"auto"===o.right&&(o.left="50%",s.marginLeft=-parseInt(n.width)/2),"auto"===o.top&&"auto"===o.bottom&&(o.top="50%",s.marginTop=-parseInt(n.height)/2)):s=Object.assign(s,{marginLeft:-parseInt(n.width)/2,marginTop:-parseInt(n.height)/2}),Anot(layerDom[t][1]).css(s),setTimeout(()=>{document.body.style.overflow="hidden",layerDom[t][1].classList.add("shift"),setTimeout(s=>{Anot(layerDom[t][1]).css(o),setTimeout(o=>{try{layerDom[t][1].classList.remove("shift"),layerDom[t][1].classList.remove("__"+e.shift)}catch(e){}},500)},50)},50)}},4),e.type>3&&(e.timeout>0?(clearTimeout(this.timeout),this.timeout=setTimeout(()=>{clearTimeout(this.timeout),close(t),6===e.type&&this.vm.props.yes.call(this.vm,t)},e.timeout)):6===e.type&&this.vm.props.yes.call(this.vm,t))}}const _layer={alert(e,t,o){let s={content:e,fixed:!0};return"function"==typeof t?s.yes=t:(t&&(s.title=t+""),o&&"function"==typeof o&&(s.yes=o)),_layer.open(s)},confirm(e,t,o,s){let n={content:e,fixed:!0,type:2};return"function"==typeof t?(n.yes=t,"function"==typeof o&&(n.no=o)):(t&&(n.title=t+""),o&&"function"==typeof o&&(n.yes=o),s&&"function"==typeof s&&(n.no=s)),_layer.open(n)},frame(e,t={}){let o={content:`<iframe ref="frame" class="frame-box" src="${e}"></iframe>`,menubar:!1,maskClose:!0,type:4,...t};return _layer.open(o)},toast(e,t="info",o=2500){switch("number"==typeof t&&(o=t,t="info"),t){case"info":case"warn":break;case"error":t="deny";break;default:t="info"}let s={content:`\n      <mark class="toast-box style-${t}">\n        <i class="do-icon-${t}"></i>\n        ${e}\n      </mark>`,menubar:!1,mask:!1,type:7,shift:"tc",timeout:o,offset:[50,"auto"],fixed:!0,toast:!0};return _layer.open(s)},load:(e,t,o)=>(e=(e>>>=0)<1?1:e>5?5:e,"function"==typeof t?(o=t,t=null):(t instanceof HTMLElement||(t=null),"function"!=typeof o&&(o=Anot.noop)),_layer.open({container:t,type:6,load:e,yes:o,menubar:!1,background:"none",shift:"ct",fixed:!0})),tips:(e,t,o={})=>t instanceof HTMLElement?(o.background||(o.background="rgba(0,0,0,.5)"),o.color||(o.color="#fff"),Object.assign(o,{container:t,content:e,type:5,fixed:!0,mask:!1,menubar:!1,timeout:0}),_layer.open(o)):Anot.error(lang.NEED_CONTAINER),prompt(e,t){if("function"!=typeof t)return console.error("argument [callback] requires a function, but "+typeof t+" given");let o={type:3,prompt:"",title:e,content:'<input class="prompt-value" data-duplex-focus :class="{alert: !prompt}" :duplex="prompt" />',fixed:!0,yes:t};return _layer.open(o)},close:close,open(e){if("string"==typeof e){if(layerObj[e="layerwrap-"+e])return layerObj[e].show?e:(layerObj[e].show=!0,layerObj[e].parentElem.appendChild(layerDom[e][0]),layerDom[e][0].querySelector(".layer-content").appendChild(layerObj[e].wrap),layerObj[e].wrap.style.display="",Anot.vmodels[e]||Anot(layerObj[e].obj.init),layerObj[e].obj.show(),e);throw new Error(lang.ERROR)}return new __layer__(e).init.$id},version:Anot.ui.layer};Anot.directive("layer",{priority:8090,init:function(e){e.element.removeAttribute(e.name),e.param&&"tips"===e.param||(e.param="",e.element.style.display="none")},update:function(e){if(!e)return console.error(this),console.error(`SyntaxError: Unexpected [${this.name}=${this.expr}]`);let t=Object.assign({type:7,wrap:!0},this.element.dataset);if(this.param){if("tips"===this.param){let o=document.createElement("div"),s=document.createElement("span"),n=document.createElement("i");o.className="do-layer__tips",s.className="layer-content",n.className="arrow",s.textContent=e,o.appendChild(s),o.appendChild(n),this.element.appendChild(o),t.color&&(i.color=t.color),t.color&&(i.background=t.background);let i={},a=getComputedStyle(o),r=Anot(this.element),l=r.innerWidth(),c=r.innerHeight(),d=r.offset().left-$doc.scrollLeft(),p=r.offset().top-$doc.scrollTop(),f=parseInt(a.width),y=parseInt(a.height),u=["top"];Anot(o).css(i),r.bind("mouseenter",e=>{let s={visibility:"visible"};d=r.offset().left-$doc.scrollLeft(),(p=r.offset().top-$doc.scrollTop())+18<y?(u[0]="bottom",n.style.borderBottomColor=t.background,s.top=p+c+8):(n.style.borderTopColor=t.background,s.top=p-y-8),d+.7*l+f>window.innerWidth?(s.left=d+.3*l-f,u[1]="left"):s.left=d+.7*l,n.classList.add("offset-"+u.join("-")),Anot(o).css(s)}),r.bind("mouseleave",()=>{setTimeout(()=>{n.classList.remove("offset-"+u.join("-")),u=["top"],n.style.borderBottomColor="",n.style.borderTopColor="",o.style.visibility="hidden"},100)})}}else{let o={$id:"layerwrap-"+e,state:t,props:{}};t.hasOwnProperty("area")&&(t.area=t.area.split(",")),t.hasOwnProperty("offset")&&(t.offset=t.offset.split(",")),t.hasOwnProperty("btns")&&(t.btns=t.btns.split(",")),t.hasOwnProperty("menubar")||(t.menubar=!1);let s=(new __layer__).__init__(o);for(let e in this.element.dataset)delete this.element.dataset[e];layerObj[s.init.$id]={obj:s,parentElem:this.element.parentNode,wrap:this.element,show:!1},layerDom[s.init.$id]=s.create()}}}),window.layer=_layer;export default _layer;