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
.eslintrc.json
+17
View File
@@ -0,0 +1,17 @@
{
"env": {
"browser": true,
"commonjs": true,
"es2021": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": "latest"
},
"rules": {
"indent": ["error", 2],
"linebreak-style": ["error", "unix"],
"quotes": ["error", "double"],
"semi": ["error", "always"]
}
}
.gitignore
+1 -1
View File
@@ -4,4 +4,4 @@ package-lock.json
build/ build/
.DS_Store .DS_Store/
.prettierignore
+1
View File
@@ -0,0 +1 @@
build
README.md
+13 -7
View File
@@ -2,28 +2,29 @@
![Logo](https://raw.githubusercontent.com/SethBurkart123/BetterThanBetterSeqta/c96edd5956fc11571408310aea98cf7222d6876f/src/icons/betterseqta-dark-full.png#gh-light-mode-only) ![Logo](https://raw.githubusercontent.com/SethBurkart123/BetterThanBetterSeqta/c96edd5956fc11571408310aea98cf7222d6876f/src/icons/betterseqta-dark-full.png#gh-light-mode-only)
# Even BetterSEQTA # Even BetterSEQTA
Forking the BetterSEQTA project to add extra functionality Forking the BetterSEQTA project to add extra functionality
Looking for contributors! Looking for contributors!
## Table of contents ## Table of contents
- [Features](#features) - [Features](#features)
- [Getting Started](#getting-started) - [Getting Started](#getting-started)
- [Contributing](#contributing) - [Contributing](#contributing)
## Features ## Features
* Dark mode - Dark mode
- Custom Background - Custom Background
* Improved Styling/CSS - Improved Styling/CSS
- Improved look for SEQTA Learn - Improved look for SEQTA Learn
* Custom Home Page including: - Custom Home Page including:
- Daily Lessons - Daily Lessons
- Shortcuts - Shortcuts
- Easier Access Notices - Easier Access Notices
* Options to remove certain items from the side menu - Options to remove certain items from the side menu
* Notification for next lesson (sent 5 minutes prior to lesson end) - Notification for next lesson (sent 5 minutes prior to lesson end)
* Browser Support - Browser Support
- Chrome Supported - Chrome Supported
- Edge Supported - Edge Supported
- Brave Supported - Brave Supported
@@ -32,14 +33,19 @@ Looking for contributors!
## Getting started ## Getting started
1. Clone the repository 1. Clone the repository
``` ```
git clone https://github.com/SethBurkart123/EvenBetterSEQTA git clone https://github.com/SethBurkart123/EvenBetterSEQTA
``` ```
2. Install dependencies 2. Install dependencies
``` ```
npm install npm install
``` ```
3. Run the dev script (it updates as you save files) 3. Run the dev script (it updates as you save files)
``` ```
npm run dev npm run dev
``` ```
package.json
+4
View File
@@ -13,8 +13,12 @@
"devDependencies": { "devDependencies": {
"copy-webpack-plugin": "^11.0.0", "copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.8.1", "css-loader": "^6.8.1",
"eslint": "^8.48.0",
"eslint-config-prettier": "^9.0.0",
"eslint-webpack-plugin": "^4.0.1",
"file-loader": "^6.2.0", "file-loader": "^6.2.0",
"mini-css-extract-plugin": "^2.7.6", "mini-css-extract-plugin": "^2.7.6",
"prettier": "3.0.2",
"sass": "^1.65.1", "sass": "^1.65.1",
"sass-loader": "^13.3.2", "sass-loader": "^13.3.2",
"style-loader": "^3.3.3", "style-loader": "^3.3.3",
public/manifest.json
+43 -73
View File
@@ -1,78 +1,48 @@
{ {
"manifest_version": 3, "manifest_version": 3,
"name": "Even BetterSEQTA", "name": "Even BetterSEQTA",
"version": "3.0.0", "version": "3.0.0",
"description": "An extension that makes the SEQTA experience customizable and unique to you!", "description": "An extension that makes the SEQTA experience customizable and unique to you!",
"icons": { "icons": {
"48": "icons/icon-48.png" "48": "icons/icon-48.png"
},
"action": {
"browser_style": true,
"default_popup": "popup/info.html",
"default_icon": {
"32": "icons/icon-32.png",
"64": "icons/icon-64.png"
}
},
"permissions": ["tabs", "notifications", "storage"],
"host_permissions": ["https://newsapi.org/", "*://*/*"],
"background": {
"service_worker": "background.js"
},
"optional_permissions": ["declarativeContent"],
"content_scripts": [
{
"matches": ["https://*.edu.au/*"],
"js": ["purify.min.js", "SEQTA.js"],
"run_at": "document_start"
}
],
"web_accessible_resources": [
{
"resources": ["icons/*"],
"matches": ["*://*/*"]
}, },
"action": { {
"browser_style": true, "resources": ["images/*"],
"default_popup": "popup/info.html", "matches": ["*://*/*"]
"default_icon": {
"32": "icons/icon-32.png",
"64": "icons/icon-64.png"
}
}, },
"permissions": [ {
"tabs", "resources": ["inject/*"],
"notifications", "matches": ["*://*/*"]
"storage"
],
"host_permissions": [
"https://newsapi.org/",
"*://*/*"
],
"background": {
"service_worker": "background.js"
}, },
"optional_permissions": [ {
"declarativeContent" "resources": ["popup/*"],
], "matches": ["*://*/*"]
"content_scripts": [ }
{ ]
"matches": [
"https://*.edu.au/*"
],
"js": [
"purify.min.js",
"SEQTA.js"
],
"run_at": "document_start"
}
],
"web_accessible_resources": [
{
"resources": [
"icons/*"
],
"matches": [
"*://*/*"
]
},
{
"resources": [
"images/*"
],
"matches": [
"*://*/*"
]
},
{
"resources": [
"inject/*"
],
"matches": [
"*://*/*"
]
},
{
"resources": [
"popup/*"
],
"matches": [
"*://*/*"
]
}
]
} }
public/popup/coloris.css
+69 -21
View File
@@ -7,7 +7,9 @@
border-radius: 10px; border-radius: 10px;
background-color: #fff; background-color: #fff;
justify-content: space-between; 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; -moz-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
@@ -23,7 +25,8 @@
height: 100px; height: 100px;
margin-bottom: 15px; margin-bottom: 15px;
border-radius: 3px 3px 0 0; 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; cursor: pointer;
} }
@@ -62,7 +65,16 @@
} }
.clr-hue { .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, .clr-hue,
@@ -79,7 +91,7 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
border-radius: inherit; 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, .clr-hue input,
@@ -114,7 +126,7 @@
} }
.clr-alpha div:before { .clr-alpha div:before {
content: ''; content: "";
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
@@ -206,7 +218,7 @@
} }
.clr-swatches button:after { .clr-swatches button:after {
content: ''; content: "";
display: block; display: block;
position: absolute; position: absolute;
width: 100%; width: 100%;
@@ -215,7 +227,7 @@
top: 0; top: 0;
border-radius: inherit; border-radius: inherit;
background-color: currentColor; 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 { input.clr-color {
@@ -268,7 +280,7 @@ input.clr-color:focus {
.clr-preview:before, .clr-preview:before,
.clr-preview:after { .clr-preview:after {
content: ''; content: "";
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
@@ -281,7 +293,7 @@ input.clr-color:focus {
.clr-preview:after { .clr-preview:after {
border: 0; border: 0;
background-color: currentColor; 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, .clr-marker,
@@ -313,7 +325,7 @@ input.clr-color:focus {
} }
.clr-field button:after { .clr-field button:after {
content: ''; content: "";
display: block; display: block;
position: absolute; position: absolute;
width: 100%; width: 100%;
@@ -322,7 +334,7 @@ input.clr-color:focus {
top: 0; top: 0;
border-radius: inherit; border-radius: inherit;
background-color: currentColor; 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, .clr-alpha,
@@ -330,8 +342,25 @@ input.clr-color:focus {
.clr-swatches button, .clr-swatches button,
.clr-preview:before, .clr-preview:before,
.clr-field button { .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-image: repeating-linear-gradient(
background-position: 0 0, 4px 4px; 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; background-size: 8px 8px;
} }
@@ -344,7 +373,9 @@ input.clr-color:focus {
.clr-keyboard-nav .clr-alpha input:focus + div, .clr-keyboard-nav .clr-alpha input:focus + div,
.clr-keyboard-nav .clr-segmented input:focus + label { .clr-keyboard-nav .clr-segmented input:focus + label {
outline: none; 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 { .clr-picker[data-alpha="false"] .clr-alpha {
@@ -374,7 +405,7 @@ input.clr-color:focus {
} }
.clr-dark .clr-swatches button:after { .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 { .clr-dark input.clr-color {
@@ -388,25 +419,42 @@ input.clr-color:focus {
} }
.clr-dark .clr-preview:after { .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,
.clr-dark .clr-alpha div, .clr-dark .clr-alpha div,
.clr-dark .clr-swatches button, .clr-dark .clr-swatches button,
.clr-dark .clr-preview:before { .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 **/ /** Polaroid theme **/
.clr-picker.clr-polaroid { .clr-picker.clr-polaroid {
border-radius: 6px; 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 { .clr-picker.clr-polaroid:before {
content: ''; content: "";
display: block; display: block;
position: absolute; position: absolute;
width: 16px; width: 16px;
@@ -418,7 +466,7 @@ input.clr-color:focus {
border-bottom-color: currentColor; border-bottom-color: currentColor;
box-sizing: border-box; box-sizing: border-box;
color: #fff; 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; pointer-events: none;
} }
@@ -454,7 +502,7 @@ input.clr-color:focus {
.clr-polaroid .clr-hue div, .clr-polaroid .clr-hue div,
.clr-polaroid .clr-alpha 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 { .clr-polaroid .clr-format {
public/popup/coloris.js
+245 -196
View File
@@ -5,20 +5,32 @@
*/ */
((window, document, Math) => { ((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 }; const currentColor = { r: 0, g: 0, b: 0, h: 0, s: 0, v: 0, a: 1 };
let picker, colorArea, colorAreaDims, colorMarker, colorPreview, colorValue, clearButton, let picker,
hueSlider, hueMarker, alphaSlider, alphaMarker, currentEl, currentFormat, oldColor; colorArea,
colorAreaDims,
colorMarker,
colorPreview,
colorValue,
clearButton,
hueSlider,
hueMarker,
alphaSlider,
alphaMarker,
currentEl,
currentFormat,
oldColor;
// Default settings // Default settings
const settings = { const settings = {
el: '.coloris', el: ".coloris",
parent: null, parent: null,
theme: 'default', theme: "default",
themeMode: 'light', themeMode: "light",
wrap: true, wrap: true,
margin: 2, margin: 2,
format: 'hex', format: "hex",
formatToggle: false, formatToggle: false,
swatches: [], swatches: [],
swatchesOnly: false, swatchesOnly: false,
@@ -27,19 +39,20 @@
autoClose: false, autoClose: false,
clearButton: { clearButton: {
show: false, show: false,
label: 'Clear' label: "Clear",
}, },
a11y: { a11y: {
open: 'Open color picker', open: "Open color picker",
close: 'Close color picker', close: "Close color picker",
marker: 'Saturation: {s}. Brightness: {v}.', marker: "Saturation: {s}. Brightness: {v}.",
hueSlider: 'Hue slider', hueSlider: "Hue slider",
alphaSlider: 'Opacity slider', alphaSlider: "Opacity slider",
input: 'Color value field', input: "Color value field",
format: 'Color format', format: "Color format",
swatch: 'Color swatch', swatch: "Color swatch",
instruction: 'Saturation and brightness selector. Use up, down, left and right arrow keys to select.' instruction:
} "Saturation and brightness selector. Use up, down, left and right arrow keys to select.",
},
}; };
/** /**
@@ -47,81 +60,93 @@
* @param {object} options Configuration options. * @param {object} options Configuration options.
*/ */
function configure(options) { function configure(options) {
if (typeof options !== 'object') { if (typeof options !== "object") {
return; return;
} }
for (const key in options) { for (const key in options) {
switch (key) { switch (key) {
case 'el': case "el":
bindFields(options.el); bindFields(options.el);
if (options.wrap !== false) { if (options.wrap !== false) {
wrapFields(options.el); wrapFields(options.el);
} }
break; break;
case 'parent': case "parent":
settings.parent = document.querySelector(options.parent); settings.parent = document.querySelector(options.parent);
if (settings.parent) { if (settings.parent) {
settings.parent.appendChild(picker); settings.parent.appendChild(picker);
} }
break; break;
case 'themeMode': case "themeMode":
settings.themeMode = options.themeMode; settings.themeMode = options.themeMode;
if (options.themeMode === 'auto' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { if (
settings.themeMode = 'dark'; options.themeMode === "auto" &&
window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches
) {
settings.themeMode = "dark";
} }
// The lack of a break statement is intentional // The lack of a break statement is intentional
case 'theme': case "theme":
if (options.theme) { if (options.theme) {
settings.theme = options.theme; settings.theme = options.theme;
} }
picker.className = `clr-picker clr-${settings.theme} clr-${settings.themeMode}`; picker.className = `clr-picker clr-${settings.theme} clr-${settings.themeMode}`;
break; break;
case 'margin': case "margin":
options.margin *= 1; options.margin *= 1;
settings.margin = !isNaN(options.margin) ? options.margin : settings.margin; settings.margin = !isNaN(options.margin)
? options.margin
: settings.margin;
break; break;
case 'wrap': case "wrap":
if (options.el && options.wrap) { if (options.el && options.wrap) {
wrapFields(options.el); wrapFields(options.el);
} }
break; break;
case 'formatToggle': case "formatToggle":
getEl('clr-format').style.display = options.formatToggle ? 'block' : 'none'; getEl("clr-format").style.display = options.formatToggle
? "block"
: "none";
if (options.formatToggle) { if (options.formatToggle) {
settings.format = 'auto'; settings.format = "auto";
} }
break; break;
case 'swatches': case "swatches":
if (Array.isArray(options.swatches)) { if (Array.isArray(options.swatches)) {
const swatches = []; const swatches = [];
options.swatches.forEach((swatch, i) => { 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) { if (swatches.length) {
getEl('clr-swatches').innerHTML = `<div>${swatches.join('')}</div>`; getEl("clr-swatches").innerHTML = `<div>${swatches.join(
"",
)}</div>`;
} }
} }
break; break;
case 'swatchesOnly': case "swatchesOnly":
settings.swatchesOnly = !!options.swatchesOnly; settings.swatchesOnly = !!options.swatchesOnly;
picker.setAttribute('data-minimal', settings.swatchesOnly); picker.setAttribute("data-minimal", settings.swatchesOnly);
if (settings.swatchesOnly) { if (settings.swatchesOnly) {
settings.autoClose = true; settings.autoClose = true;
} }
break; break;
case 'alpha': case "alpha":
settings.alpha = !!options.alpha; settings.alpha = !!options.alpha;
picker.setAttribute('data-alpha', settings.alpha); picker.setAttribute("data-alpha", settings.alpha);
break; break;
case 'clearButton': case "clearButton":
let display = 'none'; let display = "none";
if (options.clearButton.show) { if (options.clearButton.show) {
display = 'block'; display = "block";
} }
if (options.clearButton.label) { if (options.clearButton.label) {
@@ -130,11 +155,11 @@
clearButton.style.display = display; clearButton.style.display = display;
break; break;
case 'a11y': case "a11y":
const labels = options.a11y; const labels = options.a11y;
let update = false; let update = false;
if (typeof labels === 'object') { if (typeof labels === "object") {
for (const label in labels) { for (const label in labels) {
if (labels[label] && settings.a11y[label]) { if (labels[label] && settings.a11y[label]) {
settings.a11y[label] = labels[label]; settings.a11y[label] = labels[label];
@@ -144,16 +169,16 @@
} }
if (update) { if (update) {
const openLabel = getEl('clr-open-label'); const openLabel = getEl("clr-open-label");
const swatchLabel = getEl('clr-swatch-label'); const swatchLabel = getEl("clr-swatch-label");
openLabel.innerHTML = settings.a11y.open; openLabel.innerHTML = settings.a11y.open;
swatchLabel.innerHTML = settings.a11y.swatch; swatchLabel.innerHTML = settings.a11y.swatch;
colorPreview.setAttribute('aria-label', settings.a11y.close); colorPreview.setAttribute("aria-label", settings.a11y.close);
hueSlider.setAttribute('aria-label', settings.a11y.hueSlider); hueSlider.setAttribute("aria-label", settings.a11y.hueSlider);
alphaSlider.setAttribute('aria-label', settings.a11y.alphaSlider); alphaSlider.setAttribute("aria-label", settings.a11y.alphaSlider);
colorValue.setAttribute('aria-label', settings.a11y.input); colorValue.setAttribute("aria-label", settings.a11y.input);
colorArea.setAttribute('aria-label', settings.a11y.instruction); colorArea.setAttribute("aria-label", settings.a11y.instruction);
} }
default: default:
settings[key] = options[key]; settings[key] = options[key];
@@ -167,7 +192,7 @@
*/ */
function bindFields(selector) { function bindFields(selector) {
// Show the color picker on click on the input fields that match the 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 parent = settings.parent;
const coords = event.target.getBoundingClientRect(); const coords = event.target.getBoundingClientRect();
const scrollY = window.scrollY; const scrollY = window.scrollY;
@@ -179,7 +204,7 @@
currentEl = event.target; currentEl = event.target;
oldColor = currentEl.value; oldColor = currentEl.value;
currentFormat = getColorFormatFromStr(oldColor); currentFormat = getColorFormatFromStr(oldColor);
picker.classList.add('clr-open'); picker.classList.add("clr-open");
const pickerWidth = picker.offsetWidth; const pickerWidth = picker.offsetWidth;
const pickerHeight = picker.offsetHeight; const pickerHeight = picker.offsetHeight;
@@ -215,21 +240,24 @@
reposition.left = true; reposition.left = true;
} }
if (top + pickerHeight - scrollY > document.documentElement.clientHeight) { if (
top + pickerHeight - scrollY >
document.documentElement.clientHeight
) {
top = scrollY + coords.y - pickerHeight - settings.margin; top = scrollY + coords.y - pickerHeight - settings.margin;
reposition.top = true; reposition.top = true;
} }
} }
picker.classList.toggle('clr-left', reposition.left); picker.classList.toggle("clr-left", reposition.left);
picker.classList.toggle('clr-top', reposition.top); picker.classList.toggle("clr-top", reposition.top);
picker.style.left = `${left}px`; picker.style.left = `${left}px`;
picker.style.top = `${top}px`; picker.style.top = `${top}px`;
colorAreaDims = { colorAreaDims = {
width: colorArea.offsetWidth, width: colorArea.offsetWidth,
height: colorArea.offsetHeight, height: colorArea.offsetHeight,
x: picker.offsetLeft + colorArea.offsetLeft + offset.x, x: picker.offsetLeft + colorArea.offsetLeft + offset.x,
y: picker.offsetTop + colorArea.offsetTop + offset.y y: picker.offsetTop + colorArea.offsetTop + offset.y,
}; };
setColorFromStr(oldColor); setColorFromStr(oldColor);
@@ -240,11 +268,11 @@
}); });
// Update the color preview of the input fields that match the selector // 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; const parent = event.target.parentNode;
// Only update the preview if the field has been previously wrapped // 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; parent.style.color = event.target.value;
} }
}); });
@@ -255,15 +283,15 @@
* @param {string} selector One or more selectors pointing to input fields. * @param {string} selector One or more selectors pointing to input fields.
*/ */
function wrapFields(selector) { function wrapFields(selector) {
document.querySelectorAll(selector).forEach(field => { document.querySelectorAll(selector).forEach((field) => {
const parentNode = field.parentNode; const parentNode = field.parentNode;
if (!parentNode.classList.contains('clr-field')) { if (!parentNode.classList.contains("clr-field")) {
const wrapper = document.createElement('div'); const wrapper = document.createElement("div");
wrapper.innerHTML = `<button aria-labelledby="clr-open-label"></button>`; wrapper.innerHTML = `<button aria-labelledby="clr-open-label"></button>`;
parentNode.insertBefore(wrapper, field); parentNode.insertBefore(wrapper, field);
wrapper.setAttribute('class', 'clr-field'); wrapper.setAttribute("class", "clr-field");
wrapper.style.color = field.value; wrapper.style.color = field.value;
wrapper.appendChild(field); wrapper.appendChild(field);
} }
@@ -281,14 +309,14 @@
currentEl.value = oldColor; currentEl.value = oldColor;
// Trigger an "input" event to force update the thumbnail next to the input field // 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) { 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) { if (settings.focusInput) {
currentEl.focus({ preventScroll: true }); currentEl.focus({ preventScroll: true });
@@ -312,10 +340,12 @@
// Update the UI // Update the UI
hueSlider.value = hsva.h; hueSlider.value = hsva.h;
picker.style.color = `hsl(${hsva.h}, 100%, 50%)`; 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.left = `${(colorAreaDims.width * hsva.s) / 100}px`;
colorMarker.style.top = `${colorAreaDims.height - (colorAreaDims.height * hsva.v / 100)}px`; colorMarker.style.top = `${
colorAreaDims.height - (colorAreaDims.height * hsva.v) / 100
}px`;
alphaSlider.value = hsva.a * 100; alphaSlider.value = hsva.a * 100;
alphaMarker.style.left = `${hsva.a * 100}%`; alphaMarker.style.left = `${hsva.a * 100}%`;
@@ -329,11 +359,11 @@
function getColorFormatFromStr(str) { function getColorFormatFromStr(str) {
const format = str.substring(0, 3).toLowerCase(); const format = str.substring(0, 3).toLowerCase();
if (format === 'rgb' || format === 'hsl') { if (format === "rgb" || format === "hsl") {
return format; return format;
} }
return 'hex'; return "hex";
} }
/** /**
@@ -343,7 +373,7 @@
function pickColor(color) { function pickColor(color) {
if (currentEl) { if (currentEl) {
currentEl.value = color !== undefined ? color : colorValue.value; 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) { function setColorAtPosition(x, y) {
const hsva = { const hsva = {
h: hueSlider.value * 1, h: hueSlider.value * 1,
s: x / colorAreaDims.width * 100, s: (x / colorAreaDims.width) * 100,
v: 100 - (y / colorAreaDims.height * 100), v: 100 - (y / colorAreaDims.height) * 100,
a: alphaSlider.value / 100 a: alphaSlider.value / 100,
}; };
const rgba = HSVAtoRGBA(hsva); const rgba = HSVAtoRGBA(hsva);
@@ -376,9 +406,9 @@
saturation = saturation.toFixed(1) * 1; saturation = saturation.toFixed(1) * 1;
value = value.toFixed(1) * 1; value = value.toFixed(1) * 1;
label = label.replace('{s}', saturation); label = label.replace("{s}", saturation);
label = label.replace('{v}', value); label = label.replace("{v}", value);
colorMarker.setAttribute('aria-label', label); colorMarker.setAttribute("aria-label", label);
} }
// //
@@ -390,7 +420,7 @@
function getPointerPosition(event) { function getPointerPosition(event) {
return { return {
pageX: event.changedTouches ? event.changedTouches[0].pageX : event.pageX, 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; y += settings.parent.scrollTop;
} }
x = (x < 0) ? 0 : (x > colorAreaDims.width) ? colorAreaDims.width : x; x = x < 0 ? 0 : x > colorAreaDims.width ? colorAreaDims.width : x;
y = (y < 0) ? 0 : (y > colorAreaDims.height) ? colorAreaDims.height : y; y = y < 0 ? 0 : y > colorAreaDims.height ? colorAreaDims.height : y;
colorMarker.style.left = `${x}px`; colorMarker.style.left = `${x}px`;
colorMarker.style.top = `${y}px`; colorMarker.style.top = `${y}px`;
@@ -426,8 +456,8 @@
* * @param {number} offsetY The vertical amount to move. * * @param {number} offsetY The vertical amount to move.
*/ */
function moveMarkerOnKeydown(offsetX, offsetY) { function moveMarkerOnKeydown(offsetX, offsetY) {
const x = colorMarker.style.left.replace('px', '') * 1 + offsetX; const x = colorMarker.style.left.replace("px", "") * 1 + offsetX;
const y = colorMarker.style.top.replace('px', '') * 1 + offsetY; const y = colorMarker.style.top.replace("px", "") * 1 + offsetY;
colorMarker.style.left = `${x}px`; colorMarker.style.left = `${x}px`;
colorMarker.style.top = `${y}px`; colorMarker.style.top = `${y}px`;
@@ -460,27 +490,27 @@
colorPreview.style.color = hex; colorPreview.style.color = hex;
// Force repaint the color and alpha gradients as a workaround for a Google Chrome bug // 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.offsetHeight;
colorArea.style.display = ''; colorArea.style.display = "";
alphaMarker.nextElementSibling.style.display = 'none'; alphaMarker.nextElementSibling.style.display = "none";
alphaMarker.nextElementSibling.offsetHeight; alphaMarker.nextElementSibling.offsetHeight;
alphaMarker.nextElementSibling.style.display = ''; alphaMarker.nextElementSibling.style.display = "";
if (format === 'mixed') { if (format === "mixed") {
format = currentColor.a === 1 ? 'hex' : 'rgb'; format = currentColor.a === 1 ? "hex" : "rgb";
} else if (format === 'auto') { } else if (format === "auto") {
format = currentFormat; format = currentFormat;
} }
switch (format) { switch (format) {
case 'hex': case "hex":
colorValue.value = hex; colorValue.value = hex;
break; break;
case 'rgb': case "rgb":
colorValue.value = RGBAToStr(currentColor); colorValue.value = RGBAToStr(currentColor);
break; break;
case 'hsl': case "hsl":
colorValue.value = HSLAToStr(HSVAtoHSLA(currentColor)); colorValue.value = HSLAToStr(HSVAtoHSLA(currentColor));
break; break;
} }
@@ -494,11 +524,11 @@
*/ */
function setHue() { function setHue() {
const hue = hueSlider.value * 1; const hue = hueSlider.value * 1;
const x = colorMarker.style.left.replace('px', '') * 1; const x = colorMarker.style.left.replace("px", "") * 1;
const y = colorMarker.style.top.replace('px', '') * 1; const y = colorMarker.style.top.replace("px", "") * 1;
picker.style.color = `hsl(${hue}, 100%, 50%)`; picker.style.color = `hsl(${hue}, 100%, 50%)`;
hueMarker.style.left = `${hue / 360 * 100}%`; hueMarker.style.left = `${(hue / 360) * 100}%`;
setColorAtPosition(x, y); setColorAtPosition(x, y);
} }
@@ -524,11 +554,11 @@
const value = hsva.v / 100; const value = hsva.v / 100;
let chroma = saturation * value; let chroma = saturation * value;
let hueBy60 = hsva.h / 60; 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; let m = value - chroma;
chroma = (chroma + m); chroma = chroma + m;
x = (x + m); x = x + m;
const index = Math.floor(hueBy60) % 6; const index = Math.floor(hueBy60) % 6;
const red = [chroma, x, m, m, x, chroma][index]; const red = [chroma, x, m, m, x, chroma][index];
@@ -539,7 +569,7 @@
r: Math.round(red * 255), r: Math.round(red * 255),
g: Math.round(green * 255), g: Math.round(green * 255),
b: Math.round(blue * 255), b: Math.round(blue * 255),
a: hsva.a a: hsva.a,
}; };
} }
@@ -550,18 +580,20 @@
*/ */
function HSVAtoHSLA(hsva) { function HSVAtoHSLA(hsva) {
const value = hsva.v / 100; const value = hsva.v / 100;
const lightness = value * (1 - (hsva.s / 100) / 2); const lightness = value * (1 - hsva.s / 100 / 2);
let saturation; let saturation;
if (lightness > 0 && lightness < 1) { 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 { return {
h: hsva.h, h: hsva.h,
s: saturation || 0, s: saturation || 0,
l: Math.round(lightness * 100), l: Math.round(lightness * 100),
a: hsva.a a: hsva.a,
}; };
} }
@@ -582,10 +614,18 @@
let saturation = 0; let saturation = 0;
if (chroma) { if (chroma) {
if (xmax === red) { hue = ((green - blue) / chroma); } if (xmax === red) {
if (xmax === green) { hue = 2 + (blue - red) / chroma; } hue = (green - blue) / chroma;
if (xmax === blue) { hue = 4 + (red - green) / chroma; } }
if (xmax) { saturation = chroma / xmax; } 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); hue = Math.floor(hue * 60);
@@ -594,7 +634,7 @@
h: hue < 0 ? hue + 360 : hue, h: hue < 0 ? hue + 360 : hue,
s: Math.round(saturation * 100), s: Math.round(saturation * 100),
v: Math.round(value * 100), v: Math.round(value * 100),
a: rgba.a a: rgba.a,
}; };
} }
@@ -604,11 +644,12 @@
* @return {object} Red, green, blue and alpha values. * @return {object} Red, green, blue and alpha values.
*/ */
function strToRGBA(str) { 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; let match, rgba;
// Default to black for invalid color strings // Default to black for invalid color strings
ctx.fillStyle = '#000'; ctx.fillStyle = "#000";
// Use canvas to convert the string to a valid color string // Use canvas to convert the string to a valid color string
ctx.fillStyle = str; ctx.fillStyle = str;
@@ -619,16 +660,18 @@
r: match[3] * 1, r: match[3] * 1,
g: match[4] * 1, g: match[4] * 1,
b: match[5] * 1, b: match[5] * 1,
a: match[6] * 1 a: match[6] * 1,
}; };
} else { } 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 = { rgba = {
r: match[0], r: match[0],
g: match[1], g: match[1],
b: match[2], b: match[2],
a: 1 a: 1,
}; };
} }
@@ -644,30 +687,30 @@
let R = rgba.r.toString(16); let R = rgba.r.toString(16);
let G = rgba.g.toString(16); let G = rgba.g.toString(16);
let B = rgba.b.toString(16); let B = rgba.b.toString(16);
let A = ''; let A = "";
if (rgba.r < 16) { if (rgba.r < 16) {
R = '0' + R; R = "0" + R;
} }
if (rgba.g < 16) { if (rgba.g < 16) {
G = '0' + G; G = "0" + G;
} }
if (rgba.b < 16) { if (rgba.b < 16) {
B = '0' + B; B = "0" + B;
} }
if (settings.alpha && rgba.a < 1) { if (settings.alpha && rgba.a < 1) {
const alpha = rgba.a * 255 | 0; const alpha = (rgba.a * 255) | 0;
A = alpha.toString(16); A = alpha.toString(16);
if (alpha < 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() { function init() {
// Render the UI // Render the UI
picker = document.createElement('div'); picker = document.createElement("div");
picker.setAttribute('id', 'clr-picker'); picker.setAttribute("id", "clr-picker");
picker.className = 'clr-picker'; picker.className = "clr-picker";
picker.innerHTML = picker.innerHTML =
`<input id="clr-color-value" class="clr-color" type="text" value="" aria-label="${settings.a11y.input}">` + `<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-area" class="clr-gradient" role="application" aria-label="${settings.a11y.instruction}">` +
'<div id="clr-color-marker" class="clr-marker" tabindex="0"></div>' + '<div id="clr-color-marker" class="clr-marker" tabindex="0"></div>' +
'</div>' + "</div>" +
'<div class="clr-hue">' + '<div class="clr-hue">' +
`<input id="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="${settings.a11y.hueSlider}">` + `<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 id="clr-hue-marker"></div>' +
'</div>' + "</div>" +
'<div class="clr-alpha">' + '<div class="clr-alpha">' +
`<input id="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="${settings.a11y.alphaSlider}">` + `<input id="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="${settings.a11y.alphaSlider}">` +
'<div id="clr-alpha-marker"></div>' + '<div id="clr-alpha-marker"></div>' +
'<span></span>' + "<span></span>" +
'</div>' + "</div>" +
'<div id="clr-format" class="clr-format">' + '<div id="clr-format" class="clr-format">' +
'<fieldset class="clr-segmented">' + '<fieldset class="clr-segmented">' +
`<legend>${settings.a11y.format}</legend>` + `<legend>${settings.a11y.format}</legend>` +
@@ -727,9 +770,9 @@
'<label for="clr-f2">RGB</label>' + '<label for="clr-f2">RGB</label>' +
'<input id="clr-f3" type="radio" name="clr-format" value="hsl">' + '<input id="clr-f3" type="radio" name="clr-format" value="hsl">' +
'<label for="clr-f3">HSL</label>' + '<label for="clr-f3">HSL</label>' +
'<span></span>' + "<span></span>" +
'</fieldset>' + "</fieldset>" +
'</div>' + "</div>" +
'<div id="clr-swatches" class="clr-swatches"></div>' + '<div id="clr-swatches" class="clr-swatches"></div>' +
`<button id="clr-clear" class="clr-clear">${settings.clearButton.label}</button>` + `<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>` + `<button id="clr-color-preview" class="clr-preview" aria-label="${settings.a11y.close}"></button>` +
@@ -740,63 +783,63 @@
document.body.appendChild(picker); document.body.appendChild(picker);
// Reference the UI elements // Reference the UI elements
colorArea = getEl('clr-color-area'); colorArea = getEl("clr-color-area");
colorMarker = getEl('clr-color-marker'); colorMarker = getEl("clr-color-marker");
clearButton = getEl('clr-clear'); clearButton = getEl("clr-clear");
colorPreview = getEl('clr-color-preview'); colorPreview = getEl("clr-color-preview");
colorValue = getEl('clr-color-value'); colorValue = getEl("clr-color-value");
hueSlider = getEl('clr-hue-slider'); hueSlider = getEl("clr-hue-slider");
hueMarker = getEl('clr-hue-marker'); hueMarker = getEl("clr-hue-marker");
alphaSlider = getEl('clr-alpha-slider'); alphaSlider = getEl("clr-alpha-slider");
alphaMarker = getEl('clr-alpha-marker'); alphaMarker = getEl("clr-alpha-marker");
// Bind the picker to the default selector // Bind the picker to the default selector
bindFields(settings.el); bindFields(settings.el);
wrapFields(settings.el); wrapFields(settings.el);
addListener(picker, 'mousedown', event => { addListener(picker, "mousedown", (event) => {
picker.classList.remove('clr-keyboard-nav'); picker.classList.remove("clr-keyboard-nav");
event.stopPropagation(); event.stopPropagation();
}); });
addListener(colorArea, 'mousedown', event => { addListener(colorArea, "mousedown", (event) => {
addListener(document, 'mousemove', moveMarker); addListener(document, "mousemove", moveMarker);
}); });
addListener(colorArea, 'touchstart', event => { addListener(colorArea, "touchstart", (event) => {
document.addEventListener('touchmove', moveMarker, { passive: false }); document.addEventListener("touchmove", moveMarker, { passive: false });
}); });
addListener(colorMarker, 'mousedown', event => { addListener(colorMarker, "mousedown", (event) => {
addListener(document, 'mousemove', moveMarker); addListener(document, "mousemove", moveMarker);
}); });
addListener(colorMarker, 'touchstart', event => { addListener(colorMarker, "touchstart", (event) => {
document.addEventListener('touchmove', moveMarker, { passive: false }); document.addEventListener("touchmove", moveMarker, { passive: false });
}); });
addListener(colorValue, 'change', event => { addListener(colorValue, "change", (event) => {
setColorFromStr(colorValue.value); setColorFromStr(colorValue.value);
pickColor(); pickColor();
}); });
addListener(clearButton, 'click', event => { addListener(clearButton, "click", (event) => {
pickColor(''); pickColor("");
closePicker(); closePicker();
}); });
addListener(colorPreview, 'click', event => { addListener(colorPreview, "click", (event) => {
pickColor(); pickColor();
closePicker(); closePicker();
}); });
addListener(document, 'click', '.clr-format input', event => { addListener(document, "click", ".clr-format input", (event) => {
currentFormat = event.target.value; currentFormat = event.target.value;
updateColor(); updateColor();
pickColor(); pickColor();
}); });
addListener(picker, 'click', '.clr-swatches button', event => { addListener(picker, "click", ".clr-swatches button", (event) => {
setColorFromStr(event.target.textContent); setColorFromStr(event.target.textContent);
pickColor(); pickColor();
@@ -805,37 +848,39 @@
} }
}); });
addListener(document, 'mouseup', event => { addListener(document, "mouseup", (event) => {
document.removeEventListener('mousemove', moveMarker); document.removeEventListener("mousemove", moveMarker);
}); });
addListener(document, 'touchend', event => { addListener(document, "touchend", (event) => {
document.removeEventListener('touchmove', moveMarker); document.removeEventListener("touchmove", moveMarker);
}); });
addListener(document, 'mousedown', event => { addListener(document, "mousedown", (event) => {
picker.classList.remove('clr-keyboard-nav'); picker.classList.remove("clr-keyboard-nav");
closePicker(); closePicker();
}); });
addListener(document, 'keydown', event => { addListener(document, "keydown", (event) => {
if (event.key === 'Escape') { if (event.key === "Escape") {
closePicker(true); closePicker(true);
} else if (event.key === 'Tab') { } else if (event.key === "Tab") {
picker.classList.add('clr-keyboard-nav'); picker.classList.add("clr-keyboard-nav");
} }
}); });
addListener(document, 'click', '.clr-field button', event => { addListener(document, "click", ".clr-field button", (event) => {
event.target.nextElementSibling.dispatchEvent(new Event('click', { bubbles: true })); event.target.nextElementSibling.dispatchEvent(
new Event("click", { bubbles: true }),
);
}); });
addListener(colorMarker, 'keydown', event => { addListener(colorMarker, "keydown", (event) => {
const movements = { const movements = {
ArrowUp: [0, -1], ArrowUp: [0, -1],
ArrowDown: [0, 1], ArrowDown: [0, 1],
ArrowLeft: [-1, 0], ArrowLeft: [-1, 0],
ArrowRight: [1, 0] ArrowRight: [1, 0],
}; };
if (Object.keys(movements).indexOf(event.key) !== -1) { if (Object.keys(movements).indexOf(event.key) !== -1) {
@@ -844,9 +889,9 @@
} }
}); });
addListener(colorArea, 'click', moveMarker); addListener(colorArea, "click", moveMarker);
addListener(hueSlider, 'input', setHue); addListener(hueSlider, "input", setHue);
addListener(alphaSlider, 'input', setAlpha); addListener(alphaSlider, "input", setAlpha);
} }
/** /**
@@ -866,11 +911,12 @@
* @param {function} [fn] Event handler if delegation is used. * @param {function} [fn] Event handler if delegation is used.
*/ */
function addListener(context, type, selector, fn) { 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 // Delegate event to the target of the selector
if (typeof selector === 'string') { if (typeof selector === "string") {
context.addEventListener(type, event => { context.addEventListener(type, (event) => {
if (matches.call(event.target, selector)) { if (matches.call(event.target, selector)) {
fn.call(event.target, event); fn.call(event.target, event);
} }
@@ -892,17 +938,21 @@
function DOMReady(fn, args) { function DOMReady(fn, args) {
args = args !== undefined ? args : []; args = args !== undefined ? args : [];
if (document.readyState !== 'loading') { if (document.readyState !== "loading") {
fn(...args); fn(...args);
} else { } else {
document.addEventListener('DOMContentLoaded', () => { document.addEventListener("DOMContentLoaded", () => {
fn(...args); fn(...args);
}); });
} }
} }
// Polyfill for Nodelist.forEach // 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; NodeList.prototype.forEach = Array.prototype.forEach;
} }
@@ -911,13 +961,13 @@
const methods = { const methods = {
set: configure, set: configure,
wrap: wrapFields, wrap: wrapFields,
close: closePicker close: closePicker,
}; };
function Coloris(options) { function Coloris(options) {
DOMReady(() => { DOMReady(() => {
if (options) { if (options) {
if (typeof options === 'string') { if (typeof options === "string") {
bindFields(options); bindFields(options);
} else { } else {
configure(options); configure(options);
@@ -937,25 +987,24 @@
// Init the color picker when the DOM is ready // Init the color picker when the DOM is ready
DOMReady(init); DOMReady(init);
})(window, document, Math); })(window, document, Math);
Coloris({ Coloris({
el: '.coloris', el: ".coloris",
theme: 'large', theme: "large",
themeMode: 'dark', themeMode: "dark",
format: 'hex', format: "hex",
alpha: false, alpha: false,
swatches: [ swatches: [
'#471616', "#471616",
'#1e4716', "#1e4716",
'#16473f', "#16473f",
'#161c47', "#161c47",
'#371647', "#371647",
'#47163f', "#47163f",
'#471627', "#471627",
'#3a3a3a', "#3a3a3a",
'#ffffff', "#ffffff",
'#1a1a1a' "#1a1a1a",
] ],
}); });
public/popup/info.css
+42 -30
View File
@@ -11,7 +11,7 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>. */ // along with this program. If not, see <https://www.gnu.org/licenses/>. */
/* cyrillic-ext */ /* 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 { .outside-container {
width: 350px; width: 350px;
@@ -65,7 +65,8 @@
text-align: center; text-align: center;
text-shadow: 0px 0px 15px rgb(22, 22, 22); text-shadow: 0px 0px 15px rgb(22, 22, 22);
} }
.apply-changes h3, h5 { .apply-changes h3,
h5 {
margin: 0; margin: 0;
} }
.apply-changes h3 { .apply-changes h3 {
@@ -129,7 +130,7 @@ p {
justify-content: space-between; justify-content: space-between;
margin-top: 10px; margin-top: 10px;
font-size: 13px !important; font-size: 13px !important;
position:relative; position: relative;
} }
.clr-field input:hover { .clr-field input:hover {
cursor: pointer; cursor: pointer;
@@ -178,7 +179,8 @@ p {
.onoffswitch { .onoffswitch {
margin: 0 0 1ex; margin: 0 0 1ex;
position: relative; width: 42px; position: relative;
width: 42px;
} }
.onoffswitch-checkbox { .onoffswitch-checkbox {
position: absolute; position: absolute;
@@ -195,25 +197,36 @@ p {
} }
.onoffswitch-label { .onoffswitch-label {
display: block; overflow: hidden; cursor: pointer; display: block;
height: 16px; padding: 0; line-height: 16px; overflow: hidden;
border: 0px solid #FFFFFF; border-radius: 24px; cursor: pointer;
background-color: #9E9E9E; height: 16px;
padding: 0;
line-height: 16px;
border: 0px solid #ffffff;
border-radius: 24px;
background-color: #9e9e9e;
} }
.onoffswitch-label:before { .onoffswitch-label:before {
content: ""; content: "";
display: block; width: 24px; margin: -4px; height: 24px; display: block;
background: #FFFFFF; width: 24px;
position: absolute; top: 0; bottom: 0; margin: -4px;
height: 24px;
background: #ffffff;
position: absolute;
top: 0;
bottom: 0;
right: 22px; right: 22px;
border-radius: 24px; border-radius: 24px;
transition: 0.3s; transition: 0.3s;
} }
.onoffswitch-checkbox:checked + .onoffswitch-label { .onoffswitch-checkbox:checked + .onoffswitch-label {
background-color: #20E060; background-color: #20e060;
} }
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before { .onoffswitch-checkbox:checked + .onoffswitch-label,
border-color: #20E060; .onoffswitch-checkbox:checked + .onoffswitch-label:before {
border-color: #20e060;
} }
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0; margin-left: 0;
@@ -221,7 +234,7 @@ p {
.onoffswitch-checkbox:checked + .onoffswitch-label:before { .onoffswitch-checkbox:checked + .onoffswitch-label:before {
transition: 0.3s; transition: 0.3s;
right: 0px; right: 0px;
background-color: #86F078; background-color: #86f078;
box-shadow: 3px 6px 18px 0px rgba(0, 0, 0, 0.2); box-shadow: 3px 6px 18px 0px rgba(0, 0, 0, 0.2);
} }
@@ -272,14 +285,14 @@ p {
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; width: 10px;
height: 10px; height: 10px;
transition: 1.0s; transition: 1s;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: rgba(127, 127, 127, 0.6); background-color: rgba(127, 127, 127, 0.6);
background-clip: padding-box; background-clip: padding-box;
border: 2px solid transparent; border: 2px solid transparent;
transition: 1.0s; transition: 1s;
} }
::-webkit-scrollbar-thumb:vertical:hover, ::-webkit-scrollbar-thumb:vertical:hover,
@@ -291,23 +304,23 @@ p {
background-color: transparent; background-color: transparent;
} }
::-webkit-scrollbar-thumb:vertical:active, ::-webkit-scrollbar-thumb:vertical:active,
::-webkit-scrollbar-thumb:horizontal:active { ::-webkit-scrollbar-thumb:horizontal:active {
background: rgba(95, 91, 91, 1); background: rgba(95, 91, 91, 1);
} }
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background: none; background: none;
} }
:root, html, body, div, ol { :root,
html,
body,
div,
ol {
scrollbar-width: thin !important; scrollbar-width: thin !important;
scrollbar-color: #5e5e5f #161616 !important; scrollbar-color: #5e5e5f #161616 !important;
} }
.topmenu { .topmenu {
display: flex; display: flex;
width: 100%; width: 100%;
@@ -315,7 +328,6 @@ p {
color: white; color: white;
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.navitem { .navitem {
width: 33.34%; width: 33.34%;
@@ -329,7 +341,6 @@ p {
border-bottom: 2px solid #a5a5a5; border-bottom: 2px solid #a5a5a5;
color: #a5a5a5; color: #a5a5a5;
transition: 0.3s; transition: 0.3s;
} }
.activenav { .activenav {
border-bottom: 2px solid #ff5f5f; border-bottom: 2px solid #ff5f5f;
@@ -358,7 +369,8 @@ p {
#applychanges { #applychanges {
margin-top: 0px; margin-top: 0px;
} }
.applychanges h5, h6 { .applychanges h5,
h6 {
margin: 0; margin: 0;
font-weight: 400; font-weight: 400;
} }
@@ -366,10 +378,10 @@ p {
list-style: none; list-style: none;
position: relative; position: relative;
margin-left: 10px; margin-left: 10px;
cursor:grab; cursor: grab;
} }
.draggable:active { .draggable:active {
cursor:-moz-grabbing; cursor: -moz-grabbing;
cursor: -webkit-grabbing; cursor: -webkit-grabbing;
} }
.draggable::before { .draggable::before {
@@ -459,9 +471,9 @@ p {
} }
.custom-shortcuts-field:focus { .custom-shortcuts-field:focus {
outline: none; outline: none;
outline: 1px solid rgb(60, 60, 60); outline: 1px solid rgb(60, 60, 60);
transition: 100ms; transition: 100ms;
} }
.domain-container { .domain-container {
font-size: 9px; 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 <!-- // 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 // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // 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 // You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>. --> // along with this program. If not, see <https://www.gnu.org/licenses/>. -->
<html> <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> <body>
<link rel="stylesheet" href="coloris.css" /> <style>
<script src="coloris.js"></script> body {
<meta charset="utf-8"> width: 350px;
<link rel="stylesheet" href="info.css" /> margin: 0;
</head> background-color: #131313;
overflow: hidden;
}
</style>
<body> <div class="logo-container">
<style> <img src="/icons/betterseqta-light-full.png" />
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> </div>
</div> <div class="main-page" id="mainpage">
<div class="topmenu">
<div class="navitem activenav" id="miscsection">Settings</div>
<div class="menu-page hiddenmenu" id="menupage"> <div class="navitem" id="shortcutsection">Shortcuts</div>
<div class="selector-container" style="margin-bottom: 0;"> <div class="navitem" id="aboutsection">About</div>
<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> </div>
</div> </div>
</div>
<div class="menu-page hiddenmenu" id="shortcutpage"> <div class="menu-page hiddenmenu" id="menupage">
<div class="selector-container" style="margin-bottom: 0; max-height: 17em; overflow-y:hidden;"> <div class="selector-container" style="margin-bottom: 0">
<div> <div class="menu-item-selection">
<div class="custom-shortcuts-button custom-shortcuts-buttons">Create Custom Shortcut</div> <div class="aboutcontainer">
<div class="custom-shortcuts-container"> <div>
<label for="shortcutname" class="custom-shortcuts-label">Shortcut Name:</label> <h1 class="addonitem">About</h1>
<input type="text" id="shortcutname" name="shortcutname" class="custom-shortcuts-field" placeholder="e.g. Google" maxlength="20"> <p class="item subitem">
<label for="shortcuturl" class="custom-shortcuts-label">URL:</label> Created and developed and maintained by CK and AH
<input type="text" id="shortcuturl" name="shortcuturl" class="custom-shortcuts-field" placeholder="e.g. https://www.google.com"> </p>
<div class="custom-shortcuts-submit custom-shortcuts-buttons">Create</div> <p class="item subitem">
</div> EvenBetterSEQTA is a revived or BetterSEQTA which is no longer
</div> maintained.
<div class="menu-item-selection menushortcut"> </p>
<div class="item-container menushortcuts"> </div>
<div class="text-container">
<h1 class="addonitem">YouTube</h1>
</div> </div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
id="youtube"> <div class="aboutcontainer">
<label for="youtube" class="onoffswitch-label"></label> <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> <div
<div class="item-container menushortcuts"> class="aboutcontainer"
<div class="text-container"> style="color: rgb(155, 155, 155); font-size: 14px; margin-top: 7px"
<h1 class="addonitem">Outlook</h1> >
</div> <p>Contact: cacakaca@outlook.com</p>
<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>
</div> </div>
</div> </div>
</div>
<div class="menu-page" id="miscpage"> <div class="menu-page hiddenmenu" id="shortcutpage">
<div class="selector-container" style="margin-bottom: 0;"> <div
<div class="menu-item-selection"> class="selector-container"
style="margin-bottom: 0; max-height: 17em; overflow-y: hidden"
<div class="item-container"> >
<div class="text-container"> <div>
<h1 class="addonitem">Notification Collector</h1> <div class="custom-shortcuts-button custom-shortcuts-buttons">
<p class="item subitem">Shows the real number of notifications</p> Create Custom Shortcut
</div> </div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification" type="checkbox" id="notification"> <div class="custom-shortcuts-container">
<label for="notification" class="onoffswitch-label"></label> <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> </div>
<div class="menu-item-selection menushortcut">
<div class="item-container"> <div class="item-container menushortcuts">
<div class="text-container"> <div class="text-container">
<h1 class="addonitem">Lesson Alerts</h1> <h1 class="addonitem">YouTube</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 shortcutitem"
type="checkbox"
id="youtube"
/>
<label for="youtube" class="onoffswitch-label"></label>
</div>
</div> </div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification" type="checkbox" id="lessonalert"> <div class="item-container menushortcuts">
<label for="lessonalert" class="onoffswitch-label"></label> <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> </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></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;"> <div class="item-container">
<p style="margin: 0; margin-right: 5px; color: white;">Maintanied by SethBurkart123 </p> <div class="text-container">
<p style="margin: 0; margin-right: 5px;" id="version"></p> <h1 class="addonitem">Lesson Alerts</h1>
</div><img src="/popup/github.svg" alt="" id="github"> <p class="item subitem">
</div> Sends a native browser notification ~5 minutes prior to lessons.
<script src="info.js"></script> </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> </html>
public/popup/info.js
+111 -76
View File
@@ -16,49 +16,57 @@ const notificationcollector = document.querySelector("#notification");
const lessonalert = document.querySelector("#lessonalert"); const lessonalert = document.querySelector("#lessonalert");
const aboutsection = document.querySelector("#aboutsection"); const aboutsection = document.querySelector("#aboutsection");
const shortcutsection = document.querySelector("#shortcutsection"); const shortcutsection = document.querySelector("#shortcutsection");
const miscsection = document.querySelector('#miscsection'); const miscsection = document.querySelector("#miscsection");
const mainpage = document.querySelector("#mainpage"); const mainpage = document.querySelector("#mainpage");
const colorpicker = document.querySelector("#colorpicker"); const colorpicker = document.querySelector("#colorpicker");
const animatedbk = document.querySelector('#animatedbk'); const animatedbk = document.querySelector("#animatedbk");
const customshortcutbutton = document.getElementsByClassName('custom-shortcuts-button')[0]; const customshortcutbutton = document.getElementsByClassName(
const customshortcutdiv = document.getElementsByClassName('custom-shortcuts-container')[0]; "custom-shortcuts-button",
const customshortcutsubmit = document.getElementsByClassName('custom-shortcuts-submit')[0]; )[0];
const customshortcutinputname = document.querySelector('#shortcutname'); const customshortcutdiv = document.getElementsByClassName(
const customshortcutinputurl = document.querySelector('#shortcuturl'); "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 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 menupage = document.querySelector("#menupage");
const shortcutpage = document.querySelector("#shortcutpage"); const shortcutpage = document.querySelector("#shortcutpage");
const miscpage = document.querySelector('#miscpage'); const miscpage = document.querySelector("#miscpage");
var shortcutbuttons = document.getElementsByClassName("shortcutitem"); var shortcutbuttons = document.getElementsByClassName("shortcutitem");
const github = document.getElementById("github"); const github = document.getElementById("github");
const version = document.getElementById('version'); const version = document.getElementById("version");
const domainbutton = document.getElementById('domain-button'); const domainbutton = document.getElementById("domain-button");
var validURL = false; var validURL = false;
var validName = false; var validName = false;
function openGithub() { function openGithub() {
chrome.tabs.create({ url: "https://github.com/SethBurkart123/EvenBetterSEQTA" }); chrome.tabs.create({
url: "https://github.com/SethBurkart123/EvenBetterSEQTA",
});
} }
function openPage(page) { function openPage(page) {
mainpage.style.left = "-350px"; mainpage.style.left = "-350px";
page.style.right = '0px'; page.style.right = "0px";
} }
function backToMainMenu() { function backToMainMenu() {
@@ -71,12 +79,11 @@ function backToMainMenu() {
function resetActive() { function resetActive() {
for (let i = 0; i < navbuttons.length; i++) { 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++) { for (let i = 0; i < menupages.length; i++) {
menupages[i].classList.add('hiddenmenu'); menupages[i].classList.add("hiddenmenu");
} }
} }
function FindSEQTATab() { function FindSEQTATab() {
@@ -98,13 +105,13 @@ function storeSettings() {
} }
function storeNotificationSettings() { function storeNotificationSettings() {
chrome.storage.local.set( chrome.storage.local.set({
{ notificationcollector: notificationcollector.checked }); notificationcollector: notificationcollector.checked,
});
chrome.storage.local.set({ lessonalert: lessonalert.checked }); chrome.storage.local.set({ lessonalert: lessonalert.checked });
chrome.storage.local.set({ animatedbk: animatedbk.checked }); chrome.storage.local.set({ animatedbk: animatedbk.checked });
} }
function StoreAllSettings() { function StoreAllSettings() {
chrome.storage.local.get(["shortcuts"], function (result) { chrome.storage.local.get(["shortcuts"], function (result) {
var shortcuts = Object.values(result)[0]; 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. or the default settings if the stored settings are empty.
*/ */
function updateUI(restoredSettings) { function updateUI(restoredSettings) {
if (typeof restoredSettings.onoff == 'undefined') { if (typeof restoredSettings.onoff == "undefined") {
chrome.runtime.sendMessage({ type: "setDefaultStorage" }); chrome.runtime.sendMessage({ type: "setDefaultStorage" });
chrome.storage.local.get(null, function (result) { chrome.storage.local.get(null, function (result) {
@@ -149,7 +156,6 @@ var stringtoHTML = function (str) {
}; };
function CreateShortcutDiv(name) { function CreateShortcutDiv(name) {
div = stringtoHTML(` div = stringtoHTML(`
<div class="item-container menushortcuts" data-customshortcut="${name}"> <div class="item-container menushortcuts" data-customshortcut="${name}">
<div class="text-container"> <div class="text-container">
@@ -163,7 +169,7 @@ function CreateShortcutDiv(name) {
shortcutmenuitemselection.append(div); shortcutmenuitemselection.append(div);
const deletebutton = document.getElementById(`delete-${name}`); const deletebutton = document.getElementById(`delete-${name}`);
deletebutton.addEventListener('click', function () { deletebutton.addEventListener("click", function () {
DeleteCustomShortcut(name); DeleteCustomShortcut(name);
applybutton.style.left = "4px"; applybutton.style.left = "4px";
}); });
@@ -174,9 +180,7 @@ function AddCustomShortcuts() {
var customshortcuts = Object.values(result)[0]; var customshortcuts = Object.values(result)[0];
for (let i = 0; i < customshortcuts.length; i++) { for (let i = 0; i < customshortcuts.length; i++) {
const element = customshortcuts[i]; const element = customshortcuts[i];
CreateShortcutDiv( CreateShortcutDiv(element.name);
element.name,
)
} }
}); });
} }
@@ -193,40 +197,42 @@ function DeleteCustomShortcut(name) {
} }
chrome.storage.local.set({ customshortcuts: customshortcuts }); chrome.storage.local.set({ customshortcuts: customshortcuts });
}); });
} }
function CustomShortcutMenu() { function CustomShortcutMenu() {
customshortcutinputname.value = ''; customshortcutinputname.value = "";
customshortcutinputurl.value = ''; customshortcutinputurl.value = "";
validURL = false; validURL = false;
validName = false; validName = false;
customshortcutsubmit.classList.remove("customshortcut-submit-valid"); customshortcutsubmit.classList.remove("customshortcut-submit-valid");
if (customshortcutdiv.classList.contains('custom-shortcuts-container-shown')) { if (
customshortcutdiv.classList.remove('custom-shortcuts-container-shown') customshortcutdiv.classList.contains("custom-shortcuts-container-shown")
) {
customshortcutdiv.classList.remove("custom-shortcuts-container-shown");
} else { } else {
customshortcutdiv.classList.add('custom-shortcuts-container-shown') customshortcutdiv.classList.add("custom-shortcuts-container-shown");
}; }
} }
function CreateCustomShortcut() { function CreateCustomShortcut() {
const shortcutname = customshortcutinputname.value; const shortcutname = customshortcutinputname.value;
var shortcuturl = customshortcutinputurl.value; var shortcuturl = customshortcutinputurl.value;
if (!(shortcuturl.includes('http'))) { if (!shortcuturl.includes("http")) {
shortcuturl = "https://" + shortcuturl; shortcuturl = "https://" + shortcuturl;
} }
chrome.storage.local.get(["customshortcuts"], function (result) { chrome.storage.local.get(["customshortcuts"], function (result) {
var customshortcuts = Object.values(result)[0]; 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 }); chrome.storage.local.set({ customshortcuts: customshortcuts });
}); });
CreateShortcutDiv( CreateShortcutDiv(shortcutname);
shortcutname
);
} }
function onError(e) { function onError(e) {
@@ -236,7 +242,8 @@ function onError(e) {
On opening the options page, fetch stored settings and update the UI with them. On opening the options page, fetch stored settings and update the UI with them.
*/ */
chrome.storage.local.get(null, function (result) { 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; colorpicker.value = result.selectedColor;
console.log(result); console.log(result);
updateUI(result); updateUI(result);
@@ -249,18 +256,37 @@ document.addEventListener("DOMContentLoaded", function () {
version.innerHTML = `v${chrome.runtime.getManifest().version}`; version.innerHTML = `v${chrome.runtime.getManifest().version}`;
github.addEventListener("click", openGithub); github.addEventListener("click", openGithub);
domainbutton.addEventListener('click', function (event) { domainbutton.addEventListener("click", function (event) {
chrome.runtime.sendMessage({ type: "addPermissions" }); 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(); }) customshortcutbutton.addEventListener("click", () => {
customshortcutsubmit.addEventListener("click", () => { if (validName && validURL) { CreateCustomShortcut(); CustomShortcutMenu() } }); CustomShortcutMenu();
});
customshortcutsubmit.addEventListener("click", () => {
if (validName && validURL) {
CreateCustomShortcut();
CustomShortcutMenu();
}
});
var sameName = false; var sameName = false;
customshortcutinputname.addEventListener("input", function () { 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; validName = true;
} else { } else {
validName = false; validName = false;
@@ -281,15 +311,17 @@ document.addEventListener("DOMContentLoaded", function () {
if (validName && validURL) { if (validName && validURL) {
customshortcutsubmit.classList.add("customshortcut-submit-valid"); customshortcutsubmit.classList.add("customshortcut-submit-valid");
} } else {
else {
customshortcutsubmit.classList.remove("customshortcut-submit-valid"); customshortcutsubmit.classList.remove("customshortcut-submit-valid");
} }
}); });
}); });
customshortcutinputurl.addEventListener("input", function () { customshortcutinputurl.addEventListener("input", function () {
if (customshortcutinputurl.value.length > 0 && customshortcutinputurl.value.includes('.')) { if (
customshortcutinputurl.value.length > 0 &&
customshortcutinputurl.value.includes(".")
) {
validURL = true; validURL = true;
} else { } else {
validURL = false; validURL = false;
@@ -297,46 +329,49 @@ document.addEventListener("DOMContentLoaded", function () {
if (validName && validURL) { if (validName && validURL) {
customshortcutsubmit.classList.add("customshortcut-submit-valid"); customshortcutsubmit.classList.add("customshortcut-submit-valid");
} } else {
else {
customshortcutsubmit.classList.remove("customshortcut-submit-valid"); customshortcutsubmit.classList.remove("customshortcut-submit-valid");
} }
}) });
AddCustomShortcuts(); AddCustomShortcuts();
}); });
onoffselection.addEventListener("change", storeSettings); onoffselection.addEventListener("change", storeSettings);
notificationcollector.addEventListener( notificationcollector.addEventListener("change", storeNotificationSettings);
"change", lessonalert.addEventListener("change", storeNotificationSettings);
storeNotificationSettings
);
lessonalert.addEventListener("change", storeNotificationSettings)
animatedbk.addEventListener("change", storeNotificationSettings) animatedbk.addEventListener("change", storeNotificationSettings);
for (let i = 0; i < allinputs.length; i++) { for (let i = 0; i < allinputs.length; i++) {
if (allinputs[i].id != 'colorpicker' && allinputs[i].id != "shortcuturl" && allinputs[i].id != "shortcutname") { if (
allinputs[i].addEventListener("change", () => { applybutton.style.left = "4px" }) 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 () { colorpicker.addEventListener("input", function () {
var colorPreview = document.querySelector('#clr-color-preview') var colorPreview = document.querySelector("#clr-color-preview");
if (colorPreview.style.color) { if (colorPreview.style.color) {
var hex = colorPreview.style.color.split("(")[1].split(")")[0]; var hex = colorPreview.style.color.split("(")[1].split(")")[0];
hex = hex.split(","); hex = hex.split(",");
var b = hex.map(function (x) { //For each array element var b = hex.map(function (x) {
x = parseInt(x).toString(16); //Convert to a base16 string //For each array element
return (x.length == 1) ? "0" + x : x; //Add zero if we get only one character 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(""); b = "#" + b.join("");
chrome.storage.local.set({ selectedColor: b }) chrome.storage.local.set({ selectedColor: b });
} }
});
})
public/purify.min.js
Vendored
+1387 -1
View File
File diff suppressed because one or more lines are too long
src/SEQTA.js
+948 -808
View File
File diff suppressed because it is too large Load Diff
src/background.js
+118 -111
View File
@@ -11,95 +11,105 @@ function ReloadSEQTAPages() {
chrome.runtime.onMessage.addListener(function (request, sender) { chrome.runtime.onMessage.addListener(function (request, sender) {
if (request.type == "reloadTabs") { if (request.type == "reloadTabs") {
ReloadSEQTAPages(); ReloadSEQTAPages();
} } else if (request.type == "githubTab") {
else if (request.type == "githubTab") { chrome.tabs.create({
chrome.tabs.create({ url: "github.com/SethBurkart123/BetterThanBetterSeqta" }); url: "github.com/SethBurkart123/BetterThanBetterSeqta",
}
else if (request.type == "setDefaultStorage") {
console.log('setting default values')
SetStorageValue(DefaultValues);
}
else if (request.type == "addPermissions") {
if (typeof (chrome.declarativeContent) != 'undefined') {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
});
}
chrome.permissions.request({ permissions: ["declarativeContent"], origins: ["*://*/*"] }, function (granted) {
if (granted) {
rules = [
{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { urlContains: 'site.seqta.com.au', schemes: ['https'] },
})
],
actions: [new chrome.declarativeContent.RequestContentScript({ js: ["SEQTA.js"] })]
},
{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { urlContains: 'learn.', schemes: ['https'] },
})
],
actions: [new chrome.declarativeContent.RequestContentScript({ js: ["SEQTA.js"] })]
},
]
for (let i = 0; i < rules.length; i++) {
chrome.declarativeContent.onPageChanged.addRules([rules[i]]);
}
alert("Permissions granted. Reload SEQTA pages to see changes. If this workaround doesn't work, please contact the developer. It will be an easy fix");
}
}); });
} else if (request.type == "setDefaultStorage") {
console.log("setting default values");
SetStorageValue(DefaultValues);
} else if (request.type == "addPermissions") {
if (typeof chrome.declarativeContent != "undefined") {
chrome.declarativeContent.onPageChanged.removeRules(
undefined,
function () {},
);
}
chrome.permissions.request(
{ permissions: ["declarativeContent"], origins: ["*://*/*"] },
function (granted) {
if (granted) {
rules = [
{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: {
urlContains: "site.seqta.com.au",
schemes: ["https"],
},
}),
],
actions: [
new chrome.declarativeContent.RequestContentScript({
js: ["SEQTA.js"],
}),
],
},
{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { urlContains: "learn.", schemes: ["https"] },
}),
],
actions: [
new chrome.declarativeContent.RequestContentScript({
js: ["SEQTA.js"],
}),
],
},
];
for (let i = 0; i < rules.length; i++) {
chrome.declarativeContent.onPageChanged.addRules([rules[i]]);
}
alert(
"Permissions granted. Reload SEQTA pages to see changes. If this workaround doesn't work, please contact the developer. It will be an easy fix",
);
}
},
);
} }
}); });
var NewsJSON = {}; var NewsJSON = {};
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request.type === "sendNews") {
// Gets the current date
const date = new Date();
// Formats the current date used send a request for timetable and notices later
var TodayFormatted =
date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
var from =
date.getFullYear() +
"-" +
(date.getMonth() + 1) +
"-" +
(date.getDate() - 1);
console.log(TodayFormatted);
console.log(from);
chrome.runtime.onMessage.addListener( // var url = `https://newsapi.org/v2/everything?sources=abc-news&from=${TodayFormatted}&sortBy=popularity&apiKey=17c0da766ba347c89d094449504e3080`;
function (request, sender, sendResponse) { var url = `https://newsapi.org/v2/everything?domains=abc.net.au&from=${from}&apiKey=17c0da766ba347c89d094449504e3080`;
if (request.type === "sendNews") {
// Gets the current date function GetNews() {
const date = new Date(); fetch(url)
// Formats the current date used send a request for timetable and notices later .then((result) => result.json())
var TodayFormatted = .then((response) => {
date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate(); if (response.code == "rateLimited") {
url += "%00";
var from = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate() - 1); GetNews();
console.log(TodayFormatted) } else {
console.log(from) sendResponse({ news: response });
}
// var url = `https://newsapi.org/v2/everything?sources=abc-news&from=${TodayFormatted}&sortBy=popularity&apiKey=17c0da766ba347c89d094449504e3080`; });
var url = `https://newsapi.org/v2/everything?domains=abc.net.au&from=${from}&apiKey=17c0da766ba347c89d094449504e3080`
function GetNews() {
fetch(url)
.then((result) => result.json())
.then((response) => {
if (response.code == 'rateLimited') {
url += '%00';
GetNews();
}
else {
sendResponse({ news: response })
}
})
}
GetNews();
return true;
} }
GetNews();
return true;
} }
); });
const DefaultValues = { const DefaultValues = {
onoff: true, onoff: true,
@@ -110,94 +120,90 @@ const DefaultValues = {
menuitems: {}, menuitems: {},
menuorder: [], menuorder: [],
subjectfilters: {}, subjectfilters: {},
selectedColor: '#1a1a1a', selectedColor: "#1a1a1a",
DarkMode: true, DarkMode: true,
shortcuts: [ shortcuts: [
{ {
name: "YouTube", name: "YouTube",
enabled: false enabled: false,
}, },
{ {
name: "Outlook", name: "Outlook",
enabled: true enabled: true,
}, },
{ {
name: "Office", name: "Office",
enabled: true enabled: true,
}, },
{ {
name: "Spotify", name: "Spotify",
enabled: false enabled: false,
}, },
{ {
name: "Google", name: "Google",
enabled: true enabled: true,
}, },
{ {
name: "DuckDuckGo", name: "DuckDuckGo",
enabled: false enabled: false,
}, },
{ {
name: "Cool Math Games", name: "Cool Math Games",
enabled: false enabled: false,
}, },
{ {
name: "SACE", name: "SACE",
enabled: false enabled: false,
}, },
{ {
name: "Google Scholar", name: "Google Scholar",
enabled: false enabled: false,
}, },
{ {
name: "Gmail", name: "Gmail",
enabled: false enabled: false,
}, },
{ {
name: "Netflix", name: "Netflix",
enabled: false enabled: false,
}, },
{ {
Name: "educationperfect", Name: "educationperfect",
enabled: true enabled: true,
} },
], ],
customshortcuts: [] customshortcuts: [],
} };
function SetStorageValue(object) { function SetStorageValue(object) {
for (var i in object) { for (var i in object) {
chrome.storage.local.set({ [i]: object[i] }) chrome.storage.local.set({ [i]: object[i] });
} }
} }
function UpdateCurrentValues(details) { function UpdateCurrentValues(details) {
console.log(details) console.log(details);
chrome.storage.local.get(null, function (items) { chrome.storage.local.get(null, function (items) {
var CurrentValues = items; var CurrentValues = items;
const NewValue = Object.assign({}, DefaultValues, CurrentValues) const NewValue = Object.assign({}, DefaultValues, CurrentValues);
function CheckInnerElement(element) { function CheckInnerElement(element) {
for (let i in element) { for (let i in element) {
if (typeof element[i] === 'object') { if (typeof element[i] === "object") {
if (typeof DefaultValues[i].length == 'undefined') { if (typeof DefaultValues[i].length == "undefined") {
NewValue[i] = Object.assign({}, DefaultValues[i], CurrentValues[i]) NewValue[i] = Object.assign({}, DefaultValues[i], CurrentValues[i]);
} } else {
else { // If the object is an array, turn it back after // If the object is an array, turn it back after
length = DefaultValues[i].length; length = DefaultValues[i].length;
NewValue[i] = Object.assign({}, DefaultValues[i], CurrentValues[i]) NewValue[i] = Object.assign({}, DefaultValues[i], CurrentValues[i]);
NewArray = []; NewArray = [];
for (let j = 0; j < length; j++) { for (let j = 0; j < length; j++) {
NewArray.push(NewValue[i][j]); NewArray.push(NewValue[i][j]);
} }
NewValue[i] = NewArray; NewValue[i] = NewArray;
} }
} }
} }
} }
@@ -208,15 +214,16 @@ function UpdateCurrentValues(details) {
} }
SetStorageValue(NewValue); SetStorageValue(NewValue);
}) });
} }
chrome.runtime.onInstalled.addListener(function (event) { chrome.runtime.onInstalled.addListener(function (event) {
chrome.storage.local.remove(["justupdated"]); chrome.storage.local.remove(["justupdated"]);
UpdateCurrentValues(); UpdateCurrentValues();
if (/*chrome.runtime.getManifest().version > event.previousVersion || */ event.reason == 'install') { if (
/*chrome.runtime.getManifest().version > event.previousVersion || */ event.reason ==
"install"
) {
chrome.storage.local.set({ justupdated: true }); chrome.storage.local.set({ justupdated: true });
} }
}); });
src/inject/documentload.js
+1 -1
View File
@@ -1 +1 @@
import './documentload.css'; import "./documentload.css";
src/inject/iframe.css
+7 -2
View File
@@ -11,9 +11,14 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>. */ // along with this program. If not, see <https://www.gnu.org/licenses/>. */
html, p, div, span { html,
p,
div,
span {
color: white !important; color: white !important;
text-shadow: 1px 1px 2px #161616, 0 0 1em #161616; text-shadow:
1px 1px 2px #161616,
0 0 1em #161616;
} }
blockquote.forward > .preamble { blockquote.forward > .preamble {
src/inject/iframe.js
+1 -1
View File
@@ -1 +1 @@
import './iframe.css'; import "./iframe.css";
src/inject/injected.css
+166 -145
View File
@@ -23,8 +23,8 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>. */ // along with this program. If not, see <https://www.gnu.org/licenses/>. */
@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");
@import './injected/popup.css'; @import "./injected/popup.css";
:root { :root {
background-color: var(--better-main) !important; background-color: var(--better-main) !important;
@@ -59,7 +59,7 @@ html {
} }
} }
.connectedNotificationsWrapper>div>button>svg>g { .connectedNotificationsWrapper > div > button > svg > g {
fill: var(--background-primary) !important; fill: var(--background-primary) !important;
} }
@@ -94,31 +94,31 @@ html {
width: 35px !important; width: 35px !important;
} }
#main>.dashboard { #main > .dashboard {
background: unset; background: unset;
} }
#main>.dashboard>.dashlet { #main > .dashboard > .dashlet {
background: var(--background-primary); background: var(--background-primary);
} }
.dashlet-notes>ul { .dashlet-notes > ul {
background: var(--background-primary); background: var(--background-primary);
} }
.dashlet-notes>ul>li { .dashlet-notes > ul > li {
color: var(--text-primary); color: var(--text-primary);
} }
ul.magicDelete>li:hover { ul.magicDelete > li:hover {
background: var(--better-sub); background: var(--better-sub);
} }
.dashlet-notes>.editor { .dashlet-notes > .editor {
background: unset; background: unset;
} }
ul.magicDelete>li.deleting { ul.magicDelete > li.deleting {
background: unset; background: unset;
} }
@@ -155,7 +155,7 @@ ul.magicDelete>li.deleting {
white-space: nowrap; white-space: nowrap;
} }
#menu section>label { #menu section > label {
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
cursor: inherit; cursor: inherit;
@@ -176,8 +176,8 @@ ul.magicDelete>li.deleting {
z-index: 11 !important; z-index: 11 !important;
} }
#menu li>label>svg, #menu li > label > svg,
#menu section>label>svg { #menu section > label > svg {
margin: 0 10px 0 4px; margin: 0 10px 0 4px;
width: 28px !important; width: 28px !important;
height: 28px !important; height: 28px !important;
@@ -191,25 +191,25 @@ ul.magicDelete>li.deleting {
width: 85% !important; width: 85% !important;
} }
#menu li.active>.sub>ul>.item { #menu li.active > .sub > ul > .item {
box-shadow: inset 3px 0 var(--item-colour, transparent); box-shadow: inset 3px 0 var(--item-colour, transparent);
border-radius: 0px 8px 8px 0px; border-radius: 0px 8px 8px 0px;
transition: 100ms; transition: 100ms;
} }
#menu li.active>.sub>ul>.item:hover { #menu li.active > .sub > ul > .item:hover {
box-shadow: inset 6px 0 var(--item-colour, transparent); box-shadow: inset 6px 0 var(--item-colour, transparent);
transition: 100ms; transition: 100ms;
} }
#menu li.active>.sub>ul>.active { #menu li.active > .sub > ul > .active {
box-shadow: inset 6px 0 var(--item-colour, transparent); box-shadow: inset 6px 0 var(--item-colour, transparent);
transition: 100ms; transition: 100ms;
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
} }
#menu li>label, #menu li > label,
#menu section>label { #menu section > label {
text-transform: none; text-transform: none;
font-size: 16px; font-size: 16px;
} }
@@ -244,9 +244,13 @@ ol:has(.MessageList__avatar___2wxyb svg) {
} }
.wrapper .cke_contents::-webkit-scrollbar-thumb { .wrapper .cke_contents::-webkit-scrollbar-thumb {
background-color: rgb(150, 150, 150) !important; /* color of the scroll thumb */ background-color: rgb(
border-radius: 20px; /* roundness of the scroll thumb */ 150,
border: 3px solid orange; /* creates padding around scroll thumb */ 150,
150
) !important; /* color of the scroll thumb */
border-radius: 20px; /* roundness of the scroll thumb */
border: 3px solid orange; /* creates padding around scroll thumb */
} }
.content .footer { .content .footer {
@@ -288,13 +292,17 @@ ol:has(.MessageList__avatar___2wxyb svg) {
border-radius: 16px !important; border-radius: 16px !important;
padding: 4px !important; padding: 4px !important;
padding-left: 12px !important; padding-left: 12px !important;
box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.2) !important; box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.2) !important;
} }
[style="--better-sub\:\ \#161616\;\ --better-alert-highlight\:\ \#c61851\;\ --background-primary\:\ \#ffffff\;\ --background-secondary\:\ \#e5e7eb\;\ --text-primary\:\ black\;\ --text-color\:\ white\;\ --betterseqta-logo\:\ url\(chrome-extension\:\/\/boikofabjaholheekefimfojfncpjfib\/icons\/betterseqta-light-full\.png\)\;\ --better-main\:\ \#1a1a1a\;\ --better-light\:\ \#333333\;"] .menuShown > :last-child { [style="--better-sub\:\ \#161616\;\ --better-alert-highlight\:\ \#c61851\;\ --background-primary\:\ \#ffffff\;\ --background-secondary\:\ \#e5e7eb\;\ --text-primary\:\ black\;\ --text-color\:\ white\;\ --betterseqta-logo\:\ url\(chrome-extension\:\/\/boikofabjaholheekefimfojfncpjfib\/icons\/betterseqta-light-full\.png\)\;\ --better-main\:\ \#1a1a1a\;\ --better-light\:\ \#333333\;"]
.menuShown
> :last-child {
top: 14% !important; top: 14% !important;
} }
[style="--better-sub\:\ \#161616\;\ --better-alert-highlight\:\ \#c61851\;\ --background-primary\:\ \#ffffff\;\ --background-secondary\:\ \#e5e7eb\;\ --text-primary\:\ black\;\ --text-color\:\ white\;\ --betterseqta-logo\:\ url\(chrome-extension\:\/\/boikofabjaholheekefimfojfncpjfib\/icons\/betterseqta-light-full\.png\)\;\ --better-main\:\ \#1a1a1a\;\ --better-light\:\ \#333333\;"] .menuShown > :last-child { [style="--better-sub\:\ \#161616\;\ --better-alert-highlight\:\ \#c61851\;\ --background-primary\:\ \#ffffff\;\ --background-secondary\:\ \#e5e7eb\;\ --text-primary\:\ black\;\ --text-color\:\ white\;\ --betterseqta-logo\:\ url\(chrome-extension\:\/\/boikofabjaholheekefimfojfncpjfib\/icons\/betterseqta-light-full\.png\)\;\ --better-main\:\ \#1a1a1a\;\ --better-light\:\ \#333333\;"]
.menuShown
> :last-child {
top: 18% !important; top: 18% !important;
} }
@@ -305,9 +313,13 @@ ol:has(.MessageList__avatar___2wxyb svg) {
} }
.singleSelect::-webkit-scrollbar-thumb { .singleSelect::-webkit-scrollbar-thumb {
background-color: rgb(150, 150, 150) !important; /* color of the scroll thumb */ background-color: rgb(
border-radius: 20px; /* roundness of the scroll thumb */ 150,
border: 3px solid orange; /* creates padding around scroll thumb */ 150,
150
) !important; /* color of the scroll thumb */
border-radius: 20px; /* roundness of the scroll thumb */
border: 3px solid orange; /* creates padding around scroll thumb */
} }
.uiFileHandler { .uiFileHandler {
@@ -331,7 +343,6 @@ ol:has(.MessageList__avatar___2wxyb svg) {
} }
#container #content #title { #container #content #title {
margin-bottom: 40px;
-webkit-box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0.2) !important; -webkit-box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0.2) !important;
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2) !important; box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2) !important;
} }
@@ -358,21 +369,19 @@ td.colourBar {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
} }
#main>.reports>.item>.report { #main > .reports > .item > .report {
filter: brightness(1) !important; filter: brightness(1) !important;
border-radius: 16px !important; border-radius: 16px !important;
border: 2px solid lightgray !important; border: 2px solid lightgray !important;
} }
#main>.reports>.item { #main > .reports > .item {
box-shadow: none !important; box-shadow: none !important;
} }
ol > [data-message] { ol > [data-message] {
padding-left: 4px !important; padding-left: 4px !important;
padding-right: 4px !important; padding-right: 4px !important;
margin-bottom: 4px;
border-radius: 8px !important;
} }
ol > [data-label] { ol > [data-label] {
@@ -395,7 +404,7 @@ div > ol:has(.uiFileHandlerWrapper) {
border-bottom-right-radius: 16px !important; border-bottom-right-radius: 16px !important;
} }
.assessments > div > div > div > div > div > div > div:has(ol) { .assessments > div > div > div > div > div > div > div:has(ol) {
border-radius: 16px !important; border-radius: 16px !important;
} }
@@ -403,7 +412,7 @@ div > ol:has(.uiFileHandlerWrapper) {
min-height: 8rem !important; min-height: 8rem !important;
} }
.student #menu>ul::before { .student #menu > ul::before {
background-image: var(--betterseqta-logo); background-image: var(--betterseqta-logo);
position: -webkit-sticky; /* Safari */ position: -webkit-sticky; /* Safari */
position: sticky; position: sticky;
@@ -419,7 +428,7 @@ div > ol:has(.uiFileHandlerWrapper) {
background: rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.15);
} }
#main>.timetablepage>.container { #main > .timetablepage > .container {
background-color: var(--background-primary); background-color: var(--background-primary);
} }
@@ -454,7 +463,13 @@ div > ol:has(.uiFileHandlerWrapper) {
} }
} }
.welcome>.portalPageView>.powerPortalPage>.Body__body___3pGxr>.Container__container___33GlY>.Document__document___1KJCG>.Canvas__canvas___OBdCZ { .welcome
> .portalPageView
> .powerPortalPage
> .Body__body___3pGxr
> .Container__container___33GlY
> .Document__document___1KJCG
> .Canvas__canvas___OBdCZ {
background-color: unset !important; background-color: unset !important;
background-image: unset !important; background-image: unset !important;
background-size: unset; background-size: unset;
@@ -473,31 +488,35 @@ div > ol:has(.uiFileHandlerWrapper) {
color: var(--text-primary) !important; color: var(--text-primary) !important;
} }
.composer>.Body__body___3pGxr>.Container__container___33GlY>.Document__document___1KJCG>.Canvas__canvas___OBdCZ { .composer
> .Body__body___3pGxr
> .Container__container___33GlY
> .Document__document___1KJCG
> .Canvas__canvas___OBdCZ {
background-color: unset !important; background-color: unset !important;
background-image: unset !important; background-image: unset !important;
background: var(--auto-background) !important; background: var(--auto-background) !important;
color: white !important; color: white !important;
} }
#main>.notices>.notice>.label, #main > .notices > .notice > .label,
#main>.notices>.notice>.staff, #main > .notices > .notice > .staff,
#main>.notices>.notice>h2 { #main > .notices > .notice > h2 {
color: var(--text-primary); color: var(--text-primary);
color: var(--colour); color: var(--colour);
} }
#main>.course>.content>.homework>.content, #main > .course > .content > .homework > .content,
#main>.course>.content>.resources>.content { #main > .course > .content > .resources > .content {
color: var(--text-primary); color: var(--text-primary);
opacity: 0.8; opacity: 0.8;
} }
#main>.notices>.notice>.contents { #main > .notices > .notice > .contents {
background: var(--background-primary); background: var(--background-primary);
} }
#main>.notices>.notice { #main > .notices > .notice {
--colour: unset; --colour: unset;
} }
@@ -512,9 +531,11 @@ div > ol:has(.uiFileHandlerWrapper) {
.bg { .bg {
animation: slide 3s ease-in-out infinite alternate; animation: slide 3s ease-in-out infinite alternate;
background-image: linear-gradient(-60deg, background-image: linear-gradient(
var(--better-main) 50%, -60deg,
var(--auto-background) 50%); var(--better-main) 50%,
var(--auto-background) 50%
);
bottom: 0; bottom: 0;
left: -50%; left: -50%;
opacity: 0.5; opacity: 0.5;
@@ -738,7 +759,7 @@ div > ol:has(.uiFileHandlerWrapper) {
} }
.customshortcut::after { .customshortcut::after {
content: 'User Created Shortcut'; content: "User Created Shortcut";
position: absolute; position: absolute;
top: -4px; top: -4px;
right: -15px; right: -15px;
@@ -816,11 +837,11 @@ div > ol:has(.uiFileHandlerWrapper) {
transition: 200ms; transition: 200ms;
} }
#main>.notices>.notice>.contents { #main > .notices > .notice > .contents {
background: var(--background); background: var(--background);
} }
#main>.notices>.notice { #main > .notices > .notice {
background: var(--background); background: var(--background);
} }
@@ -908,27 +929,29 @@ div > ol:has(.uiFileHandlerWrapper) {
cursor: pointer; cursor: pointer;
} }
.connectedNotificationsWrapper>div>button { .connectedNotificationsWrapper > div > button {
height: 45px; height: 45px;
width: 45px; width: 45px;
} }
.notifications__notifications___3mmLY.notifications__hasItems___gXxzx>button { .notifications__notifications___3mmLY.notifications__hasItems___gXxzx > button {
background: white; background: white;
color: var(--better-sub); color: var(--better-sub);
} }
.notifications__notifications___3mmLY>button { .notifications__notifications___3mmLY > button {
padding: 8px; padding: 8px;
} }
.legacy-root button>svg, .legacy-root button > svg,
.legacy-root a>svg { .legacy-root a > svg {
height: 25px; height: 25px;
width: 24px; width: 24px;
} }
.notifications__notifications___3mmLY>button>.notifications__bubble___1EkSQ { .notifications__notifications___3mmLY
> button
> .notifications__bubble___1EkSQ {
background: var(--better-alert-highlight); background: var(--better-alert-highlight);
width: 25px; width: 25px;
height: 25px; height: 25px;
@@ -942,7 +965,7 @@ div > ol:has(.uiFileHandlerWrapper) {
border-color: var(--better-sub); border-color: var(--better-sub);
} }
.notifications__notifications___3mmLY.notifications__shown___1kPoT>button { .notifications__notifications___3mmLY.notifications__shown___1kPoT > button {
background-color: #e6e6e6; background-color: #e6e6e6;
border-bottom-left-radius: 100%; border-bottom-left-radius: 100%;
} }
@@ -962,17 +985,17 @@ div > ol:has(.uiFileHandlerWrapper) {
background: var(--auto-background) !important; background: var(--auto-background) !important;
} }
.connectedNotificationsWrapper>div>button+div { .connectedNotificationsWrapper > div > button + div {
color: var(--text-primary); color: var(--text-primary);
top: 80px; top: 80px;
right: 10px; right: 10px;
border-radius: 1rem; border-radius: 1rem;
box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.4); box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.4);
} }
#ExtensionPopup { #ExtensionPopup {
border-radius: 1rem; border-radius: 1rem;
box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.4); box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.4);
} }
#menu li.active { #menu li.active {
@@ -994,13 +1017,13 @@ div > ol:has(.uiFileHandlerWrapper) {
flex-direction: column; flex-direction: column;
} }
.notifications__item___2ErJN>.notifications__dismiss___zveKV { .notifications__item___2ErJN > .notifications__dismiss___zveKV {
background: rgba(0, 0, 0, 0.1) !important; background: rgba(0, 0, 0, 0.1) !important;
color: var(--text-primary); color: var(--text-primary);
margin: auto 0; margin: auto 0;
} }
#main>.messages { #main > .messages {
color: var(--text-primary); color: var(--text-primary);
} }
@@ -1009,24 +1032,24 @@ div > ol:has(.uiFileHandlerWrapper) {
color: var(--text-primary); color: var(--text-primary);
} }
.LabelList__LabelList___2RJFf>li.LabelList__selected___3Egk7 { .LabelList__LabelList___2RJFf > li.LabelList__selected___3Egk7 {
color: var(--text-primary); color: var(--text-primary);
} }
.Viewer__sidebar___1Btu4>header { .Viewer__sidebar___1Btu4 > header {
background: unset; background: unset;
} }
.MessageList__MessageList___3DxoC ::-webkit-scrollbar { .MessageList__MessageList___3DxoC ::-webkit-scrollbar {
width: 0px; width: 0px;
background: none; background: none;
} }
.MessageList__MessageList___3DxoC { .MessageList__MessageList___3DxoC {
background: var(--background-primary); background: var(--background-primary);
} }
.Input__Input___3RSTI>input { .Input__Input___3RSTI > input {
color: var(--text-primary); color: var(--text-primary);
background: var(--better-main); background: var(--better-main);
} }
@@ -1035,7 +1058,7 @@ div > ol:has(.uiFileHandlerWrapper) {
--person-colour: var(--better-light); --person-colour: var(--better-light);
} }
.LabelList__LabelList___2RJFf>li.LabelList__selected___3Egk7 { .LabelList__LabelList___2RJFf > li.LabelList__selected___3Egk7 {
background: var(--background-primary); background: var(--background-primary);
} }
@@ -1053,34 +1076,36 @@ iframe.userHTML {
background: var(--background-primary); background: var(--background-primary);
} }
.userHTML>div:first-of-type { .userHTML > div:first-of-type {
color: var(--text-primary); color: var(--text-primary);
} }
#main>.reports>.item>.report { #main > .reports > .item > .report {
background: var(--background-primary); background: var(--background-primary);
filter: brightness(0.90); filter: brightness(0.9);
} }
#main>.reports { #main > .reports {
background: var(--auto-background); background: var(--auto-background);
} }
#main>.reports>.item>.report>.year { #main > .reports > .item > .report > .year {
background: var(--better-light); background: var(--better-light);
color: var(--text-color); color: var(--text-color);
} }
#main>.reports>.item>.report>.term { #main > .reports > .item > .report > .term {
color: var(--text-color); color: var(--text-color);
background: var(--better-main); background: var(--better-main);
} }
.Collapsible__Collapsible___3O8P3>.Collapsible__header___-Afvq { .Collapsible__Collapsible___3O8P3 > .Collapsible__header___-Afvq {
background: var(--auto-background); background: var(--auto-background);
} }
.AssessmentList__AssessmentList___1GdCl>.AssessmentList__searchFilter___3N70o+.AssessmentList__items___3LcmQ { .AssessmentList__AssessmentList___1GdCl
> .AssessmentList__searchFilter___3N70o
+ .AssessmentList__items___3LcmQ {
color: var(--text-primary); color: var(--text-primary);
} }
@@ -1094,47 +1119,47 @@ iframe.userHTML {
background: unset; background: unset;
} }
.programmeNavigator>.navigator, .programmeNavigator > .navigator,
.programmeNavigator>.navigator>li>ul { .programmeNavigator > .navigator > li > ul {
background: var(--background-primary); background: var(--background-primary);
color: var(--text-primary); color: var(--text-primary);
} }
.programmeNavigator>.navigator>.week>.lessons>.lesson:hover { .programmeNavigator > .navigator > .week > .lessons > .lesson:hover {
background: var(--auto-background); background: var(--auto-background);
} }
.programmeNavigator>.navigator>.search { .programmeNavigator > .navigator > .search {
background: var(--better-light); background: var(--better-light);
} }
.programmeNavigator>.navigator>.week>.lessons>.lesson.selected, .programmeNavigator > .navigator > .week > .lessons > .lesson.selected,
.programmeNavigator>.navigator>.cover.selected { .programmeNavigator > .navigator > .cover.selected {
background: var(--better-light); background: var(--better-light);
color: var(--text-color) !important; color: var(--text-color) !important;
} }
#main>.course>.content>h1 { #main > .course > .content > h1 {
color: var(--text-primary); color: var(--text-primary);
} }
#main>.course>.content>.outline>h2, #main > .course > .content > .outline > h2,
#main>.course>.content>.homework>h2, #main > .course > .content > .homework > h2,
#main>.course>.content>.resources>h2 { #main > .course > .content > .resources > h2 {
color: var(--text-primary); color: var(--text-primary);
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; width: 10px;
height: 10px; height: 10px;
transition: 1.0s; transition: 1s;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: var(--better-light); background-color: var(--better-light);
background-clip: padding-box; background-clip: padding-box;
border: 2px solid transparent; border: 2px solid transparent;
transition: 1.0s; transition: 1s;
border-radius: 1rem !important; border-radius: 1rem !important;
} }
@@ -1147,12 +1172,9 @@ iframe.userHTML {
background-color: transparent; background-color: transparent;
} }
::-webkit-scrollbar-thumb:vertical:active, ::-webkit-scrollbar-thumb:vertical:active,
::-webkit-scrollbar-thumb:horizontal:active { ::-webkit-scrollbar-thumb:horizontal:active {
background: var(--better-light); background: var(--better-light);
} }
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
@@ -1169,8 +1191,7 @@ ul {
scrollbar-color: var(--better-light) var(--better-sub) !important; scrollbar-color: var(--better-light) var(--better-sub) !important;
} }
.connectedNotificationsWrapper > div > button {
.connectedNotificationsWrapper>div>button {
color: var(--text-primary) !important; color: var(--text-primary) !important;
} }
@@ -1179,7 +1200,7 @@ ul {
background: var(--background-primary); background: var(--background-primary);
} }
#userActions>.details>.code { #userActions > .details > .code {
text-transform: initial; text-transform: initial;
} }
@@ -1187,7 +1208,7 @@ ul {
color: var(--text-primary); color: var(--text-primary);
} }
.TabSet__TabSet___Vo-SZ>.TabSet__tabContainer___3iIRe { .TabSet__TabSet___Vo-SZ > .TabSet__tabContainer___3iIRe {
background: unset; background: unset;
} }
@@ -1200,15 +1221,15 @@ ul {
margin: 8px 0px 0px 0px; margin: 8px 0px 0px 0px;
} }
.dailycal>.header { .dailycal > .header {
color: var(--text-primary); color: var(--text-primary);
} }
#main>.timetablepage>.container>.dailycal { #main > .timetablepage > .container > .dailycal {
color: var(--text-primary); color: var(--text-primary);
} }
#main>.timetablepage>.note { #main > .timetablepage > .note {
color: var(--text-primary); color: var(--text-primary);
} }
@@ -1231,11 +1252,11 @@ ul {
color: var(--text-primary); color: var(--text-primary);
} }
.Rubric__Rubric___2AAKS>.Rubric__line___JCC3Y { .Rubric__Rubric___2AAKS > .Rubric__line___JCC3Y {
background: unset; background: unset;
} }
#main>.course>.content>.header>.coverImage.blurred { #main > .course > .content > .header > .coverImage.blurred {
display: none; display: none;
background-image: unset !important; background-image: unset !important;
height: 0px; height: 0px;
@@ -1256,7 +1277,7 @@ blurred {
cursor: pointer; cursor: pointer;
} }
.uiSlidePane>.pane>.header { .uiSlidePane > .pane > .header {
color: var(--text-color); color: var(--text-color);
background-color: var(--better-main); background-color: var(--better-main);
} }
@@ -1276,14 +1297,14 @@ blurred {
box-shadow: inset 0px 10px 0 var(--item-colour, transparent) !important; box-shadow: inset 0px 10px 0 var(--item-colour, transparent) !important;
} }
.formattedText>.wrapper>.cke>.cke_inner>.cke_contents { .formattedText > .wrapper > .cke > .cke_inner > .cke_contents {
background: var(--background-primary); background: var(--background-primary);
border-radius: 1rem; border-radius: 1rem;
padding: 8px; padding: 8px;
overflow-x: hidden; overflow-x: hidden;
} }
.formattedText>.footer { .formattedText > .footer {
background-color: var(--background-primary); background-color: var(--background-primary);
border-radius: 1rem; border-radius: 1rem;
margin-top: 0.5rem; margin-top: 0.5rem;
@@ -1299,15 +1320,17 @@ blurred {
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
} }
.uiSlidePane.shown>.pane { .uiSlidePane.shown > .pane {
transform: translatey(0%) !important; transform: translatey(0%) !important;
} }
.uiSlidePane>.pane { .uiSlidePane > .pane {
color: var(--text-primary); color: var(--text-primary);
background-color: var(--auto-background); background-color: var(--auto-background);
transform: translateY(100%); transform: translateY(100%);
transition: transform 0.5s ease-in-out,-webkit-transform 0.5s ease-in-out; transition:
transform 0.5s ease-in-out,
-webkit-transform 0.5s ease-in-out;
transition-delay: 0 !important; transition-delay: 0 !important;
border-radius: 1rem !important; border-radius: 1rem !important;
} }
@@ -1329,8 +1352,8 @@ blurred {
background: #797979; background: #797979;
} }
.cke_toolbox>.cke_toolbar .cke_combo_on>.cke_combo_button, .cke_toolbox > .cke_toolbar .cke_combo_on > .cke_combo_button,
.cke_toolbox>.cke_toolbar .cke_button_on { .cke_toolbox > .cke_toolbar .cke_button_on {
background-color: #797979 !important; background-color: #797979 !important;
} }
@@ -1364,7 +1387,7 @@ body {
overflow: hidden; overflow: hidden;
} }
#main>.notices>.notice { #main > .notices > .notice {
color: var(--text-primary); color: var(--text-primary);
} }
@@ -1378,15 +1401,23 @@ body {
background-size: contain; background-size: contain;
} }
.forumView>.messages>.thread, .forumView > .messages > .thread,
.forumView>.messages>.deletedPlaceholder, .forumView > .messages > .deletedPlaceholder,
.forumView>.addMessage, .forumView > .addMessage,
.forumView .greeting, .forumView .greeting,
.forumView .assessment { .forumView .assessment {
background: var(--better-main); background: var(--better-main);
} }
.dailycal>.content>.wrapper>.days>tbody>tr>td>.entriesWrapper>.entry { .dailycal
> .content
> .wrapper
> .days
> tbody
> tr
> td
> .entriesWrapper
> .entry {
/* border-radius: 15px; */ /* border-radius: 15px; */
padding: 3px; padding: 3px;
/* width: 93% !important; */ /* width: 93% !important; */
@@ -1418,11 +1449,11 @@ body {
display: none; display: none;
} }
.MessageList__MessageList___3DxoC>ol>li.MessageList__unread___3imtO { .MessageList__MessageList___3DxoC > ol > li.MessageList__unread___3imtO {
box-shadow: inset 3px 0 rgb(255, 255, 255); box-shadow: inset 3px 0 rgb(255, 255, 255);
} }
.connectedNotificationsWrapper>div>button { .connectedNotificationsWrapper > div > button {
background: var(--text-primary) !important; background: var(--text-primary) !important;
border-radius: 10px !important; border-radius: 10px !important;
color: var(--background-primary) !important; color: var(--background-primary) !important;
@@ -1434,7 +1465,7 @@ body {
z-index: 2; z-index: 2;
} }
#userActions>.details>.name::before { #userActions > .details > .name::before {
content: ""; content: "";
width: 14px; width: 14px;
height: 12px; height: 12px;
@@ -1447,7 +1478,7 @@ body {
vertical-align: top; vertical-align: top;
} }
#userActions>.details { #userActions > .details {
opacity: unset !important; opacity: unset !important;
color: var(--text-color); color: var(--text-color);
} }
@@ -1491,7 +1522,6 @@ body {
transform: unset; transform: unset;
padding-top: unset; padding-top: unset;
opacity: unset; opacity: unset;
} }
#clr-color-preview { #clr-color-preview {
@@ -1502,7 +1532,7 @@ body {
cursor: pointer; cursor: pointer;
} }
.MessageList__MessageList___3DxoC>ol>li.MessageList__selected___1SJNz { .MessageList__MessageList___3DxoC > ol > li.MessageList__selected___1SJNz {
background: var(--better-main); background: var(--better-main);
color: var(--text-color); color: var(--text-color);
} }
@@ -1541,7 +1571,7 @@ body {
background: none; background: none;
} }
.NewsArticle:hover>.ArticleText a { .NewsArticle:hover > .ArticleText a {
text-decoration: underline; text-decoration: underline;
} }
@@ -1568,7 +1598,7 @@ body {
justify-content: center; justify-content: center;
} }
.editmenu svg:hover>path { .editmenu svg:hover > path {
fill: #aaaaaa; fill: #aaaaaa;
} }
@@ -1683,7 +1713,7 @@ body {
bottom: 20px; bottom: 20px;
} }
#userActions>.details>.code { #userActions > .details > .code {
overflow: visible !important; overflow: visible !important;
} }
@@ -1745,7 +1775,7 @@ body {
margin: 0; margin: 0;
} }
.notifications__actions___1UX7r>button { .notifications__actions___1UX7r > button {
background: none !important; background: none !important;
border: 1px solid white; border: 1px solid white;
} }
@@ -1848,7 +1878,7 @@ body {
} }
.upcoming-special-day { .upcoming-special-day {
font-size: 20px font-size: 20px;
} }
.upcoming-blank { .upcoming-blank {
@@ -1889,7 +1919,6 @@ body {
overflow-y: hidden; overflow-y: hidden;
} }
.upcoming-checkbox-container { .upcoming-checkbox-container {
display: block; display: block;
position: relative; position: relative;
@@ -1905,8 +1934,6 @@ body {
height: 20px; height: 20px;
align-items: center; align-items: center;
display: flex; display: flex;
} }
/* Hide the browser's default checkbox */ /* Hide the browser's default checkbox */
@@ -1932,12 +1959,12 @@ body {
} }
/* On mouse-over, add a grey background color */ /* On mouse-over, add a grey background color */
.upcoming-checkbox-container:hover input~.upcoming-checkmark { .upcoming-checkbox-container:hover input ~ .upcoming-checkmark {
filter: brightness(0.8); filter: brightness(0.8);
} }
/* When the checkbox is checked, add a blue background */ /* When the checkbox is checked, add a blue background */
.upcoming-checkbox-container input:checked~.upcoming-checkmark { .upcoming-checkbox-container input:checked ~ .upcoming-checkmark {
background-color: var(--item-colour); background-color: var(--item-colour);
} }
@@ -1949,7 +1976,7 @@ body {
} }
/* Show the checkmark when checked */ /* Show the checkmark when checked */
.upcoming-checkbox-container input:checked~.upcoming-checkmark:after { .upcoming-checkbox-container input:checked ~ .upcoming-checkmark:after {
display: block; display: block;
} }
@@ -1970,11 +1997,11 @@ body {
color: #797979; color: #797979;
} }
.calendarEventEditor>.tabset>.item { .calendarEventEditor > .tabset > .item {
border-radius: 0 !important; border-radius: 0 !important;
} }
.MessageList__MessageList___3DxoC>header { .MessageList__MessageList___3DxoC > header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
@@ -1995,8 +2022,6 @@ body {
cursor: pointer; cursor: pointer;
} }
.day { .day {
box-shadow: inset 0px 0px 10px 0.1px var(--better-sub); box-shadow: inset 0px 0px 10px 0.1px var(--better-sub);
width: 100%; width: 100%;
@@ -2028,11 +2053,11 @@ body {
transition: 200ms; transition: 200ms;
} }
#main>.notices>.notice>.contents { #main > .notices > .notice > .contents {
background: var(--background-primary); background: var(--background-primary);
} }
#main>.notices>.notice { #main > .notices > .notice {
background: var(--background-primary); background: var(--background-primary);
} }
@@ -2185,7 +2210,7 @@ body {
} }
.upcoming-special-day { .upcoming-special-day {
font-size: 20px font-size: 20px;
} }
.upcoming-blank { .upcoming-blank {
@@ -2222,7 +2247,6 @@ body {
overflow-y: hidden; overflow-y: hidden;
} }
.upcoming-checkbox-container { .upcoming-checkbox-container {
display: block; display: block;
position: relative; position: relative;
@@ -2238,8 +2262,6 @@ body {
height: 20px; height: 20px;
align-items: center; align-items: center;
display: flex; display: flex;
} }
/* Hide the browser's default checkbox */ /* Hide the browser's default checkbox */
@@ -2265,12 +2287,12 @@ body {
} }
/* On mouse-over, add a grey background color */ /* On mouse-over, add a grey background color */
.upcoming-checkbox-container:hover input~.upcoming-checkmark { .upcoming-checkbox-container:hover input ~ .upcoming-checkmark {
filter: brightness(0.8); filter: brightness(0.8);
} }
/* When the checkbox is checked, add a blue background */ /* When the checkbox is checked, add a blue background */
.upcoming-checkbox-container input:checked~.upcoming-checkmark { .upcoming-checkbox-container input:checked ~ .upcoming-checkmark {
background-color: var(--item-colour); background-color: var(--item-colour);
} }
@@ -2282,7 +2304,7 @@ body {
} }
/* Show the checkmark when checked */ /* Show the checkmark when checked */
.upcoming-checkbox-container input:checked~.upcoming-checkmark:after { .upcoming-checkbox-container input:checked ~ .upcoming-checkmark:after {
display: block; display: block;
} }
@@ -2489,7 +2511,6 @@ body {
animation: zoomin 0.5s; animation: zoomin 0.5s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
transform-origin: center center; transform-origin: center center;
} }
@keyframes zoomin { @keyframes zoomin {
@@ -2599,7 +2620,7 @@ body {
} }
.whatsnewTextHeader::after { .whatsnewTextHeader::after {
content: ''; content: "";
width: 160%; width: 160%;
height: 2px; height: 2px;
background: #4dd868; background: #4dd868;
src/inject/injected.js
+1 -1
View File
@@ -1 +1 @@
import './injected.css'; import "./injected.css";
webpack.config.js
+26 -23
View File
@@ -1,6 +1,7 @@
const path = require('path'); const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin'); const CopyWebpackPlugin = require("copy-webpack-plugin");
const ESLintPlugin = require("eslint-webpack-plugin");
module.exports = { module.exports = {
performance: { performance: {
@@ -8,51 +9,53 @@ module.exports = {
maxEntrypointSize: 512000, maxEntrypointSize: 512000,
maxAssetSize: 512000, maxAssetSize: 512000,
}, },
devtool: 'cheap-module-source-map', devtool: "cheap-module-source-map",
entry: { entry: {
'SEQTA': './src/SEQTA.js', SEQTA: "./src/SEQTA.js",
'background': './src/background.js', background: "./src/background.js",
'inject-documentload': './src/inject/documentload.css', // Entry for CSS "inject-documentload": "./src/inject/documentload.css", // Entry for CSS
'inject-iframe': './src/inject/iframe.css', // Entry for CSS "inject-iframe": "./src/inject/iframe.css", // Entry for CSS
'inject-injected': './src/inject/injected.css', // Entry for CSS "inject-injected": "./src/inject/injected.css", // Entry for CSS
}, },
output: { output: {
filename: (pathData) => { filename: (pathData) => {
const name = pathData.chunk.name.replace('inject-', ''); const name = pathData.chunk.name.replace("inject-", "");
return name.includes('inject') ? `inject/${name}.js` : `${name}.js`; return name.includes("inject") ? `inject/${name}.js` : `${name}.js`;
}, },
path: path.resolve(__dirname, 'build'), // eslint-disable-next-line no-undef
path: path.resolve(__dirname, "build"),
}, },
module: { module: {
rules: [ rules: [
{ {
test: /\.css$/, test: /\.css$/,
use: [ use: [MiniCssExtractPlugin.loader, "css-loader"],
MiniCssExtractPlugin.loader, // eslint-disable-next-line no-undef
'css-loader', include: path.resolve(__dirname, "src"),
],
include: path.resolve(__dirname, 'src'),
}, },
{ {
test: /\.(png|svg|jpg|jpeg|gif)$/i, test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource', type: "asset/resource",
generator: { generator: {
filename: 'src/[path][name][ext]', filename: "src/[path][name][ext]",
}, },
}, },
], ],
}, },
plugins: [ plugins: [
new ESLintPlugin(),
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
filename: (pathData) => { filename: (pathData) => {
const name = pathData.chunk.name.replace('inject-', ''); const name = pathData.chunk.name.replace("inject-", "");
return name.includes('inject') ? `inject/${name}.css` : `inject/${name}.css`; return name.includes("inject")
? `inject/${name}.css`
: `inject/${name}.css`;
}, },
}), }),
new CopyWebpackPlugin({ new CopyWebpackPlugin({
patterns: [ patterns: [
{ from: 'public', to: '.' }, { from: "public", to: "." },
{ from: 'src/inject/preview', to: 'inject/preview' }, { from: "src/inject/preview", to: "inject/preview" },
], ],
}), }),
], ],