diff --git a/css/all.css b/css/all.css index bcce2e74..a696e34c 100644 --- a/css/all.css +++ b/css/all.css @@ -4,6 +4,8 @@ --primary-light: hsl(var(--color-hue), 70%, 60%); --primary-dark: hsl(var(--color-hue), 55%, 40%); --primary-very-dark: hsl(var(--color-hue), 90%, 50%); + --cursor: auto; + cursor: var(--cursor); } body #header { @@ -50,8 +52,20 @@ body #primary-settings .unfold { border-color: var(--primary-light) !important; } -body #nav ul #home a { - background: unset !important; +#home a[role=menuitem] { + background-image: none !important; +} + +#home a.hide-background-image { + background: none !important; +} + +#home a.hide-background-image svg { + visibility: visible !important; +} + +#home a svg { + visibility: hidden !important; } body .submit-span-wrapper, diff --git a/imgs/toy-mode.png b/imgs/toy-mode.png new file mode 100644 index 00000000..1db62f2c Binary files /dev/null and b/imgs/toy-mode.png differ diff --git a/js/all.js b/js/all.js index 810cd3e3..0cf26c46 100644 --- a/js/all.js +++ b/js/all.js @@ -1,8 +1,10 @@ // Page Modifications -let svg = ''; +let svg = ''; document.getElementById("primary-home").insertAdjacentElement("afterEnd", createElement("li", undefined, { id: "primary-home", innerHTML: 'Grades' })); document.getElementById("home").innerHTML = svg; + +document.documentElement.style.setProperty("--default-visibility", "visible"); document.body.appendChild(createElement("script", undefined, { src: "https://cdnjs.cloudflare.com/ajax/libs/gist-embed/2.7.1/gist-embed.min.js" })); let footerText = `© Aaron Opell 2018 | Schoology Plus v${chrome.runtime.getManifest().version}${chrome.runtime.getManifest().update_url ? '' : ' dev'} | View Source and Contribute | Contributors | Changelog`; diff --git a/js/preload.js b/js/preload.js index 58b8d2e3..cc17d438 100644 --- a/js/preload.js +++ b/js/preload.js @@ -54,11 +54,11 @@ function updateSettings() { (value, element) => { tempTheme = undefined; element.value = value || "Custom"; - Theme.active.onapply(storage); + Theme.apply(Theme.active); }, event => { tempTheme = event.target.value; - Theme.byName(event.target.value).onapply(storage) + Theme.apply(Theme.active); }, element => element.value ), diff --git a/js/theme.js b/js/theme.js index 76e78006..5891c5a7 100644 --- a/js/theme.js +++ b/js/theme.js @@ -5,6 +5,13 @@ class Theme { this.onupdate = onUpdate; } + static apply(theme) { + Theme.setBackgroundHue(210); + Theme.setCursorUrl(); + Theme.setLogoVisibility(false); + theme.onapply(storage); + } + static get active() { return tempTheme ? Theme.byName(tempTheme) : Theme.byName(storage["theme"]) || Theme.byName("Custom"); } @@ -13,8 +20,38 @@ class Theme { return themes.find(x => x.name == name); } + static setBackgroundColor(primaryColor, primaryLight, primaryDark, primaryVeryDark) { + document.documentElement.style.setProperty("--primary-color", primaryColor); + document.documentElement.style.setProperty("--primary-light", primaryLight); + document.documentElement.style.setProperty("--primary-dark", primaryDark); + document.documentElement.style.setProperty("--primary-very-dark", primaryVeryDark); + } + static setBackgroundHue(hue) { document.documentElement.style.setProperty("--color-hue", hue); + document.documentElement.style.setProperty("--primary-color", "hsl(var(--color-hue), 50%, 50%)"); + document.documentElement.style.setProperty("--primary-light", "hsl(var(--color-hue), 70%, 60%)"); + document.documentElement.style.setProperty("--primary-dark", "hsl(var(--color-hue), 55%, 40%)"); + document.documentElement.style.setProperty("--primary-very-dark", "hsl(var(--color-hue), 90%, 50%)"); + } + + static setLogoVisibility(visible) { + let interval = setInterval(() => { + let logo = document.querySelector("#home a"); + let notLogo = document.querySelector("#home a[role=menuitem]") + if (!notLogo && logo) { + clearInterval(interval); + if (visible) { + logo.classList.remove("hide-background-image"); + } else { + logo.classList.add("hide-background-image"); + } + } + }, 50); + } + + static setCursorUrl(url) { + document.documentElement.style.setProperty("--cursor", url ? `url(${url}), auto` : "auto"); } } @@ -35,6 +72,20 @@ let themes = [ function (storage) { Theme.setBackgroundHue((new Date().valueOf() / 100) % 360); } + ), + new Theme( + "Toy", + function (storage) { + Theme.setBackgroundHue(150); + Theme.setCursorUrl(chrome.runtime.getURL("imgs/toy-mode.png")); + } + ), + new Theme( + "LAUSD Orange", + function (storage) { + Theme.setBackgroundColor("#FF7A00", "#FF8A10", "#FF9A20", "#DF5A00"); + Theme.setLogoVisibility(true); + } ) ]; diff --git a/manifest.json b/manifest.json index e91dfada..f16d3d9d 100644 --- a/manifest.json +++ b/manifest.json @@ -3,7 +3,7 @@ "name": "Schoology Plus", "short_name": "Schoology+", "description": "Provides some enhancements to your LAUSD Schoology experience", - "version": "3.3", + "version": "3.4", "icons": { "128": "imgs/icon@128.png", "64": "imgs/icon@64.png", @@ -28,7 +28,8 @@ "notifications" ], "web_accessible_resources": [ - "imgs/plus-icon.png" + "imgs/plus-icon.png", + "imgs/toy-mode.png" ], "background": { "scripts": [