sdk4.0/src/BaseDialog/index.js

class BaseDialog {
  constructor(container, options = {}, only = true) {
    this.container = container
    this.options = { ...options }
    this.options.ismove = true
    if (options.ismove === false) {
      this.options.ismove = options.ismove
    }
    this.closeCallBack = options.closeCallBack
    this._element = {}
    this._element_style = undefined
    this.only = only
  }

  async init() {
    if (this.only) {
      this.closeAll()
    }
    DialogAll.push(this)
    this.isDestroy = false
    // body
    this._element.body = document.createElement('div');
    this._element.body.className = 'YJ-custom-base-dialog';
    this._element.body.style.top = this.options.top
    this._element.body.style.bottom = this.options.bottom
    this._element.body.style.left = this.options.left
    this._element.body.style.right = this.options.right
    this.container.appendChild(this._element.body)

    //title
    this._element.title = document.createElement('div');
    this._element.title.className = 'title-box';
    this._element.title.innerHTML = `<span class="title">${(this.options.title || '')}</span>` + `<span class="close-box"><span class="close"></span><i>&#10005</i></span>`
    this._element.body.appendChild(this._element.title)

    //content
    this._element.content = await document.createElement('div');
    this._element.content.className = 'content';
    this._element.body.appendChild(this._element.content)

    // foot
    this._element.foot = await document.createElement('div');
    this._element.foot.className = 'foot';
    // this._element.foot.innerHTML = `
    // <button class="translational">平移</button>
    // <button class="resetting">重置</button>
    // <button class="delete">删除</button>
    // <button class="close">关闭</button>
    // `
    this._element.foot.innerHTML = `
    <button class="close">关闭</button>
    `
    this._element.body.appendChild(this._element.foot)
    let curtain = await document.createElement('div')
    curtain.style.position = 'absolute'
    curtain.style.top = '0'
    curtain.style.left = '0'
    curtain.style.width = '100%'
    curtain.style.height = '100%'
    curtain.style.backdropFilter = 'blur(2px)'
    curtain.style.zIndex = '-999999'
    this._element.body.appendChild(curtain)

    // 关闭
    let closeBtnsBox = this._element.body.getElementsByClassName('close-box')[0];
    closeBtnsBox.addEventListener('click', () => {
      this.close()
    });
    let closeBtns = this._element.body.getElementsByClassName('close');
    for (let i = 0; i < closeBtns.length; i++) {
      closeBtns[i].addEventListener('click', () => {
        this.close()
      });
    }

    if (this.options.ismove) {
      this.moveDiv()
    }
  }

  close() {
    let styles = document.getElementsByTagName("style")
    for (let i = styles.length - 1; i >= 0; i--) {
      if (styles[i].dataset) {
        if (styles[i].dataset.name === 'YJ_style_dialog') {
          document.getElementsByTagName('head')[0].removeChild(styles[i])
        }
      }
    }
    if (this._element.body && this._element.body.parentNode) {
      this.container.removeChild(this._element.body)
    }
    this._element.body = null
    this._element.title = null
    this._element.content = null
    this._element.foot = null
    this._element_style = null
    this.isDestroy = true
    if (this.closeCallBack) {
      this.closeCallBack()
      this.closeCallBack = null
    }
  }

  closeAll() {
    for (let i = DialogAll.length - 1; i >= 0; i--) {
      DialogAll[i].close()
      DialogAll.splice(i, 1)
    }
    return
    let styles = document.getElementsByTagName("style")
    for (let i = styles.length - 1; i >= 0; i--) {
      if (styles[i].dataset) {
        if (styles[i].dataset.name === 'YJ_style_dialog') {
          document.getElementsByTagName('head')[0].removeChild(styles[i])
        }
      }
    }
    if (this._element_style) {
      this._element_style = null
    }
    let elms = this.container.getElementsByClassName('YJ-custom-base-dialog')
    for (let i = elms.length - 1; i >= 0; i--) {
      this.container.removeChild(elms[i])
    }
    this._element.body = null
    this._element.title = null
    this._element.content = null
    this._element.foot = null
  }

  titleAppChild(node) {
    this._element.title.appendChild(node)
  }
  contentAppChild(node) {
    this._element.content.appendChild(node)
  }
  footAppChild(node, target) {
    if (target) {
      this._element.foot.insertBefore(node, target);
    }
    else {
      this._element.foot.prepend(node)
    }
  }

  moveDiv() {
    let x = 0
    let y = 0
    let l = 0
    let t = 0
    let oClickDiv = this._element.body
    let _this = this
    oClickDiv.onmousedown = (e) => {
      if (e.toElement.className !== 'title-box') {
        return
      }
      // dialog的宽度、高度
      // let oMoveDivHeight = that.oMoveDiv.offsetHeight
      let oMoveDivHeight = this._element.body.offsetHeight
      // let oMoveDivWidth = that.oMoveDiv.offsetWidth
      let oMoveDivWidth = this._element.body.offsetWidth

      x = e.clientX
      y = e.clientY

      let leftPx = window.getComputedStyle(this._element.body).left
      let topPx = window.getComputedStyle(this._element.body).top

      l = leftPx.substr(0, leftPx.indexOf('px')) * 1
      t = topPx.substr(0, topPx.indexOf('px')) * 1
      // 视口大小
      let windowHeight = document.documentElement.clientHeight
      let windowWidth = document.documentElement.clientWidth

      //鼠标移动
      window.onmousemove = function (e) {
        e.preventDefault()
        //获取x和y
        let nx = e.clientX
        let ny = e.clientY
        //计算移动后的左偏移量和顶部的偏移量
        let leftPx = nx - (x - l)
        let topPx = ny - (y - t)
        if (leftPx < 0) {
          leftPx = 0
        } else if (leftPx + oMoveDivWidth > windowWidth) {
          leftPx = windowWidth - oMoveDivWidth
        }

        if (topPx <= 0) {
          topPx = 0
        } else if (topPx + oMoveDivHeight > windowHeight) {
          topPx = windowHeight - oMoveDivHeight
        }
        _this._element.body.style.left = leftPx + 'px'
        _this._element.body.style.top = topPx + 'px'
        _this._element.body.style.bottom = 'unset'
        _this._element.body.style.right = 'unset'
      }

      //鼠标抬起事件
      document.onmouseup = function (e) {
        window.onmousemove = null
      }
      window.ondragend = function (e) {
        window.onmousemove = null
      }
    }

    //鼠标抬起事件
    document.onmouseup = function (e) {
      window.onmousemove = null
    }
    window.ondragend = function (e) {
      window.onmousemove = null
    }
  }
}

let DialogAll = []

export default BaseDialog