achmizs
/
AlwaysKillSticky
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Added popup

master
Said Achmiz 6 years ago
parent
5c7ca7f860
commit
a914d3d92c
11 changed files with 475 additions and 178 deletions
Split View Show Diff Stats
  1. 10
    0
      background.js
  2. BIN
      fonts/fa-light-300.ttf
  3. BIN
      fonts/fa-regular-400.ttf
  4. BIN
      fonts/fa-solid-900.ttf
  5. 25
    0
      fonts/font-awesome.css
  6. 9
    3
      manifest.json
  7. 173
    0
      options.css
  8. 1
    175
      options.html
  9. 93
    0
      popup.css
  10. 17
    0
      popup.html
  11. 147
    0
      popup.js

+ 10
- 0
background.js View File

@@ -0,0 +1,10 @@
chrome.runtime.onInstalled.addListener(() => {
chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [ new chrome.declarativeContent.PageStateMatcher({
pageUrl: { },
})
], actions: [ new chrome.declarativeContent.ShowPageAction() ]
}]);
});
});

BIN
fonts/fa-light-300.ttf View File


BIN
fonts/fa-regular-400.ttf View File


BIN
fonts/fa-solid-900.ttf View File


+ 25
- 0
fonts/font-awesome.css View File

@@ -0,0 +1,25 @@
/****************/
/* FONT AWESOME */
/****************/

@font-face {
font-family: 'Font Awesome';
src: url('fa-light-300.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}

@font-face {
font-family: 'Font Awesome';
src: url('fa-regular-400.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'Font Awesome';
src: url('fa-solid-900.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}


+ 9
- 3
manifest.json View File

@@ -4,16 +4,22 @@
"version": "0.3",
"description": "Get rid of sticky elements on websites - permanently!",
"author": "Said Achmiz",
"homepage_url": "https://wiki.obormot.net/Main/AlwaysKillSticky",
"permissions": [ "activeTab", "storage" ],
"homepage_url": "https://git.sr.ht/~achmizs/AlwaysKillSticky.git",
"permissions": [ "declarativeContent", "activeTab", "storage" ],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": [ "http://*/*", "https://*/*" ],
"run_at": "document_end",
"js": [ "contentScript.js" ]
"js": [ "functions.js", "contentScript.js" ]
}
],
"page_action": {
"default_popup": "popup.html",
"default_title": "AlwaysKillSticky - Click the icon to control sticky-killing on this site!",
"default_icon": {
"16": "images/ASK16.png",
"32": "images/ASK32.png",

+ 173
- 0
options.css View File

@@ -0,0 +1,173 @@
html {
box-sizing: border-box;
font-size: 16px;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
margin: 0 auto;
display: flex;
flex-flow: column;
max-width: 640px;
min-height: 100vh;
padding: 10px;
font-size: 1rem;
}
body > div {
border: 1px solid #ddd;
padding: 30px 15px 15px 15px;
position: relative;
}
body > div + div {
margin: 2.5em 0 0 0;
}
h1 {
border-bottom: 1px solid #ddd;
margin: 0.5em 0;
}
h2 {
margin: 0;
background-color: #fff;
padding: 10px 15px;
position: absolute;
top: calc(-1 * (0.625em + 10px));
left: 10px;
border: inherit;
}
textarea {
border: 1px solid #aaa;
font-family: Inconsolata, Courier, monospace;
font-size: 1.125rem;
width: 100%;
display: block;
}
#matchingPatterns textarea {
min-height: 300px;
}
#exclusionPatterns textarea {
min-height: 150px;
}
form {
text-align: right;
margin: 0 0 2.5em 0;
display: flex;
align-items: center;
}
form .buttons {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 1 1 0;
}
button {
-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid #bbb;
color: #fff;
padding: 10px 16px;
cursor: default;
margin: 0 0 0 0.5em;
}
button.save-button {
background-color: #16e;
font-size: 1.5rem;
}
button.reset-button {
background-color: #d3453d;
font-size: 1rem;
}
button:active {
transform: scale(0.95);
}
button:focus:active {
outline: none;
}
button:disabled {
background-color: #777;
opacity: 0.3;
}
input#whitelist-mode {
display: block;
-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid #000;
font-size: 1rem;
height: 2em;
width: 4em;
margin: 0 6px;
background-color: #000;
box-shadow:
-2em 0 0 1px #fff inset,
0 0 0 3px #fff inset;
}
input#whitelist-mode:checked {
border: 1px solid #fff;
background-color: #fff;
box-shadow:
2em 0 0 1px #000 inset,
0 0 0 3px #000 inset;
}
input#whitelist-mode,
.mode-select-container span {
cursor: pointer;
}
.mode-select-container {
white-space: nowrap;
display: flex;
align-items: center;
align-self: flex-start;
border: 1px solid #ddd;
padding: 8px 10px;
cursor: default;
background-color: #fff;
}
.mode-select-container.whitelist {
background-color: #000;
color: #fff;
}
.mode-select-container:not(.whitelist) .blacklist-mode-label,
.mode-select-container.whitelist .whitelist-mode-label {
border-bottom: 1px dotted currentColor;
}
.mode-select-container span::selection {
background-color: transparent;
}
.mode-select-container span.disabled {
pointer-events: none;
}
.mode-select-container span:not(.disabled):hover {
border-bottom: 1px solid currentColor;
}
form button:not(:disabled):hover {
text-shadow:
0 0 1px #fff,
0 0 3px #fff,
0 0 5px #fff;
cursor: pointer;
}
#matchingPatterns.disabled h2 {
color: rgba(0,0,0,0.15);
}
#matchingPatterns.disabled p {
opacity: 0.2;
}
#matchingPatterns.disabled .textarea-container {
position: relative;
}
#matchingPatterns.disabled .textarea-container::before {
content: ".*";
display: flex;
position: absolute;
background-color: rgba(232,232,232,0.9);
width: 100%;
height: 100%;
z-index: 1;
justify-content: center;
align-items: center;
font-family: Inconsolata, Courier, monospace;
font-size: 4em;
}
body > p {
padding: 0 15px;
}

