all files / src/internal/popup/ manager.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
 
 
 
1×
 
1×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1×
 
 
 
 
 
 
 
 
 
import Vue from 'vue'
import keycode from 'keycode'
import overlayOpt from './overlay'
const Overlay = Vue.extend(overlayOpt)
 
const PopupManager = {
  instances: [],
  overlay: false,
 
  open (instance) {
    if (!instance || this.instances.indexOf(instance) !== -1) return
    if (!this.overlay && instance.overlay) {
      this.showOverlay(instance)
    }
    this.instances.push(instance)
    this.changeOverlayStyle()
  },
  close (instance) {
    let index = this.instances.indexOf(instance)
    if (index === -1) return
    Vue.nextTick(() => {
      this.instances.splice(index, 1)
      if (this.instances.length === 0) {
        this.closeOverlay()
      }
      this.changeOverlayStyle()
    })
  },
 
  showOverlay (instance) {
    let overlay = this.overlay = new Overlay({
      el: document.createElement('div')
    })
    overlay.fixed = true
    overlay.color = instance.overlayColor
    overlay.opacity = instance.overlayOpacity
    overlay.zIndex = instance.overlayZIndex
    overlay.onClick = this.handleOverlayClick.bind(this)
    document.body.appendChild(overlay.$el)
    this.preventScrolling()
    Vue.nextTick(() => {
      overlay.show = true
    })
  },
  // 还原滚动设置
  preventScrolling () {
    if (this.locked) return
    // body 操作
    const body = document.getElementsByTagName('body')[0]
    const html = document.getElementsByTagName('html')[0]
    this.bodyOverflow = body.style.overflow
    this.htmlOverflow = html.style.overflow
    body.style.overflow = 'hidden'
    html.style.overflow = 'hidden'
    this.locked = true
  },
 
  // 禁止滚动
  allowScrolling () {
    const body = document.getElementsByTagName('body')[0]
    const html = document.getElementsByTagName('html')[0]
    body.style.overflow = this.bodyOverflow || ''
    html.style.overflow = this.htmlOverflow || ''
    this.bodyOverflow = null
    this.htmlOverflow = null
    this.locked = false
  },
  closeOverlay () {
    if (!this.overlay) return
    this.allowScrolling()
    let overlay = this.overlay
    overlay.show = false
    this.overlay = null
    setTimeout(() => {
      overlay.$el.remove()
      overlay.$destroy()
    }, 450)
  },
 
  changeOverlayStyle () {
    if (!this.overlay || this.instances.length === 0) return
    const instance = this.instances[this.instances.length - 1]
    this.overlay.color = instance.overlayColor
    this.overlay.opacity = instance.overlayOpacity
    this.overlay.zIndex = instance.overlayZIndex
  },
 
  handleOverlayClick () {
    if (this.instances.length === 0) return
    const instance = this.instances[this.instances.length - 1]
    if (instance.overlayClick) {
      instance.overlayClick()
    }
  }
}
window.addEventListener('keydown', (e) => {
  if (PopupManager.instances.length === 0 || keycode(e) !== 'esc') return
  const instance = PopupManager.instances[PopupManager.instances.length - 1]
  if (instance.escPress) {
    instance.escPress()
  }
})
 
export default PopupManager