From bf543518f72b16b98f2724a96d9929ae1be25d04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= Date: Wed, 11 Dec 2019 19:50:40 +0800 Subject: [PATCH] 1.1.0 --- README.md | 11 +- package.json | 2 +- src/css/app.css | 2 +- src/css/app.scss | 18 ++- src/index.html | 25 ++-- src/js/app.js | 111 +++++++++++++++-- src/lib/drag/index.js | 2 +- src/lib/form/button.js | 2 +- src/lib/form/checkbox.js | 263 +-------------------------------------- src/lib/form/input.js | 4 +- src/lib/form/number.js | 2 +- src/lib/form/progress.js | 2 +- src/lib/form/radio.js | 2 +- src/lib/form/select.js | 2 +- src/lib/form/star.js | 2 +- src/lib/form/switch.js | 2 +- src/lib/icon/index.js | 2 +- src/lib/layer/index.js | 4 +- src/lib/scroll/index.js | 2 +- 19 files changed, 163 insertions(+), 297 deletions(-) diff --git a/README.md b/README.md index daed808..95febe2 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,11 @@ # 伪域名解析工具 -> macos & linux专用。windows自己找别的。 \ No newline at end of file +> macos & linux专用。windows自己找别的。 + + +## Update Logs + + +# v1.1.0 - 2019-12-11 +- 支持域名删除、编辑 +- 支持克隆记录 +- 优化记录编辑、UI \ No newline at end of file diff --git a/package.json b/package.json index 2d4c86f..6e51051 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dns-host", - "version": "1.0.2", + "version": "1.1.0", "description": "伪域名解析", "main": "src/main.js", "scripts": { diff --git a/src/css/app.css b/src/css/app.css index b79879d..c4ba562 100644 --- a/src/css/app.css +++ b/src/css/app.css @@ -1 +1 @@ -html{font-size:1vw;width:100%;height:100%}body{position:fixed;left:0;top:0;display:flex;width:100%;height:100%;line-height:1.5;font-size:1.4rem;color:#62778d}.layout-left{display:flex;flex-direction:column;width:18rem;height:64rem;background:#526273}.layout-left wc-scroll{flex:1}.layout-left .domain-list{width:100%}.layout-left .domain-list .item{display:flex;justify-content:flex-end;align-items:center;height:4rem;padding:0 2rem 0 1rem;color:#f3f5fb;cursor:pointer;transition:background .1s ease-in-out}.layout-left .domain-list .item wc-icon{--size:1.2rem;margin:auto -1.5rem auto .5rem;color:#7e909a}.layout-left .domain-list .item:hover,.layout-left .domain-list .item.active{background:#62778d}.layout-left .domain-list .item.active{border-left:0.3rem solid #ffb618}.layout-left .domain-list .item.blank{justify-content:center;cursor:default}.layout-left .domain-list .item.blank:hover{background:none}.layout-left .action{display:flex;align-items:center;height:5rem;padding:0 1rem}.layout-right{flex:1;display:flex;flex-direction:column;background:#f7f8fb}.layout-right .toolbar{display:flex;align-items:center;justify-content:space-between;height:4rem;padding:0 1.5rem;background:#e8ebf4;box-shadow:0 0.2rem 0.5rem rgba(0,0,0,0.1)}.layout-right .toolbar wc-input{width:20rem}.layout-right .main{overflow:hidden;flex:1;display:flex;flex-direction:column;margin:2rem 1rem;padding:0 .5rem;background:#fff}.layout-right .thead{display:flex;align-items:center;justify-content:center;height:4rem;margin-bottom:.8rem;border-bottom:0.1rem solid #e8ebf4;text-align:center}.layout-right .thead span{flex:1}.layout-right .thead .long{flex:1.5}.layout-right wc-scroll{flex:1}.layout-right .record-list{width:100%;line-height:4rem}.layout-right .record-list .item{display:flex;justify-content:center;align-items:center;height:4rem;padding:0 1rem;border-bottom:0.1rem solid #e8ebf4;text-align:center}.layout-right .record-list .item wc-input,.layout-right .record-list .item span,.layout-right .record-list .item section{flex:1}.layout-right .record-list .item .long{flex:1.5}.layout-right .record-list .item section{display:flex;align-items:center;justify-content:center}.layout-right .record-list .item:hover{background:#f3f5fb}.layout-right .record-list .item:last-child{border-bottom:none}.permission-error{position:fixed;left:0;top:0;z-index:102401;display:flex;flex-direction:column;align-items:center;width:100%;height:100%;padding:5rem;background:rgba(255,233,233,0.95);-webkit-backdrop-filter:blur(0.5rem);backdrop-filter:blur(0.5rem)}.permission-error pre{font-family:'Courier New', Courier, monospace;font-size:1.6rem;color:#eb3b48}.permission-error fieldset{width:60rem;padding:0 3rem 3rem;border:0.1rem solid #ffb618;border-radius:.8rem}.permission-error fieldset legend{padding:0 1rem;font-size:1.6rem}.permission-error fieldset dt{margin-top:2rem;font-weight:bold}.permission-error fieldset code{display:block;padding:.8rem 1rem;margin-top:.8rem;border-left:0.3rem solid #dae1e9;background:rgba(255,255,255,0.3);font-family:'Courier New', Courier, monospace}.permission-error.show{display:flex} +html{font-size:1vw;width:100%;height:100%}body{position:fixed;left:0;top:0;display:flex;width:100%;height:100%;line-height:1.5;font-size:1.4rem;color:#62778d}.layout-left{display:flex;flex-direction:column;width:18rem;height:64rem;background:#526273}.layout-left wc-scroll{flex:1}.layout-left .domain-list{width:100%}.layout-left .domain-list .item{display:flex;justify-content:flex-end;align-items:center;height:4rem;padding:0 2rem 0 1rem;color:#f3f5fb;cursor:pointer;transition:background .1s ease-in-out}.layout-left .domain-list .item wc-icon{--size:1.2rem;margin:auto -1.5rem auto .5rem;color:#7e909a}.layout-left .domain-list .item:hover,.layout-left .domain-list .item.active{background:#62778d}.layout-left .domain-list .item.active{border-left:0.3rem solid #ffb618;color:#ffb618;font-weight:bold}.layout-left .domain-list .item.blank{justify-content:center;cursor:default}.layout-left .domain-list .item.blank:hover{background:none}.layout-left .action{display:flex;align-items:center;height:5rem;padding:0 1rem}.layout-right{flex:1;display:flex;flex-direction:column;background:#f7f8fb}.layout-right .toolbar{display:flex;align-items:center;justify-content:space-between;height:4rem;padding:0 1.5rem;background:#e8ebf4;box-shadow:0 0.2rem 0.5rem rgba(0,0,0,0.1)}.layout-right .toolbar wc-input{width:20rem}.layout-right .main{overflow:hidden;flex:1;display:flex;flex-direction:column;margin:2rem 1rem;padding:0 .5rem;background:#fff}.layout-right .thead{display:flex;align-items:center;justify-content:center;height:4rem;margin-bottom:.8rem;border-bottom:0.1rem solid #e8ebf4;text-align:center}.layout-right .thead span{flex:1}.layout-right .thead .long{flex:1.5}.layout-right wc-scroll{flex:1}.layout-right .record-list{width:100%;line-height:4rem}.layout-right .record-list .item{display:flex;justify-content:center;align-items:center;height:4rem;padding:0 1rem;border-bottom:0.1rem solid #e8ebf4;text-align:center}.layout-right .record-list .item wc-input,.layout-right .record-list .item span,.layout-right .record-list .item section{flex:1}.layout-right .record-list .item .long{flex:1.5}.layout-right .record-list .item section{display:flex;align-items:center;justify-content:center}.layout-right .record-list .item wc-button{margin-left:.5rem}.layout-right .record-list .item:last-child{border-bottom:none}.permission-error{position:fixed;left:0;top:0;z-index:102401;display:flex;flex-direction:column;align-items:center;width:100%;height:100%;padding:5rem;background:rgba(255,233,233,0.95);-webkit-backdrop-filter:blur(0.5rem);backdrop-filter:blur(0.5rem)}.permission-error pre{font-family:'Courier New', Courier, monospace;font-size:1.6rem;color:#eb3b48}.permission-error fieldset{width:60rem;padding:0 3rem 3rem;border:0.1rem solid #ffb618;border-radius:.8rem}.permission-error fieldset legend{padding:0 1rem;font-size:1.6rem}.permission-error fieldset dt{margin-top:2rem;font-weight:bold}.permission-error fieldset code{display:block;padding:.8rem 1rem;margin-top:.8rem;border-left:0.3rem solid #dae1e9;background:rgba(255,255,255,0.3);font-family:'Courier New', Courier, monospace}.permission-error.show{display:flex}.context-menu{display:flex;flex-direction:column;width:10rem;padding:.5rem 0;background:#fff}.context-menu .item{height:3rem;line-height:3rem;padding:0 1.5rem;cursor:pointer}.context-menu .item:hover{background:#f2f5fc} diff --git a/src/css/app.scss b/src/css/app.scss index f06ec94..e615fac 100644 --- a/src/css/app.scss +++ b/src/css/app.scss @@ -38,7 +38,7 @@ body { &:hover, &.active {background:nth($cd, 1);} - &.active {border-left:.3rem solid nth($co, 1);} + &.active {border-left:.3rem solid nth($co, 1);color:nth($co, 1);font-weight:bold;} &.blank { justify-content:center;cursor:default; &:hover {background:none;} @@ -93,8 +93,8 @@ body { wc-input,span,section {flex:1;} .long {flex:1.5;} section {display:flex;align-items:center;justify-content:center;} + wc-button {margin-left:.5rem;} - &:hover {background:nth($cp, 1);} &:last-child {border-bottom:none;} } } @@ -132,3 +132,17 @@ body { &.show {display:flex;} } + +.context-menu { + display:flex; + flex-direction:column; + width:10rem; + padding:.5rem 0; + background:#fff; + + .item { + height:3rem;line-height:3rem;padding:0 1.5rem;cursor:pointer; + + &:hover {background:#f2f5fc;} + } +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index 06b9192..62a7f4a 100644 --- a/src/index.html +++ b/src/index.html @@ -13,11 +13,12 @@
-
    +
    • @@ -44,22 +45,23 @@
      主机记录 - 记录类型 + 类型 记录值 - 操作 + 操作 备注
      • - + A - -
        + +
        删除 + 克隆
        - +
      @@ -93,5 +95,12 @@