+ 1
- 175
options.html View File

@@ -3,181 +3,7 @@
<head>
<title>Always Kill Sticky - Options</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
html {
box-sizing: border-box;
font-size: 16px;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
margin: 0 auto;
display: flex;
flex-flow: column;
max-width: 640px;
min-height: 100vh;
padding: 10px;
font-size: 1rem;
}
body > div {
border: 1px solid #ddd;
padding: 30px 15px 15px 15px;
position: relative;
}
body > div + div {
margin: 2.5em 0 0 0;
}
h1 {
border-bottom: 1px solid #ddd;
margin: 0.5em 0;
}
h2 {
margin: 0;
background-color: #fff;
padding: 10px 15px;
position: absolute;
top: calc(-1 * (0.625em + 10px));
left: 10px;
border: inherit;
}
textarea {
border: 1px solid #aaa;
font-family: Inconsolata, Courier, monospace;
font-size: 1.125rem;
width: 100%;
display: block;
}
#matchingPatterns textarea {
min-height: 300px;
}
#exclusionPatterns textarea {
min-height: 150px;
}
form {
text-align: right;
margin: 0 0 2.5em 0;
display: flex;
align-items: center;
}
form .buttons {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 1 1 0;
}
button {
-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid #bbb;
color: #fff;
padding: 10px 16px;
cursor: default;
margin: 0 0 0 0.5em;
}
button.save-button {
background-color: #16e;
font-size: 1.5rem;
}
button.reset-button {
background-color: #d3453d;
font-size: 1rem;
}
button:active {
transform: scale(0.95);
}
button:focus:active {
outline: none;
}
button:disabled {
background-color: #777;
opacity: 0.3;
}
input#whitelist-mode {
display: block;
-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid #000;
font-size: 1rem;
height: 2em;
width: 4em;
margin: 0 6px;
background-color: #000;
box-shadow:
-2em 0 0 1px #fff inset,
0 0 0 3px #fff inset;
}
input#whitelist-mode:checked {
border: 1px solid #fff;
background-color: #fff;
box-shadow:
2em 0 0 1px #000 inset,
0 0 0 3px #000 inset;
}
input#whitelist-mode,
.mode-select-container span {
cursor: pointer;
}
.mode-select-container {
white-space: nowrap;
display: flex;
align-items: center;
align-self: flex-start;
border: 1px solid #ddd;
padding: 8px 10px;
cursor: default;
background-color: #fff;
}
.mode-select-container.whitelist {
background-color: #000;
color: #fff;
}
.mode-select-container:not(.whitelist) .blacklist-mode-label,
.mode-select-container.whitelist .whitelist-mode-label {
border-bottom: 1px dotted currentColor;
}
.mode-select-container span::selection {
background-color: transparent;
}
.mode-select-container span.disabled {
pointer-events: none;
}
.mode-select-container span:not(.disabled):hover {
border-bottom: 1px solid currentColor;
}
form button:not(:disabled):hover {
text-shadow:
0 0 1px #fff,
0 0 3px #fff,
0 0 5px #fff;
cursor: pointer;
}
#matchingPatterns.disabled h2 {
color: rgba(0,0,0,0.15);
}
#matchingPatterns.disabled p {
opacity: 0.2;
}
#matchingPatterns.disabled .textarea-container {
position: relative;
}
#matchingPatterns.disabled .textarea-container::before {
content: ".*";
display: flex;
position: absolute;
background-color: rgba(232,232,232,0.9);
width: 100%;
height: 100%;
z-index: 1;
justify-content: center;
align-items: center;
font-family: Inconsolata, Courier, monospace;
font-size: 4em;
}
body > p {
padding: 0 15px;
}
</style>
<link rel='stylesheet' type='text/css' href='options.css' />
</head>
<body>
<h1>Always Kill Sticky</h1>

