/
history.js
96 lines (83 loc) · 2.14 KB
/
history.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
import { bindEvent } from '@pluginjs/events'
import { addClass, hasClass } from '@pluginjs/classes'
import { parseHTML, queryAll, parentWith } from '@pluginjs/dom'
import { getStyle, setStyle } from '@pluginjs/styled'
const colors = []
let count = 0
class History {
constructor(instance, element) {
this.instance = instance
this.classes = this.instance.classes
this.element = element
this.prevColor = null
this.build()
this.bind()
}
build() {
for (let i = 0; i < 18; i++) {
const $item = `<span class='${this.classes.HISTORYITEM}'></span>`
this.element.append(parseHTML($item))
}
this.$items = queryAll(`.${this.classes.HISTORYITEM}`, this.element)
}
bind() {
const that = this
bindEvent(
this.instance.selfEventName('change'),
(e, el, color) => {
if (!color) {
return false
}
if (this.prevColor === color) {
return false
}
this.prevColor = color
this.update(this.prevColor)
return null
},
this.instance.element
)
bindEvent(
this.instance.eventName('click'),
`.${this.classes.HISTORYITEM}`,
({ target }) => { /* eslint-disable-line */
const el = target.matches(`.${this.classes.HISTORYITEM}`)
? target
: parentWith(hasClass(this.classes.HISTORYITEM), target)
if (getStyle('cursor', el) === 'not-allowed') {
return false
}
const color = getStyle('background-color', el)
that.instance.setColor(color)
},
this.element
)
}
set(color) {
if (this.prevColor === color) {
return false
}
this.prevColor = color
this.update(this.prevColor)
return null
}
update(color) {
if (colors.indexOf(color) === -1) {
colors.push(color)
count++
this.updateHistory()
}
}
updateHistory() {
if (count >= 18) {
colors.shift()
}
this.$items.forEach((v, i) => {
setStyle('background', colors[colors.length - 1 - i], v)
if (i < count) {
addClass(this.classes.HISTORYITEMEMPTY, v)
}
})
}
}
export default History