Skip to content

Commit

Permalink
Big Update! Added settings modal and settings storage system
Browse files Browse the repository at this point in the history
Closes #15
Closes #3
  • Loading branch information
aopell committed Jan 16, 2018
1 parent bc8b2aa commit 7381c66
Show file tree
Hide file tree
Showing 5 changed files with 377 additions and 47 deletions.
123 changes: 109 additions & 14 deletions css/all.css
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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;
}

Expand All @@ -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 {
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
}
44 changes: 27 additions & 17 deletions js/all.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,14 @@
// 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 modalHTML = '<div id="settings-modal" class="modal"> <div class="modal-content"> <div class="modal-header"> <span class="close">&times;</span> <p class="modal-title">Schoology Plus Settings</p> </div><div class="modal-body"> </div><div class="modal-footer"> <p class="modal-footer-text">&copy; Aaron Opell 2018</p></div></div></div>';
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 () {
Expand All @@ -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) => {
Expand All @@ -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";
}
36 changes: 21 additions & 15 deletions js/background.js
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand All @@ -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/[email protected]",
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/[email protected]",
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 {
Expand Down
Loading

0 comments on commit 7381c66

Please sign in to comment.