+ 93
- 0
popup.css View File

@@ -0,0 +1,93 @@
html {
font-size: 16px;
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
button {
-webkit-appearance: none;
-moz-appearance: none;
background-color: #fff;
border: none;
cursor: pointer;
}
button:active {
transform: scale(0.95);
}
button:focus {
outline: none;
}
button::selection {
background-color: transparent;
}
#main-button-container {
display: flex;
flex-flow: column;
}
#main-button-container button {
padding: 10px;
font-size: 6rem;
display: flex;
align-items: center;
justify-content: center;
height: 150px;
width: 150px;
color: #ccc;
font-family: Font Awesome, sans-serif;
}
#main-button-container button.active {
color: #000;
}
#main-button-container button:hover {
text-shadow:
0 0 1px #fff,
0 0 3px #fff,
0 0 5px #fff;
}
#main-button-container button:hover {
color: #999;
}
#main-button-container button::before {
content: "\F08D";
font-weight: 900;
position: relative;
top: 3px;
}
#main-button-container button::after {
content: "\F05E";
position: absolute;
font-weight: 300;
color: #c00;
opacity: 0.0;
transform: scaleX(-1) scale(1.5);
}
#main-button-container button.active::after {
opacity: 1.0;
}
#aux-button-container {
display: flex;
border-top: 1px solid #ddd;
}
.options-button {
font-size: 1.125rem;
padding: 10px;
color: #777;
width: 100%;
}
.options-button:hover {
color: #000;
}
.options-button::before {
content: "\F1DE";
font-family: Font Awesome;
font-size: 0.875em;
margin: 0 5px 0 0;
}
.options-button::after {
content: "Options";
}

+ 17
- 0
popup.html View File

@@ -0,0 +1,17 @@
<html>
<head>
<title>AlwaysKillSticky</title>
<link rel='stylesheet' type='text/css' href='popup.css' />
<link rel='stylesheet' type='text/css' href='fonts/font-awesome.css' />
</head>
<body>
<div id='main-button-container'>
<button type='button'></button>
</div>
<div id='aux-button-container'>
<button type='button' class='options-button'></button>
</div>
</body>
<script src="functions.js"></script>
<script src="popup.js"></script>
</html>

+ 147
- 0
popup.js View File

@@ -0,0 +1,147 @@
/*******************/
/* EVENT LISTENERS */
/*******************/


/***********/
/* HELPERS */
/***********/

