Added 2 themes and support for custom cursors/colors

aopell · Jan 24, 2018 · d53911e · d53911e
1 parent 546c651
commit d53911e
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 7 deletions.
diff --git 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
diff --git a/js/all.js b/js/all.js
@@ -1,8 +1,10 @@
 // Page Modifications
 
-let svg = '<a href="/home"><svg id="logo" viewBox="0 -2 220 31" width="174" height="31" style="fill: white;"><path d="M15.4 30.7C6.9 30.7 0 23.8 0 15.4 0 6.9 6.9 0 15.4 0s15.4 6.9 15.4 15.4c-.1 8.4-7 15.3-15.4 15.3zm0-28.1C8.3 2.6 2.6 8.3 2.6 15.4c0 7.1 5.8 12.8 12.8 12.8 7.1 0 12.8-5.8 12.8-12.8 0-7.1-5.8-12.8-12.8-12.8z"></path><path d="M14.7 16.3c-2.5-.6-5.6-1.3-5.6-4.6 0-2.9 2.4-4.7 6.1-4.7 3 0 6.2 1.4 6.7 5.1l-2.9.4c0-1-.1-1.7-1.1-2.5s-2.2-.9-3-.9c-2.1 0-3.1 1.2-3.1 2.3 0 1.5 1.7 2 3.8 2.5l1.5.4c1.9.4 5.2 1.2 5.2 4.5 0 2.6-2.3 5-6.6 5-1.8 0-3.6-.4-4.9-1.3-.5-.4-2-1.6-2.3-4.3l3-.5c0 .7 0 2 1.2 3.1.9.8 2.1.9 3.2.9 2.3 0 3.7-.9 3.7-2.6 0-1.8-1.4-2.1-3.3-2.5l-1.6-.3z"></path><g><path d="M153.7 18.6h-4.3v-1.7h7.2V25h-1.8v-1.9s.3-.3 0 0c-1.3 1.5-3.2 2.2-5.5 2.2-5.6 0-7.6-4.2-7.6-7.9 0-4.3 2.3-8.2 7.4-8.2 2.5 0 6 .9 7.1 5.1l-2.8.3c-.1-.6-.6-3.5-4.1-3.5-4.4 0-4.6 4.8-4.6 6.2 0 1.7.3 3.1 1 4.1.9 1.4 2.2 2 3.8 2 3.7 0 4.1-3 4.3-4.2l-.1-.6zM45.5 18.2C43 17.6 40 17 40 13.8c0-2.8 2.4-4.5 5.9-4.5 2.9 0 6 1.4 6.5 5l-2.8.4c0-.9-.1-1.7-1.1-2.5s-2.2-.9-2.9-.9c-2 0-3 1.2-3 2.2 0 1.5 1.6 1.9 3.7 2.4l1.5.4c1.8.4 5.1 1.2 5.1 4.4 0 2.5-2.2 4.8-6.4 4.8-1.7 0-3.5-.4-4.7-1.2-.5-.4-2-1.6-2.3-4.1l2.9-.5c0 .7 0 2 1.1 3 .9.8 2 .9 3.1.9 2.3 0 3.6-.9 3.6-2.5 0-1.7-1.3-2.1-3.2-2.4l-1.5-.5zM69 19.5c-.1.6-.3 1.5-.9 2.6-1.3 2.3-3.4 3.4-6.2 3.4-5.6 0-7.6-4.2-7.6-7.9 0-4.3 2.3-8.3 7.4-8.3 2.5 0 6.1.9 7.1 5.1l-2.8.3c-.1-.6-.6-3.5-4.1-3.5-4.4 0-4.6 4.8-4.6 6.2 0 1.6.3 3.1 1 4.1.9 1.4 2.2 2 3.8 2 3.7 0 4.1-3 4.3-4.2l2.6.2zM70.6 2.1h2.6v9.2c1.6-1.7 3.2-2 4.6-2 3.4 0 4.7 1.9 5.1 3.4.3 1 .3 2 .3 3.5V25h-2.6v-8.1c0-2 0-3.2-.6-4.1-.6-.9-1.7-1.3-2.7-1.3-1.7 0-3.4.9-4 3.3-.2.8-.2 1.7-.2 2.8V25h-2.6V2.1zM93.3 25.4c-5.3 0-7.5-3.9-7.5-8 0-3.4 1.7-8.2 7.6-8.2 5 0 7.4 3.9 7.3 8.1 0 4.6-2.7 8.1-7.4 8.1zm4.5-10.2c-.6-3-2.6-3.9-4.3-3.9-3.5 0-4.9 2.7-4.9 6.2 0 3.2 1.3 5.9 4.7 5.9 4.3 0 4.6-4.5 4.7-6 0-1.1-.1-1.8-.2-2.2zM110 25.4c-5.3 0-7.5-3.9-7.5-8 0-3.4 1.7-8.2 7.6-8.2 5 0 7.4 3.9 7.3 8.1 0 4.6-2.7 8.1-7.4 8.1zm4.5-10.2c-.6-3-2.6-3.9-4.3-3.9-3.5 0-4.9 2.7-4.9 6.2 0 3.2 1.3 5.9 4.7 5.9 4.3 0 4.6-4.5 4.7-6 0-1.1-.1-1.8-.2-2.2zM122.6 2.1V25h-2.5V2.1h2.5zM132.7 25.4c-5.3 0-7.5-3.9-7.5-8 0-3.4 1.7-8.2 7.6-8.2 5 0 7.4 3.9 7.3 8.1 0 4.6-2.8 8.1-7.4 8.1zm4.4-10.2c-.6-3-2.6-3.9-4.3-3.9-3.5 0-4.9 2.7-4.9 6.2 0 3.2 1.3 5.9 4.7 5.9 4.3 0 4.6-4.5 4.7-6 0-1.1-.1-1.8-.2-2.2zM169.9 9.5h-2.5l-3.9 6.2-3.8-6.2h-2.9l5.5 8.4V25h2.4v-7.1l5.6-8.4zM174.9 11c0 .9-.8 1.7-1.7 1.7-1 0-1.7-.7-1.7-1.7 0-.9.8-1.7 1.7-1.7.9 0 1.7.7 1.7 1.7zm-3 0c0 .7.6 1.3 1.3 1.3.7 0 1.3-.6 1.3-1.3 0-.7-.6-1.3-1.3-1.3-.8 0-1.3.6-1.3 1.3zm1 .8h-.4v-1.7c.2 0 .4-.1.6-.1.3 0 .5.1.6.1.1.1.2.2.2.4s-.2.3-.3.4c.2.1.2.2.3.4 0 .3.1.3.1.4h-.4c-.1-.1-.1-.2-.1-.4s-.1-.3-.3-.3h-.2v.8zm0-.9h.2c.2 0 .4-.1.4-.2 0-.2-.1-.3-.4-.3h-.2v.5z"></path></g></svg></a>';
+let svg = '<a class="hide-background-image" href="/home"><svg id="logo" viewBox="0 -2 220 31" width="174" height="31" style="fill: white;"><path d="M15.4 30.7C6.9 30.7 0 23.8 0 15.4 0 6.9 6.9 0 15.4 0s15.4 6.9 15.4 15.4c-.1 8.4-7 15.3-15.4 15.3zm0-28.1C8.3 2.6 2.6 8.3 2.6 15.4c0 7.1 5.8 12.8 12.8 12.8 7.1 0 12.8-5.8 12.8-12.8 0-7.1-5.8-12.8-12.8-12.8z"></path><path d="M14.7 16.3c-2.5-.6-5.6-1.3-5.6-4.6 0-2.9 2.4-4.7 6.1-4.7 3 0 6.2 1.4 6.7 5.1l-2.9.4c0-1-.1-1.7-1.1-2.5s-2.2-.9-3-.9c-2.1 0-3.1 1.2-3.1 2.3 0 1.5 1.7 2 3.8 2.5l1.5.4c1.9.4 5.2 1.2 5.2 4.5 0 2.6-2.3 5-6.6 5-1.8 0-3.6-.4-4.9-1.3-.5-.4-2-1.6-2.3-4.3l3-.5c0 .7 0 2 1.2 3.1.9.8 2.1.9 3.2.9 2.3 0 3.7-.9 3.7-2.6 0-1.8-1.4-2.1-3.3-2.5l-1.6-.3z"></path><g><path d="M153.7 18.6h-4.3v-1.7h7.2V25h-1.8v-1.9s.3-.3 0 0c-1.3 1.5-3.2 2.2-5.5 2.2-5.6 0-7.6-4.2-7.6-7.9 0-4.3 2.3-8.2 7.4-8.2 2.5 0 6 .9 7.1 5.1l-2.8.3c-.1-.6-.6-3.5-4.1-3.5-4.4 0-4.6 4.8-4.6 6.2 0 1.7.3 3.1 1 4.1.9 1.4 2.2 2 3.8 2 3.7 0 4.1-3 4.3-4.2l-.1-.6zM45.5 18.2C43 17.6 40 17 40 13.8c0-2.8 2.4-4.5 5.9-4.5 2.9 0 6 1.4 6.5 5l-2.8.4c0-.9-.1-1.7-1.1-2.5s-2.2-.9-2.9-.9c-2 0-3 1.2-3 2.2 0 1.5 1.6 1.9 3.7 2.4l1.5.4c1.8.4 5.1 1.2 5.1 4.4 0 2.5-2.2 4.8-6.4 4.8-1.7 0-3.5-.4-4.7-1.2-.5-.4-2-1.6-2.3-4.1l2.9-.5c0 .7 0 2 1.1 3 .9.8 2 .9 3.1.9 2.3 0 3.6-.9 3.6-2.5 0-1.7-1.3-2.1-3.2-2.4l-1.5-.5zM69 19.5c-.1.6-.3 1.5-.9 2.6-1.3 2.3-3.4 3.4-6.2 3.4-5.6 0-7.6-4.2-7.6-7.9 0-4.3 2.3-8.3 7.4-8.3 2.5 0 6.1.9 7.1 5.1l-2.8.3c-.1-.6-.6-3.5-4.1-3.5-4.4 0-4.6 4.8-4.6 6.2 0 1.6.3 3.1 1 4.1.9 1.4 2.2 2 3.8 2 3.7 0 4.1-3 4.3-4.2l2.6.2zM70.6 2.1h2.6v9.2c1.6-1.7 3.2-2 4.6-2 3.4 0 4.7 1.9 5.1 3.4.3 1 .3 2 .3 3.5V25h-2.6v-8.1c0-2 0-3.2-.6-4.1-.6-.9-1.7-1.3-2.7-1.3-1.7 0-3.4.9-4 3.3-.2.8-.2 1.7-.2 2.8V25h-2.6V2.1zM93.3 25.4c-5.3 0-7.5-3.9-7.5-8 0-3.4 1.7-8.2 7.6-8.2 5 0 7.4 3.9 7.3 8.1 0 4.6-2.7 8.1-7.4 8.1zm4.5-10.2c-.6-3-2.6-3.9-4.3-3.9-3.5 0-4.9 2.7-4.9 6.2 0 3.2 1.3 5.9 4.7 5.9 4.3 0 4.6-4.5 4.7-6 0-1.1-.1-1.8-.2-2.2zM110 25.4c-5.3 0-7.5-3.9-7.5-8 0-3.4 1.7-8.2 7.6-8.2 5 0 7.4 3.9 7.3 8.1 0 4.6-2.7 8.1-7.4 8.1zm4.5-10.2c-.6-3-2.6-3.9-4.3-3.9-3.5 0-4.9 2.7-4.9 6.2 0 3.2 1.3 5.9 4.7 5.9 4.3 0 4.6-4.5 4.7-6 0-1.1-.1-1.8-.2-2.2zM122.6 2.1V25h-2.5V2.1h2.5zM132.7 25.4c-5.3 0-7.5-3.9-7.5-8 0-3.4 1.7-8.2 7.6-8.2 5 0 7.4 3.9 7.3 8.1 0 4.6-2.8 8.1-7.4 8.1zm4.4-10.2c-.6-3-2.6-3.9-4.3-3.9-3.5 0-4.9 2.7-4.9 6.2 0 3.2 1.3 5.9 4.7 5.9 4.3 0 4.6-4.5 4.7-6 0-1.1-.1-1.8-.2-2.2zM169.9 9.5h-2.5l-3.9 6.2-3.8-6.2h-2.9l5.5 8.4V25h2.4v-7.1l5.6-8.4zM174.9 11c0 .9-.8 1.7-1.7 1.7-1 0-1.7-.7-1.7-1.7 0-.9.8-1.7 1.7-1.7.9 0 1.7.7 1.7 1.7zm-3 0c0 .7.6 1.3 1.3 1.3.7 0 1.3-.6 1.3-1.3 0-.7-.6-1.3-1.3-1.3-.8 0-1.3.6-1.3 1.3zm1 .8h-.4v-1.7c.2 0 .4-.1.6-.1.3 0 .5.1.6.1.1.1.2.2.2.4s-.2.3-.3.4c.2.1.2.2.3.4 0 .3.1.3.1.4h-.4c-.1-.1-.1-.2-.1-.4s-.1-.3-.3-.3h-.2v.8zm0-.9h.2c.2 0 .4-.1.4-.2 0-.2-.1-.3-.4-.3h-.2v.5z"></path></g></svg></a>';
 document.getElementById("primary-home").insertAdjacentElement("afterEnd", createElement("li", undefined, { id: "primary-home", innerHTML: '<a href="/grades"><span>Grades</span></a>' }));
 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 = `&copy; Aaron Opell 2018 | <a href="https://chrome.google.com/webstore/detail/${chrome.runtime.id}">Schoology Plus v${chrome.runtime.getManifest().version}${chrome.runtime.getManifest().update_url ? '' : ' dev'}</a> | <a href="https://github.com/aopell/SchoologyPlus">View Source and Contribute</a> | <a href="#" id="open-contributors">Contributors</a> | <a href="#" id="open-changelog"> Changelog</a>`;

diff --git 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
@@ -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
@@ -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/[email protected]",
         "64": "imgs/[email protected]",
@@ -28,7 +28,8 @@
         "notifications"
     ],
     "web_accessible_resources": [
-        "imgs/plus-icon.png"
+        "imgs/plus-icon.png",
+        "imgs/toy-mode.png"
     ],
     "background": {
         "scripts": [