From 7381c661ebf7816c3748ff6962c60d1349d35de1 Mon Sep 17 00:00:00 2001 From: Aaron Opell Date: Mon, 15 Jan 2018 21:43:00 -0800 Subject: [PATCH] Big Update! Added settings modal and settings storage system Closes #15 Closes #3 --- css/all.css | 123 ++++++++++++++++++++++++--- js/all.js | 44 ++++++---- js/background.js | 36 ++++---- js/preload.js | 216 +++++++++++++++++++++++++++++++++++++++++++++++ manifest.json | 5 +- 5 files changed, 377 insertions(+), 47 deletions(-) create mode 100644 js/preload.js diff --git a/css/all.css b/css/all.css index 67100519..c2d2c9ff 100644 --- a/css/all.css +++ b/css/all.css @@ -1,14 +1,13 @@ -/* -html, -body { - width: 100% !important; - height: 100% !important; - overflow: hidden !important; +:root { + --color-hue: 210; + --primary-color: hsl(var(--color-hue), 50%, 50%); + --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%); } -*/ body #header { - background-color: #3c83ce !important; + background-color: var(--primary-color) !important; } .s-enable-course-dashboard.is-home #nav ul #primary-home a, @@ -21,7 +20,7 @@ body #header { #nav #nav_left li.primary-activities:hover, #nav #nav_left li.primary-activities.active, .s-enable-course-dashboard.is-home #nav ul #primary-home:hover { - background-color: #2d659c !important; + background-color: var(--primary-dark) !important; color: white; } @@ -41,14 +40,14 @@ body #sidebar-left .action-links a:hover, .component-add-link:hover, body .search-toggle:hover, body #primary-settings .unfold:hover { - background-color: #2d659c !important; + background-color: var(--primary-dark) !important; color: white !important; } body .search-toggle, body #primary-settings .unfold { - background-color: #3c83ce !important; - border-color: #5fa2e4 !important; + background-color: var(--primary-color) !important; + border-color: var(--primary-light) !important; } body #nav ul #home a { @@ -60,8 +59,8 @@ body .click-submit, body .submit-btn, body .popups-body .submit-span-wrapper, body #nav .s-notifications-mini .requester-links a:hover { - background-color: #3c83ce !important; - border-color: #0f80e9 !important; + background-color: var(--primary-color) !important; + border-color: var(--primary-very-dark) !important; } video.easter-egg { @@ -96,4 +95,100 @@ video.easter-egg { .schoology-plus-icon:hover { opacity: 1.0 !important; +} + +.modal { + display: none; + position: fixed; + z-index: 1; + padding-top: 100px; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.4); +} + +.modal-content { + position: relative; + background-color: #fefefe; + margin: auto; + padding: 0; + border: 1px solid #888; + width: 800px; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + -webkit-animation-name: animatetop; + -webkit-animation-duration: 0.4s; + animation-name: animatetop; + animation-duration: 0.4s +} + +@-webkit-keyframes animatetop { + from { + top: -300px; + opacity: 0 + } + to { + top: 0; + opacity: 1 + } +} + +@keyframes animatetop { + from { + top: -300px; + opacity: 0 + } + to { + top: 0; + opacity: 1 + } +} + +.close { + color: rgba(255, 255, 255, 0.8); + float: right; + font-size: 32px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: white; + text-decoration: none; + cursor: pointer; +} + +.modal-header { + padding: 2px 16px; + background-color: var(--primary-color); + color: white; +} + +.modal-body { + padding: 16px; +} + +.modal-footer { + padding: 2px 16px; + background-color: var(--primary-color); + color: white; +} + +.modal-title { + font-size: 32px; +} + +.setting-entry { + padding-bottom: 4px; +} + +.setting-modified { + color: red +} + +.modal-button { + margin-left: 0 !important; + margin-top: 4px; } \ No newline at end of file diff --git a/js/all.js b/js/all.js index cdd0e9a0..e6647657 100644 --- a/js/all.js +++ b/js/all.js @@ -1,5 +1,14 @@ +// Page Modifications + let svg = ''; +let modalHTML = ''; document.getElementById("home").innerHTML = svg; +document.body.appendChild(document.createElement("div")).innerHTML = modalHTML; + +let modal = document.getElementById("settings-modal"); + +let modalFooterText = document.querySelector(".modal-footer-text"); +modalFooterText.textContent += ` | Schoology Plus v${chrome.runtime.getManifest().version}`; let video = document.body.appendChild(createElement("video", ["easter-egg"], { onended: function () { @@ -12,6 +21,9 @@ let source = createElement("source", [], { type: "video/webm" }); +let modalBody = document.querySelector(".modal-body"); +modalBody.appendChild(getModalContents()); + let sourceSet = false; document.body.onkeydown = (data) => { @@ -33,26 +45,24 @@ document.body.onkeydown = (data) => { document.querySelector(".user-menu").prepend(createElement("li", ["schoology-plus-icon"], undefined, [ createElement("a", ["nav-icon-button"], { href: "#" }, [ - createElement("img", ["icon-unread-requests"], { src: chrome.runtime.getURL("imgs/plus-icon.png"), width: 24 }) + createElement("img", ["icon-unread-requests"], { src: chrome.runtime.getURL("imgs/plus-icon.png"), width: 24, onclick: openOptionsMenu }) ]) ])); -function createElement(tag, classList, properties, children) { - let element = document.createElement(tag); - if (classList) { - for (let c of classList) { - element.classList.add(c); - } - } - if (properties) { - for (let property in properties) { - element[property] = properties[property]; - } +document.querySelector(".close").onclick = modalClose; + +window.onclick = function (event) { + if (event.target == modal) { + modalClose(); } - if (children) { - for (let child of children) { - element.appendChild(child); - } +} + +function modalClose() { + if(anySettingsModified()){ + if(!confirm("You have unsaved settings.\nAre you sure you want to exit?")) return; + updateSettings(); + modalBody.innerHTML = ""; + modalBody.appendChild(getModalContents()); } - return element; + modal.style.display = "none"; } \ No newline at end of file diff --git a/js/background.js b/js/background.js index d9174506..68d56c65 100644 --- a/js/background.js +++ b/js/background.js @@ -51,6 +51,7 @@ function onAlarm(alarm) { div.innerHTML = response.output; let notifications = div.querySelectorAll(".edge-sentence"); let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; + let totalAssignments = 0; for (let notification of Array.from(notifications).reverse()) { if (notification.textContent.includes("new grade")) { let assignments = notification.getElementsByTagName("a"); @@ -76,25 +77,30 @@ function onAlarm(alarm) { if (extraTextElement) { count = +extraTextElement.textContent.match(/\d+/)[0]; } - console.warn("New notification!"); + totalAssignments += count + assignments.length; console.dir(notification); - let n = { - type: "basic", - iconUrl: "imgs/icon@128.png", - title: "New grade posted", - message: `${assignments.length + count} new assignment${assignments.length + count === 1 ? " has a grade" : "s have grades"}`, - eventTime: Date.now(), - isClickable: true - }; - console.dir(n); - chrome.browserAction.getBadgeText({}, x => { - let n = Number.parseInt(x); - chrome.browserAction.setBadgeText({ text: (n ? n + assignments.length + count : assignments.length + count).toString() }); - }); - chrome.notifications.create("gradeNotification", n, null); } } } + + if (totalAssignments > 0) { + console.warn("New notification!"); + let n = { + type: "basic", + iconUrl: "imgs/icon@128.png", + title: "New grade posted", + message: `${totalAssignments} new assignment${totalAssignments === 1 ? " has a grade" : "s have grades"}`, + eventTime: Date.now(), + isClickable: true + }; + console.dir(n); + chrome.browserAction.getBadgeText({}, x => { + let num = Number.parseInt(x); + chrome.browserAction.setBadgeText({ text: (num ? num + totalAssignments : totalAssignments).toString() }); + }); + chrome.notifications.create("gradeNotification", n, null); + } + if (timeModified) { chrome.storage.sync.set({ lastTime: time }, () => { console.log("Set new time " + new Date(time)) }); } else { diff --git a/js/preload.js b/js/preload.js new file mode 100644 index 00000000..6c4f9ea8 --- /dev/null +++ b/js/preload.js @@ -0,0 +1,216 @@ +// Process options +updateSettings(); + +// Functions + +var modalContents; +function getModalContents() { + return modalContents; +} + +function openOptionsMenu() { + document.getElementById("settings-modal").style.display = "block"; +} + +let rainbowInterval = undefined; +let rainbowColor = 0; +function colorLoop() { + document.documentElement.style.setProperty("--color-hue", rainbowColor > 359 ? 0 : rainbowColor++); +} + +function rainbowMode(enable) { + if (rainbowInterval) clearInterval(rainbowInterval); + if (enable) rainbowInterval = setInterval(colorLoop, 100); +} + +/** + * Creates a DOM element + * @returns {HTMLElement} A DOM element + * @param {string} tag - The HTML tag name of the type of DOM element to create + * @param {string[]} classList - CSS classes to apply to the DOM element + * @param {Object} properties - Properties to apply to the DOM element + * @param {HTMLElement[]} children - Elements to append as children to the created element + */ +function createElement(tag, classList, properties, children) { + let element = document.createElement(tag); + if (classList) { + for (let c of classList) { + element.classList.add(c); + } + } + if (properties) { + for (let property in properties) { + element[property] = properties[property]; + } + } + if (children) { + for (let child of children) { + element.appendChild(child); + } + } + return element; +} + +let storage = {}; + +function updateSettings() { + chrome.storage.sync.get(null, storageContents => { + storage = storageContents; + + modalContents = createElement("div", ["modal-contents"], undefined, [ + createSetting( + "color", + "Color Hue", + "A HSL hue to be used as the color for the navigation bar (0-359)", + "number", + { min: 0, max: 359, value: 210 }, + (value, element) => { + document.documentElement.style.setProperty("--color-hue", value || value === 0 ? value : 210); + element.value = value; + }, + event => document.documentElement.style.setProperty("--color-hue", event.target.value), + element => Number.parseInt(element.value) + ), + createSetting( + "rainbow", + "Rainbow Mode", + "Slowly cycles through all possible color hues (overrides Color Hue preference)", + "select", + { + options: [ + { + text: "Disabled", + value: false + }, + { + text: "Enabled", + value: true + } + ] + }, + (value, element) => { + rainbowMode(value); + element.value = value; + }, + event => { + if (event.target.value === "true") { + rainbowMode(true); + } else { + rainbowMode(false); + document.documentElement.style.setProperty("--color-hue", storage["color"] || 210); + } + }, + element => element.value === "true" + ), + createElement("span", ["submit-span-wrapper", "modal-button"], { onclick: saveSettings }, [createElement("input", ["form-submit"], { type: "button", value: "Save Settings", id: "save-settings" })]) + ]); + }); +} + +let settings = {}; + +/** + * Creates a setting, appends it to the settings list, and returns a DOM representation of the setting + * @returns {HTMLElement} + * @param {string} name - The name of the setting, to be stored in extension settings + * @param {string} friendlyName - The display name of the setting + * @param {string} description - A description of the setting and appropriate values + * @param {string} type - Setting control type, one of ["number", "text", "button", "select"] + * @param {Object|Object[]} options Additional options, format dependent on setting **type** + * - **number, text, button**: Directly applied as element properties + * - **select**: *options* property on ***options*** object should be an array of objects containing *text* and *value* properties + * @param {function(any,HTMLElement):void} onLoad Called with the setting's current value and the element used to display the setting value when the page is loaded and when the setting is changed + * - *This function should update the setting's display element appropriately so that the setting value is displayed* + * @param {function(any):void} previewCallback Function called when setting value is changed + * - *Should be used to show how changing the setting affects the page if applicable* + * @param {function(HTMLElement):any} saveCallback Function called when setting is saved + * - First argument is the HTML element containing the setting value set by the user + * - Must return the value to be saved to extension settings + * - Will only be called if user saves settings and setting was modified + */ +function createSetting(name, friendlyName, description, type, options, onLoad, previewCallback, saveCallback) { + + let setting = createElement("div", ["setting-entry"]); + let title = createElement("h2", ["setting-title"], { textContent: friendlyName + ": " }); + let helpText = createElement("p", ["setting-description"], { textContent: description }); + + switch (type) { + case "number": + case "text": + case "button": + let inputElement = createElement("input", undefined, Object.assign({ type: type }, options)); + title.appendChild(inputElement); + if (type == "button") inputElement.onclick = settingModified; + else inputElement.oninput = settingModified; + break; + case "select": + let selectElement = createElement("select"); + for (let option of options.options) { + selectElement.appendChild(createElement("option", undefined, { textContent: option.text, value: option.value })); + } + title.appendChild(selectElement); + selectElement.onchange = settingModified; + break; + } + + setting.appendChild(title); + setting.appendChild(helpText); + + title.firstElementChild.dataset.settingName = name; + onLoad(storage[name], title.firstElementChild); + + settings[name] = { + element: title.firstElementChild, + onmodify: previewCallback, + onsave: saveCallback, + onload: onLoad, + modified: false + }; + + return setting; +} + +function settingModified(event) { + let element = event.target || event; + let parent = element.parentElement; + if (parent && !parent.querySelector(".setting-modified")) { + parent.appendChild(createElement("span", ["setting-modified"], { textContent: " *" })); + } + let setting = settings[element.dataset.settingName]; + setting.modified = true; + setting.onmodify(event); +} + +function anySettingsModified() { + for(let setting in settings) { + if(settings[setting].modified) { + return true; + } + } + return false; +} + +function saveSettings() { + let newValues = {}; + for (let setting in settings) { + let v = settings[setting]; + if (v.modified) { + let value = v.onsave(v.element); + newValues[setting] = value; + v.onload(value, v.element); + v.modified = false; + } + } + chrome.storage.sync.set(newValues, () => { + Object.assign(storage, newValues); + for (let element of document.querySelectorAll(".setting-modified")) { + element.parentElement.removeChild(element); + } + }); + + let settingsSaved = document.getElementById("save-settings"); + settingsSaved.value = "Saved!"; + setTimeout(() => { + settingsSaved.value = "Save Settings"; + }, 2000); +} \ No newline at end of file diff --git a/manifest.json b/manifest.json index 9b9db59c..51dcc234 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "manifest_version": 2, "name": "Schoology Plus", "description": "Provides some enhancements to your LAUSD Schoology experience", - "version": "2.1.3", + "version": "3.0", "icons": { "128": "imgs/icon@128.png", "64": "imgs/icon@64.png", @@ -43,6 +43,9 @@ "css": [ "css/all.css" ], + "js": [ + "js/preload.js" + ], "run_at": "document_start" }, {