mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-05 19:24:39 +00:00
fix code styling
This commit is contained in:
SethBurkart123
+246
-197
@@ -5,20 +5,32 @@
|
||||
*/
|
||||
|
||||
((window, document, Math) => {
|
||||
const ctx = document.createElement('canvas').getContext('2d');
|
||||
const ctx = document.createElement("canvas").getContext("2d");
|
||||
const currentColor = { r: 0, g: 0, b: 0, h: 0, s: 0, v: 0, a: 1 };
|
||||
let picker, colorArea, colorAreaDims, colorMarker, colorPreview, colorValue, clearButton,
|
||||
hueSlider, hueMarker, alphaSlider, alphaMarker, currentEl, currentFormat, oldColor;
|
||||
let picker,
|
||||
colorArea,
|
||||
colorAreaDims,
|
||||
colorMarker,
|
||||
colorPreview,
|
||||
colorValue,
|
||||
clearButton,
|
||||
hueSlider,
|
||||
hueMarker,
|
||||
alphaSlider,
|
||||
alphaMarker,
|
||||
currentEl,
|
||||
currentFormat,
|
||||
oldColor;
|
||||
|
||||
// Default settings
|
||||
const settings = {
|
||||
el: '.coloris',
|
||||
el: ".coloris",
|
||||
parent: null,
|
||||
theme: 'default',
|
||||
themeMode: 'light',
|
||||
theme: "default",
|
||||
themeMode: "light",
|
||||
wrap: true,
|
||||
margin: 2,
|
||||
format: 'hex',
|
||||
format: "hex",
|
||||
formatToggle: false,
|
||||
swatches: [],
|
||||
swatchesOnly: false,
|
||||
@@ -27,19 +39,20 @@
|
||||
autoClose: false,
|
||||
clearButton: {
|
||||
show: false,
|
||||
label: 'Clear'
|
||||
label: "Clear",
|
||||
},
|
||||
a11y: {
|
||||
open: 'Open color picker',
|
||||
close: 'Close color picker',
|
||||
marker: 'Saturation: {s}. Brightness: {v}.',
|
||||
hueSlider: 'Hue slider',
|
||||
alphaSlider: 'Opacity slider',
|
||||
input: 'Color value field',
|
||||
format: 'Color format',
|
||||
swatch: 'Color swatch',
|
||||
instruction: 'Saturation and brightness selector. Use up, down, left and right arrow keys to select.'
|
||||
}
|
||||
open: "Open color picker",
|
||||
close: "Close color picker",
|
||||
marker: "Saturation: {s}. Brightness: {v}.",
|
||||
hueSlider: "Hue slider",
|
||||
alphaSlider: "Opacity slider",
|
||||
input: "Color value field",
|
||||
format: "Color format",
|
||||
swatch: "Color swatch",
|
||||
instruction:
|
||||
"Saturation and brightness selector. Use up, down, left and right arrow keys to select.",
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -47,81 +60,93 @@
|
||||
* @param {object} options Configuration options.
|
||||
*/
|
||||
function configure(options) {
|
||||
if (typeof options !== 'object') {
|
||||
if (typeof options !== "object") {
|
||||
return;
|
||||
}
|
||||
|
||||
for (const key in options) {
|
||||
switch (key) {
|
||||
case 'el':
|
||||
case "el":
|
||||
bindFields(options.el);
|
||||
if (options.wrap !== false) {
|
||||
wrapFields(options.el);
|
||||
}
|
||||
break;
|
||||
case 'parent':
|
||||
case "parent":
|
||||
settings.parent = document.querySelector(options.parent);
|
||||
if (settings.parent) {
|
||||
settings.parent.appendChild(picker);
|
||||
}
|
||||
break;
|
||||
case 'themeMode':
|
||||
case "themeMode":
|
||||
settings.themeMode = options.themeMode;
|
||||
if (options.themeMode === 'auto' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
settings.themeMode = 'dark';
|
||||
if (
|
||||
options.themeMode === "auto" &&
|
||||
window.matchMedia &&
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
) {
|
||||
settings.themeMode = "dark";
|
||||
}
|
||||
// The lack of a break statement is intentional
|
||||
case 'theme':
|
||||
case "theme":
|
||||
if (options.theme) {
|
||||
settings.theme = options.theme;
|
||||
}
|
||||
picker.className = `clr-picker clr-${settings.theme} clr-${settings.themeMode}`;
|
||||
break;
|
||||
case 'margin':
|
||||
case "margin":
|
||||
options.margin *= 1;
|
||||
settings.margin = !isNaN(options.margin) ? options.margin : settings.margin;
|
||||
settings.margin = !isNaN(options.margin)
|
||||
? options.margin
|
||||
: settings.margin;
|
||||
break;
|
||||
case 'wrap':
|
||||
case "wrap":
|
||||
if (options.el && options.wrap) {
|
||||
wrapFields(options.el);
|
||||
}
|
||||
break;
|
||||
case 'formatToggle':
|
||||
getEl('clr-format').style.display = options.formatToggle ? 'block' : 'none';
|
||||
case "formatToggle":
|
||||
getEl("clr-format").style.display = options.formatToggle
|
||||
? "block"
|
||||
: "none";
|
||||
if (options.formatToggle) {
|
||||
settings.format = 'auto';
|
||||
settings.format = "auto";
|
||||
}
|
||||
break;
|
||||
case 'swatches':
|
||||
case "swatches":
|
||||
if (Array.isArray(options.swatches)) {
|
||||
const swatches = [];
|
||||
|
||||
options.swatches.forEach((swatch, i) => {
|
||||
swatches.push(`<button id="clr-swatch-${i}" aria-labelledby="clr-swatch-label clr-swatch-${i}" style="color: ${swatch};">${swatch}</button>`);
|
||||
swatches.push(
|
||||
`<button id="clr-swatch-${i}" aria-labelledby="clr-swatch-label clr-swatch-${i}" style="color: ${swatch};">${swatch}</button>`,
|
||||
);
|
||||
});
|
||||
|
||||
if (swatches.length) {
|
||||
getEl('clr-swatches').innerHTML = `<div>${swatches.join('')}</div>`;
|
||||
getEl("clr-swatches").innerHTML = `<div>${swatches.join(
|
||||
"",
|
||||
)}</div>`;
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'swatchesOnly':
|
||||
case "swatchesOnly":
|
||||
settings.swatchesOnly = !!options.swatchesOnly;
|
||||
picker.setAttribute('data-minimal', settings.swatchesOnly);
|
||||
picker.setAttribute("data-minimal", settings.swatchesOnly);
|
||||
|
||||
if (settings.swatchesOnly) {
|
||||
settings.autoClose = true;
|
||||
}
|
||||
break;
|
||||
case 'alpha':
|
||||
case "alpha":
|
||||
settings.alpha = !!options.alpha;
|
||||
picker.setAttribute('data-alpha', settings.alpha);
|
||||
picker.setAttribute("data-alpha", settings.alpha);
|
||||
break;
|
||||
case 'clearButton':
|
||||
let display = 'none';
|
||||
case "clearButton":
|
||||
let display = "none";
|
||||
|
||||
if (options.clearButton.show) {
|
||||
display = 'block';
|
||||
display = "block";
|
||||
}
|
||||
|
||||
if (options.clearButton.label) {
|
||||
@@ -130,11 +155,11 @@
|
||||
|
||||
clearButton.style.display = display;
|
||||
break;
|
||||
case 'a11y':
|
||||
case "a11y":
|
||||
const labels = options.a11y;
|
||||
let update = false;
|
||||
|
||||
if (typeof labels === 'object') {
|
||||
if (typeof labels === "object") {
|
||||
for (const label in labels) {
|
||||
if (labels[label] && settings.a11y[label]) {
|
||||
settings.a11y[label] = labels[label];
|
||||
@@ -144,16 +169,16 @@
|
||||
}
|
||||
|
||||
if (update) {
|
||||
const openLabel = getEl('clr-open-label');
|
||||
const swatchLabel = getEl('clr-swatch-label');
|
||||
const openLabel = getEl("clr-open-label");
|
||||
const swatchLabel = getEl("clr-swatch-label");
|
||||
|
||||
openLabel.innerHTML = settings.a11y.open;
|
||||
swatchLabel.innerHTML = settings.a11y.swatch;
|
||||
colorPreview.setAttribute('aria-label', settings.a11y.close);
|
||||
hueSlider.setAttribute('aria-label', settings.a11y.hueSlider);
|
||||
alphaSlider.setAttribute('aria-label', settings.a11y.alphaSlider);
|
||||
colorValue.setAttribute('aria-label', settings.a11y.input);
|
||||
colorArea.setAttribute('aria-label', settings.a11y.instruction);
|
||||
colorPreview.setAttribute("aria-label", settings.a11y.close);
|
||||
hueSlider.setAttribute("aria-label", settings.a11y.hueSlider);
|
||||
alphaSlider.setAttribute("aria-label", settings.a11y.alphaSlider);
|
||||
colorValue.setAttribute("aria-label", settings.a11y.input);
|
||||
colorArea.setAttribute("aria-label", settings.a11y.instruction);
|
||||
}
|
||||
default:
|
||||
settings[key] = options[key];
|
||||
@@ -167,7 +192,7 @@
|
||||
*/
|
||||
function bindFields(selector) {
|
||||
// Show the color picker on click on the input fields that match the selector
|
||||
addListener(document, 'click', selector, event => {
|
||||
addListener(document, "click", selector, (event) => {
|
||||
const parent = settings.parent;
|
||||
const coords = event.target.getBoundingClientRect();
|
||||
const scrollY = window.scrollY;
|
||||
@@ -179,7 +204,7 @@
|
||||
currentEl = event.target;
|
||||
oldColor = currentEl.value;
|
||||
currentFormat = getColorFormatFromStr(oldColor);
|
||||
picker.classList.add('clr-open');
|
||||
picker.classList.add("clr-open");
|
||||
|
||||
const pickerWidth = picker.offsetWidth;
|
||||
const pickerHeight = picker.offsetHeight;
|
||||
@@ -215,21 +240,24 @@
|
||||
reposition.left = true;
|
||||
}
|
||||
|
||||
if (top + pickerHeight - scrollY > document.documentElement.clientHeight) {
|
||||
if (
|
||||
top + pickerHeight - scrollY >
|
||||
document.documentElement.clientHeight
|
||||
) {
|
||||
top = scrollY + coords.y - pickerHeight - settings.margin;
|
||||
reposition.top = true;
|
||||
}
|
||||
}
|
||||
|
||||
picker.classList.toggle('clr-left', reposition.left);
|
||||
picker.classList.toggle('clr-top', reposition.top);
|
||||
picker.classList.toggle("clr-left", reposition.left);
|
||||
picker.classList.toggle("clr-top", reposition.top);
|
||||
picker.style.left = `${left}px`;
|
||||
picker.style.top = `${top}px`;
|
||||
colorAreaDims = {
|
||||
width: colorArea.offsetWidth,
|
||||
height: colorArea.offsetHeight,
|
||||
x: picker.offsetLeft + colorArea.offsetLeft + offset.x,
|
||||
y: picker.offsetTop + colorArea.offsetTop + offset.y
|
||||
y: picker.offsetTop + colorArea.offsetTop + offset.y,
|
||||
};
|
||||
|
||||
setColorFromStr(oldColor);
|
||||
@@ -240,11 +268,11 @@
|
||||
});
|
||||
|
||||
// Update the color preview of the input fields that match the selector
|
||||
addListener(document, 'input', selector, event => {
|
||||
addListener(document, "input", selector, (event) => {
|
||||
const parent = event.target.parentNode;
|
||||
|
||||
// Only update the preview if the field has been previously wrapped
|
||||
if (parent.classList.contains('clr-field')) {
|
||||
if (parent.classList.contains("clr-field")) {
|
||||
parent.style.color = event.target.value;
|
||||
}
|
||||
});
|
||||
@@ -255,15 +283,15 @@
|
||||
* @param {string} selector One or more selectors pointing to input fields.
|
||||
*/
|
||||
function wrapFields(selector) {
|
||||
document.querySelectorAll(selector).forEach(field => {
|
||||
document.querySelectorAll(selector).forEach((field) => {
|
||||
const parentNode = field.parentNode;
|
||||
|
||||
if (!parentNode.classList.contains('clr-field')) {
|
||||
const wrapper = document.createElement('div');
|
||||
if (!parentNode.classList.contains("clr-field")) {
|
||||
const wrapper = document.createElement("div");
|
||||
|
||||
wrapper.innerHTML = `<button aria-labelledby="clr-open-label"></button>`;
|
||||
parentNode.insertBefore(wrapper, field);
|
||||
wrapper.setAttribute('class', 'clr-field');
|
||||
wrapper.setAttribute("class", "clr-field");
|
||||
wrapper.style.color = field.value;
|
||||
wrapper.appendChild(field);
|
||||
}
|
||||
@@ -281,14 +309,14 @@
|
||||
currentEl.value = oldColor;
|
||||
|
||||
// Trigger an "input" event to force update the thumbnail next to the input field
|
||||
currentEl.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
currentEl.dispatchEvent(new Event("input", { bubbles: true }));
|
||||
}
|
||||
|
||||
if (oldColor !== currentEl.value) {
|
||||
currentEl.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
currentEl.dispatchEvent(new Event("change", { bubbles: true }));
|
||||
}
|
||||
|
||||
picker.classList.remove('clr-open');
|
||||
picker.classList.remove("clr-open");
|
||||
|
||||
if (settings.focusInput) {
|
||||
currentEl.focus({ preventScroll: true });
|
||||
@@ -312,10 +340,12 @@
|
||||
// Update the UI
|
||||
hueSlider.value = hsva.h;
|
||||
picker.style.color = `hsl(${hsva.h}, 100%, 50%)`;
|
||||
hueMarker.style.left = `${hsva.h / 360 * 100}%`;
|
||||
hueMarker.style.left = `${(hsva.h / 360) * 100}%`;
|
||||
|
||||
colorMarker.style.left = `${colorAreaDims.width * hsva.s / 100}px`;
|
||||
colorMarker.style.top = `${colorAreaDims.height - (colorAreaDims.height * hsva.v / 100)}px`;
|
||||
colorMarker.style.left = `${(colorAreaDims.width * hsva.s) / 100}px`;
|
||||
colorMarker.style.top = `${
|
||||
colorAreaDims.height - (colorAreaDims.height * hsva.v) / 100
|
||||
}px`;
|
||||
|
||||
alphaSlider.value = hsva.a * 100;
|
||||
alphaMarker.style.left = `${hsva.a * 100}%`;
|
||||
@@ -329,11 +359,11 @@
|
||||
function getColorFormatFromStr(str) {
|
||||
const format = str.substring(0, 3).toLowerCase();
|
||||
|
||||
if (format === 'rgb' || format === 'hsl') {
|
||||
if (format === "rgb" || format === "hsl") {
|
||||
return format;
|
||||
}
|
||||
|
||||
return 'hex';
|
||||
return "hex";
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -343,7 +373,7 @@
|
||||
function pickColor(color) {
|
||||
if (currentEl) {
|
||||
currentEl.value = color !== undefined ? color : colorValue.value;
|
||||
currentEl.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
currentEl.dispatchEvent(new Event("input", { bubbles: true }));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -355,9 +385,9 @@
|
||||
function setColorAtPosition(x, y) {
|
||||
const hsva = {
|
||||
h: hueSlider.value * 1,
|
||||
s: x / colorAreaDims.width * 100,
|
||||
v: 100 - (y / colorAreaDims.height * 100),
|
||||
a: alphaSlider.value / 100
|
||||
s: (x / colorAreaDims.width) * 100,
|
||||
v: 100 - (y / colorAreaDims.height) * 100,
|
||||
a: alphaSlider.value / 100,
|
||||
};
|
||||
const rgba = HSVAtoRGBA(hsva);
|
||||
|
||||
@@ -376,9 +406,9 @@
|
||||
|
||||
saturation = saturation.toFixed(1) * 1;
|
||||
value = value.toFixed(1) * 1;
|
||||
label = label.replace('{s}', saturation);
|
||||
label = label.replace('{v}', value);
|
||||
colorMarker.setAttribute('aria-label', label);
|
||||
label = label.replace("{s}", saturation);
|
||||
label = label.replace("{v}", value);
|
||||
colorMarker.setAttribute("aria-label", label);
|
||||
}
|
||||
|
||||
//
|
||||
@@ -390,7 +420,7 @@
|
||||
function getPointerPosition(event) {
|
||||
return {
|
||||
pageX: event.changedTouches ? event.changedTouches[0].pageX : event.pageX,
|
||||
pageY: event.changedTouches ? event.changedTouches[0].pageY : event.pageY
|
||||
pageY: event.changedTouches ? event.changedTouches[0].pageY : event.pageY,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -407,8 +437,8 @@
|
||||
y += settings.parent.scrollTop;
|
||||
}
|
||||
|
||||
x = (x < 0) ? 0 : (x > colorAreaDims.width) ? colorAreaDims.width : x;
|
||||
y = (y < 0) ? 0 : (y > colorAreaDims.height) ? colorAreaDims.height : y;
|
||||
x = x < 0 ? 0 : x > colorAreaDims.width ? colorAreaDims.width : x;
|
||||
y = y < 0 ? 0 : y > colorAreaDims.height ? colorAreaDims.height : y;
|
||||
|
||||
colorMarker.style.left = `${x}px`;
|
||||
colorMarker.style.top = `${y}px`;
|
||||
@@ -426,8 +456,8 @@
|
||||
* * @param {number} offsetY The vertical amount to move.
|
||||
*/
|
||||
function moveMarkerOnKeydown(offsetX, offsetY) {
|
||||
const x = colorMarker.style.left.replace('px', '') * 1 + offsetX;
|
||||
const y = colorMarker.style.top.replace('px', '') * 1 + offsetY;
|
||||
const x = colorMarker.style.left.replace("px", "") * 1 + offsetX;
|
||||
const y = colorMarker.style.top.replace("px", "") * 1 + offsetY;
|
||||
|
||||
colorMarker.style.left = `${x}px`;
|
||||
colorMarker.style.top = `${y}px`;
|
||||
@@ -460,27 +490,27 @@
|
||||
colorPreview.style.color = hex;
|
||||
|
||||
// Force repaint the color and alpha gradients as a workaround for a Google Chrome bug
|
||||
colorArea.style.display = 'none';
|
||||
colorArea.style.display = "none";
|
||||
colorArea.offsetHeight;
|
||||
colorArea.style.display = '';
|
||||
alphaMarker.nextElementSibling.style.display = 'none';
|
||||
colorArea.style.display = "";
|
||||
alphaMarker.nextElementSibling.style.display = "none";
|
||||
alphaMarker.nextElementSibling.offsetHeight;
|
||||
alphaMarker.nextElementSibling.style.display = '';
|
||||
alphaMarker.nextElementSibling.style.display = "";
|
||||
|
||||
if (format === 'mixed') {
|
||||
format = currentColor.a === 1 ? 'hex' : 'rgb';
|
||||
} else if (format === 'auto') {
|
||||
if (format === "mixed") {
|
||||
format = currentColor.a === 1 ? "hex" : "rgb";
|
||||
} else if (format === "auto") {
|
||||
format = currentFormat;
|
||||
}
|
||||
|
||||
switch (format) {
|
||||
case 'hex':
|
||||
case "hex":
|
||||
colorValue.value = hex;
|
||||
break;
|
||||
case 'rgb':
|
||||
case "rgb":
|
||||
colorValue.value = RGBAToStr(currentColor);
|
||||
break;
|
||||
case 'hsl':
|
||||
case "hsl":
|
||||
colorValue.value = HSLAToStr(HSVAtoHSLA(currentColor));
|
||||
break;
|
||||
}
|
||||
@@ -494,11 +524,11 @@
|
||||
*/
|
||||
function setHue() {
|
||||
const hue = hueSlider.value * 1;
|
||||
const x = colorMarker.style.left.replace('px', '') * 1;
|
||||
const y = colorMarker.style.top.replace('px', '') * 1;
|
||||
const x = colorMarker.style.left.replace("px", "") * 1;
|
||||
const y = colorMarker.style.top.replace("px", "") * 1;
|
||||
|
||||
picker.style.color = `hsl(${hue}, 100%, 50%)`;
|
||||
hueMarker.style.left = `${hue / 360 * 100}%`;
|
||||
hueMarker.style.left = `${(hue / 360) * 100}%`;
|
||||
|
||||
setColorAtPosition(x, y);
|
||||
}
|
||||
@@ -524,11 +554,11 @@
|
||||
const value = hsva.v / 100;
|
||||
let chroma = saturation * value;
|
||||
let hueBy60 = hsva.h / 60;
|
||||
let x = chroma * (1 - Math.abs(hueBy60 % 2 - 1));
|
||||
let x = chroma * (1 - Math.abs((hueBy60 % 2) - 1));
|
||||
let m = value - chroma;
|
||||
|
||||
chroma = (chroma + m);
|
||||
x = (x + m);
|
||||
chroma = chroma + m;
|
||||
x = x + m;
|
||||
|
||||
const index = Math.floor(hueBy60) % 6;
|
||||
const red = [chroma, x, m, m, x, chroma][index];
|
||||
@@ -539,7 +569,7 @@
|
||||
r: Math.round(red * 255),
|
||||
g: Math.round(green * 255),
|
||||
b: Math.round(blue * 255),
|
||||
a: hsva.a
|
||||
a: hsva.a,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -550,18 +580,20 @@
|
||||
*/
|
||||
function HSVAtoHSLA(hsva) {
|
||||
const value = hsva.v / 100;
|
||||
const lightness = value * (1 - (hsva.s / 100) / 2);
|
||||
const lightness = value * (1 - hsva.s / 100 / 2);
|
||||
let saturation;
|
||||
|
||||
if (lightness > 0 && lightness < 1) {
|
||||
saturation = Math.round((value - lightness) / Math.min(lightness, 1 - lightness) * 100);
|
||||
saturation = Math.round(
|
||||
((value - lightness) / Math.min(lightness, 1 - lightness)) * 100,
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
h: hsva.h,
|
||||
s: saturation || 0,
|
||||
l: Math.round(lightness * 100),
|
||||
a: hsva.a
|
||||
a: hsva.a,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -582,10 +614,18 @@
|
||||
let saturation = 0;
|
||||
|
||||
if (chroma) {
|
||||
if (xmax === red) { hue = ((green - blue) / chroma); }
|
||||
if (xmax === green) { hue = 2 + (blue - red) / chroma; }
|
||||
if (xmax === blue) { hue = 4 + (red - green) / chroma; }
|
||||
if (xmax) { saturation = chroma / xmax; }
|
||||
if (xmax === red) {
|
||||
hue = (green - blue) / chroma;
|
||||
}
|
||||
if (xmax === green) {
|
||||
hue = 2 + (blue - red) / chroma;
|
||||
}
|
||||
if (xmax === blue) {
|
||||
hue = 4 + (red - green) / chroma;
|
||||
}
|
||||
if (xmax) {
|
||||
saturation = chroma / xmax;
|
||||
}
|
||||
}
|
||||
|
||||
hue = Math.floor(hue * 60);
|
||||
@@ -594,7 +634,7 @@
|
||||
h: hue < 0 ? hue + 360 : hue,
|
||||
s: Math.round(saturation * 100),
|
||||
v: Math.round(value * 100),
|
||||
a: rgba.a
|
||||
a: rgba.a,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -604,11 +644,12 @@
|
||||
* @return {object} Red, green, blue and alpha values.
|
||||
*/
|
||||
function strToRGBA(str) {
|
||||
const regex = /^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i;
|
||||
const regex =
|
||||
/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i;
|
||||
let match, rgba;
|
||||
|
||||
// Default to black for invalid color strings
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.fillStyle = "#000";
|
||||
|
||||
// Use canvas to convert the string to a valid color string
|
||||
ctx.fillStyle = str;
|
||||
@@ -619,16 +660,18 @@
|
||||
r: match[3] * 1,
|
||||
g: match[4] * 1,
|
||||
b: match[5] * 1,
|
||||
a: match[6] * 1
|
||||
a: match[6] * 1,
|
||||
};
|
||||
|
||||
} else {
|
||||
match = ctx.fillStyle.replace('#', '').match(/.{2}/g).map(h => parseInt(h, 16));
|
||||
match = ctx.fillStyle
|
||||
.replace("#", "")
|
||||
.match(/.{2}/g)
|
||||
.map((h) => parseInt(h, 16));
|
||||
rgba = {
|
||||
r: match[0],
|
||||
g: match[1],
|
||||
b: match[2],
|
||||
a: 1
|
||||
a: 1,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -644,30 +687,30 @@
|
||||
let R = rgba.r.toString(16);
|
||||
let G = rgba.g.toString(16);
|
||||
let B = rgba.b.toString(16);
|
||||
let A = '';
|
||||
let A = "";
|
||||
|
||||
if (rgba.r < 16) {
|
||||
R = '0' + R;
|
||||
R = "0" + R;
|
||||
}
|
||||
|
||||
if (rgba.g < 16) {
|
||||
G = '0' + G;
|
||||
G = "0" + G;
|
||||
}
|
||||
|
||||
if (rgba.b < 16) {
|
||||
B = '0' + B;
|
||||
B = "0" + B;
|
||||
}
|
||||
|
||||
if (settings.alpha && rgba.a < 1) {
|
||||
const alpha = rgba.a * 255 | 0;
|
||||
const alpha = (rgba.a * 255) | 0;
|
||||
A = alpha.toString(16);
|
||||
|
||||
if (alpha < 16) {
|
||||
A = '0' + A;
|
||||
A = "0" + A;
|
||||
}
|
||||
}
|
||||
|
||||
return '#' + R + G + B + A;
|
||||
return "#" + R + G + B + A;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -701,23 +744,23 @@
|
||||
*/
|
||||
function init() {
|
||||
// Render the UI
|
||||
picker = document.createElement('div');
|
||||
picker.setAttribute('id', 'clr-picker');
|
||||
picker.className = 'clr-picker';
|
||||
picker = document.createElement("div");
|
||||
picker.setAttribute("id", "clr-picker");
|
||||
picker.className = "clr-picker";
|
||||
picker.innerHTML =
|
||||
`<input id="clr-color-value" class="clr-color" type="text" value="" aria-label="${settings.a11y.input}">` +
|
||||
`<div id="clr-color-area" class="clr-gradient" role="application" aria-label="${settings.a11y.instruction}">` +
|
||||
'<div id="clr-color-marker" class="clr-marker" tabindex="0"></div>' +
|
||||
'</div>' +
|
||||
"</div>" +
|
||||
'<div class="clr-hue">' +
|
||||
`<input id="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="${settings.a11y.hueSlider}">` +
|
||||
'<div id="clr-hue-marker"></div>' +
|
||||
'</div>' +
|
||||
"</div>" +
|
||||
'<div class="clr-alpha">' +
|
||||
`<input id="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="${settings.a11y.alphaSlider}">` +
|
||||
'<div id="clr-alpha-marker"></div>' +
|
||||
'<span></span>' +
|
||||
'</div>' +
|
||||
"<span></span>" +
|
||||
"</div>" +
|
||||
'<div id="clr-format" class="clr-format">' +
|
||||
'<fieldset class="clr-segmented">' +
|
||||
`<legend>${settings.a11y.format}</legend>` +
|
||||
@@ -727,9 +770,9 @@
|
||||
'<label for="clr-f2">RGB</label>' +
|
||||
'<input id="clr-f3" type="radio" name="clr-format" value="hsl">' +
|
||||
'<label for="clr-f3">HSL</label>' +
|
||||
'<span></span>' +
|
||||
'</fieldset>' +
|
||||
'</div>' +
|
||||
"<span></span>" +
|
||||
"</fieldset>" +
|
||||
"</div>" +
|
||||
'<div id="clr-swatches" class="clr-swatches"></div>' +
|
||||
`<button id="clr-clear" class="clr-clear">${settings.clearButton.label}</button>` +
|
||||
`<button id="clr-color-preview" class="clr-preview" aria-label="${settings.a11y.close}"></button>` +
|
||||
@@ -740,63 +783,63 @@
|
||||
document.body.appendChild(picker);
|
||||
|
||||
// Reference the UI elements
|
||||
colorArea = getEl('clr-color-area');
|
||||
colorMarker = getEl('clr-color-marker');
|
||||
clearButton = getEl('clr-clear');
|
||||
colorPreview = getEl('clr-color-preview');
|
||||
colorValue = getEl('clr-color-value');
|
||||
hueSlider = getEl('clr-hue-slider');
|
||||
hueMarker = getEl('clr-hue-marker');
|
||||
alphaSlider = getEl('clr-alpha-slider');
|
||||
alphaMarker = getEl('clr-alpha-marker');
|
||||
colorArea = getEl("clr-color-area");
|
||||
colorMarker = getEl("clr-color-marker");
|
||||
clearButton = getEl("clr-clear");
|
||||
colorPreview = getEl("clr-color-preview");
|
||||
colorValue = getEl("clr-color-value");
|
||||
hueSlider = getEl("clr-hue-slider");
|
||||
hueMarker = getEl("clr-hue-marker");
|
||||
alphaSlider = getEl("clr-alpha-slider");
|
||||
alphaMarker = getEl("clr-alpha-marker");
|
||||
|
||||
// Bind the picker to the default selector
|
||||
bindFields(settings.el);
|
||||
wrapFields(settings.el);
|
||||
|
||||
addListener(picker, 'mousedown', event => {
|
||||
picker.classList.remove('clr-keyboard-nav');
|
||||
addListener(picker, "mousedown", (event) => {
|
||||
picker.classList.remove("clr-keyboard-nav");
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
addListener(colorArea, 'mousedown', event => {
|
||||
addListener(document, 'mousemove', moveMarker);
|
||||
addListener(colorArea, "mousedown", (event) => {
|
||||
addListener(document, "mousemove", moveMarker);
|
||||
});
|
||||
|
||||
addListener(colorArea, 'touchstart', event => {
|
||||
document.addEventListener('touchmove', moveMarker, { passive: false });
|
||||
addListener(colorArea, "touchstart", (event) => {
|
||||
document.addEventListener("touchmove", moveMarker, { passive: false });
|
||||
});
|
||||
|
||||
addListener(colorMarker, 'mousedown', event => {
|
||||
addListener(document, 'mousemove', moveMarker);
|
||||
addListener(colorMarker, "mousedown", (event) => {
|
||||
addListener(document, "mousemove", moveMarker);
|
||||
});
|
||||
|
||||
addListener(colorMarker, 'touchstart', event => {
|
||||
document.addEventListener('touchmove', moveMarker, { passive: false });
|
||||
addListener(colorMarker, "touchstart", (event) => {
|
||||
document.addEventListener("touchmove", moveMarker, { passive: false });
|
||||
});
|
||||
|
||||
addListener(colorValue, 'change', event => {
|
||||
addListener(colorValue, "change", (event) => {
|
||||
setColorFromStr(colorValue.value);
|
||||
pickColor();
|
||||
});
|
||||
|
||||
addListener(clearButton, 'click', event => {
|
||||
pickColor('');
|
||||
addListener(clearButton, "click", (event) => {
|
||||
pickColor("");
|
||||
closePicker();
|
||||
});
|
||||
|
||||
addListener(colorPreview, 'click', event => {
|
||||
addListener(colorPreview, "click", (event) => {
|
||||
pickColor();
|
||||
closePicker();
|
||||
});
|
||||
|
||||
addListener(document, 'click', '.clr-format input', event => {
|
||||
addListener(document, "click", ".clr-format input", (event) => {
|
||||
currentFormat = event.target.value;
|
||||
updateColor();
|
||||
pickColor();
|
||||
});
|
||||
|
||||
addListener(picker, 'click', '.clr-swatches button', event => {
|
||||
addListener(picker, "click", ".clr-swatches button", (event) => {
|
||||
setColorFromStr(event.target.textContent);
|
||||
pickColor();
|
||||
|
||||
@@ -805,37 +848,39 @@
|
||||
}
|
||||
});
|
||||
|
||||
addListener(document, 'mouseup', event => {
|
||||
document.removeEventListener('mousemove', moveMarker);
|
||||
addListener(document, "mouseup", (event) => {
|
||||
document.removeEventListener("mousemove", moveMarker);
|
||||
});
|
||||
|
||||
addListener(document, 'touchend', event => {
|
||||
document.removeEventListener('touchmove', moveMarker);
|
||||
addListener(document, "touchend", (event) => {
|
||||
document.removeEventListener("touchmove", moveMarker);
|
||||
});
|
||||
|
||||
addListener(document, 'mousedown', event => {
|
||||
picker.classList.remove('clr-keyboard-nav');
|
||||
addListener(document, "mousedown", (event) => {
|
||||
picker.classList.remove("clr-keyboard-nav");
|
||||
closePicker();
|
||||
});
|
||||
|
||||
addListener(document, 'keydown', event => {
|
||||
if (event.key === 'Escape') {
|
||||
addListener(document, "keydown", (event) => {
|
||||
if (event.key === "Escape") {
|
||||
closePicker(true);
|
||||
} else if (event.key === 'Tab') {
|
||||
picker.classList.add('clr-keyboard-nav');
|
||||
} else if (event.key === "Tab") {
|
||||
picker.classList.add("clr-keyboard-nav");
|
||||
}
|
||||
});
|
||||
|
||||
addListener(document, 'click', '.clr-field button', event => {
|
||||
event.target.nextElementSibling.dispatchEvent(new Event('click', { bubbles: true }));
|
||||
addListener(document, "click", ".clr-field button", (event) => {
|
||||
event.target.nextElementSibling.dispatchEvent(
|
||||
new Event("click", { bubbles: true }),
|
||||
);
|
||||
});
|
||||
|
||||
addListener(colorMarker, 'keydown', event => {
|
||||
addListener(colorMarker, "keydown", (event) => {
|
||||
const movements = {
|
||||
ArrowUp: [0, -1],
|
||||
ArrowDown: [0, 1],
|
||||
ArrowLeft: [-1, 0],
|
||||
ArrowRight: [1, 0]
|
||||
ArrowRight: [1, 0],
|
||||
};
|
||||
|
||||
if (Object.keys(movements).indexOf(event.key) !== -1) {
|
||||
@@ -844,9 +889,9 @@
|
||||
}
|
||||
});
|
||||
|
||||
addListener(colorArea, 'click', moveMarker);
|
||||
addListener(hueSlider, 'input', setHue);
|
||||
addListener(alphaSlider, 'input', setAlpha);
|
||||
addListener(colorArea, "click", moveMarker);
|
||||
addListener(hueSlider, "input", setHue);
|
||||
addListener(alphaSlider, "input", setAlpha);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -866,11 +911,12 @@
|
||||
* @param {function} [fn] Event handler if delegation is used.
|
||||
*/
|
||||
function addListener(context, type, selector, fn) {
|
||||
const matches = Element.prototype.matches || Element.prototype.msMatchesSelector;
|
||||
const matches =
|
||||
Element.prototype.matches || Element.prototype.msMatchesSelector;
|
||||
|
||||
// Delegate event to the target of the selector
|
||||
if (typeof selector === 'string') {
|
||||
context.addEventListener(type, event => {
|
||||
if (typeof selector === "string") {
|
||||
context.addEventListener(type, (event) => {
|
||||
if (matches.call(event.target, selector)) {
|
||||
fn.call(event.target, event);
|
||||
}
|
||||
@@ -892,17 +938,21 @@
|
||||
function DOMReady(fn, args) {
|
||||
args = args !== undefined ? args : [];
|
||||
|
||||
if (document.readyState !== 'loading') {
|
||||
if (document.readyState !== "loading") {
|
||||
fn(...args);
|
||||
} else {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
fn(...args);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Polyfill for Nodelist.forEach
|
||||
if (NodeList !== undefined && NodeList.prototype && !NodeList.prototype.forEach) {
|
||||
if (
|
||||
NodeList !== undefined &&
|
||||
NodeList.prototype &&
|
||||
!NodeList.prototype.forEach
|
||||
) {
|
||||
NodeList.prototype.forEach = Array.prototype.forEach;
|
||||
}
|
||||
|
||||
@@ -911,13 +961,13 @@
|
||||
const methods = {
|
||||
set: configure,
|
||||
wrap: wrapFields,
|
||||
close: closePicker
|
||||
close: closePicker,
|
||||
};
|
||||
|
||||
function Coloris(options) {
|
||||
DOMReady(() => {
|
||||
if (options) {
|
||||
if (typeof options === 'string') {
|
||||
if (typeof options === "string") {
|
||||
bindFields(options);
|
||||
} else {
|
||||
configure(options);
|
||||
@@ -937,25 +987,24 @@
|
||||
|
||||
// Init the color picker when the DOM is ready
|
||||
DOMReady(init);
|
||||
|
||||
})(window, document, Math);
|
||||
|
||||
Coloris({
|
||||
el: '.coloris',
|
||||
theme: 'large',
|
||||
themeMode: 'dark',
|
||||
format: 'hex',
|
||||
el: ".coloris",
|
||||
theme: "large",
|
||||
themeMode: "dark",
|
||||
format: "hex",
|
||||
alpha: false,
|
||||
swatches: [
|
||||
'#471616',
|
||||
'#1e4716',
|
||||
'#16473f',
|
||||
'#161c47',
|
||||
'#371647',
|
||||
'#47163f',
|
||||
'#471627',
|
||||
'#3a3a3a',
|
||||
'#ffffff',
|
||||
'#1a1a1a'
|
||||
]
|
||||
});
|
||||
"#471616",
|
||||
"#1e4716",
|
||||
"#16473f",
|
||||
"#161c47",
|
||||
"#371647",
|
||||
"#47163f",
|
||||
"#471627",
|
||||
"#3a3a3a",
|
||||
"#ffffff",
|
||||
"#1a1a1a",
|
||||
],
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user