BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 03:34:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix code styling

Browse Source
This commit is contained in:
SethBurkart123
2023-08-30 14:46:23 +10:00
parent fc9edbf1c4
commit 75026bdc51
24 changed files with 3610 additions and 1778 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/popup/coloris.css
+69 -21
View File
@@ -7,7 +7,9 @@
border-radius: 10px;
background-color: #fff;
justify-content: space-between;
box-shadow: 0 0 5px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1);
box-shadow:
0 0 5px rgba(0, 0, 0, 0.05),
0 5px 20px rgba(0, 0, 0, 0.1);
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
@@ -23,7 +25,8 @@
height: 100px;
margin-bottom: 15px;
border-radius: 3px 3px 0 0;
background-image: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentColor);
background-image: linear-gradient(rgba(0, 0, 0, 0), #000),
linear-gradient(90deg, #fff, currentColor);
cursor: pointer;
}
@@ -62,7 +65,16 @@
}
.clr-hue {
background-image: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
background-image: linear-gradient(
to right,
#f00 0%,
#ff0 16.66%,
#0f0 33.33%,
#0ff 50%,
#00f 66.66%,
#f0f 83.33%,
#f00 100%
);
}
.clr-hue,
@@ -79,7 +91,7 @@
height: 100%;
width: 100%;
border-radius: inherit;
background-image: linear-gradient(90deg, rgba(0,0,0,0), currentColor);
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), currentColor);
}
.clr-hue input,
@@ -114,7 +126,7 @@
}
.clr-alpha div:before {
content: '';
content: "";
position: absolute;
height: 100%;
width: 100%;
@@ -206,7 +218,7 @@
}
.clr-swatches button:after {
content: '';
content: "";
display: block;
position: absolute;
width: 100%;
@@ -215,7 +227,7 @@
top: 0;
border-radius: inherit;
background-color: currentColor;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
input.clr-color {
@@ -268,7 +280,7 @@ input.clr-color:focus {
.clr-preview:before,
.clr-preview:after {
content: '';
content: "";
position: absolute;
height: 100%;
width: 100%;
@@ -281,7 +293,7 @@ input.clr-color:focus {
.clr-preview:after {
border: 0;
background-color: currentColor;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.clr-marker,
@@ -313,7 +325,7 @@ input.clr-color:focus {
}
.clr-field button:after {
content: '';
content: "";
display: block;
position: absolute;
width: 100%;
@@ -322,7 +334,7 @@ input.clr-color:focus {
top: 0;
border-radius: inherit;
background-color: currentColor;
box-shadow: inset 0 0 1px rgba(0,0,0,.5);
box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
}
.clr-alpha,
@@ -330,8 +342,25 @@ input.clr-color:focus {
.clr-swatches button,
.clr-preview:before,
.clr-field button {
background-image: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);
background-position: 0 0, 4px 4px;
background-image: repeating-linear-gradient(
45deg,
#aaa 25%,
transparent 25%,
transparent 75%,
#aaa 75%,
#aaa
),
repeating-linear-gradient(
45deg,
#aaa 25%,
#fff 25%,
#fff 75%,
#aaa 75%,
#aaa
);
background-position:
0 0,
4px 4px;
background-size: 8px 8px;
}
@@ -344,7 +373,9 @@ input.clr-color:focus {
.clr-keyboard-nav .clr-alpha input:focus + div,
.clr-keyboard-nav .clr-segmented input:focus + label {
outline: none;
box-shadow: 0 0 0 2px #1e90ff, 0 0 2px 2px #fff;
box-shadow:
0 0 0 2px #1e90ff,
0 0 2px 2px #fff;
}
.clr-picker[data-alpha="false"] .clr-alpha {
@@ -374,7 +405,7 @@ input.clr-color:focus {
}
.clr-dark .clr-swatches button:after {
box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.clr-dark input.clr-color {
@@ -388,25 +419,42 @@ input.clr-color:focus {
}
.clr-dark .clr-preview:after {
box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.clr-dark .clr-alpha,
.clr-dark .clr-alpha div,
.clr-dark .clr-swatches button,
.clr-dark .clr-preview:before {
background-image: repeating-linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #888 75%, #888), repeating-linear-gradient(45deg, #888 25%, #444 25%, #444 75%, #888 75%, #888);
background-image: repeating-linear-gradient(
45deg,
#666 25%,
transparent 25%,
transparent 75%,
#888 75%,
#888
),
repeating-linear-gradient(
45deg,
#888 25%,
#444 25%,
#444 75%,
#888 75%,
#888
);
}
/** Polaroid theme **/
.clr-picker.clr-polaroid {
border-radius: 6px;
box-shadow: 0 0 5px rgba(0,0,0,.1), 0 5px 30px rgba(0,0,0,.2);
box-shadow:
0 0 5px rgba(0, 0, 0, 0.1),
0 5px 30px rgba(0, 0, 0, 0.2);
}
.clr-picker.clr-polaroid:before {
content: '';
content: "";
display: block;
position: absolute;
width: 16px;
@@ -418,7 +466,7 @@ input.clr-color:focus {
border-bottom-color: currentColor;
box-sizing: border-box;
color: #fff;
filter: drop-shadow(0 -4px 3px rgba(0,0,0,.1));
filter: drop-shadow(0 -4px 3px rgba(0, 0, 0, 0.1));
pointer-events: none;
}
@@ -454,7 +502,7 @@ input.clr-color:focus {
.clr-polaroid .clr-hue div,
.clr-polaroid .clr-alpha div {
box-shadow: 0 0 5px rgba(0,0,0,.2);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.clr-polaroid .clr-format {
public/popup/coloris.js
+246 -197
View File
@@ -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",
],
});
public/popup/info.css
+46 -34
View File
@@ -11,7 +11,7 @@
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>. */
/* cyrillic-ext */
@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500,600');
@import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,600");
.outside-container {
width: 350px;
@@ -65,7 +65,8 @@
text-align: center;
text-shadow: 0px 0px 15px rgb(22, 22, 22);
}
.apply-changes h3, h5 {
.apply-changes h3,
h5 {
margin: 0;
}
.apply-changes h3 {
@@ -129,7 +130,7 @@ p {
justify-content: space-between;
margin-top: 10px;
font-size: 13px !important;
position:relative;
position: relative;
}
.clr-field input:hover {
cursor: pointer;
@@ -178,7 +179,8 @@ p {
.onoffswitch {
margin: 0 0 1ex;
position: relative; width: 42px;
position: relative;
width: 42px;
}
.onoffswitch-checkbox {
position: absolute;
@@ -195,33 +197,44 @@ p {
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
height: 16px; padding: 0; line-height: 16px;
border: 0px solid #FFFFFF; border-radius: 24px;
background-color: #9E9E9E;
display: block;
overflow: hidden;
cursor: pointer;
height: 16px;
padding: 0;
line-height: 16px;
border: 0px solid #ffffff;
border-radius: 24px;
background-color: #9e9e9e;
}
.onoffswitch-label:before {
content: "";
display: block; width: 24px; margin: -4px; height: 24px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
display: block;
width: 24px;
margin: -4px;
height: 24px;
background: #ffffff;
position: absolute;
top: 0;
bottom: 0;
right: 22px;
border-radius: 24px;
transition: 0.3s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
background-color: #20E060;
background-color: #20e060;
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
border-color: #20E060;
.onoffswitch-checkbox:checked + .onoffswitch-label,
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
border-color: #20e060;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
transition: 0.3s;
right: 0px;
background-color: #86F078;
right: 0px;
background-color: #86f078;
box-shadow: 3px 6px 18px 0px rgba(0, 0, 0, 0.2);
}
@@ -272,14 +285,14 @@ p {
::-webkit-scrollbar {
width: 10px;
height: 10px;
transition: 1.0s;
transition: 1s;
}
::-webkit-scrollbar-thumb {
background-color: rgba(127, 127, 127, 0.6);
background-clip: padding-box;
border: 2px solid transparent;
transition: 1.0s;
transition: 1s;
}
::-webkit-scrollbar-thumb:vertical:hover,
@@ -291,23 +304,23 @@ p {
background-color: transparent;
}
::-webkit-scrollbar-thumb:vertical:active,
::-webkit-scrollbar-thumb:horizontal:active {
background: rgba(95, 91, 91, 1);
}
::-webkit-scrollbar-corner {
background: none;
}
:root, html, body, div, ol {
:root,
html,
body,
div,
ol {
scrollbar-width: thin !important;
scrollbar-color: #5e5e5f #161616 !important;
}
.topmenu {
display: flex;
width: 100%;
@@ -315,7 +328,6 @@ p {
color: white;
margin-top: 20px;
margin-bottom: 20px;
}
.navitem {
width: 33.34%;
@@ -329,7 +341,6 @@ p {
border-bottom: 2px solid #a5a5a5;
color: #a5a5a5;
transition: 0.3s;
}
.activenav {
border-bottom: 2px solid #ff5f5f;
@@ -358,7 +369,8 @@ p {
#applychanges {
margin-top: 0px;
}
.applychanges h5, h6 {
.applychanges h5,
h6 {
margin: 0;
font-weight: 400;
}
@@ -366,10 +378,10 @@ p {
list-style: none;
position: relative;
margin-left: 10px;
cursor:grab;
cursor: grab;
}
.draggable:active {
cursor:-moz-grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
.draggable::before {
@@ -401,18 +413,18 @@ p {
transition: 300ms;
}
.customshortcut-submit-valid {
.customshortcut-submit-valid {
background: #20de5f !important;
transition: 300ms;
}
.customshortcut-submit-valid:hover {
.customshortcut-submit-valid:hover {
background: #1cc956 !important;
transition: 300ms;
cursor: pointer;
}
.customshortcut-submit-valid:active {
.customshortcut-submit-valid:active {
background: #17aa48 !important;
transition: 300ms;
}
@@ -459,9 +471,9 @@ p {
}
.custom-shortcuts-field:focus {
outline: none;
outline: 1px solid rgb(60, 60, 60);
transition: 100ms;
outline: none;
outline: 1px solid rgb(60, 60, 60);
transition: 100ms;
}
.domain-container {
font-size: 9px;
public/popup/info.html
+386 -258
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<!-- // This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
@@ -12,287 +12,415 @@
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>. -->
<html>
<head>
<link rel="stylesheet" href="coloris.css" />
<script src="coloris.js"></script>
<meta charset="utf-8" />
<link rel="stylesheet" href="info.css" />
</head>
<head>
<link rel="stylesheet" href="coloris.css" />
<script src="coloris.js"></script>
<meta charset="utf-8">
<link rel="stylesheet" href="info.css" />
</head>
<body>
<style>
body {
width: 350px;
margin: 0;
background-color: #131313;
overflow: hidden;
}
</style>
<body>
<style>
body {
width: 350px;
margin: 0;
background-color: #131313;
overflow: hidden;
}
</style>
<div class="logo-container"><img src="/icons/betterseqta-light-full.png"></div>
<div class="main-page" id="mainpage">
<div class="topmenu">
<div class="navitem activenav" id="miscsection">Settings</div>
<div class="navitem" id="shortcutsection">Shortcuts</div>
<div class="navitem" id="aboutsection">About</div>
<div class="logo-container">
<img src="/icons/betterseqta-light-full.png" />
</div>
</div>
<div class="menu-page hiddenmenu" id="menupage">
<div class="selector-container" style="margin-bottom: 0;">
<div class="menu-item-selection">
<div class="aboutcontainer">
<div>
<h1 class="addonitem">About</h1>
<p class="item subitem">Created and developed and maintained by CK and AH</p>
<p class="item subitem">EvenBetterSEQTA is a revived or BetterSEQTA
which is no longer maintained.</p>
</div>
</div>
<div class="aboutcontainer">
<div>
<a class="aboutlinks"
href="https://chrome.google.com/webstore/detail/betterseqta/boikofabjaholheekefimfojfncpjfib"
target="_blank">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor"
d="M12,20L15.46,14H15.45C15.79,13.4 16,12.73 16,12C16,10.8 15.46,9.73 14.62,9H19.41C19.79,9.93 20,10.94 20,12A8,8 0 0,1 12,20M4,12C4,10.54 4.39,9.18 5.07,8L8.54,14H8.55C9.24,15.19 10.5,16 12,16C12.45,16 12.88,15.91 13.29,15.77L10.89,19.91C7,19.37 4,16.04 4,12M15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9A3,3 0 0,1 15,12M12,4C14.96,4 17.54,5.61 18.92,8H12C10.06,8 8.45,9.38 8.08,11.21L5.7,7.08C7.16,5.21 9.44,4 12,4M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
</svg>
Chrome Webstore
</a>
<a class="aboutlinks" href="https://addons.mozilla.org/en-US/firefox/addon/betterseqta/" target="_blank">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor"
d="M9.27 7.94C9.27 7.94 9.27 7.94 9.27 7.94M6.85 6.74C6.86 6.74 6.86 6.74 6.85 6.74M21.28 8.6C20.85 7.55 19.96 6.42 19.27 6.06C19.83 7.17 20.16 8.28 20.29 9.1L20.29 9.12C19.16 6.3 17.24 5.16 15.67 2.68C15.59 2.56 15.5 2.43 15.43 2.3C15.39 2.23 15.36 2.16 15.32 2.09C15.26 1.96 15.2 1.83 15.17 1.69C15.17 1.68 15.16 1.67 15.15 1.67H15.13L15.12 1.67L15.12 1.67L15.12 1.67C12.9 2.97 11.97 5.26 11.74 6.71C11.05 6.75 10.37 6.92 9.75 7.22C9.63 7.27 9.58 7.41 9.62 7.53C9.67 7.67 9.83 7.74 9.96 7.68C10.5 7.42 11.1 7.27 11.7 7.23L11.75 7.23C11.83 7.22 11.92 7.22 12 7.22C12.5 7.21 12.97 7.28 13.44 7.42L13.5 7.44C13.6 7.46 13.67 7.5 13.75 7.5C13.8 7.54 13.86 7.56 13.91 7.58L14.05 7.64C14.12 7.67 14.19 7.7 14.25 7.73C14.28 7.75 14.31 7.76 14.34 7.78C14.41 7.82 14.5 7.85 14.54 7.89C14.58 7.91 14.62 7.94 14.66 7.96C15.39 8.41 16 9.03 16.41 9.77C15.88 9.4 14.92 9.03 14 9.19C17.6 11 16.63 17.19 11.64 16.95C11.2 16.94 10.76 16.85 10.34 16.7C10.24 16.67 10.14 16.63 10.05 16.58C10 16.56 9.93 16.53 9.88 16.5C8.65 15.87 7.64 14.68 7.5 13.23C7.5 13.23 8 11.5 10.83 11.5C11.14 11.5 12 10.64 12.03 10.4C12.03 10.31 10.29 9.62 9.61 8.95C9.24 8.59 9.07 8.42 8.92 8.29C8.84 8.22 8.75 8.16 8.66 8.1C8.43 7.3 8.42 6.45 8.63 5.65C7.6 6.12 6.8 6.86 6.22 7.5H6.22C5.82 7 5.85 5.35 5.87 5C5.86 5 5.57 5.16 5.54 5.18C5.19 5.43 4.86 5.71 4.56 6C4.21 6.37 3.9 6.74 3.62 7.14C3 8.05 2.5 9.09 2.28 10.18C2.28 10.19 2.18 10.59 2.11 11.1L2.08 11.33C2.06 11.5 2.04 11.65 2 11.91L2 11.94L2 12.27L2 12.32C2 17.85 6.5 22.33 12 22.33C16.97 22.33 21.08 18.74 21.88 14C21.9 13.89 21.91 13.76 21.93 13.63C22.13 11.91 21.91 10.11 21.28 8.6Z" />
</svg>
Firefox Add-ons
</a>
</svg>
</a>
</div>
</div>
<div class="aboutcontainer" style="color: rgb(155, 155, 155); font-size: 14px; margin-top: 7px;">
<p>Contact: cacakaca@outlook.com</p>
</div>
<div class="main-page" id="mainpage">
<div class="topmenu">
<div class="navitem activenav" id="miscsection">Settings</div>
<div class="navitem" id="shortcutsection">Shortcuts</div>
<div class="navitem" id="aboutsection">About</div>
</div>
</div>
</div>
<div class="menu-page hiddenmenu" id="shortcutpage">
<div class="selector-container" style="margin-bottom: 0; max-height: 17em; overflow-y:hidden;">
<div>
<div class="custom-shortcuts-button custom-shortcuts-buttons">Create Custom Shortcut</div>
<div class="custom-shortcuts-container">
<label for="shortcutname" class="custom-shortcuts-label">Shortcut Name:</label>
<input type="text" id="shortcutname" name="shortcutname" class="custom-shortcuts-field" placeholder="e.g. Google" maxlength="20">
<label for="shortcuturl" class="custom-shortcuts-label">URL:</label>
<input type="text" id="shortcuturl" name="shortcuturl" class="custom-shortcuts-field" placeholder="e.g. https://www.google.com">
<div class="custom-shortcuts-submit custom-shortcuts-buttons">Create</div>
</div>
</div>
<div class="menu-item-selection menushortcut">
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">YouTube</h1>
<div class="menu-page hiddenmenu" id="menupage">
<div class="selector-container" style="margin-bottom: 0">
<div class="menu-item-selection">
<div class="aboutcontainer">
<div>
<h1 class="addonitem">About</h1>
<p class="item subitem">
Created and developed and maintained by CK and AH
</p>
<p class="item subitem">
EvenBetterSEQTA is a revived or BetterSEQTA which is no longer
maintained.
</p>
</div>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
id="youtube">
<label for="youtube" class="onoffswitch-label"></label>
<div class="aboutcontainer">
<div>
<a
class="aboutlinks"
href="https://chrome.google.com/webstore/detail/betterseqta/boikofabjaholheekefimfojfncpjfib"
target="_blank"
>
<svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M12,20L15.46,14H15.45C15.79,13.4 16,12.73 16,12C16,10.8 15.46,9.73 14.62,9H19.41C19.79,9.93 20,10.94 20,12A8,8 0 0,1 12,20M4,12C4,10.54 4.39,9.18 5.07,8L8.54,14H8.55C9.24,15.19 10.5,16 12,16C12.45,16 12.88,15.91 13.29,15.77L10.89,19.91C7,19.37 4,16.04 4,12M15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9A3,3 0 0,1 15,12M12,4C14.96,4 17.54,5.61 18.92,8H12C10.06,8 8.45,9.38 8.08,11.21L5.7,7.08C7.16,5.21 9.44,4 12,4M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
/>
</svg>
Chrome Webstore
</a>
<a
class="aboutlinks"
href="https://addons.mozilla.org/en-US/firefox/addon/betterseqta/"
target="_blank"
>
<svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M9.27 7.94C9.27 7.94 9.27 7.94 9.27 7.94M6.85 6.74C6.86 6.74 6.86 6.74 6.85 6.74M21.28 8.6C20.85 7.55 19.96 6.42 19.27 6.06C19.83 7.17 20.16 8.28 20.29 9.1L20.29 9.12C19.16 6.3 17.24 5.16 15.67 2.68C15.59 2.56 15.5 2.43 15.43 2.3C15.39 2.23 15.36 2.16 15.32 2.09C15.26 1.96 15.2 1.83 15.17 1.69C15.17 1.68 15.16 1.67 15.15 1.67H15.13L15.12 1.67L15.12 1.67L15.12 1.67C12.9 2.97 11.97 5.26 11.74 6.71C11.05 6.75 10.37 6.92 9.75 7.22C9.63 7.27 9.58 7.41 9.62 7.53C9.67 7.67 9.83 7.74 9.96 7.68C10.5 7.42 11.1 7.27 11.7 7.23L11.75 7.23C11.83 7.22 11.92 7.22 12 7.22C12.5 7.21 12.97 7.28 13.44 7.42L13.5 7.44C13.6 7.46 13.67 7.5 13.75 7.5C13.8 7.54 13.86 7.56 13.91 7.58L14.05 7.64C14.12 7.67 14.19 7.7 14.25 7.73C14.28 7.75 14.31 7.76 14.34 7.78C14.41 7.82 14.5 7.85 14.54 7.89C14.58 7.91 14.62 7.94 14.66 7.96C15.39 8.41 16 9.03 16.41 9.77C15.88 9.4 14.92 9.03 14 9.19C17.6 11 16.63 17.19 11.64 16.95C11.2 16.94 10.76 16.85 10.34 16.7C10.24 16.67 10.14 16.63 10.05 16.58C10 16.56 9.93 16.53 9.88 16.5C8.65 15.87 7.64 14.68 7.5 13.23C7.5 13.23 8 11.5 10.83 11.5C11.14 11.5 12 10.64 12.03 10.4C12.03 10.31 10.29 9.62 9.61 8.95C9.24 8.59 9.07 8.42 8.92 8.29C8.84 8.22 8.75 8.16 8.66 8.1C8.43 7.3 8.42 6.45 8.63 5.65C7.6 6.12 6.8 6.86 6.22 7.5H6.22C5.82 7 5.85 5.35 5.87 5C5.86 5 5.57 5.16 5.54 5.18C5.19 5.43 4.86 5.71 4.56 6C4.21 6.37 3.9 6.74 3.62 7.14C3 8.05 2.5 9.09 2.28 10.18C2.28 10.19 2.18 10.59 2.11 11.1L2.08 11.33C2.06 11.5 2.04 11.65 2 11.91L2 11.94L2 12.27L2 12.32C2 17.85 6.5 22.33 12 22.33C16.97 22.33 21.08 18.74 21.88 14C21.9 13.89 21.91 13.76 21.93 13.63C22.13 11.91 21.91 10.11 21.28 8.6Z"
/>
</svg>
Firefox Add-ons
</a>
</div>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Outlook</h1>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
id="outlook">
<label for="outlook" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Office</h1>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
id="office">
<label for="office" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Spotify</h1>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
id="spotify">
<label for="spotify" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Google</h1>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
id="google">
<label for="google" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">DuckDuckGo</h1>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
id="duckduckgo">
<label for="duckduckgo" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Cool Math Games</h1>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
id="coolmathgames">
<label for="coolmathgames" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">SACE</h1>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
id="sace">
<label for="sace" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Google Scholar</h1>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
id="googlescholar">
<label for="googlescholar" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Gmail</h1>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
id="gmail">
<label for="gmail" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Netflix</h1>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
id="netflix">
<label for="netflix" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Education Perfect</h1>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
id="netflix">
<label for="educationperfect" class="onoffswitch-label"></label>
<div
class="aboutcontainer"
style="color: rgb(155, 155, 155); font-size: 14px; margin-top: 7px"
>
<p>Contact: cacakaca@outlook.com</p>
</div>
</div>
</div>
</div>
</div>
<div class="menu-page" id="miscpage">
<div class="selector-container" style="margin-bottom: 0;">
<div class="menu-item-selection">
<div class="item-container">
<div class="text-container">
<h1 class="addonitem">Notification Collector</h1>
<p class="item subitem">Shows the real number of notifications</p>
<div class="menu-page hiddenmenu" id="shortcutpage">
<div
class="selector-container"
style="margin-bottom: 0; max-height: 17em; overflow-y: hidden"
>
<div>
<div class="custom-shortcuts-button custom-shortcuts-buttons">
Create Custom Shortcut
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification" type="checkbox" id="notification">
<label for="notification" class="onoffswitch-label"></label>
<div class="custom-shortcuts-container">
<label for="shortcutname" class="custom-shortcuts-label"
>Shortcut Name:</label
>
<input
type="text"
id="shortcutname"
name="shortcutname"
class="custom-shortcuts-field"
placeholder="e.g. Google"
maxlength="20"
/>
<label for="shortcuturl" class="custom-shortcuts-label">URL:</label>
<input
type="text"
id="shortcuturl"
name="shortcuturl"
class="custom-shortcuts-field"
placeholder="e.g. https://www.google.com"
/>
<div class="custom-shortcuts-submit custom-shortcuts-buttons">
Create
</div>
</div>
</div>
<div class="item-container">
<div class="text-container">
<h1 class="addonitem">Lesson Alerts</h1>
<p class="item subitem">Sends a native browser notification ~5 minutes prior to lessons.</p>
<div class="menu-item-selection menushortcut">
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">YouTube</h1>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification shortcutitem"
type="checkbox"
id="youtube"
/>
<label for="youtube" class="onoffswitch-label"></label>
</div>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification" type="checkbox" id="lessonalert">
<label for="lessonalert" class="onoffswitch-label"></label>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Outlook</h1>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification shortcutitem"
type="checkbox"
id="outlook"
/>
<label for="outlook" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Office</h1>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification shortcutitem"
type="checkbox"
id="office"
/>
<label for="office" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Spotify</h1>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification shortcutitem"
type="checkbox"
id="spotify"
/>
<label for="spotify" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Google</h1>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification shortcutitem"
type="checkbox"
id="google"
/>
<label for="google" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">DuckDuckGo</h1>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification shortcutitem"
type="checkbox"
id="duckduckgo"
/>
<label for="duckduckgo" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Cool Math Games</h1>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification shortcutitem"
type="checkbox"
id="coolmathgames"
/>
<label for="coolmathgames" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">SACE</h1>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification shortcutitem"
type="checkbox"
id="sace"
/>
<label for="sace" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Google Scholar</h1>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification shortcutitem"
type="checkbox"
id="googlescholar"
/>
<label for="googlescholar" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Gmail</h1>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification shortcutitem"
type="checkbox"
id="gmail"
/>
<label for="gmail" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Netflix</h1>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification shortcutitem"
type="checkbox"
id="netflix"
/>
<label for="netflix" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Education Perfect</h1>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification shortcutitem"
type="checkbox"
id="netflix"
/>
<label for="educationperfect" class="onoffswitch-label"></label>
</div>
</div>
</div>
<div class="item-container">
<div class="text-container">
<h1 class="addonitem">Animated Background</h1>
<p class="item subitem">Adds an animated background to EvenBetterSEQTA.</p>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification" type="checkbox" id="animatedbk">
<label for="animatedbk" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container">
<div class="text-container">
<h1 class="addonitem">Custom Theme Colour</h1>
<p class="item subitem">Customise the overall theme colour of SEQTA Learn.</p>
</div>
<div class="clr-field" style="justify-content: end; display: flex; margin: 5px;">
<button aria-labelledby="clr-open-label"
style="width: 51px; right: 0px; border: 1px solid white; border-radius: 3px;"></button>
<input type="text" id="colorpicker" class="coloris"
style="width: 48px; border-radius: 3px; padding: 6px 0;" />
</div>
</div>
<div class="item-container" style="height: 2em; margin-top: 0px;">
<div class="text-container">
<h1 class="addonitem">EvenBetterSEQTA</h1>
</div>
<div class="onoffswitch" style="margin-bottom: 0px;"><input class="onoffswitch-checkbox notification"
type="checkbox" id="onoff">
<label for="onoff" class="onoffswitch-label"></label>
</div>
</div>
</div>
<div class="domain-container">Not working on your SEQTA?<div class="domain-container-button" id="domain-button">Add Permissions for Newer Domains</div></div>
</div>
</div>
<div class="bottom-container">
<div class="applychanges" id="applychanges">
<div>
<h5>Unsaved Changes</h5>
<h6>Click to apply.</h6>
</div>
</div>
<div></div>
<div class="menu-page" id="miscpage">
<div class="selector-container" style="margin-bottom: 0">
<div class="menu-item-selection">
<div class="item-container">
<div class="text-container">
<h1 class="addonitem">Notification Collector</h1>
<p class="item subitem">Shows the real number of notifications</p>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification"
type="checkbox"
id="notification"
/>
<label for="notification" class="onoffswitch-label"></label>
</div>
</div>
<div style="position: absolute; bottom: 15px; right: 50px; color: rgb(177, 177, 177); display: flex;">
<p style="margin: 0; margin-right: 5px; color: white;">Maintanied by SethBurkart123 </p>
<p style="margin: 0; margin-right: 5px;" id="version"></p>
</div><img src="/popup/github.svg" alt="" id="github">
</div>
<script src="info.js"></script>
<div class="item-container">
<div class="text-container">
<h1 class="addonitem">Lesson Alerts</h1>
<p class="item subitem">
Sends a native browser notification ~5 minutes prior to lessons.
</p>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification"
type="checkbox"
id="lessonalert"
/>
<label for="lessonalert" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container">
<div class="text-container">
<h1 class="addonitem">Animated Background</h1>
<p class="item subitem">
Adds an animated background to EvenBetterSEQTA.
</p>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification"
type="checkbox"
id="animatedbk"
/>
<label for="animatedbk" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container">
<div class="text-container">
<h1 class="addonitem">Custom Theme Colour</h1>
<p class="item subitem">
Customise the overall theme colour of SEQTA Learn.
</p>
</div>
<div
class="clr-field"
style="justify-content: end; display: flex; margin: 5px"
>
<button
aria-labelledby="clr-open-label"
style="
width: 51px;
right: 0px;
border: 1px solid white;
border-radius: 3px;
"
></button>
<input
type="text"
id="colorpicker"
class="coloris"
style="width: 48px; border-radius: 3px; padding: 6px 0"
/>
</div>
</div>
<div class="item-container" style="height: 2em; margin-top: 0px">
<div class="text-container">
<h1 class="addonitem">EvenBetterSEQTA</h1>
</div>
<div class="onoffswitch" style="margin-bottom: 0px">
<input
class="onoffswitch-checkbox notification"
type="checkbox"
id="onoff"
/>
<label for="onoff" class="onoffswitch-label"></label>
</div>
</div>
</div>
<div class="domain-container">
Not working on your SEQTA?
<div class="domain-container-button" id="domain-button">
Add Permissions for Newer Domains
</div>
</div>
</div>
</div>
<div class="bottom-container">
<div class="applychanges" id="applychanges">
<div>
<h5>Unsaved Changes</h5>
<h6>Click to apply.</h6>
</div>
</div>
<div></div>
<div
style="
position: absolute;
bottom: 15px;
right: 50px;
color: rgb(177, 177, 177);
display: flex;
"
>
<p style="margin: 0; margin-right: 5px; color: white">
Maintanied by SethBurkart123
</p>
<p style="margin: 0; margin-right: 5px" id="version"></p>
</div>
<img src="/popup/github.svg" alt="" id="github" />
</div>
<script src="info.js"></script>
</body>
</html>
public/popup/info.js
+111 -76
View File
@@ -16,49 +16,57 @@ const notificationcollector = document.querySelector("#notification");
const lessonalert = document.querySelector("#lessonalert");
const aboutsection = document.querySelector("#aboutsection");
const shortcutsection = document.querySelector("#shortcutsection");
const miscsection = document.querySelector('#miscsection');
const miscsection = document.querySelector("#miscsection");
const mainpage = document.querySelector("#mainpage");
const colorpicker = document.querySelector("#colorpicker");
const animatedbk = document.querySelector('#animatedbk');
const customshortcutbutton = document.getElementsByClassName('custom-shortcuts-button')[0];
const customshortcutdiv = document.getElementsByClassName('custom-shortcuts-container')[0];
const customshortcutsubmit = document.getElementsByClassName('custom-shortcuts-submit')[0];
const customshortcutinputname = document.querySelector('#shortcutname');
const customshortcutinputurl = document.querySelector('#shortcuturl');
const animatedbk = document.querySelector("#animatedbk");
const customshortcutbutton = document.getElementsByClassName(
"custom-shortcuts-button",
)[0];
const customshortcutdiv = document.getElementsByClassName(
"custom-shortcuts-container",
)[0];
const customshortcutsubmit = document.getElementsByClassName(
"custom-shortcuts-submit",
)[0];
const customshortcutinputname = document.querySelector("#shortcutname");
const customshortcutinputurl = document.querySelector("#shortcuturl");
const shortcutmenuitemselection = document.getElementsByClassName('menushortcut')[0];
const shortcutmenuitemselection =
document.getElementsByClassName("menushortcut")[0];
const applybutton = document.querySelector('#applychanges')
const applybutton = document.querySelector("#applychanges");
const navbuttons = document.getElementsByClassName("navitem");
const menupages = document.getElementsByClassName("menu-page")
const menupages = document.getElementsByClassName("menu-page");
const allinputs = document.getElementsByTagName('input');
const allinputs = document.getElementsByTagName("input");
const menupage = document.querySelector("#menupage");
const shortcutpage = document.querySelector("#shortcutpage");
const miscpage = document.querySelector('#miscpage');
const miscpage = document.querySelector("#miscpage");
var shortcutbuttons = document.getElementsByClassName("shortcutitem");
const github = document.getElementById("github");
const version = document.getElementById('version');
const domainbutton = document.getElementById('domain-button');
const version = document.getElementById("version");
const domainbutton = document.getElementById("domain-button");
var validURL = false;
var validName = false;
function openGithub() {
chrome.tabs.create({ url: "https://github.com/SethBurkart123/EvenBetterSEQTA" });
chrome.tabs.create({
url: "https://github.com/SethBurkart123/EvenBetterSEQTA",
});
}
function openPage(page) {
mainpage.style.left = "-350px";
page.style.right = '0px';
page.style.right = "0px";
}
function backToMainMenu() {
@@ -71,12 +79,11 @@ function backToMainMenu() {
function resetActive() {
for (let i = 0; i < navbuttons.length; i++) {
navbuttons[i].classList.remove('activenav');
navbuttons[i].classList.remove("activenav");
}
for (let i = 0; i < menupages.length; i++) {
menupages[i].classList.add('hiddenmenu');
menupages[i].classList.add("hiddenmenu");
}
}
function FindSEQTATab() {
@@ -98,13 +105,13 @@ function storeSettings() {
}
function storeNotificationSettings() {
chrome.storage.local.set(
{ notificationcollector: notificationcollector.checked });
chrome.storage.local.set({
notificationcollector: notificationcollector.checked,
});
chrome.storage.local.set({ lessonalert: lessonalert.checked });
chrome.storage.local.set({ animatedbk: animatedbk.checked });
}
function StoreAllSettings() {
chrome.storage.local.get(["shortcuts"], function (result) {
var shortcuts = Object.values(result)[0];
@@ -121,7 +128,7 @@ Update the options UI with the settings values retrieved from storage,
or the default settings if the stored settings are empty.
*/
function updateUI(restoredSettings) {
if (typeof restoredSettings.onoff == 'undefined') {
if (typeof restoredSettings.onoff == "undefined") {
chrome.runtime.sendMessage({ type: "setDefaultStorage" });
chrome.storage.local.get(null, function (result) {
@@ -149,7 +156,6 @@ var stringtoHTML = function (str) {
};
function CreateShortcutDiv(name) {
div = stringtoHTML(`
<div class="item-container menushortcuts" data-customshortcut="${name}">
<div class="text-container">
@@ -163,7 +169,7 @@ function CreateShortcutDiv(name) {
shortcutmenuitemselection.append(div);
const deletebutton = document.getElementById(`delete-${name}`);
deletebutton.addEventListener('click', function () {
deletebutton.addEventListener("click", function () {
DeleteCustomShortcut(name);
applybutton.style.left = "4px";
});
@@ -174,9 +180,7 @@ function AddCustomShortcuts() {
var customshortcuts = Object.values(result)[0];
for (let i = 0; i < customshortcuts.length; i++) {
const element = customshortcuts[i];
CreateShortcutDiv(
element.name,
)
CreateShortcutDiv(element.name);
}
});
}
@@ -193,40 +197,42 @@ function DeleteCustomShortcut(name) {
}
chrome.storage.local.set({ customshortcuts: customshortcuts });
});
}
function CustomShortcutMenu() {
customshortcutinputname.value = '';
customshortcutinputurl.value = '';
customshortcutinputname.value = "";
customshortcutinputurl.value = "";
validURL = false;
validName = false;
customshortcutsubmit.classList.remove("customshortcut-submit-valid");
if (customshortcutdiv.classList.contains('custom-shortcuts-container-shown')) {
customshortcutdiv.classList.remove('custom-shortcuts-container-shown')
if (
customshortcutdiv.classList.contains("custom-shortcuts-container-shown")
) {
customshortcutdiv.classList.remove("custom-shortcuts-container-shown");
} else {
customshortcutdiv.classList.add('custom-shortcuts-container-shown')
};
customshortcutdiv.classList.add("custom-shortcuts-container-shown");
}
}
function CreateCustomShortcut() {
const shortcutname = customshortcutinputname.value;
var shortcuturl = customshortcutinputurl.value;
if (!(shortcuturl.includes('http'))) {
if (!shortcuturl.includes("http")) {
shortcuturl = "https://" + shortcuturl;
}
chrome.storage.local.get(["customshortcuts"], function (result) {
var customshortcuts = Object.values(result)[0];
customshortcuts.push({ name: shortcutname, url: shortcuturl, icon: (shortcutname[0]).toUpperCase() });
customshortcuts.push({
name: shortcutname,
url: shortcuturl,
icon: shortcutname[0].toUpperCase(),
});
chrome.storage.local.set({ customshortcuts: customshortcuts });
});
CreateShortcutDiv(
shortcutname
);
CreateShortcutDiv(shortcutname);
}
function onError(e) {
@@ -236,7 +242,8 @@ function onError(e) {
On opening the options page, fetch stored settings and update the UI with them.
*/
chrome.storage.local.get(null, function (result) {
document.getElementsByClassName('clr-field')[0].style.color = result.selectedColor;
document.getElementsByClassName("clr-field")[0].style.color =
result.selectedColor;
colorpicker.value = result.selectedColor;
console.log(result);
updateUI(result);
@@ -249,18 +256,37 @@ document.addEventListener("DOMContentLoaded", function () {
version.innerHTML = `v${chrome.runtime.getManifest().version}`;
github.addEventListener("click", openGithub);
domainbutton.addEventListener('click', function (event) {
domainbutton.addEventListener("click", function (event) {
chrome.runtime.sendMessage({ type: "addPermissions" });
})
});
aboutsection.addEventListener("click", () => { resetActive(); aboutsection.classList.add('activenav'); menupage.classList.remove('hiddenmenu') });
aboutsection.addEventListener("click", () => {
resetActive();
aboutsection.classList.add("activenav");
menupage.classList.remove("hiddenmenu");
});
shortcutsection.addEventListener("click", () => { resetActive(); shortcutsection.classList.add('activenav'); shortcutpage.classList.remove('hiddenmenu') });
shortcutsection.addEventListener("click", () => {
resetActive();
shortcutsection.classList.add("activenav");
shortcutpage.classList.remove("hiddenmenu");
});
miscsection.addEventListener("click", () => { resetActive(); miscsection.classList.add('activenav'); miscpage.classList.remove('hiddenmenu') });
miscsection.addEventListener("click", () => {
resetActive();
miscsection.classList.add("activenav");
miscpage.classList.remove("hiddenmenu");
});
customshortcutbutton.addEventListener("click", () => { CustomShortcutMenu(); })
customshortcutsubmit.addEventListener("click", () => { if (validName && validURL) { CreateCustomShortcut(); CustomShortcutMenu() } });
customshortcutbutton.addEventListener("click", () => {
CustomShortcutMenu();
});
customshortcutsubmit.addEventListener("click", () => {
if (validName && validURL) {
CreateCustomShortcut();
CustomShortcutMenu();
}
});
var sameName = false;
customshortcutinputname.addEventListener("input", function () {
@@ -273,7 +299,11 @@ document.addEventListener("DOMContentLoaded", function () {
}
}
if (customshortcutinputname.value.length > 0 && customshortcutinputname.value.length < 22 && !sameName) {
if (
customshortcutinputname.value.length > 0 &&
customshortcutinputname.value.length < 22 &&
!sameName
) {
validName = true;
} else {
validName = false;
@@ -281,15 +311,17 @@ document.addEventListener("DOMContentLoaded", function () {
if (validName && validURL) {
customshortcutsubmit.classList.add("customshortcut-submit-valid");
}
else {
} else {
customshortcutsubmit.classList.remove("customshortcut-submit-valid");
}
});
});
customshortcutinputurl.addEventListener("input", function () {
if (customshortcutinputurl.value.length > 0 && customshortcutinputurl.value.includes('.')) {
if (
customshortcutinputurl.value.length > 0 &&
customshortcutinputurl.value.includes(".")
) {
validURL = true;
} else {
validURL = false;
@@ -297,46 +329,49 @@ document.addEventListener("DOMContentLoaded", function () {
if (validName && validURL) {
customshortcutsubmit.classList.add("customshortcut-submit-valid");
}
else {
} else {
customshortcutsubmit.classList.remove("customshortcut-submit-valid");
}
})
});
AddCustomShortcuts();
});
onoffselection.addEventListener("change", storeSettings);
notificationcollector.addEventListener(
"change",
storeNotificationSettings
);
lessonalert.addEventListener("change", storeNotificationSettings)
notificationcollector.addEventListener("change", storeNotificationSettings);
lessonalert.addEventListener("change", storeNotificationSettings);
animatedbk.addEventListener("change", storeNotificationSettings)
animatedbk.addEventListener("change", storeNotificationSettings);
for (let i = 0; i < allinputs.length; i++) {
if (allinputs[i].id != 'colorpicker' && allinputs[i].id != "shortcuturl" && allinputs[i].id != "shortcutname") {
allinputs[i].addEventListener("change", () => { applybutton.style.left = "4px" })
if (
allinputs[i].id != "colorpicker" &&
allinputs[i].id != "shortcuturl" &&
allinputs[i].id != "shortcutname"
) {
allinputs[i].addEventListener("change", () => {
applybutton.style.left = "4px";
});
}
}
applybutton.addEventListener('click', () => { StoreAllSettings(); applybutton.style.left = "-150px" })
applybutton.addEventListener("click", () => {
StoreAllSettings();
applybutton.style.left = "-150px";
});
colorpicker.addEventListener("input", function () {
var colorPreview = document.querySelector('#clr-color-preview')
var colorPreview = document.querySelector("#clr-color-preview");
if (colorPreview.style.color) {
var hex = colorPreview.style.color.split("(")[1].split(")")[0];
hex = hex.split(",");
var b = hex.map(function (x) { //For each array element
x = parseInt(x).toString(16); //Convert to a base16 string
return (x.length == 1) ? "0" + x : x; //Add zero if we get only one character
})
var b = hex.map(function (x) {
//For each array element
x = parseInt(x).toString(16); //Convert to a base16 string
return x.length == 1 ? "0" + x : x; //Add zero if we get only one character
});
b = "#" + b.join("");
chrome.storage.local.set({ selectedColor: b })
chrome.storage.local.set({ selectedColor: b });
}
})
});