更新layer

src/layer/next.wc

@@ -42,6 +42,9 @@
     transform: scale(1.02);
     transition: transform 0.1s linear;
   }
+  &.blur {
+    backdrop-filter: blur(5px);
+  }
 
   &:active {
     z-index: 65536;
@@ -178,8 +181,7 @@ const LANGUAGES = {
 LANGUAGES['zh-CN'] = LANGUAGES.zh
 const lang =
   LANGUAGES[window.__ENV_LANG__ || navigator.language] || LANGUAGES.en
-let layerDom = {}
+
-let layerObj = {}
 let unique = null // 储存当前打开的1/2/3类型的弹窗
 let lid = 0
 let defconf = {
@@ -195,46 +197,14 @@ let defconf = {
   content: '', // 弹窗的内容
   fixed: false, // 是否固定不可拖拽
   shift: {}, // 弹窗出来的初始位置,用于出场动画
-  offset: {}, // 弹窗出来后的坐标, 为数组,可有4个值,依次是 上右下左
+  offset: {} // 弹窗出来后的坐标, 为数组,可有4个值,依次是 上右下左
-  btns: [lang.YES_BTN, lang.NO_BTN] // 弹窗的2个按钮的文字
 }
-const $doc = Anot(document)
+
 const uuid = function() {
   return 'layer-' + lid++
 }
-const close = function(id) {
+// 要保证弹层唯一的类型
-  if (typeof id !== 'string' && typeof id !== 'number') {
+const UNIQUE_TYPES = ['alert', 'confirm', 'prompt']
-    return Anot.error(lang.ERROR)
-  }
-  if (/^layerwrap\-/.test(id) || layerObj['layerwrap-' + id]) {
-    try {
-      id = (layerObj['layerwrap-' + id] ? 'layerwrap-' : '') + id
-      //未显示过,忽略
-      if (!layerObj[id].show) {
-        return
-      }
-      layerObj[id].parentElem.replaceChild(layerObj[id].wrap, layerDom[id][0])
-      layerObj[id].wrap.style.display = 'none'
-      layerObj[id].show = false
-    } catch (err) {}
-  } else {
-    unique = null
-    if (layerDom[id]) {
-      layerDom[id][0].classList.add('shift')
-      layerDom[id][1].classList.add('shift')
-      layerDom[id][0].style.opacity = ''
-      layerDom[id][1].style.opacity = 0
-      setTimeout(function() {
-        try {
-          layerDom[id][0].parentNode.removeChild(layerDom[id][0])
-          delete layerDom[id]
-          delete Anot.vmodels[id]
-        } catch (err) {}
-      }, 200)
-    }
-  }
-  document.body.style.overflow = ''
-}
 
 const fixOffset = function(offset) {
   for (let i in offset) {
@@ -259,457 +229,51 @@ const fixOffset = function(offset) {
   7: 'msg',
 } */
 
-class __layer__ {
+function createLayer(opt) {
-  get dot() {
+  var layDom = document.createElement('wc-layer')
-    //loading的子元素数量
+  layDom.type = opt.type
-    return {
+  if (opt.mask) {
-      1: 1,
+    layDom.setAttribute('mask', '')
-      2: 5,
-      3: 5,
-      4: 9
-    }
   }
 
-  constructor(opt) {
+  if (opt.title) {
-    if (opt) {
+    layDom.title = opt.title
-      let { yes, no, success } = opt
-      delete opt.yes
-      delete opt.no
-      delete opt.success
-
-      this.__init__({
-        state: { ...opt },
-        props: { yes, no, success }
-      })
-        .append()
-        .show()
-    }
-    this.timeout = null
   }
 
-  // 真正的初始化弹层配置
+  layDom.innerHTML = opt.content
-  __init__(opt) {
+  document.body.appendChild(layDom)
-    let _id = opt.$id || uuid()
-    this.init = {
-      $id: _id,
-      state: {
-        ...defconf,
-        ...opt.state
-      },
-      props: opt.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(ev) {
-          if (ev.target === ev.currentTarget) {
-            if (this.type < 4 && !this.maskClose) {
-              this.shake()
-            } else {
-              this.maskClose && this.close()
-            }
-          }
-        },
-        handleConfirm: function() {
-          if (this.type === 3) {
-            if (!this.prompt) {
-              return this.shake()
-            }
-          }
-          if (typeof this.props.yes === 'function') {
-            let cb = [this.$id]
-            if (this.type === 3) {
-              cb.unshift(this.prompt)
-            }
-            this.props.yes.apply(this, cb)
-          } else {
-            this.close()
-          }
-        },
-        handleCancel: function() {
-          if (typeof this.props.no === 'function') {
-            this.props.no.call(this, this.$id)
-          } else {
-            this.close()
-          }
-        },
-        close: function() {
-          close(this.$id)
-        }
-        // cancelBubble: function(ev) {
-        //   ev.cancelBubble = true
-        // }
-      },
-      mounted: function() {
-        if (typeof this.props.success === 'function') {
-          this.props.success.call(this)
-        }
-      }
-    }
 
-    // iframe类型补一个自适应高度的方法
+  return layDom
-    if (this.init.state.type === 4) {
-      this.init.methods.autoSize = function() {
-        let { layer, frame } = this.$refs
-        frame.onload = function() {
-          try {
-            let $body = frame.contentWindow.document.body
-            let { clientWidth, clientHeight } = $body
-
-            layer.style.cssText += `width: ${clientWidth}px;height: ${clientHeight}px;`
-            frame.style.cssText += `height: ${clientHeight}px;`
-          } catch (err) {}
-        }
-      }
-    }
-    return this
-  }
-
-  // 创建弹层容器及骨架
-  create() {
-    let { state, $id } = this.init
-    let outerBox = document.createElement('div')
-    let layBox = document.createElement('div')
-
-    outerBox.setAttribute('anot', $id)
-    outerBox.setAttribute(':on-click', 'onMaskClick')
-
-    outerBox.classList.add('do-layer')
-    if (state.mask) {
-      outerBox.classList.add('mask')
-      if (state.container && state.container !== document.body) {
-        outerBox.classList.add('inner')
-      }
-    }
-    if (state.maskColor) {
-      outerBox.style.background = state.maskColor
-    }
-
-    layBox.classList.add('layer-box')
-    layBox.classList.add('skin-normal')
-
-    if (state.extraClass) {
-      layBox.classList.add(state.extraClass)
-      delete state.extraClass
-    }
-    if (state.shift) {
-      fixOffset(state.shift)
-      for (let k in state.shift) {
-        let val = state.shift[k]
-        val += isFinite(val) ? 'px' : ''
-        layBox.style.cssText += `${k}: ${val};`
-      }
-    }
-
-    if (state.toast) {
-      layBox.classList.add('type-toast')
-    } else {
-      layBox.classList.add('type-' + state.type)
-    }
-
-    layBox.setAttribute('ref', 'layer')
-    // layBox.setAttribute(':on-click', 'cancelBubble')
-
-    // 暂时隐藏,避免修正定位时,能看到闪一下
-    layBox.style.cssText += 'border-radius:' + state.radius + 'px'
-
-    // 没有菜单栏, 且未禁止拖拽,则加上可拖拽属性
-    if (!state.menubar && !state.fixed) {
-      layBox.setAttribute(':drag', '')
-      layBox.setAttribute('data-limit', 'window')
-    }
-
-    // size of layer-content
-    var boxcss = ''
-    if (state.area[0] !== 'auto') {
-      boxcss += 'width: ' + state.area[0] + ';'
-    }
-    if (state.area[1] !== 'auto') {
-      boxcss += 'height: ' + state.area[1] + ';'
-    }
-    let arrow = ''
-    if (state.type === 5) {
-      arrow += `<i class="arrow"></i>`
-    }
-
-    layBox.innerHTML = `
-      ${this.mkMenubar()}
-      <div
-        class="layer-content do-fn-cl"
-        style="${boxcss}"
-        ${!state.wrap && state.type !== 6 ? ':html="content"' : ''}>
-
-        ${state.type === 6 ? this.mkLoading(state.load) : ''}
-      </div>
-      ${this.mkCtrl()}
-      ${arrow}
-    `
-    delete state.wrap
-    outerBox.appendChild(layBox)
-    return [outerBox, layBox]
-  }
-
-  // 创建loading元素
-  mkLoading(style) {
-    return `
-      <div class="loading style-${style}">
-        <span class="dot-box">
-        ${(style === 1 ? '<i class="do-icon-loading"></i>' : '<i></i>').repeat(
-          this.dot[style]
-        )}
-        </span>
-      </div>
-    `
-  }
-
-  // 创建窗口导航条
-  mkMenubar() {
-    let { menubar, fixed } = this.init.state
-    let html = ''
-    if (menubar) {
-      html = `
-        <div class="layer-title do-fn-noselect"
-          :text="title"
-          ${!fixed ? ':drag="layer-box" data-limit="window"' : ''}>
-        </div>
-      `
-    }
-    return html
-  }
-
-  // 创建窗口按钮
-  mkCtrl() {
-    let { type } = this.init.state
-    if (type > 3) {
-      return ''
-    } else {
-      let html = ''
-      let btns = `
-        <a class="action-yes"
-          :on-click="handleConfirm"
-          tabindex="-1"
-          :text="btns[0]"
-          ></a>
-        `
-      if (type > 1) {
-        btns =
-          `
-        <a class="action-no"
-          :on-click="handleCancel"
-          :text="btns[1]"
-          ></a>
-        ` + btns
-      }
-      html = `
-        <div class="layer-ctrl do-fn-noselect">
-          ${btns}
-        </div>
-      `
-      return html
-    }
-  }
-
-  append() {
-    let { state, $id } = this.init
-    let container = state.container
-
-    if (state.type < 4) {
-      // 如果有已经打开的弹窗,则关闭
-      if (unique) {
-        close(unique)
-      }
-      unique = $id
-    }
-
-    // 返回一个数组,第1个元素是容器,第2个是骨架
-    layerDom[$id] = this.create()
-
-    delete state.toast
-    this.toast = true
-    if (!container) {
-      container = document.body
-    }
-
-    container.appendChild(layerDom[$id][0])
-    this.vm = Anot(this.init)
-    return this
-  }
-
-  show() {
-    let vm = this.vm
-    let { state, $id } = this.init
-    let container = state.container
-
-    setTimeout(function() {
-      let style = { background: state.background }
-
-      let $dom1 = Anot(layerDom[$id][1])
-
-      // tips类型, 弹层的定位要在指定的容器上
-      if (state.type === 5) {
-        let css = getComputedStyle(layerDom[$id][1])
-        // 只有tips类型可以定义 `color`
-        style.color = state.color
-        style.opacity = 1
-        let $container = Anot(container)
-        let $arrow = $container[0].querySelector('.arrow')
-        let cw = $container.innerWidth()
-        let ch = $container.innerHeight()
-        let ol = $container.offset().left - $doc.scrollLeft()
-        let ot = $container.offset().top - $doc.scrollTop()
-
-        let layw = parseInt(css.width)
-        let layh = parseInt(css.height)
-        let arrowOffset = ['top']
-
-        Anot(layerDom[$id][1]).css(style)
-
-        $container.bind('mouseenter', ev => {
-          let tmpStyle = { visibility: 'visible' }
-          ol = $container.offset().left - $doc.scrollLeft()
-          ot = $container.offset().top - $doc.scrollTop()
-
-          if (ot + 18 < layh) {
-            arrowOffset[0] = 'bottom'
-            $arrow.style.borderBottomColor = state.background
-            tmpStyle.top = ot + ch + 8
-          } else {
-            $arrow.style.borderTopColor = state.background
-            tmpStyle.top = ot - layh - 8
-          }
-
-          if (ol + cw * 0.7 + layw > window.innerWidth) {
-            tmpStyle.left = ol + cw * 0.3 - layw
-            arrowOffset[1] = 'left'
-          } else {
-            tmpStyle.left = ol + cw * 0.7
-          }
-
-          $arrow.classList.add('offset-' + arrowOffset.join('-'))
-          $dom1.css(tmpStyle)
-        })
-        $container.bind('mouseleave', () => {
-          setTimeout(() => {
-            $arrow.classList.remove('offset-' + arrowOffset.join('-'))
-            arrowOffset = ['top']
-            $arrow.style.borderBottomColor = ''
-            $arrow.style.borderTopColor = ''
-            layerDom[$id][1].style.visibility = 'hidden'
-          }, 100)
-        })
-      } else {
-        let offsetStyle = { opacity: 1 }
-        if (state.offset) {
-          fixOffset(state.offset)
-
-          Object.assign(offsetStyle, state.offset)
-        }
-        $dom1.css(style)
-        setTimeout(() => {
-          document.body.style.overflow = 'hidden'
-          layerDom[$id][1].classList.add('shift')
-          setTimeout(_ => {
-            $dom1.css(offsetStyle)
-            if (vm && vm.$refs.input) {
-              vm.$refs.input.focus()
-            }
-            setTimeout(_ => {
-              try {
-                layerDom[$id][1].classList.remove('shift')
-              } catch (err) {}
-            }, 500)
-          }, 50)
-        }, 50)
-      }
-    }, 4)
-
-    // loading类型,回调需要自动触发
-    if (state.type > 3) {
-      //大于0自动触发超时关闭
-      if (state.timeout > 0) {
-        clearTimeout(this.timeout)
-        this.timeout = setTimeout(() => {
-          clearTimeout(this.timeout)
-          close($id)
-
-          // 为loading类型时,自动关闭同时触发回调
-          if (state.type === 6) {
-            this.vm.props.yes.call(this.vm, $id)
-          }
-        }, state.timeout)
-      } else if (state.type === 6) {
-        // loading类型, 非自动关闭时, 主动触发回调
-        this.vm.props.yes.call(this.vm, $id)
-      }
-    }
-  }
 }
 
 const _layer = {
-  alert(content, title, cb) {
+  alert(content, title) {
-    let opt = { content, fixed: true }
+    return createLayer({
-
+      type: 'alert',
-    if (typeof title === 'function') {
+      title: title || 'Hello world!',
-      opt.yes = title
+      content:
-    } else {
+        content || '<p>blablablablsjkdjbskj fghjsdgfjs djfhjsdgf jhs jhj</p>',
-      if (title) {
+      fixed: true,
-        opt.title = title + ''
+      mask: true
-      }
+    })
-      if (cb && typeof cb === 'function') {
-        opt.yes = cb
-      }
-    }
-    var l = document.createElement('wc-layer')
-    l.title = 'hello'
-    l.setAttribute('type', 'alert')
-    l.setAttribute('mask', '')
-    l.innerHTML = '<p>ffdfdffd</p>'
-    document.body.appendChild(l)
-
-    return _layer.open(opt)
   },
-  confirm(content, title, yescb, nocb) {
+  confirm(content, title) {
-    let opt = { content, fixed: true, type: 2 }
+    return createLayer({
-
+      type: 'confirm',
-    if (typeof title === 'function') {
+      title: title || 'Hello world!',
-      opt.yes = title
+      content: content || 'blablablablsjkdjbskj fghjsdgfjs djfhjsdgf jhs jhj',
-      if (typeof yescb === 'function') {
+      fixed: true,
-        opt.no = yescb
+      mask: true
-      }
+    })
-    } else {
-      if (title) {
-        opt.title = title + ''
-      }
-      if (yescb && typeof yescb === 'function') {
-        opt.yes = yescb
-      }
-      if (nocb && typeof nocb === 'function') {
-        opt.no = nocb
-      }
-    }
-    return _layer.open(opt)
   },
   frame(url, extra = {}) {
-    let opt = {
+    return createLayer({
+      type: 'frame',
       content: `<iframe ref="frame" class="frame-box" src="${url}"></iframe>`,
-      menubar: false,
+      fixed: true,
-      maskClose: true,
+      mask: true,
-      type: 4,
+      maskClose: true
-      ...extra
+    })
-    }
-    return _layer.open(opt)
   },
   toast(txt, type = 'info', timeout = 2500) {
     if (typeof type === 'number') {
@@ -746,53 +310,6 @@ const _layer = {
 
     return _layer.open(opt)
   },
-  load(style, container, cb) {
-    style = style >>> 0
-    style = style < 1 ? 1 : style > 4 ? 4 : style
-
-    if (typeof container === 'function') {
-      cb = container
-      container = null
-    } else {
-      if (!(container instanceof HTMLElement)) {
-        container = null
-      }
-      if (typeof cb !== 'function') {
-        cb = Anot.noop
-      }
-    }
-    return _layer.open({
-      container,
-      type: 6,
-      load: style,
-      yes: cb,
-      menubar: false,
-      background: 'none',
-      fixed: true
-    })
-  },
-  tips(content, container, opt = {}) {
-    if (!(container instanceof HTMLElement)) {
-      return Anot.error(lang.NEED_CONTAINER)
-    }
-
-    if (!opt.background) {
-      opt.background = 'rgba(0,0,0,.5)'
-    }
-    if (!opt.color) {
-      opt.color = '#fff'
-    }
-    Object.assign(opt, {
-      container,
-      content,
-      type: 5,
-      fixed: true,
-      mask: false,
-      menubar: false,
-      timeout: 0
-    })
-    return _layer.open(opt)
-  },
   prompt(title, yescb) {
     if (typeof yescb !== 'function') {
       return console.error(
@@ -1008,6 +525,8 @@ export default class Layer {
   }
 
   set type(val) {
+    this.props.type = val
+
     switch (val) {
       case 'alert':
         this.__CTRL__.innerHTML = renderBtns(['确定'])
@@ -1018,12 +537,17 @@ export default class Layer {
         break
       case 'toast':
         break
+      case 'frame':
+        break
       default:
+        val = 'common'
         if (this.opt.btns) {
           this.__CTRL__.innerHTML = renderBtns(this.opt.btns)
           break
         }
     }
+
+    this.setAttribute('type', val)
   }
 
   get fixed() {
@@ -1033,24 +557,37 @@ export default class Layer {
   set fixed(val) {
     this.props.fixed = !!val
 
+    // 这3类弹层不允许拖拽
+    if (UNIQUE_TYPES.includes(this.props.type)) {
+      return
+    }
+
     if (this.props.fixed) {
-      this._dragIns = new Drag(this.root.children[1]).by(this.__TITLE__, {
-        overflow: false
-      })
-    } else {
       if (this._dragIns) {
         this._dragIns.destroy()
         this._dragIns = null
       }
+    } else {
+      this._dragIns = new Drag(this.root.children[1]).by(this.__TITLE__, {
+        overflow: false
+      })
+      this.removeAttribute('fixed')
     }
   }
 
+  close() {
+    if (this._dragIns) {
+      this._dragIns.destroy()
+    }
+    this.parentNode.removeChild(this)
+  }
+
   mounted() {
     bind(this.__CTRL__, 'click', ev => {
       if (ev.target.tagName === 'BUTTON') {
         var idx = +ev.target.dataset.idx
         log(idx)
-        this.parentNode.removeChild(this)
+        this.close()
       }
     })
   }