-
Notifications
You must be signed in to change notification settings - Fork 4
/
hex.js
125 lines (111 loc) · 3.14 KB
/
hex.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
// import alpha from './alpha'
import { bindEvent } from '@pluginjs/events'
import {
query,
// getData,
// setData,
// find,
parseHTML
// parent
// queryAll
} from '@pluginjs/dom'
import { Color } from '@pluginjs/color'
// import Dropdown from '@pluginjs/dropdown'
import Select from '@pluginjs/select'
class Hex {
constructor(instance, element) {
this.instance = instance
this.element = element
this.classes = this.instance.classes
this.opac = 100
this.color = null
this.COLOR = new Color()
this.mode = this.COLOR.toHEX()
this.HSL = this.COLOR.toHSL().toUpperCase()
this.HEX = this.COLOR.toHEX().toUpperCase()
this.RGB = this.COLOR.toRGB().toUpperCase()
this.classify = this.HEX
this.data = [
{ label: this.HEX, value: 'HEX' },
{ label: this.HSL, value: 'HSL' },
{ label: this.RGB, value: 'RGB' }
]
// this.bind()
this.init()
}
init() {
this.build()
this.bind()
}
build() {
this.$opac = parseHTML(
`<div class='${this.classes.HEXBOX}'>
<input class="pj-input ${this.classes.HEXANGLE}" type="text"/>
<div class="${this.classes.HEXUNIT}">%</div>
</div>`
)
const $selector = parseHTML(
`<div class='${this.classes.HEXMODE}'><input type="text" /></div>`
)
this.element.append($selector, this.$opac)
this.$el = query(`.${this.classes.HEXMODE}>input`, this.element)
// this.$selector = query(`.${this.classes.HEXMODE}>div`, this.element)
this.SELECT = Select.of(this.$el, {
value: this.classify,
source: this.data,
onChange: res => {
this.updateColor(res, this.color)
}
})
}
bind() {
bindEvent(
this.instance.selfEventName('changeColor'),
(e, el, color) => {
this.color = color
query(`.${this.classes.HEXANGLE}`, this.$opac).value = parseInt(color.value.a * 100) /* eslint-disable-line */
this.updateColor(this.SELECT.options.value, color)
},
this.instance.element
)
bindEvent(
this.instance.eventName('change'),
({ target }) => {
const color = target.value
this.update(color)
},
this.element
)
}
updateColor(val, color) {
if (val.indexOf('HSL') > -1) {
this.mode = color.toHSL().toUpperCase()
} else if (val.indexOf('RGB') > -1) {
this.mode = color.toRGB().toUpperCase()
} else {
this.mode = color.toHEX().toUpperCase()
}
this.data = [
this.color.toHEX().toUpperCase(),
this.color.toHSL().toUpperCase(),
this.color.toRGB().toUpperCase()
]
// query().innerText = this.mode
this.SELECT.$label.innerText = this.mode
this.SELECT.options.value = this.mode
this.SELECT.options.source = this.data
this.element
.querySelectorAll('.pj-dropdown-item')
.forEach((value, index) => {
// value.setAttribute('data-value', this.data[index])
value.innerText = this.data[index]
})
}
update(value) {
if (this.instance.SOLID.color.isValid(value)) {
this.instance.SOLID.setSolid(value)
this.updateColor(this.instance.SOLID.color)
}
}
}
export default Hex