2018-08-28 00:34:17 -04:00
|
|
|
'use strict';
|
|
|
|
|
2018-03-06 19:50:41 -05:00
|
|
|
function Picker()
|
|
|
|
{
|
|
|
|
this.memory = "";
|
2018-09-11 23:27:01 -04:00
|
|
|
this.el = document.createElement("div");
|
2018-03-06 19:50:41 -05:00
|
|
|
this.el.id = "picker"
|
2018-09-11 23:27:01 -04:00
|
|
|
this.input = document.createElement("input");
|
|
|
|
this.input.id = "picker_input"
|
2018-03-06 19:50:41 -05:00
|
|
|
this.original = null;
|
|
|
|
|
2018-09-11 23:27:01 -04:00
|
|
|
this.el.appendChild(this.input)
|
|
|
|
|
2018-03-06 19:50:41 -05:00
|
|
|
this.start = function()
|
|
|
|
{
|
2018-09-11 23:27:01 -04:00
|
|
|
this.input.setAttribute("placeholder",`${dotgrid.tool.style().color.replace("#","").trim()}`)
|
|
|
|
this.input.setAttribute("maxlength",6)
|
2018-05-06 19:15:23 -04:00
|
|
|
|
2018-08-17 16:04:54 -04:00
|
|
|
try{ dotgrid.controller.set("picker"); }
|
2018-08-28 17:41:41 -04:00
|
|
|
catch(err){ }
|
2018-08-17 16:04:54 -04:00
|
|
|
|
2018-03-06 19:50:41 -05:00
|
|
|
dotgrid.interface.el.className = "picker"
|
2018-09-11 23:27:01 -04:00
|
|
|
this.input.focus()
|
2018-03-06 19:50:41 -05:00
|
|
|
this.original = dotgrid.tool.style().color
|
2018-09-11 23:27:01 -04:00
|
|
|
this.input.value = ""
|
2018-03-06 19:50:41 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
this.stop = function()
|
|
|
|
{
|
|
|
|
this.cancel();
|
2018-08-17 16:04:54 -04:00
|
|
|
|
|
|
|
try{ dotgrid.controller.set(); }
|
|
|
|
catch(err){ console.log("No controller"); }
|
|
|
|
|
2018-03-06 19:50:41 -05:00
|
|
|
dotgrid.interface.el.className = ""
|
2018-09-11 23:27:01 -04:00
|
|
|
this.input.blur()
|
|
|
|
this.input.value = ""
|
2018-09-11 23:42:57 -04:00
|
|
|
|
|
|
|
setTimeout(() => { dotgrid.interface.update(true); }, 250)
|
2018-03-06 19:50:41 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
this.validate = function()
|
|
|
|
{
|
2018-09-11 23:27:01 -04:00
|
|
|
if(!is_color(this.input.value)){ return; }
|
|
|
|
|
|
|
|
let hex = `#${this.input.value}`;
|
2018-03-21 03:10:09 -04:00
|
|
|
|
2018-09-11 23:27:01 -04:00
|
|
|
this.set_color(hex);
|
2018-05-06 19:05:25 -04:00
|
|
|
|
2018-09-11 21:20:31 -04:00
|
|
|
dotgrid.guide.update();
|
2018-08-17 16:04:54 -04:00
|
|
|
|
|
|
|
try{ dotgrid.controller.set(); }
|
2018-09-11 23:27:01 -04:00
|
|
|
catch(err){ console.log("No controller"); }
|
2018-08-17 16:04:54 -04:00
|
|
|
|
2018-05-07 00:51:58 -04:00
|
|
|
dotgrid.interface.el.className = ""
|
2018-09-11 23:27:01 -04:00
|
|
|
this.input.blur()
|
|
|
|
this.input.value = ""
|
2018-07-26 04:40:06 -04:00
|
|
|
|
2018-09-11 23:27:01 -04:00
|
|
|
setTimeout(() => { dotgrid.interface.update(true); }, 250)
|
2018-05-06 19:05:25 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
this.set_color = function(color)
|
|
|
|
{
|
|
|
|
dotgrid.tool.style().color = color;
|
|
|
|
dotgrid.tool.style().fill = dotgrid.tool.style().fill != "none" ? color : "none";
|
2018-03-06 19:50:41 -05:00
|
|
|
}
|
|
|
|
|
2018-05-06 19:05:25 -04:00
|
|
|
this.set_size = function(size)
|
|
|
|
{
|
|
|
|
dotgrid.set_size(size);
|
|
|
|
}
|
|
|
|
|
2018-03-06 19:50:41 -05:00
|
|
|
this.cancel = function()
|
|
|
|
{
|
|
|
|
if(!this.original){ return; }
|
2018-09-11 21:20:31 -04:00
|
|
|
dotgrid.guide.update();
|
2018-09-11 23:42:57 -04:00
|
|
|
setTimeout(() => { dotgrid.interface.update(true); }, 250)
|
2018-03-06 19:50:41 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
this.update = function()
|
|
|
|
{
|
2018-09-11 23:27:01 -04:00
|
|
|
if(!is_color(this.input.value)){ return; }
|
2018-03-06 19:50:41 -05:00
|
|
|
|
2018-09-11 23:27:01 -04:00
|
|
|
let hex = `#${this.input.value}`;
|
|
|
|
|
2018-09-11 23:42:57 -04:00
|
|
|
document.getElementById("option_color").children[0].style.fill = hex;
|
|
|
|
document.getElementById("option_color").children[0].style.stroke = hex;
|
2018-03-06 19:50:41 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
this.listen = function(e)
|
|
|
|
{
|
|
|
|
if(e.key == "Enter"){
|
|
|
|
this.validate();
|
|
|
|
e.preventDefault();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2018-08-28 17:41:41 -04:00
|
|
|
if(e.key == "Escape"){
|
|
|
|
this.stop();
|
|
|
|
e.preventDefault();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2018-03-06 19:50:41 -05:00
|
|
|
this.update();
|
|
|
|
}
|
|
|
|
|
2018-05-06 19:05:25 -04:00
|
|
|
function is_color(val)
|
2018-03-21 03:10:09 -04:00
|
|
|
{
|
2018-09-11 23:27:01 -04:00
|
|
|
if(val.length != 3 && val.length != 6){
|
2018-05-06 19:05:25 -04:00
|
|
|
return false
|
|
|
|
}
|
|
|
|
|
2018-09-11 23:27:01 -04:00
|
|
|
let re = /[0-9A-Fa-f]/g;
|
2018-03-21 03:10:09 -04:00
|
|
|
return re.test(val)
|
|
|
|
}
|
|
|
|
|
2018-09-11 23:27:01 -04:00
|
|
|
this.input.onkeyup = function(event){ dotgrid.picker.listen(event); };
|
2018-03-06 19:50:41 -05:00
|
|
|
}
|