+ + + + \ No newline at end of file diff --git a/src/js/app.js b/src/js/app.js index ce63d05..3983bdf 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -9,6 +9,7 @@ import '/lib/form/button.js' import '/lib/form/input.js' import '/lib/form/switch.js' import layer from '/lib/layer/index.js' +import { clickOutside } from '/lib/utils.js' const log = console.log @@ -25,19 +26,23 @@ Anot({ $id: 'app', state: { filter: '', - curr: '', //当前选中的域名 + activeDomain: '', //当前选中的域名 + editDomain: '', // 当前临时要编辑的域名, 即右键菜单选择到的 domains: [], records: [], permissionShow: false }, mounted() { - // this.$refs.preview.show() + // this.$refs.context.show() this.check() + clickOutside(this.$refs.context, ev => { + this.$refs.context.close() + }) }, watch: {}, methods: { addRecord() { - if (this.curr) { + if (this.activeDomain) { this.records.unshift({ record: '', value: '', @@ -61,7 +66,7 @@ Anot({ .then(val => { this.domains.push(val) dict[val] = [] - if (!this.curr) { + if (!this.activeDomain) { this.toggleDomain(val) } this.save() @@ -69,7 +74,7 @@ Anot({ .catch(Anot.noop) }, toggleDomain(name) { - this.curr = name + this.activeDomain = name this.records = dict[name] tmp_records = Object.create(null) for (let it of this.records) { @@ -79,10 +84,78 @@ Anot({ tmp_records[it.record] = [it] } } + document.title = `伪域名解析「 ${name} 」` setTimeout(() => { this.$refs.records.scrollTop = 0 }, 50) }, + showMenu(ev) { + this.$refs.context.close() + var { pageX, pageY } = ev + if (pageY + 70 > 600) { + pageY -= 70 + } + + var elem = ev.target + + if (elem.tagName !== 'LI') { + elem = elem.parentNode + } + this.editDomain = elem.dataset.name + Anot.nextTick(_ => { + this.$refs.context.moveTo({ left: pageX + 'px', top: pageY + 'px' }) + this.$refs.context.show() + }) + }, + confirmAction(ev) { + this.$refs.context.close() + if (ev.target.tagName === 'LI') { + var act = ev.target.dataset.act + + if (act === 'del') { + layer + .confirm(`是否要删除域名「${this.editDomain}」?`, (val, done) => { + if (dict[this.editDomain].length > 0) { + return layer.toast( + '该域名下有主机记录, 请先删除主机记录后再删除域名', + 'error' + ) + } + done() + }) + .then(res => { + delete dict[this.editDomain] + this.domains.remove(this.editDomain) + this.editDomain = '' + this.records.clear() + this.save() + this.toggleDomain(this.domains[0]) + }) + .catch(Anot.noop) + } else if (act === 'edit') { + layer + .prompt(`请输入新的名字「${this.editDomain}」`, (val, done) => { + if (val && val !== this.editDomain) { + if (/^[\w.]+\.[a-z]+$/.test(val)) { + done() + } else { + layer.toast('域名格式错误', 'error') + } + } + }) + .then(val => { + var idx = this.domains.indexOf(this.editDomain) + this.domains.set(idx, val) + dict[val] = dict[this.editDomain] + delete dict[this.editDomain] + this.editDomain = '' + this.save() + this.toggleDomain(val) + }) + .catch(Anot.noop) + } + } + }, check() { var check = ipcRenderer.sendSync('dns-host', { type: 'check' }) @@ -102,6 +175,26 @@ Anot({ this.permissionShow = true } }, + updateCacheDict(item) { + clearTimeout(this.timer) + this.timer = setTimeout(_ => { + tmp_records = Object.create(null) + for (let it of this.records) { + if (tmp_records[it.record]) { + tmp_records[it.record].push(it) + } else { + tmp_records[it.record] = [it] + } + } + }, 1000) + }, + clone(item) { + var params = { ...item } + params.enabled = false + + this.records.unshift(params) + this.$refs.records.scrollTop = 0 + }, // 同一个记录, 允许一条被激活 recordChanges(item) { if (item.enabled) { @@ -115,11 +208,11 @@ Anot({ } }, save() { - if (this.curr) { - dict[this.curr] = this.records.$model - ipcRenderer.send('dns-host', { type: 'set', data: dict }) - layer.toast('保存成功', 'success') + if (this.activeDomain) { + dict[this.activeDomain] = this.records.$model } + ipcRenderer.send('dns-host', { type: 'set', data: dict }) + layer.toast('保存成功', 'success') } } }) diff --git a/src/lib/drag/index.js b/src/lib/drag/index.js index 79ca08d..ed1d3ef 100644 --- a/src/lib/drag/index.js +++ b/src/lib/drag/index.js @@ -1 +1 @@ -"use strict";import Drag from"./core.js";Anot.directive("drag",{priority:1500,init:function(e){e.expr='"'+e.expr+'"',e.overflow=!0,e.axis="xy",e.element.dataset.axis&&(e.axis=e.element.dataset.axis,delete e.element.dataset.axis),e.limit=!1,e.element.dataset.limit&&(e.limit=e.element.dataset.limit,e.overflow=!1,delete e.element.dataset.limit)},update:function(e){var t=this.element;if(e)for(t=this.element.parentNode;t&&(t.classList||Anot.error(`${this.name}=${this.expr}, 解析异常[元素不存在]`),!t.classList.contains(e)&&t.id!==e);)t=t.parentNode;new Drag(t).by(this.element,{limit:this.limit,axis:this.axis,overflow:this.overflow})}}); \ No newline at end of file +"use strict";import Drag from"./core.js";Anot.directive("drag",{priority:1500,init:function(e){e.expr='"'+e.expr+'"',e.overflow=!0,e.axis="xy",e.element.dataset.axis&&(e.axis=e.element.dataset.axis,delete e.element.dataset.axis),e.limit=!1,e.element.dataset.limit&&(e.limit=e.element.dataset.limit,e.overflow=!1,delete e.element.dataset.limit)},update:function(e){var t=this.element;if(e)for(t=this.element.parentNode;t;){if(t.classList||Anot.error(`${this.name}=${this.expr}, 解析异常[元素不存在]`),"WC-LAYER"===t.tagName&&"layer"===e){t=t.root.children[1];break}if(t.classList.contains(e)||t.id===e)break;t=t.parentNode}new Drag(t).by(this.element,{limit:this.limit,axis:this.axis,overflow:this.overflow})}}); \ No newline at end of file diff --git a/src/lib/form/button.js b/src/lib/form/button.js index 2522820..d217e3e 100644 --- a/src/lib/form/button.js +++ b/src/lib/form/button.js @@ -1,7 +1,7 @@ /** * * @authors yutent (yutent@doui.cc) - * @date 2019-09-27 11:36:21 + * @date 2019-12-11 17:59:30 * @version v2.0.1 * */ diff --git a/src/lib/form/checkbox.js b/src/lib/form/checkbox.js index 7855e9a..24ad350 100644 --- a/src/lib/form/checkbox.js +++ b/src/lib/form/checkbox.js @@ -1,273 +1,14 @@ /** * * @authors yutent (yutent@doui.cc) - * @date 2019-09-16 10:23:25 + * @date 2019-12-11 17:59:30 * @version v2.0.1 * */ 'use strict' -const log = console.log - - -import "../icon/index.js" -import { bind, unbind } from "../utils.js" - -export default class Checkbox extends HTMLElement { - static get observedAttributes() { - return ["label","color","value","checked","readonly","disabled"] - } - - constructor() { - super(); - - Object.defineProperty(this, 'root', { - value: this.attachShadow({ mode: 'open' }), - writable: true, - enumerable: false, - configurable: true - }) - Object.defineProperty(this, 'props', { - value: { - label: '', - color: '', - value: [], - checked: false, - readonly: false, - disabled: false - }, - writable: true, - enumerable: false, - configurable: true - }) - - this.root.innerHTML = ` - -` - - - this.__SWITCH__ = this.root.lastElementChild - this.__ICO__ = this.__SWITCH__.children[0] - } - - get value() { - return this.props.value - } - - set value(val) { - log(val, this, this.props.label) - if (Array.isArray(val)) { - this.props.value = val - this.checked = this.props.value.includes(this.props.label) - } else { - console.error('checkbox组件的value必须是数组, 当前为: ' + typeof val) - } - } - - get checked() { - return this.props.checked - } - - set checked(val) { - this.props.checked = !!val - var { value, checked, label, color } = this.props - this.__SWITCH__.classList.toggle('checked', checked) - this.__ICO__.setAttribute('is', 'checkbox-' + (checked ? 'on' : 'off')) - - var idx = value.indexOf(label) - if (checked) { - this.__ICO__.setAttribute('color', color) - if (idx < 0) { - value.push(label) - } - } else { - this.__ICO__.removeAttribute('color') - if (~idx) { - value.splice(idx, 1) - } - } - } - - get readonly() { - return this.props.readonly - } - - set readonly(val) { - var type = typeof val - - if (val === this.props.readonly) { - return - } - if ((type === 'boolean' && val) || type !== 'boolean') { - this.props.readonly = true - this.setAttribute('readonly', '') - } else { - this.props.readonly = false - this.removeAttribute('readonly') - } - } - - get disabled() { - return this.props.disabled - } - - set disabled(val) { - var type = typeof val - - if (val === this.props.disabled) { - return - } - if ((type === 'boolean' && val) || type !== 'boolean') { - this.props.disabled = true - this.setAttribute('disabled', '') - } else { - this.props.disabled = false - this.removeAttribute('disabled') - } - } - - connectedCallback() { - this._handlClick = bind(this, 'click', ev => { - ev.preventDefault() - - if (!this.disabled && !this.readonly) { - this.checked = !this.checked - this.dispatchEvent(new CustomEvent('input')) - } - }) - } - - disconnectedCallback() { - unbind(this, 'click', this._handlClick) - } - - attributeChangedCallback(name, old, val) { -if (val === null || old === val) {return} - switch (name) { - case 'label': - case 'color': - this.props[name] = val - break - - case 'checked': - case 'readonly': - case 'disabled': - this[name] = true - break - } - } -} - +import"../icon/index.js";import{bind,unbind}from"../utils.js";export default class Checkbox extends HTMLElement{static get observedAttributes(){return["label","color","value","checked","readonly","disabled"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{label:"",color:"",value:[],checked:!1,readonly:!1,disabled:!1},writable:!0,enumerable:!1,configurable:!0}),this.root.innerHTML=" ",this.__SWITCH__=this.root.lastElementChild,this.__ICO__=this.__SWITCH__.children[0]}get value(){return this.props.value}set value(e){log(e,this,this.props.label),Array.isArray(e)?(this.props.value=e,this.checked=this.props.value.includes(this.props.label)):console.error("checkbox组件的value必须是数组, 当前为: "+typeof e)}get checked(){return this.props.checked}set checked(e){this.props.checked=!!e;var{value:o,checked:t,label:l,color:r}=this.props;this.__SWITCH__.classList.toggle("checked",t),this.__ICO__.setAttribute("is","checkbox-"+(t?"on":"off"));var s=o.indexOf(l);t?(this.__ICO__.setAttribute("color",r),s<0&&o.push(l)):(this.__ICO__.removeAttribute("color"),~s&&o.splice(s,1))}get readonly(){return this.props.readonly}set readonly(e){var o=typeof e;e!==this.props.readonly&&("boolean"===o&&e||"boolean"!==o?(this.props.readonly=!0,this.setAttribute("readonly","")):(this.props.readonly=!1,this.removeAttribute("readonly")))}get disabled(){return this.props.disabled}set disabled(e){var o=typeof e;e!==this.props.disabled&&("boolean"===o&&e||"boolean"!==o?(this.props.disabled=!0,this.setAttribute("disabled","")):(this.props.disabled=!1,this.removeAttribute("disabled")))}connectedCallback(){this._handlClick=bind(this,"click",e=>{e.preventDefault(),this.disabled||this.readonly||(this.checked=!this.checked,this.dispatchEvent(new CustomEvent("input")))})}disconnectedCallback(){unbind(this,"click",this._handlClick)}attributeChangedCallback(e,o,t){if(null!==t&&o!==t)switch(e){case"label":case"color":this.props[e]=t;break;case"checked":case"readonly":case"disabled":this[e]=!0}}}; if(!customElements.get('wc-checkbox')){ customElements.define('wc-checkbox', Checkbox) diff --git a/src/lib/form/input.js b/src/lib/form/input.js index 485bb8a..b30cbf3 100644 --- a/src/lib/form/input.js +++ b/src/lib/form/input.js @@ -1,14 +1,14 @@ /** * * @authors yutent (yutent@doui.cc) - * @date 2019-12-02 15:38:50 + * @date 2019-12-11 19:38:57 * @version v2.0.1 * */ 'use strict' -import"../scroll/index.js";import"../icon/index.js";import{ebind,bind,unbind,clickOutside}from"../utils.js";const TYPES=["text","textarea","password"],INPUTS={text:'',textarea:''};export default class Input extends HTMLElement{static get observedAttributes(){return["value","icon","type","label","placeholder","mvidx","autofocus","readonly","disabled"]}constructor(){super();var e,t=this.getAttribute("type");"textarea"!==t&&(t="text"),e=INPUTS[t],Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{value:"",icon:"",type:"text",label:"",placeholder:"",mvidx:null,autofocus:!1,readonly:!1,disabled:!1},writable:!0,enumerable:!1,configurable:!0}),this.root.innerHTML=`
${e}
    `,this.props.type=t,this.__OUTER__=this.root.children[1],this.__PREPEND__=this.__OUTER__.children[0],this.__INPUT__=this.__OUTER__.children[1],this.__ICO__=this.__OUTER__.children[2],this.__APPEND__=this.__OUTER__.children[3],this.__LIST__=this.__OUTER__.children[4]}get readonly(){return this.props.readonly}set readonly(e){var t=typeof e;e!==this.props.readonly&&("boolean"===t&&e||"boolean"!==t?(this.props.readonly=!0,this.setAttribute("readonly",""),this.__INPUT__.setAttribute("readonly","")):(this.props.readonly=!1,this.removeAttribute("readonly"),this.__INPUT__.removeAttribute("readonly")))}get disabled(){return this.props.disabled}set disabled(e){var t=typeof e;e!==this.props.disabled&&("boolean"===t&&e||"boolean"!==t?(this.props.disabled=!0,this.setAttribute("disabled",""),this.__INPUT__.setAttribute("disabled","")):(this.props.disabled=!1,this.removeAttribute("disabled"),this.__INPUT__.removeAttribute("disabled")))}get value(){return this.__INPUT__.value}set value(e){this.__INPUT__.value=e}get type(){return this.__INPUT__.type}set type(e){"textarea"!==e&&(this.__INPUT__.type=e)}_moveSelect(e){var{list:t}=this.props;if(t&&t.length){e.preventDefault();var i=38===e.keyCode?-1:1,s=Array.from(this.__LIST__.firstElementChild.firstElementChild.children);null===this.props.mvidx?this.props.mvidx=0:this.props.mvidx+=i,this.props.mvidx<0?this.props.mvidx=0:this.props.mvidx>s.length-1&&(this.props.mvidx=s.length-1),s.forEach((e,t)=>{t===this.props.mvidx?(this.__LIST__.firstElementChild.scrollTop=e.offsetTop-150,e.setAttribute("focus","")):e.removeAttribute("focus")})}}_fetchSelect(e,t){var i=this.props.list[e];this.value=i.value,this.dispatchEvent(new CustomEvent("select",{detail:i})),this._handleChange(t),this.__LIST__.classList.remove("show"),this.props.mvidx=null}connectedCallback(){for(var e=this.__PREPEND__.assignedNodes(),t=this.__APPEND__.assignedNodes();e.length>1;)this.removeChild(e.pop());for(;t.length>1;)this.removeChild(t.pop());e.length&&"textarea"!==this.props.type&&this.__OUTER__.setAttribute("prepend",""),t.length&&"textarea"!==this.props.type&&this.__OUTER__.setAttribute("append","");var{type:i}=this.props;this._handleSubmit=ebind(this.__INPUT__,"keydown",e=>{if(!this.disabled&&!this.readonly){if((38===e.keyCode||40===e.keyCode)&&"text"===this.type)return this._moveSelect(e);if(13===e.keyCode){if("text"===this.type&&null!==this.props.mvidx)return this._fetchSelect(this.props.mvidx,e);("text"===i||"textarea"===i&&(e.ctrlKey||e.metaKey))&&this.dispatchEvent(new CustomEvent("submit",{detail:this.value}))}}}),"text"===i?(this._handleChange=bind(this.__INPUT__,"input",e=>{e.preventDefault(),this.dispatchEvent(new CustomEvent("fetch-suggest",{detail:{value:this.value,send:e=>{this.props.list=e,this._parseSuggestion()}}}))}),this._parseSuggestion=bind(this.__INPUT__,"click",e=>{var{list:t}=this.props;let{x:i,y:s,width:o}=this.getBoundingClientRect();if(t&&t.length){var l=t.map((e,t)=>`
  • ${e.value}
  • `).join("");this.__LIST__.firstElementChild.firstElementChild.innerHTML=l,this.__LIST__.classList.toggle("show",!0),this.__LIST__.style.cssText=`left:${i}px;top:${s+50}px;width:${o}px;`}else this.__LIST__.classList.toggle("show",!1)}),this._inactiveFn=clickOutside(this,e=>{this.__LIST__.classList.remove("show")}),this._handleSelect=bind(this.__LIST__,"click",e=>{"LI"===e.target.tagName&&(this._fetchSelect(e.target.dataset.idx,e),this.dispatchEvent(new CustomEvent("input")))})):this._handleWheel=ebind(this.__INPUT__,"wheel")}disconnectedCallback(){unbind(this.__INPUT__,"wheel",this._handleWheel),unbind(this.__INPUT__,"keydown",this._handleSubmit),unbind(this.__INPUT__,"input",this._handleChange),unbind(document,"mousedown",this._inactiveFn),unbind(this.__LIST__,"click",this._handleSelect)}attributeChangedCallback(e,t,i){if(null!==i&&t!==i)switch(e){case"icon":this.props.icon=i,i?this.__ICO__.setAttribute("is",i):(this.removeAttribute("icon"),this.__ICO__.removeAttribute("is"));break;case"autofocus":this.__INPUT__.setAttribute("autofocus",""),setTimeout(e=>{this.__INPUT__.focus()},10);break;case"label":case"placeholder":this.__INPUT__.setAttribute("placeholder",i);break;case"type":~TYPES.indexOf(i)?this.type=i:this.type="text";break;case"value":this.value=i;break;case"readonly":case"disabled":this[e]=!0}}}; +import"../scroll/index.js";import"../icon/index.js";import{ebind,bind,unbind,clickOutside}from"../utils.js";const TYPES=["text","textarea","password"],INPUTS={text:'',textarea:''};export default class Input extends HTMLElement{static get observedAttributes(){return["value","icon","type","label","placeholder","mvidx","autofocus","readonly","disabled"]}constructor(){super();var e,t=this.getAttribute("type");"textarea"!==t&&(t="text"),e=INPUTS[t],Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{value:"",icon:"",type:"text",label:"",placeholder:"",mvidx:null,autofocus:!1,readonly:!1,disabled:!1},writable:!0,enumerable:!1,configurable:!0}),this.root.innerHTML=`
    ${e}
      `,this.props.type=t,this.__OUTER__=this.root.children[1],this.__PREPEND__=this.__OUTER__.children[0],this.__INPUT__=this.__OUTER__.children[1],this.__ICO__=this.__OUTER__.children[2],this.__APPEND__=this.__OUTER__.children[3],this.__LIST__=this.__OUTER__.children[4]}get readonly(){return this.props.readonly}set readonly(e){var t=typeof e;e!==this.props.readonly&&("boolean"===t&&e||"boolean"!==t?(this.props.readonly=!0,this.setAttribute("readonly",""),this.__INPUT__.setAttribute("readonly","")):(this.props.readonly=!1,this.removeAttribute("readonly"),this.__INPUT__.removeAttribute("readonly")))}get disabled(){return this.props.disabled}set disabled(e){var t=typeof e;e!==this.props.disabled&&("boolean"===t&&e||"boolean"!==t?(this.props.disabled=!0,this.setAttribute("disabled",""),this.__INPUT__.setAttribute("disabled","")):(this.props.disabled=!1,this.removeAttribute("disabled"),this.__INPUT__.removeAttribute("disabled")))}get value(){return this.__INPUT__.value}set value(e){this.__INPUT__.value=e}get type(){return this.__INPUT__.type}set type(e){"textarea"!==e&&(this.__INPUT__.type=e)}_moveSelect(e){var{list:t}=this.props;if(t&&t.length){e.preventDefault();var i=38===e.keyCode?-1:1,s=Array.from(this.__LIST__.firstElementChild.firstElementChild.children);null===this.props.mvidx?this.props.mvidx=0:this.props.mvidx+=i,this.props.mvidx<0?this.props.mvidx=0:this.props.mvidx>s.length-1&&(this.props.mvidx=s.length-1),s.forEach((e,t)=>{t===this.props.mvidx?(this.__LIST__.firstElementChild.scrollTop=e.offsetTop-150,e.setAttribute("focus","")):e.removeAttribute("focus")})}}_fetchSelect(e,t){var i=this.props.list[e];this.value=i.value,this.dispatchEvent(new CustomEvent("select",{detail:i})),this._handleChange(t),this.__LIST__.classList.remove("show"),this.props.mvidx=null}connectedCallback(){for(var e=this.__PREPEND__.assignedNodes(),t=this.__APPEND__.assignedNodes();e.length>1;)this.removeChild(e.pop());for(;t.length>1;)this.removeChild(t.pop());e.length&&"textarea"!==this.props.type&&this.__OUTER__.setAttribute("prepend",""),t.length&&"textarea"!==this.props.type&&this.__OUTER__.setAttribute("append","");var{type:i}=this.props;this._handleSubmit=ebind(this.__INPUT__,"keydown",e=>{if(!this.disabled&&!this.readonly){if((38===e.keyCode||40===e.keyCode)&&"text"===this.type)return this._moveSelect(e);if(13===e.keyCode){if("text"===this.type&&null!==this.props.mvidx)return this._fetchSelect(this.props.mvidx,e);("text"===i||"textarea"===i&&(e.ctrlKey||e.metaKey))&&this.dispatchEvent(new CustomEvent("submit",{detail:this.value}))}}}),"text"===i?(this._handleChange=bind(this.__INPUT__,"input",e=>{e.preventDefault(),this.dispatchEvent(new CustomEvent("fetch-suggest",{detail:{value:this.value,send:e=>{this.props.list=e,this._parseSuggestion()}}}))}),this._parseSuggestion=bind(this.__INPUT__,"click",e=>{var{list:t}=this.props;let{x:i,y:s,width:o}=this.getBoundingClientRect();if(t&&t.length){var l=t.map((e,t)=>`
    • ${e.value}
    • `).join("");this.__LIST__.firstElementChild.firstElementChild.innerHTML=l,this.__LIST__.classList.toggle("show",!0),this.__LIST__.style.cssText=`left:${i}px;top:${s+50}px;width:${o}px;`}else this.__LIST__.classList.toggle("show",!1)}),this._inactiveFn=clickOutside(this,e=>{this.__LIST__.classList.remove("show")}),this._handleSelect=bind(this.__LIST__,"click",e=>{"LI"===e.target.tagName&&(this._fetchSelect(e.target.dataset.idx,e),this.dispatchEvent(new CustomEvent("input")))})):this._handleWheel=ebind(this.__INPUT__,"wheel")}disconnectedCallback(){unbind(this.__INPUT__,"wheel",this._handleWheel),unbind(this.__INPUT__,"keydown",this._handleSubmit),unbind(this.__INPUT__,"input",this._handleChange),unbind(document,"mousedown",this._inactiveFn),unbind(this.__LIST__,"click",this._handleSelect)}attributeChangedCallback(e,t,i){if(null!==i&&t!==i)switch(e){case"icon":this.props.icon=i,i?this.__ICO__.setAttribute("is",i):(this.removeAttribute("icon"),this.__ICO__.removeAttribute("is"));break;case"autofocus":this.__INPUT__.setAttribute("autofocus",""),setTimeout(e=>{this.__INPUT__.focus()},10);break;case"label":case"placeholder":this.__INPUT__.setAttribute("placeholder",i);break;case"type":~TYPES.indexOf(i)?this.type=i:this.type="text";break;case"value":this.value=i;break;case"readonly":case"disabled":this[e]=!0}}}; if(!customElements.get('wc-input')){ customElements.define('wc-input', Input) diff --git a/src/lib/form/number.js b/src/lib/form/number.js index de073a3..4454e0a 100644 --- a/src/lib/form/number.js +++ b/src/lib/form/number.js @@ -1,7 +1,7 @@ /** * * @authors yutent (yutent@doui.cc) - * @date 2019-09-27 11:36:21 + * @date 2019-12-11 17:59:30 * @version v2.0.1 * */ diff --git a/src/lib/form/progress.js b/src/lib/form/progress.js index 50759da..e1bd1be 100644 --- a/src/lib/form/progress.js +++ b/src/lib/form/progress.js @@ -1,7 +1,7 @@ /** * * @authors yutent (yutent@doui.cc) - * @date 2019-09-27 11:36:21 + * @date 2019-12-11 17:59:30 * @version v2.0.1 * */ diff --git a/src/lib/form/radio.js b/src/lib/form/radio.js index 72e413b..e9b3531 100644 --- a/src/lib/form/radio.js +++ b/src/lib/form/radio.js @@ -1,7 +1,7 @@ /** * * @authors yutent (yutent@doui.cc) - * @date 2019-09-27 11:36:21 + * @date 2019-12-11 17:59:30 * @version v2.0.1 * */ diff --git a/src/lib/form/select.js b/src/lib/form/select.js index 77a3894..67e14a7 100644 --- a/src/lib/form/select.js +++ b/src/lib/form/select.js @@ -1,7 +1,7 @@ /** * * @authors yutent (yutent@doui.cc) - * @date 2019-09-27 11:36:21 + * @date 2019-12-11 17:59:30 * @version v2.0.1 * */ diff --git a/src/lib/form/star.js b/src/lib/form/star.js index d6bed42..e98e1ce 100644 --- a/src/lib/form/star.js +++ b/src/lib/form/star.js @@ -1,7 +1,7 @@ /** * * @authors yutent (yutent@doui.cc) - * @date 2019-09-27 11:36:21 + * @date 2019-12-11 17:59:30 * @version v2.0.1 * */ diff --git a/src/lib/form/switch.js b/src/lib/form/switch.js index 3e43d7c..693adb0 100644 --- a/src/lib/form/switch.js +++ b/src/lib/form/switch.js @@ -1,7 +1,7 @@ /** * * @authors yutent (yutent@doui.cc) - * @date 2019-09-27 11:36:21 + * @date 2019-12-11 17:59:30 * @version v2.0.1 * */ diff --git a/src/lib/icon/index.js b/src/lib/icon/index.js index 5f25460..f18e5fb 100644 --- a/src/lib/icon/index.js +++ b/src/lib/icon/index.js @@ -1,7 +1,7 @@ /** * * @authors yutent (yutent@doui.cc) - * @date 2019-09-27 11:36:21 + * @date 2019-12-11 17:59:30 * @version v2.0.1 * */ diff --git a/src/lib/layer/index.js b/src/lib/layer/index.js index df6c3ad..6b126e2 100644 --- a/src/lib/layer/index.js +++ b/src/lib/layer/index.js @@ -1,14 +1,14 @@ /** * * @authors yutent (yutent@doui.cc) - * @date 2019-12-02 15:38:50 + * @date 2019-12-11 17:59:30 * @version v2.0.1 * */ 'use strict' -import"../form/input.js";import Drag from"../drag/core.js";import{nextTick,bind,unbind,clickOutside}from"../utils.js";const LANGUAGES={en:{TITLE:"Dialog",BTNS:["Cancel","OK"]},zh:{TITLE:"提示",BTNS:["取消","确定"]}};LANGUAGES["zh-CN"]=LANGUAGES.zh;const lang=LANGUAGES[window.__ENV_LANG__||navigator.language]||LANGUAGES.en;let uniqueInstance=null,toastInstance=null;const UNIQUE_TYPES=["alert","confirm","prompt"];function renderBtns(t){var e="";return t.forEach((t,s)=>{e+=``}),e}class Layer extends HTMLElement{static get observedAttributes(){return["left","right","top","bottom","from","to","btns","type","title","blur","background","mask","mask-close","mask-color","fixed"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{left:"auto",right:"auto",top:"auto",bottom:"auto",from:Object.create(null),to:Object.create(null),btns:[],type:"",title:"",blur:!1,background:null,mask:!1,"mask-close":!1,"mask-color":null,fixed:!0},writable:!0,enumerable:!1,configurable:!0}),this.root.innerHTML='
      ',this.__TITLE__=this.root.children[1].firstElementChild,this.__BODY__=this.root.children[1].children[1],this.__CTRL__=this.root.children[1].lastElementChild,this.promise=new Promise((t,e)=>{this.resolve=t,this.reject=e})}set title(t){this.props.title=t,t?(this.__TITLE__.firstElementChild?this.__TITLE__.insertBefore(document.createTextNode(t),this.__TITLE__.firstElementChild):this.__TITLE__.textContent=t,this.__TITLE__.style.display="flex"):this.__TITLE__.style.display=""}set type(t){var{btns:e}=this.props;if(t&&!this._handleBtnClick){switch(t){case"alert":for(;e.length>1;)e.splice(0,1);break;case"confirm":case"prompt":for(;e.length>2;)e.splice(0,1);break;case"toast":case"notify":case"frame":if("notify"===t){var s=document.createElement("wc-icon");s.setAttribute("is","close"),this.__TITLE__.appendChild(s)}e=[];break;default:t="common"}this.props.type=t,e.length?(this.__CTRL__.innerHTML=renderBtns(e),this.__CTRL__.style.display="flex"):this.__CTRL__.style.display="",this.setAttribute(t,"")}}set fixed(t){this.props.fixed=!!t,this._updateFixedStat()}_updateFixedStat(){UNIQUE_TYPES.includes(this.props.type)||(this.props.fixed?this._dragIns&&(this._dragIns.destroy(),this._dragIns=null):(this._dragIns=new Drag(this.root.children[1]).by(this.__TITLE__,{overflow:!!this.props.hasOwnProperty("overflow")&&this.props.overflow}),this.removeAttribute("fixed")))}_intercept(t){this.props.intercept?this.props.intercept(t,e=>{delete this.props.intercept,this.resolve(t),this.close()}):(this.resolve(t),this.close())}close(t){if(!1===this.wrapped)if(this._dragIns&&this._dragIns.destroy(),UNIQUE_TYPES.includes(this.props.type)&&(uniqueInstance=null),delete this.promise,unbind(this.__CTRL__,"click",this._handleBtnClick),this.props.from&&!t){let t="opacity:0;";for(let e in this.props.from)t+=`${e}:${this.props.from[e]};`;this.root.children[1].style.cssText+=t,this.timer=setTimeout(()=>{this.parentNode.removeChild(this),this.dispatchEvent(new CustomEvent("close"))},200)}else clearTimeout(this.timer),this.parentNode.removeChild(this),this.dispatchEvent(new CustomEvent("close"));else this.removeAttribute("common"),this.dispatchEvent(new CustomEvent("close"))}show(){!1!==this.wrapped&&this.setAttribute("common","")}connectedCallback(){this.type=this.props.type,this.title=this.props.title,this._handleBtnClick=bind(this.__CTRL__,"click",t=>{if("BUTTON"===t.target.tagName){var e=+t.target.dataset.idx,{type:s}=this.props;switch(s){case"alert":this.resolve(),this.close();break;case"confirm":case"prompt":if(0===e)this.reject(),this.close();else{let t="prompt"===s?this.__INPUT__.value:null;this._intercept(t)}break;default:this._intercept(e)}}}),"prompt"===this.props.type&&(this.__INPUT__=this.__BODY__.firstElementChild.assignedNodes().pop(),this._handleSubmit=bind(this.__INPUT__,"submit",t=>{this._intercept(t.detail)})),this.props.mask&&this.setAttribute("mask",""),this._updateFixedStat(),this.props.mask&&(this._handlMask=clickOutside(this.root.children[1],t=>{t.target===this&&(this.props["mask-close"]?(!1===this.wrapped&&this.reject(null),this.close()):UNIQUE_TYPES.includes(this.props.type)&&(this.root.children[1].classList.toggle("scale",!0),setTimeout(t=>{this.root.children[1].classList.remove("scale")},100)))}),this.props["mask-color"]&&(this.style.backgroundColor=this.props["mask-color"])),this.props.blur&&this.root.children[1].classList.toggle("blur",!0);let t=this.props.from?"":"opacity:1;";if(this.props.background&&(t+=`background: ${this.props.background};`),(this.props.radius||0===this.props.radius)&&(t+=`border-radius: ${this.props.radius};`),this.props.size)for(let e in this.props.size)t+=`${e}:${this.props.size[e]};`;if(this.props.from){for(let e in this.props.from)t+=`${e}:${this.props.from[e]};`;setTimeout(t=>{let e="opacity:1;";for(let t in this.props.to)e+=`${t}:${this.props.to[t]};`;this.root.children[1].style.cssText+=e},50)}t&&(this.root.children[1].style.cssText+=t),"toast"===this.props.type&&(this.timer=setTimeout(()=>{toastInstance=null,this.close()},3e3)),"notify"===this.props.type&&(this._handleClose=bind(this.__TITLE__,"click",t=>{"WC-ICON"===t.target.tagName&&this.close()}))}disconnectedCallback(){unbind(document,"mousedown",this._handlMask),unbind(this.__TITLE__,"click",this._handleClose)}attributeChangedCallback(t,e,s){if(null!==s&&e!==s)switch(t){case"title":case"type":this[t]=s;break;case"mask-color":case"background":this.props[t]=s;break;case"mask":case"mask-close":case"blur":this.props[t]=!0;break;case"left":case"right":case"top":case"bottom":null!==s&&(this.props.from[t]=s,this.props.to=this.props.from,this.removeAttribute(t));break;case"fixed":this.fixed=!0}}}function _layer(t){var e=document.createElement("wc-layer");if(t.type||(t.type="common"),"toast"===t.type){var{type:s,content:o}=t;t={type:s,content:o,from:{top:0},to:{top:"30px"}},toastInstance&&toastInstance.close(!0),toastInstance=e}else e.props.mask=t.mask,!1===t.btns?e.props.btns=[]:t.btns&&t.btns.length?e.props.btns=t.btns:e.props.btns=lang.BTNS.concat(),t.intercept&&"function"==typeof t.intercept&&(e.props.intercept=t.intercept),e.props.mask=t.mask,e.props["mask-close"]=t["mask-close"],t.hasOwnProperty("overflow")&&(e.props.overflow=t.overflow),e.props["mask-color"]=t["mask-color"],e.props.blur=t.blur,e.props.radius=t.radius,e.props.background=t.background,t.size&&"object"==typeof t.size&&(e.props.size=t.size),UNIQUE_TYPES.includes(t.type)&&(uniqueInstance&&uniqueInstance.close(!0),uniqueInstance=e);return t.to&&"object"==typeof t.to&&(e.props.to=t.to,t.from&&"object"==typeof t.from?e.props.from=t.from:e.props.from=t.to),e.props.type=t.type,e.props.title=t.title,t.hasOwnProperty("fixed")&&(e.props.fixed=t.fixed),e.innerHTML=t.content,e.wrapped=!1,document.body.appendChild(e),e.promise}Object.assign(_layer,{alert(t,e=lang.TITLE){return this({type:"alert",title:e,content:t,mask:!0})},confirm(t,e=lang.TITLE,s){return"function"==typeof e&&(s=e,e=lang.TITLE),this({type:"confirm",title:e,content:t,mask:!0,intercept:s})},prompt(t=lang.TITLE,e){return this({type:"prompt",title:t,content:'',mask:!0,intercept:e})},frame(t,e={}){return this({...e,type:"frame",content:``,mask:!0,"mask-close":!0})},notify(t){return this({type:"notify",title:"通知",content:t,blur:!0,from:{right:"-300px",top:0},to:{right:0}})},toast(t,e="info"){switch(e){case"info":case"warn":case"error":break;default:e="info"}return this({content:`\n
      \n \n ${t}\n
      `,type:"toast"})}}),window.layer=_layer;export default _layer; +import"../form/input.js";import Drag from"../drag/core.js";import{nextTick,bind,unbind,clickOutside}from"../utils.js";const LANGUAGES={en:{TITLE:"Dialog",BTNS:["Cancel","OK"]},zh:{TITLE:"提示",BTNS:["取消","确定"]}};LANGUAGES["zh-CN"]=LANGUAGES.zh;const lang=LANGUAGES[window.__ENV_LANG__||navigator.language]||LANGUAGES.en;let uniqueInstance=null,toastInstance=null;const UNIQUE_TYPES=["alert","confirm","prompt"];function renderBtns(t){var e="";return t.forEach((t,s)=>{e+=``}),e}class Layer extends HTMLElement{static get observedAttributes(){return["left","right","top","bottom","from","to","btns","type","title","blur","background","mask","mask-close","mask-color","fixed"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{left:"auto",right:"auto",top:"auto",bottom:"auto",from:Object.create(null),to:Object.create(null),btns:[],type:"",title:"",blur:!1,background:null,mask:!1,"mask-close":!1,"mask-color":null,fixed:!0},writable:!0,enumerable:!1,configurable:!0}),this.root.innerHTML='
      ',this.__TITLE__=this.root.children[1].firstElementChild,this.__BODY__=this.root.children[1].children[1],this.__CTRL__=this.root.children[1].lastElementChild,this.promise=new Promise((t,e)=>{this.resolve=t,this.reject=e})}set title(t){this.props.title=t,t?(this.__TITLE__.firstElementChild?this.__TITLE__.insertBefore(document.createTextNode(t),this.__TITLE__.firstElementChild):this.__TITLE__.textContent=t,this.__TITLE__.style.display="flex"):this.__TITLE__.style.display=""}set type(t){var{btns:e}=this.props;if(t&&!this._handleBtnClick){switch(t){case"alert":for(;e.length>1;)e.splice(0,1);break;case"confirm":case"prompt":for(;e.length>2;)e.splice(0,1);break;case"toast":case"notify":case"frame":if("notify"===t){var s=document.createElement("wc-icon");s.setAttribute("is","close"),this.__TITLE__.appendChild(s)}e=[];break;default:t="common"}this.props.type=t,e.length?(this.__CTRL__.innerHTML=renderBtns(e),this.__CTRL__.style.display="flex"):this.__CTRL__.style.display="",this.setAttribute(t,"")}}set fixed(t){this.props.fixed=!!t,this._updateFixedStat()}_updateFixedStat(){UNIQUE_TYPES.includes(this.props.type)||(this.props.fixed?this._dragIns&&(this._dragIns.destroy(),this._dragIns=null):(this._dragIns=new Drag(this.root.children[1]).by(this.__TITLE__,{overflow:!!this.props.hasOwnProperty("overflow")&&this.props.overflow}),this.removeAttribute("fixed")))}_intercept(t){this.props.intercept?this.props.intercept(t,e=>{delete this.props.intercept,this.resolve(t),this.close()}):(this.resolve(t),this.close())}close(t){if(!1===this.wrapped)if(this._dragIns&&this._dragIns.destroy(),UNIQUE_TYPES.includes(this.props.type)&&(uniqueInstance=null),delete this.promise,unbind(this.__CTRL__,"click",this._handleBtnClick),this.props.from&&!t){let t="opacity:0;";for(let e in this.props.from)t+=`${e}:${this.props.from[e]};`;this.root.children[1].style.cssText+=t,this.timer=setTimeout(()=>{this.parentNode.removeChild(this),this.dispatchEvent(new CustomEvent("close"))},200)}else clearTimeout(this.timer),this.parentNode.removeChild(this),this.dispatchEvent(new CustomEvent("close"));else this.removeAttribute("common"),this.dispatchEvent(new CustomEvent("close"))}show(){!1!==this.wrapped&&this.setAttribute("common","")}moveTo(t={}){var e="";for(var s in t)e+=`${s}:${t[s]};`;this.root.children[1].style.cssText+=e}connectedCallback(){this.type=this.props.type,this.title=this.props.title,this._handleBtnClick=bind(this.__CTRL__,"click",t=>{if("BUTTON"===t.target.tagName){var e=+t.target.dataset.idx,{type:s}=this.props;switch(s){case"alert":this.resolve(),this.close();break;case"confirm":case"prompt":if(0===e)this.reject(),this.close();else{let t="prompt"===s?this.__INPUT__.value:null;this._intercept(t)}break;default:this._intercept(e)}}}),"prompt"===this.props.type&&(this.__INPUT__=this.__BODY__.firstElementChild.assignedNodes().pop(),this._handleSubmit=bind(this.__INPUT__,"submit",t=>{this._intercept(t.detail)})),this.props.mask&&this.setAttribute("mask",""),this._updateFixedStat(),this.props.mask&&(this._handlMask=clickOutside(this.root.children[1],t=>{t.target===this&&(this.props["mask-close"]?(!1===this.wrapped&&this.reject(null),this.close()):UNIQUE_TYPES.includes(this.props.type)&&(this.root.children[1].classList.toggle("scale",!0),setTimeout(t=>{this.root.children[1].classList.remove("scale")},100)))}),this.props["mask-color"]&&(this.style.backgroundColor=this.props["mask-color"])),this.props.blur&&this.root.children[1].classList.toggle("blur",!0);let t=this.props.from?"":"opacity:1;";if(this.props.background&&(t+=`background: ${this.props.background};`),(this.props.radius||0===this.props.radius)&&(t+=`border-radius: ${this.props.radius};`),this.props.size)for(let e in this.props.size)t+=`${e}:${this.props.size[e]};`;if(this.props.from){for(let e in this.props.from)t+=`${e}:${this.props.from[e]};`;setTimeout(t=>{let e="opacity:1;";for(let t in this.props.to)e+=`${t}:${this.props.to[t]};`;this.root.children[1].style.cssText+=e},50)}t&&(this.root.children[1].style.cssText+=t),"toast"===this.props.type&&(this.timer=setTimeout(()=>{toastInstance=null,this.close()},3e3)),"notify"===this.props.type&&(this._handleClose=bind(this.__TITLE__,"click",t=>{"WC-ICON"===t.target.tagName&&this.close()}))}disconnectedCallback(){unbind(document,"mousedown",this._handlMask),unbind(this.__TITLE__,"click",this._handleClose)}attributeChangedCallback(t,e,s){if(null!==s&&e!==s)switch(t){case"title":case"type":this[t]=s,this.removeAttribute(t);break;case"mask-color":case"background":this.props[t]=s;break;case"mask":case"mask-close":case"blur":this.props[t]=!0;break;case"left":case"right":case"top":case"bottom":null!==s&&(this.props.from[t]=s,this.props.to=this.props.from,this.removeAttribute(t));break;case"fixed":this.fixed=!0}}}function _layer(t){var e=document.createElement("wc-layer");if(t.type||(t.type="common"),"toast"===t.type){var{type:s,content:o}=t;t={type:s,content:o,from:{top:0},to:{top:"30px"}},toastInstance&&toastInstance.close(!0),toastInstance=e}else e.props.mask=t.mask,!1===t.btns?e.props.btns=[]:t.btns&&t.btns.length?e.props.btns=t.btns:e.props.btns=lang.BTNS.concat(),t.intercept&&"function"==typeof t.intercept&&(e.props.intercept=t.intercept),e.props.mask=t.mask,e.props["mask-close"]=t["mask-close"],t.hasOwnProperty("overflow")&&(e.props.overflow=t.overflow),e.props["mask-color"]=t["mask-color"],e.props.blur=t.blur,e.props.radius=t.radius,e.props.background=t.background,t.size&&"object"==typeof t.size&&(e.props.size=t.size),UNIQUE_TYPES.includes(t.type)&&(uniqueInstance&&uniqueInstance.close(!0),uniqueInstance=e);return t.to&&"object"==typeof t.to&&(e.props.to=t.to,t.from&&"object"==typeof t.from?e.props.from=t.from:e.props.from=t.to),e.props.type=t.type,e.props.title=t.title,t.hasOwnProperty("fixed")&&(e.props.fixed=t.fixed),e.innerHTML=t.content,e.wrapped=!1,document.body.appendChild(e),e.promise}Object.assign(_layer,{alert(t,e=lang.TITLE){return this({type:"alert",title:e,content:t,mask:!0})},confirm(t,e=lang.TITLE,s){return"function"==typeof e&&(s=e,e=lang.TITLE),this({type:"confirm",title:e,content:t,mask:!0,intercept:s})},prompt(t=lang.TITLE,e){return this({type:"prompt",title:t,content:'',mask:!0,intercept:e})},frame(t,e={}){return this({...e,type:"frame",content:``,mask:!0,"mask-close":!0})},notify(t){return this({type:"notify",title:"通知",content:t,blur:!0,from:{right:"-300px",top:0},to:{right:0}})},toast(t,e="info"){switch(e){case"info":case"warn":case"error":break;default:e="info"}return this({content:`\n
      \n \n ${t}\n
      `,type:"toast"})}}),window.layer=_layer;export default _layer; if(!customElements.get('wc-layer')){ customElements.define('wc-layer', Layer) diff --git a/src/lib/scroll/index.js b/src/lib/scroll/index.js index 4fb5983..030fb8b 100644 --- a/src/lib/scroll/index.js +++ b/src/lib/scroll/index.js @@ -1,7 +1,7 @@ /** * * @authors yutent (yutent@doui.cc) - * @date 2019-12-02 15:38:50 + * @date 2019-12-11 17:59:30 * @version v2.0.1 * */