Skip to content
This repository has been archived by the owner on Aug 20, 2023. It is now read-only.

Commit

Permalink
Incorporated first round of feedback.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mandrenkov
Mandrenkov committed Oct 15, 2020
1 parent 1bd61bd commit a11cbe6
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 93 deletions.
58 changes: 34 additions & 24 deletions css/popup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
--accent-colour-hover: #0048B8;
--background-colour-header: #FFFFFF;
--background-colour-controls: #F9F9F9;
--background-colour-tooltips: #616161;
--background-colour-tooltips: #333333;
--disabled-colour: #909090;
--font-colour-title: #282828;
--font-colour-primary: #0D0D0D;
Expand All @@ -39,13 +39,13 @@
--transition-duration-toggle: 0s;
}

:root[theme='dark'] {
:root[data-theme='dark'] {
font-size: 12px;
--accent-colour: #3EA6FF;
--accent-colour-hover: #73CFFF;
--background-colour-header: #202020;
--background-colour-controls: #181818;
--background-colour-tooltips: #616161;
--background-colour-tooltips: #333333;
--disabled-colour: #909090;
--font-colour-title: #FFFFFF;
--font-colour-primary: #FFFFFF;
Expand Down Expand Up @@ -212,55 +212,53 @@ div.control-help {
div.control-toggle {
align-items: center;
display: flex;
flex-direction: column;
height: 20px;
justify-content: center;
width: 100%;
}

label.control-toggle {
display: inline-block;
position: relative;
width: 32px;
height: 12px;
width: 100%;
}

/* Section 4.1: Toggle Checkbox Styles ---------------------------------------*/
label.control-toggle input {
div.control-toggle input {
-moz-appearance: none;
display: none;
height: 0;
width: 0;
}

/* Section 4.2: Toggle Thumb Styles ------------------------------------------*/
span.control-toggle::before {
label.control-toggle::before {
background-color: var(--disabled-colour);
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
content: "";
height: 18px;
position: absolute;
top: -3px;
top: 1px;
transition-duration: var(--transition-duration-toggle);
width: 18px;
}

input:checked + span.control-toggle::before {
input:checked + label.control-toggle::before {
background-color: var(--accent-colour);
transform: translateX(16px);
transition-duration: var(--transition-duration-toggle);
}

/* Section 4.3: Toggle Track Styles ------------------------------------------*/
span.control-toggle {
label.control-toggle {
background-color: var(--track-colour-toggle);
border-radius: 32px;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
display: inline-block;
height: 12px;
width: 32px;
}

input:disabled + label.control-toggle {
cursor: default;
opacity: 0.38;
}

/* Section 5: Slider Styles --------------------------------------------------*/
Expand Down Expand Up @@ -390,7 +388,7 @@ span.tooltip {
color: var(--font-colour-tooltips);
display: inline-block;
border-radius: 4px;
font-size: 0.96rem;
font-size: 1.10rem;
height: 22px;
line-height: 22px;
position: absolute;
Expand All @@ -402,12 +400,24 @@ span.tooltip {
}

#hide-videos-tooltip {
right: 22px;
right: 20px;
top: 50px;
width: 240px;
width: 280px;
}

#theme-tooltip {
right: 0px;
top: 48px;
width: 70px;
}

#feedback-tooltip {
right: 0px;
top: 48px;
width: 90px;
}

label.tooltip:hover ~ span.tooltip {
label.tooltip:hover ~ span.tooltip, a.tooltip:hover ~ span.tooltip {
opacity: 1;
transition-delay: var(--transition-delay-tooltip);
visibility: visible;
Expand Down
29 changes: 13 additions & 16 deletions html/popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,17 @@
<img id="logo" src="../img/icon.png"/>
<span id="title">FreshView</span>
<div id="actions">
<div class="action">
<div class="action tooltip">
<input type="checkbox" id="dark-mode-checkbox">
<label class="material-icons" for="dark-mode-checkbox">brightness_4</label>
<label class="material-icons tooltip" for="dark-mode-checkbox">brightness_4</label>
<span id="theme-tooltip" class="tooltip">Theme</span>
</div>
<div class="action">
<div class="action tooltip">
<!-- Chrome Link -->
<a class="material-icons action" href="https://chrome.google.com/webstore/detail/freshview-for-youtube/eckknmnfoohbeklmjlidmfdlakndcfkm" target="_blank">home</a>
<a class="material-icons action tooltip" href="https://chrome.google.com/webstore/detail/freshview-for-youtube/eckknmnfoohbeklmjlidmfdlakndcfkm" target="_blank">mode_comment</a>
<!-- Firefox Link -->
<!-- <a class="material-icons action" href="https://addons.mozilla.org/en-CA/firefox/addon/freshview-for-youtube" target="_blank">home</a> -->
<!-- <a class="material-icons action tooltip" href="https://addons.mozilla.org/en-CA/firefox/addon/freshview-for-youtube" target="_blank">mode_comment</a> -->
<span id="feedback-tooltip" class="tooltip">Feedback</span>
</div>
</div>
</div>
Expand All @@ -32,10 +34,8 @@
<div class="control">
<div class="control-margin">
<div class="control-toggle">
<label class="control-toggle">
<input id="hide-videos-checkbox" type="checkbox">
<span class="control-toggle"></span>
</label>
<input id="hide-videos-checkbox" type="checkbox"/>
<label class="control-toggle" for="hide-videos-checkbox"></label>
</div>
</div>
<div class="control-panel">
Expand All @@ -46,9 +46,8 @@
</div>
<div class="control-bookmark tooltip">
<input type="checkbox" id="hide-videos-bookmark">
<label class="material-icons tooltip" for="hide-videos-bookmark">bookmarks</label>
<span id="hide-videos-tooltip" class="tooltip">Use local &quot;Hide Videos&quot; setting on this page.
</span>
<label class="material-icons tooltip" for="hide-videos-bookmark">vpn_lock</label>
<span id="hide-videos-tooltip" class="tooltip">Lock the &quot;Hide Videos&quot; toggle on this page</span>
</div>
</div>
</div>
Expand All @@ -57,10 +56,8 @@
<div class="control">
<div class="control-margin">
<div class="control-toggle">
<label class="control-toggle">
<input id="view-threshold-checkbox" type="checkbox">
<span class="control-toggle"></span>
</label>
<input id="view-threshold-checkbox" type="checkbox">
<label class="control-toggle" for="view-threshold-checkbox"></label>
</div>
</div>
<div class="control-panel">
Expand Down
124 changes: 71 additions & 53 deletions js/popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ function initDarkModeWidget() {
// Renders the state of the "Dark Mode" widget.
const render = () => {
const theme = checkbox.checked ? "dark" : "light";
document.documentElement.setAttribute('theme', theme);
document.documentElement.setAttribute('data-theme', theme);
}
// Initialize the state of the "Dark Mode" widget and attach an event listener for changes.
Storage.get({"dark-mode-checkbox-state": Manager.DEFAULT_DARK_MODE_CHECKBOX_STATE}, setup);
Expand All @@ -25,59 +25,49 @@ function initDarkModeWidget() {

// Initializes the "Hide Videos" widget.
function initHideVideosWidget() {
const callback = (tabs) => {
const url = new URL(tabs[0].url);
const page = url.pathname + url.search;
const checkbox = document.getElementById("hide-videos-checkbox");
const bookmark = document.getElementById("hide-videos-bookmark");
// Initializes the state of the "Hide Videos" widget.
const setup = (values) => {
const bookmarks = values["hide-videos-bookmarks"];
bookmark.checked = bookmarks[page] !== undefined;
checkbox.checked = bookmark.checked ? bookmarks[page] : values["hide-videos-checkbox-state"];
}
// Publishes the state of the "Hide Videos" widget on a "Hide Videos" checkbox change.
const publish_checkbox = () => {
if (bookmark.checked) {
const callback = (values) => {
const bookmarks = values["hide-videos-bookmarks"];
bookmarks[page] = checkbox.checked;
Storage.set({"hide-videos-bookmarks": bookmarks});
};
Storage.get({"hide-videos-bookmarks": Manager.DEFAULT_HIDE_VIDEOS_BOOKMARKS}, callback);
} else {
Storage.set({"hide-videos-checkbox-state": checkbox.checked});
}
const checkbox = document.getElementById("hide-videos-checkbox");
const bookmark = document.getElementById("hide-videos-bookmark");
// Initializes the state of the "Hide Videos" widget.
const setup = (values) => {
const bookmarks = values["hide-videos-bookmarks"];
bookmark.checked = bookmarks[page] !== undefined;
checkbox.checked = bookmark.checked ? bookmarks[page] : values["hide-videos-checkbox-state"];
checkbox.disabled = bookmark.checked;
}
// Publishes the state of the "Hide Videos" widget on a "Hide Videos" checkbox change.
const publish_checkbox = () => {
if (!bookmark.checked) {
Storage.set({"hide-videos-checkbox-state": checkbox.checked});
}
// Publishes the state of the "Hide Videos" widget on a "Hide Videos" bookmark change.
const publish_bookmark = () => {
if (bookmark.checked) {
// Create a new entry in the bookmark object for the current URL.
const callback = (values) => {
const bookmarks = values["hide-videos-bookmarks"];
bookmarks[page] = checkbox.checked;
Storage.set({"hide-videos-bookmarks": bookmarks});
};
Storage.get({"hide-videos-bookmarks": Manager.DEFAULT_HIDE_VIDEOS_BOOKMARKS}, callback);
} else {
// Delete the entry in the bookmark object for the current URL.
const callback = (values) => {
checkbox.checked = values["hide-videos-checkbox-state"];
const bookmarks = values["hide-videos-bookmarks"];
delete bookmarks[page];
Storage.set({"hide-videos-bookmarks": bookmarks});
};
Storage.get({"hide-videos-checkbox-state": Manager.DEFAULT_HIDE_VIDEOS_CHECKBOX_STATE,
"hide-videos-bookmarks": Manager.DEFAULT_HIDE_VIDEOS_BOOKMARKS}, callback);
}
}
// Publishes the state of the "Hide Videos" widget on a "Hide Videos" bookmark change.
const publish_bookmark = () => {
if (bookmark.checked) {
// Create a new entry in the bookmark object for the current URL.
const callback = (values) => {
const bookmarks = values["hide-videos-bookmarks"];
bookmarks[page] = checkbox.checked;
Storage.set({"hide-videos-bookmarks": bookmarks});
};
Storage.get({"hide-videos-bookmarks": Manager.DEFAULT_HIDE_VIDEOS_BOOKMARKS}, callback);
} else {
// Delete the entry in the bookmark object for the current URL.
const callback = (values) => {
checkbox.checked = values["hide-videos-checkbox-state"];
const bookmarks = values["hide-videos-bookmarks"];
delete bookmarks[page];
Storage.set({"hide-videos-bookmarks": bookmarks});
};
Storage.get({"hide-videos-checkbox-state": Manager.DEFAULT_HIDE_VIDEOS_CHECKBOX_STATE,
"hide-videos-bookmarks": Manager.DEFAULT_HIDE_VIDEOS_BOOKMARKS}, callback);
}
// Initialize the state of the "Hide Videos" widget and attach an event listener for changes.
Storage.get({"hide-videos-checkbox-state": Manager.DEFAULT_HIDE_VIDEOS_CHECKBOX_STATE,
"hide-videos-bookmarks": Manager.DEFAULT_HIDE_VIDEOS_BOOKMARKS}, setup);
checkbox.addEventListener("change", publish_checkbox);
bookmark.addEventListener("change", publish_bookmark);
};
chrome.tabs.query({active: true, lastFocusedWindow: true}, callback);
checkbox.disabled = bookmark.checked;
}
// Initialize the state of the "Hide Videos" widget and attach an event listener for changes.
Storage.get({"hide-videos-checkbox-state": Manager.DEFAULT_HIDE_VIDEOS_CHECKBOX_STATE,
"hide-videos-bookmarks": Manager.DEFAULT_HIDE_VIDEOS_BOOKMARKS}, setup);
checkbox.addEventListener("change", publish_checkbox);
bookmark.addEventListener("change", publish_bookmark);
}

// Initializes the "View Threshold" widget.
Expand Down Expand Up @@ -116,6 +106,15 @@ function initViewThresholdWidget() {

// Propagates browser storage change events to their corresponding UI widgets.
function onStorageChangedListener(changes, _) {
if ("dark-mode-checkbox-state" in changes) {
const checkbox = document.getElementById("dark-mode-checkbox");
const value = changes["dark-mode-checkbox-state"]["newValue"];
if (checkbox.checked !== value) {
checkbox.checked = value;
const event = new Event("change");
checkbox.dispatchEvent(event);
}
}
if ("hide-videos-checkbox-state" in changes) {
const bookmark = document.getElementById("hide-videos-bookmark");
const checkbox = document.getElementById("hide-videos-checkbox");
Expand All @@ -126,6 +125,16 @@ function onStorageChangedListener(changes, _) {
checkbox.dispatchEvent(event);
}
}
if ("hide-videos-bookmarks" in changes) {
const bookmark = document.getElementById("hide-videos-bookmark");
const checkbox = document.getElementById("hide-videos-checkbox");
const value = changes["hide-videos-bookmarks"]["newValue"][page];
if (bookmark.checked !== (value !== undefined)) {
bookmark.checked = value !== undefined;
const event = new Event("change");
bookmark.dispatchEvent(event);
}
}
if ("view-threshold-checkbox-state" in changes) {
const checkbox = document.getElementById("view-threshold-checkbox");
const value = changes["view-threshold-checkbox-state"]["newValue"];
Expand All @@ -148,6 +157,15 @@ function onStorageChangedListener(changes, _) {

// -----------------------------------------------------------------------------

// Cache the URL (i.e., path and query) of the current YouTube page.
let page = "/";
chrome.tabs.query({active: true, lastFocusedWindow: true}, (tabs) => {
const url = new URL(tabs[0].url);
page = url.pathname + url.search;
});

// -----------------------------------------------------------------------------

document.addEventListener("DOMContentLoaded", () => {
// Initialize the "Dark Mode", "Hide Videos", and "View Threshold" widgets.
initDarkModeWidget();
Expand All @@ -165,4 +183,4 @@ window.requestAnimationFrame(_ => window.requestAnimationFrame(_ => {
root.setProperty("--transition-duration-colour", Manager.DEFAULT_COLOUR_TRANSITION_DURATION);
root.setProperty("--transition-duration-slider", Manager.DEFAULT_SLIDER_TRANSITION_DURATION);
root.setProperty("--transition-duration-toggle", Manager.DEFAULT_TOGGLE_TRANSITION_DURATION);
}));
}));

0 comments on commit a11cbe6

Please sign in to comment.