/* Toggle the current state, as represented in the ASK object. (Nothing actually
happens until the UI state is updated, killSticky() is called (if needed),
and the new settings are saved in storage.)
What “toggle the current state” actually means depends on the current mode.

[1] In blacklist mode, toggleState() does one of the following:

(a) (if stickies are not being killed on the current page) adds a matching
pattern (if one is not already there), and removes all applicable
exclusion patterns; or,
(b) (if stickies are being killed on the current page) removes all
applicable matching patterns.
[2] In whitelist mode, toggleState() does one of the following:

(a) (if stickies are not being killed on the current page) removes all
applicable exclusion patterns; or,
(b) (if stickies are being killed on the current page) adds an exclusion
pattern.
*/
function toggleState() {
if (ASK.mode == "blacklist") {
if (!ASK.pageMatched || ASK.pageExcluded) {
/* In this case, stickies are NOT being killed. We must add a matching
pattern, and remove all applicable exclusion patterns. */
if (!ASK.pageMatched) {
ASK.matchingPatterns.push(regExpForCurrentTab());
}
if (ASK.pageExcluded) {
ASK.exclusionPatterns = ASK.exclusionPatterns.filter(pattern =>
!ASK.activeTabLocation.match(new RegExp(pattern))
);
}
} else {
/* In this case, stickies ARE being killed. We must remove all
applicable matching patterns. */
ASK.matchingPatterns = ASK.matchingPatterns.filter(pattern =>
!ASK.activeTabLocation.match(new RegExp(pattern))
);
}
} else { // if whitelist mode
// TODO: code this!
}
recalculatePatternEffects();
}

function regExpForCurrentTab() {
let a = document.createElement("A");
a.href = ASK.activeTabLocation;
return ".*" + a.host.replace(/\./g, "\\.") + ".*";
}

function recalculatePatternEffects() {
ASK.pageMatched = false;
ASK.pageExcluded = false;
for (let pattern of ASK.matchingPatterns) {
if (ASK.activeTabLocation.match(new RegExp(pattern))) {
ASK.pageMatched = true;
break;
}
}
for (let pattern of ASK.exclusionPatterns) {
if (ASK.activeTabLocation.match(new RegExp(pattern))) {
ASK.pageExcluded = true;
break;
}
}
}

function updateState(result) {
ASK.mode = result.mode || "blacklist";
ASK.matchingPatterns = (ASK.mode == "whitelist") ?
[ ".*" ] :
result.matchingPatterns.split("\n");
ASK.exclusionPatterns = (typeof result.exclusionPatterns != "undefined" &&
result.exclusionPatterns != "") ?
result.exclusionPatterns.split("\n") :
[ ];
recalculatePatternEffects();
}

function updateUIState() {
let button = document.querySelector("#main-button-container button");
if (ASK.mode == "blacklist" && ASK.pageMatched && !ASK.pageExcluded) {
button.classList.toggle("active", true);
// button.innerHTML = "X";
} else if (ASK.mode == "blacklist" && (!ASK.pageMatched || ASK.pageExcluded)) {
button.classList.toggle("active", false);
// button.innerHTML = "O";
} else if (ASK.mode == "whitelist" && !ASK.pageExcluded) {
button.classList.toggle("active", false);
// button.innerHTML = "X";
} else if (ASK.mode == "whitelist" && ASK.pageExcluded) {
button.classList.toggle("active", true);
// button.innerHTML = "O";
}
}

/******************/
/* INITIALIZATION */
/******************/

function initialize() {
window.ASK = { };

chrome.tabs.query({currentWindow: true, active: true}, (tabs) => {
ASK.activeTabLocation = tabs[0].url;
chrome.storage.sync.get([ "matchingPatterns", "exclusionPatterns", "mode" ], (result) => {
updateState(result);
updateUIState();
});
});

document.querySelector("#main-button-container button").addActivateEvent((event) => {
toggleState();

let matchingPatterns = ASK.matchingPatterns.join("\n");
let exclusionPatterns = ASK.exclusionPatterns.join("\n");
let mode = ASK.mode;
chrome.storage.sync.set({
"matchingPatterns": matchingPatterns,
"exclusionPatterns": exclusionPatterns,
"mode": mode
}, () => {
updateUIState();
if (ASK.pageMatched && !ASK.pageExcluded)
chrome.tabs.executeScript(null, { code: 'killSticky()' });
});
});


document.querySelector("#aux-button-container button").addActivateEvent((event) => {
chrome.runtime.openOptionsPage(null);
});
}

initialize();

Write Preview
Loading…
Cancel
Save