2018-10-03 23:27:40 +00:00
|
|
|
'use strict'
|
2018-08-28 04:34:17 +00:00
|
|
|
|
2019-01-09 03:51:57 +00:00
|
|
|
function Picker (dotgrid) {
|
2018-10-03 23:27:40 +00:00
|
|
|
this.memory = ''
|
|
|
|
this.el = document.createElement('div')
|
|
|
|
this.el.id = 'picker'
|
2019-01-12 04:22:38 +00:00
|
|
|
this.isActive = false
|
2018-10-03 23:27:40 +00:00
|
|
|
this.input = document.createElement('input')
|
|
|
|
this.input.id = 'picker_input'
|
2018-03-07 00:50:41 +00:00
|
|
|
|
2018-09-12 03:27:01 +00:00
|
|
|
this.el.appendChild(this.input)
|
|
|
|
|
2018-10-03 23:27:40 +00:00
|
|
|
this.start = function () {
|
2019-01-12 04:22:38 +00:00
|
|
|
if (this.isActive) { return }
|
2018-09-17 01:48:39 +00:00
|
|
|
|
2019-01-12 04:22:38 +00:00
|
|
|
this.isActive = true
|
2018-09-17 01:48:39 +00:00
|
|
|
|
2019-04-21 23:49:47 +00:00
|
|
|
this.input.setAttribute('placeholder', `${dotgrid.tool.style().color.replace('#', '').trim()}`)
|
2018-10-03 23:27:40 +00:00
|
|
|
this.input.setAttribute('maxlength', 6)
|
2018-05-06 23:15:23 +00:00
|
|
|
|
2019-11-03 18:36:58 +00:00
|
|
|
this.input.addEventListener('keydown', this.onKeyDown, false)
|
|
|
|
this.input.addEventListener('keyup', this.onKeyUp, false)
|
|
|
|
|
2019-04-21 23:49:47 +00:00
|
|
|
dotgrid.interface.el.className = 'picker'
|
2018-09-12 03:27:01 +00:00
|
|
|
this.input.focus()
|
2018-10-03 23:27:40 +00:00
|
|
|
this.input.value = ''
|
2018-08-17 20:04:54 +00:00
|
|
|
|
2019-04-21 23:49:47 +00:00
|
|
|
try { dotgrid.controller.set('picker') } catch (err) { }
|
2018-03-07 00:50:41 +00:00
|
|
|
}
|
|
|
|
|
2018-10-03 23:27:40 +00:00
|
|
|
this.update = function () {
|
2019-01-12 04:22:38 +00:00
|
|
|
if (!this.isActive) { return }
|
2019-11-03 18:36:58 +00:00
|
|
|
if (!isColor(this.input.value)) { return }
|
2018-09-12 03:27:01 +00:00
|
|
|
|
2018-10-03 23:27:40 +00:00
|
|
|
const hex = `#${this.input.value}`
|
2018-03-21 07:10:09 +00:00
|
|
|
|
2018-10-03 23:27:40 +00:00
|
|
|
document.getElementById('option_color').children[0].style.fill = hex
|
|
|
|
document.getElementById('option_color').children[0].style.stroke = hex
|
2018-09-17 01:48:39 +00:00
|
|
|
}
|
2018-05-06 23:05:25 +00:00
|
|
|
|
2018-10-03 23:27:40 +00:00
|
|
|
this.stop = function () {
|
2019-01-12 04:22:38 +00:00
|
|
|
if (!this.isActive) { return }
|
2018-08-17 20:04:54 +00:00
|
|
|
|
2019-01-12 04:22:38 +00:00
|
|
|
this.isActive = false
|
2018-10-03 23:27:40 +00:00
|
|
|
|
2019-04-21 23:49:47 +00:00
|
|
|
dotgrid.interface.el.className = ''
|
2018-09-12 03:27:01 +00:00
|
|
|
this.input.blur()
|
2018-10-03 23:27:40 +00:00
|
|
|
this.input.value = ''
|
2018-07-26 08:40:06 +00:00
|
|
|
|
2019-04-21 23:49:47 +00:00
|
|
|
try { dotgrid.controller.set() } catch (err) { console.log('No controller') }
|
2018-05-06 23:05:25 +00:00
|
|
|
|
2019-04-21 23:49:47 +00:00
|
|
|
setTimeout(() => { dotgrid.interface.update(true); dotgrid.renderer.update() }, 250)
|
2018-03-07 00:50:41 +00:00
|
|
|
}
|
|
|
|
|
2018-10-03 23:27:40 +00:00
|
|
|
this.validate = function () {
|
2019-11-03 18:36:58 +00:00
|
|
|
if (!isColor(this.input.value)) { return }
|
2018-03-07 00:50:41 +00:00
|
|
|
|
2018-10-03 23:27:40 +00:00
|
|
|
const hex = `#${this.input.value}`
|
2018-09-12 03:27:01 +00:00
|
|
|
|
2019-04-21 23:49:47 +00:00
|
|
|
dotgrid.tool.style().color = hex
|
|
|
|
dotgrid.tool.style().fill = dotgrid.tool.style().fill !== 'none' ? hex : 'none'
|
2018-09-17 01:48:39 +00:00
|
|
|
|
2018-10-03 23:27:40 +00:00
|
|
|
this.stop()
|
2018-03-07 00:50:41 +00:00
|
|
|
}
|
|
|
|
|
2019-11-03 18:36:58 +00:00
|
|
|
function isColor (val) {
|
|
|
|
if (val.length !== 3 && val.length !== 6) {
|
|
|
|
return false
|
2018-09-14 03:03:12 +00:00
|
|
|
}
|
|
|
|
|
2019-11-03 18:36:58 +00:00
|
|
|
const re = /[0-9A-Fa-f]/g
|
|
|
|
return re.test(val)
|
|
|
|
}
|
|
|
|
|
|
|
|
this.onKeyDown = (e) => {
|
2019-04-21 23:36:12 +00:00
|
|
|
if (e.key === 'Enter') {
|
2018-10-03 23:27:40 +00:00
|
|
|
this.validate()
|
|
|
|
e.preventDefault()
|
|
|
|
return
|
2018-03-07 00:50:41 +00:00
|
|
|
}
|
2019-04-21 23:36:12 +00:00
|
|
|
if (e.key === 'Escape') {
|
2018-10-03 23:27:40 +00:00
|
|
|
this.stop()
|
|
|
|
e.preventDefault()
|
|
|
|
return
|
2018-08-28 21:41:41 +00:00
|
|
|
}
|
2019-11-03 18:36:58 +00:00
|
|
|
e.stopPropagation()
|
2018-03-21 07:10:09 +00:00
|
|
|
}
|
|
|
|
|
2019-11-03 18:36:58 +00:00
|
|
|
this.onKeyUp = (e) => {
|
|
|
|
e.stopPropagation()
|
|
|
|
this.update()
|
2018-09-14 03:03:12 +00:00
|
|
|
}
|
2018-10-03 23:27:40 +00:00
|
|
|
}
|