-
-
Notifications
You must be signed in to change notification settings - Fork 3.3k
/
droplist.js
130 lines (110 loc) · 3.24 KB
/
droplist.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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
/*
droplist
*/
import $ from '../util/dom-core.js'
import replaceLang from '../util/replace-lang.js'
const _emptyFn = () => {}
// 构造函数
function DropList(menu, opt) {
// droplist 所依附的菜单
const editor = menu.editor
this.menu = menu
this.opt = opt
// 容器
const $container = $('<div class="w-e-droplist"></div>')
// 标题
const $title = opt.$title
let titleHtml
if ($title) {
// 替换多语言
titleHtml = $title.html()
titleHtml = replaceLang(editor, titleHtml)
$title.html(titleHtml)
$title.addClass('w-e-dp-title')
$container.append($title)
}
const list = opt.list || []
const type = opt.type || 'list' // 'list' 列表形式(如“标题”菜单) / 'inline-block' 块状形式(如“颜色”菜单)
const onClick = opt.onClick || _emptyFn
// 加入 DOM 并绑定事件
const $list = $('<ul class="' + (type === 'list' ? 'w-e-list' : 'w-e-block') + '"></ul>')
$container.append($list)
list.forEach(item => {
const $elem = item.$elem
// 替换多语言
let elemHtml = $elem.html()
elemHtml = replaceLang(editor, elemHtml)
$elem.html(elemHtml)
const value = item.value
const $li = $('<li class="w-e-item"></li>')
if ($elem) {
$li.append($elem)
$list.append($li)
$li.on('click', e => {
onClick(value)
// 隐藏
this.hideTimeoutId = setTimeout(() => {
this.hide()
}, 0)
})
}
})
// 绑定隐藏事件
$container.on('mouseleave', e => {
this.hideTimeoutId = setTimeout(() => {
this.hide()
}, 0)
})
// 记录属性
this.$container = $container
// 基本属性
this._rendered = false
this._show = false
}
// 原型
DropList.prototype = {
constructor: DropList,
// 显示(插入DOM)
show: function () {
if (this.hideTimeoutId) {
// 清除之前的定时隐藏
clearTimeout(this.hideTimeoutId)
}
const menu = this.menu
const $menuELem = menu.$elem
const $container = this.$container
if (this._show) {
return
}
if (this._rendered) {
// 显示
$container.show()
} else {
// 加入 DOM 之前先定位位置
const menuHeight = $menuELem.getSizeData().height || 0
const width = this.opt.width || 100 // 默认为 100
$container.css('margin-top', menuHeight + 'px')
.css('width', width + 'px')
// 加入到 DOM
$menuELem.append($container)
this._rendered = true
}
// 修改属性
this._show = true
},
// 隐藏(移除DOM)
hide: function () {
if (this.showTimeoutId) {
// 清除之前的定时显示
clearTimeout(this.showTimeoutId)
}
const $container = this.$container
if (!this._show) {
return
}
// 隐藏并需改属性
$container.hide()
this._show = false
}
}
export default DropList