colour.golf.js
2024-06-10 02:34
Adds a colour picker & toolbar to drawing canvas for https://t0.vc/g.
Attachment | Type | Size |
---|---|---|
colour.golf.js | text/javascript | 2.7KiB |
colour.js | text/javascript | 1.8KiB |
colour.min.js | text/javascript | 928.0B |
colour.golf.js – text/javascript, 2.7KiB
((
$Document,
_str_createElement,
_str_addEventListener,
_str_preventDefault,
_str_input,
_str_drawTools,
_str_strokeStyle,
_str_color,
_str_range,
_str_opacity,
_str_lineWidth,
_str_change,
_str_click,
_str_value,
_str_classList,
_context,
$canvas,
$toolbar,
$picker,
$alpha,
$thickness,
$show,
StrokeStyle,
LineWidth,
ResetValuesFromCanvas,
ShowToolbar
) => {
$canvas = $Document.querySelector('[name^="web"] + canvas:has(+ a)');
$toolbar = $Document[_str_createElement]("div");
$picker = $Document[_str_createElement](_str_input);
$alpha = $Document[_str_createElement](_str_input);
$thickness = $Document[_str_createElement](_str_input);
$show = $Document[_str_createElement]('a');
_context = $canvas.getContext("2d");
$toolbar.id = _str_drawTools;
$toolbar.style.display = "none";
$show.style.display = 'block';
$show.href = '#';
$show.textContent = _str_drawTools;
$picker[_str_classList].add(`${_str_drawTools}__${_str_strokeStyle}-${_str_color}`);
$picker.type = _str_color;
$alpha[_str_classList].add(
`${_str_drawTools}__${_str_strokeStyle}-${_str_opacity}`
);
$alpha.type = _str_range;
$alpha.title = _str_opacity;
$alpha.style.maxWidth = "100px";
$alpha.min = 0;
$alpha.max = 255;
$thickness[_str_classList].add(`${_str_drawTools}__${_str_lineWidth}`);
$thickness.type = _str_range;
$thickness.title = _str_lineWidth;
$thickness.style.maxWidth = "100px";
$thickness.min = 0;
$thickness.max = 15;
$canvas.before($toolbar, $show);
$toolbar.append($picker);
$picker.after($alpha, $thickness);
StrokeStyle = () =>
(_context[_str_strokeStyle] =
$picker[_str_value] +
parseInt($alpha[_str_value]).toString(16).padStart(2, "0"));
LineWidth = () => (_context[_str_lineWidth] = $thickness[_str_value]);
ResetValuesFromCanvas = (e) => {
e && e[_str_preventDefault]();
$picker[_str_value] = _context[_str_strokeStyle];
$alpha[_str_value] = 255;
$thickness[_str_value] = _context[_str_lineWidth];
};
ShowToolbar = (e) => {
e[_str_preventDefault]();
$toolbar.style.display = "flex";
$show.remove();
}
$alpha[_str_addEventListener](_str_change, StrokeStyle);
$picker[_str_addEventListener](_str_change, StrokeStyle);
$thickness[_str_addEventListener](_str_change, LineWidth);
$canvas.nextSibling[_str_addEventListener](_str_click, ResetValuesFromCanvas);
$show[_str_addEventListener](_str_click, ShowToolbar);
ResetValuesFromCanvas();
})(
document,
"createElement",
"addEventListener",
"preventDefault",
"input",
"draw-tools",
"strokeStyle",
"color",
"range",
"opacity",
"lineWidth",
"change",
"click",
"value",
"classList"
);
colour.js – text/javascript, 1.8KiB
const canvas = document.querySelector('[name^="web"] + canvas:has(+ a)');
const toolbar = document.createElement("div");
const picker = document.createElement("input");
const alpha = document.createElement("input");
const thickness = document.createElement("input");
const show = document.createElement('a');
const context = canvas.getContext("2d");
toolbar.id = "draw-tools";
toolbar.style.display = "none";
show.style.display = 'block'
show.href = '#';
show.textContent = 'tools';
picker.classList.add('draw-tools__strokeStyle-color');
picker.type = "color";
picker.title = "stroke color";
alpha.classList.add('draw-tools__strokeStyle-opacity');
alpha.type = "range";
alpha.title = "stroke opacity";
alpha.style.maxWidth = "100px";
alpha.min = 0;
alpha.max = 255;
thickness.classList.add('draw-tools__lineWidth');
thickness.type = "range";
thickness.title = "stroke opacity";
thickness.style.maxWidth = "100px";
thickness.min = 0;
thickness.max = 15;
canvas.before(toolbar, show);
toolbar.append(picker);
picker.after(alpha, thickness);
const strokeStyle = () =>
(context.strokeStyle =
picker.value +
parseInt(alpha.value).toString(16).padStart(2, "0").toUpperCase());
const lineWidth = () => context.lineWidth = thickness.value;
const resetValuesFromCanvas = (e) => {
e && e.preventDefault();
picker.value = context.strokeStyle;
alpha.value = 255;
thickness.value = context.lineWidth;
};
const showToolbar = (e) => {
e.preventDefault();
toolbar.style.display = "flex";
show.remove();
}
alpha.addEventListener("change", strokeStyle);
picker.addEventListener("change", strokeStyle);
thickness.addEventListener("change", lineWidth);
canvas.nextSibling.addEventListener('click', resetValuesFromCanvas);
show.addEventListener('click', showToolbar);
resetValuesFromCanvas();
colour.min.js – text/javascript, 928.0B
((e,t,a,l,n,d,i,s,r,o,p,y,c,m,x,$,h,v,_,f,g,u,S,b,k,W)=>{h=e.querySelector('[name^="web"] + canvas:has(+ a)'),v=e[t]("div"),_=e[t](n),f=e[t](n),g=e[t](n),u=e[t]("a"),$=h.getContext("2d"),v.id=d,v.style.display="none",u.style.display="block",u.href="#",u.textContent=d,_[x].add(`${d}__${i}-${s}`),_.type=s,f[x].add(`${d}__${i}-${o}`),f.type=r,f.title=o,f.style.maxWidth="100px",f.min=0,f.max=255,g[x].add(`${d}__${p}`),g.type=r,g.title=p,g.style.maxWidth="100px",g.min=0,g.max=15,h.before(v,u),v.append(_),_.after(f,g),S=()=>$[i]=_[m]+parseInt(f[m]).toString(16).padStart(2,"0"),b=()=>$[p]=g[m],k=e=>{e&&e[l](),_[m]=$[i],f[m]=255,g[m]=$[p]},W=e=>{e[l](),v.style.display="flex",u.remove()},f[a](y,S),_[a](y,S),g[a](y,b),h.nextSibling[a](c,k),u[a](c,W),k()})(document,"createElement","addEventListener","preventDefault","input","draw-tools","strokeStyle","color","range","opacity","lineWidth","change","click","value","classList");