pointvec/desktop/sources/scripts/picker.js

126 lines
2.8 KiB
JavaScript
Raw Normal View History

2018-08-28 00:34:17 -04:00
'use strict';
2018-03-06 19:50:41 -05:00
function Picker()
{
this.memory = "";
this.el = document.createElement("input");
this.el.id = "picker"
this.original = null;
this.start = function()
{
2018-07-26 04:40:06 -04:00
this.el.setAttribute("placeholder",`${dotgrid.tool.style().color}`)
2018-05-06 19:15:23 -04:00
2018-08-17 16:04:54 -04:00
try{ dotgrid.controller.set("picker"); }
catch(err){ console.log("No controller"); }
2018-03-06 19:50:41 -05:00
dotgrid.interface.el.className = "picker"
this.el.focus()
this.original = dotgrid.tool.style().color
this.el.value = ""
}
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 = ""
this.el.blur()
this.el.value = ""
}
this.validate = function()
{
2018-08-26 15:39:15 -04:00
let parts = this.parse(this.el.value)
2018-03-21 03:10:09 -04:00
2018-05-06 19:05:25 -04:00
if(parts.color){ this.set_color(parts.color); }
2018-05-07 00:51:58 -04:00
if(parts.size){ this.set_size(parts.size); }
2018-05-06 19:05:25 -04:00
2018-05-10 16:46:50 -04:00
dotgrid.guide.refresh();
2018-08-17 16:04:54 -04:00
try{ dotgrid.controller.set(); }
catch(err){ console.log("No controller"); }
2018-05-07 00:51:58 -04:00
dotgrid.interface.el.className = ""
this.el.blur()
this.el.value = ""
2018-07-26 04:40:06 -04:00
setTimeout(() => { dotgrid.interface.refresh(true); }, 500)
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; }
dotgrid.tool.style().color = this.original;
2018-03-07 02:43:46 -05:00
dotgrid.tool.style().fill = dotgrid.tool.style().fill != "none" ? this.original : "none";
2018-05-10 16:46:50 -04:00
dotgrid.guide.refresh();
2018-03-06 19:50:41 -05:00
}
this.update = function()
{
2018-08-26 15:39:15 -04:00
let parts = this.parse(this.el.value)
2018-05-07 00:51:58 -04:00
if(!parts.color){ return; }
2018-03-06 19:50:41 -05:00
2018-05-07 00:51:58 -04:00
dotgrid.tool.style().color = parts.color;
dotgrid.tool.style().fill = dotgrid.tool.style().fill != "none" ? parts.color : "none";
2018-05-10 16:46:50 -04:00
dotgrid.guide.refresh();
2018-03-06 19:50:41 -05:00
}
this.listen = function(e)
{
if(e.key == "Enter"){
this.validate();
e.preventDefault();
return;
}
this.update();
}
2018-05-06 19:05:25 -04:00
this.parse = function(value)
{
2018-08-26 15:39:15 -04:00
let parts = value.split(" ");
let color = null;
let size = null;
2018-05-06 19:05:25 -04:00
2018-08-26 15:39:15 -04:00
for(let id in parts){
let part = parts[id];
2018-05-06 19:05:25 -04:00
if(is_color(part) && !color){ color = part; }
if(is_size(part) && !size){ size = { width:parseInt(part.toLowerCase().split("x")[0]),height:parseInt(part.toLowerCase().split("x")[1]) }; }
}
return {color:color,size:size}
}
function is_size(val)
{
if(val.toLowerCase().indexOf("x") < 1){ return false; }
return true
}
function is_color(val)
2018-03-21 03:10:09 -04:00
{
2018-05-06 19:05:25 -04:00
if(val.length != 4 && val.length != 7){
return false
}
2018-08-26 15:39:15 -04:00
let re = /\#[0-9A-Fa-f]/g;
2018-03-21 03:10:09 -04:00
return re.test(val)
}
2018-03-06 19:50:41 -05:00
this.el.onkeyup = function(event){ dotgrid.picker.listen(event); };
}