jean/metamorpov
jean
/
metamorpov
1
0
Fork 0
Code Issues 5 Pull Requests Releases 2 Wiki Activity

Style changes + optional mutation observer

This commit is contained in:
Mariam Maarouf 2020-09-26 18:03:23 +02:00
parent 9e734d33c9
commit cb60d3351b
5 changed files with 99 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
content_script.js
View File

@ -1,4 +1,6 @@
DEACTIVATE_KEY = 'deactivate-this-extension-pls-interactive-fics-yalla-bina'; DEACTIVATE_KEY = 'deactivate-this-extension-pls-interactive-fics-yalla-bina';
MUTATION_OBSERVER_KEY = 'observe-this-dom-pls-interactive-fics-yalla-bina';
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if ('input_word' in message){ if ('input_word' in message){
@ -13,6 +15,20 @@ const replaceAll = () => {
chrome.storage.local.get(null, replaceAllInStorage) chrome.storage.local.get(null, replaceAllInStorage)
} }
const observeChanges = () => {
chrome.storage.sync.get(MUTATION_OBSERVER_KEY, obj => {
if (obj[MUTATION_OBSERVER_KEY]) {
const observer = new MutationObserver((mutation_list, observer) => {
replaceAll()
})
observer.observe(document, {
subtree: true,
childList: true
})
}
})
}
const replaceAllInStorage = (items) => { const replaceAllInStorage = (items) => {
if (!items[DEACTIVATE_KEY]) { if (!items[DEACTIVATE_KEY]) {
for (var key in items) { for (var key in items) {
@ -56,6 +72,7 @@ const replaceText = (textNode, input_word, replace_value) => {
textNode.nodeValue = node_value textNode.nodeValue = node_value
} }
function walk(node, v, p){ function walk(node, v, p){
// I stole this function from here: // I stole this function from here:
// http://is.gd/mwZp7E // http://is.gd/mwZp7E
@ -78,3 +95,4 @@ function walk(node, v, p){
} }
replaceAll() replaceAll()
observeChanges()

2
manifest.json
View File

@ -3,7 +3,7 @@
"manifest_version": 2, "manifest_version": 2,
"name": "InteractiveFics", "name": "InteractiveFics",
"author": "mariamrf", "author": "mariamrf",
"version": "5.0.5", "version": "5.1.0",
"description": "Replaces Y/N & other variables in Reader Insert/second person fics with words of your choice.", "description": "Replaces Y/N & other variables in Reader Insert/second person fics with words of your choice.",
"browser_action": { "browser_action": {
"default_title": "InteractiveFics", "default_title": "InteractiveFics",

56
popup.css
View File

@ -1,7 +1,7 @@
body { body {
background-color: white; background-color: white;
color: #2C3531; color: #2C3531;
width: 250px; width: 270px;
padding:10px; padding:10px;
font-family: 'Rubik', sans-serif; font-family: 'Rubik', sans-serif;
} }
@ -9,11 +9,11 @@ h1 {
font-size: 16px; font-size: 16px;
} }
a{ a{
color: #D9B08C; color: #51A99C;
transition-duration: 0.5s; transition-duration: 0.5s;
} }
a:hover{ a:hover{
color: #16a085; color: #1E7669;
} }
label *:not([type="checkbox"]){ label *:not([type="checkbox"]){
@ -30,35 +30,34 @@ label *:not([type="checkbox"]){
.other-words .change{ .other-words .change{
margin-right:0; margin-right:0;
} }
#clear-name, #deactivate, #refresh-replacements{ .change {
border-color: rgb(49, 47, 47);
border-width: 1px;
border-radius: 0.3em;
transition-duration: 0.3s;
}
.change:hover {
background-color: #84DCCF;
cursor: pointer;
}
#clear-name, #refresh-replacements{
margin-top:0.5em; margin-top:0.5em;
margin-bottom: 0.5em;
width:96%; width:96%;
} }
#refresh-replacements { #refresh-replacements {
margin-top: 1.5em;
font-size: 1.005em; font-size: 1.005em;
background-color: #D9B08C; background-color: #EF626C;
border-radius: 0.5em; border-radius: 0.5em;
color: white; color: white;
border-color: rgba(0, 0, 0, 0);
transition-duration: 0.3s;
} }
#refresh-replacements:hover { #refresh-replacements:hover {
color: black; background-color: #D64953;
} cursor: pointer;
#deactivate{
background-color: #116466;
color:white;
border:0px;
border-radius:0.5em;
transition-duration: 0.5s;
font-size: 1em;
}
#deactivate:hover{
color: #116466;
background-color: white;
cursor:pointer;
} }
input[type="text"]{ input[type="text"]{
@ -89,14 +88,11 @@ input[type="button"]{
margin-top: 0.8em; margin-top: 0.8em;
margin-bottom: 0.8em; margin-bottom: 0.8em;
} }
input[type="checkbox"]:hover{
input[type="submit"]{ cursor:pointer;
cursor: pointer;
transition-duration: 0.5s;
} }
input[type="submit"]:hover { #src-code {
background-color: #2C3531; font-size: 0.8em;
color: white; text-align: right;
border-radius: 0.4em; }
}

25
popup.html
View File

@ -1,4 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="UTF-8">
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
@ -6,17 +7,11 @@
<script src="popup.js" type="text/javascript"></script> <script src="popup.js" type="text/javascript"></script>
</head> </head>
<body> <body>
<div id="all-but-deactivate-wrapper"> <div class="fade-when-deactivate">
<h1>Enter the name here:</h1> <h1>Enter the name here:</h1>
<form id="change-name-form"> <form id="change-name-form">
<input type="text" id="change-name-form-text"/> <input type="text" id="change-name-form-text"/>
<input type="submit" value="Change"/> <input type="submit" class="change" value="Change"/>
</form>
<form id="clear-name-form">
<input type="submit" id="clear-name" value="Clear Name"/>
</form>
<form id="refresh-replacements-form">
<input type="submit" id="refresh-replacements" value="Refresh Replacements"/>
</form> </form>
<details> <details>
<summary>Need to replace something other than Y/N?</summary> <summary>Need to replace something other than Y/N?</summary>
@ -51,13 +46,21 @@
</ul> </ul>
</div> </div>
</details> </details>
</div>
<div>
<details> <details>
<summary>About</summary> <summary>⚙️ Settings</summary>
<a href="http://interactivefics.tumblr.com" target="_blank" title="Official site">Interactive Fics</a> is a free Chrome extension built to improve your online story reading experience. The extension is open source and all source code can be found <a href="https://github.com/interactivefics/interactive-fics" target="_blank" title="github repo">here.</a> <div class="fade-when-deactivate"><input type="checkbox" id="enable-observer"> Auto-detect page changes <small>(Wattpad support)</small><br></div>
<input type="checkbox" id="deactivate"> Deactivate Extension</span>
</details> </details>
</div> </div>
<input type="button" id="deactivate"/>
<input type="button" id="refresh-replacements" class="fade-when-deactivate" value="Refresh Replacements"/>
<a href="http://interactivefics.tumblr.com/ask" target="_blank">Feedback, suggestions and requests.</a></br> <a href="http://interactivefics.tumblr.com/ask" target="_blank">Feedback, suggestions and requests.</a></br>
<a href="https://interactivefics.tumblr.com/changelog" target="_blank">> What's new?</a></br> <a href="https://interactivefics.tumblr.com/changelog" target="_blank">> What's new?</a></br>
<div id="src-code">
🤖 <a href="https://github.com/interactivefics/interactive-fics" target="_blank">source code</a> 🤖
</div>
</body> </body>
</html> </html>

54
popup.js
View File

@ -1,16 +1,19 @@
DEACTIVATE_KEY = 'deactivate-this-extension-pls-interactive-fics-yalla-bina'; DEACTIVATE_KEY = 'deactivate-this-extension-pls-interactive-fics-yalla-bina';
MUTATION_OBSERVER_KEY = 'observe-this-dom-pls-interactive-fics-yalla-bina';
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
// event listeners // event listeners
document.getElementById('change-name-form').addEventListener('submit', changeName) document.getElementById('change-name-form').addEventListener('submit', changeName)
document.getElementById('clear-name-form').addEventListener('submit', clearName)
document.getElementById('replace-other-words-form').addEventListener('submit', replaceOther) document.getElementById('replace-other-words-form').addEventListener('submit', replaceOther)
document.getElementById('refresh-replacements-form').addEventListener('submit', refreshReplacements)
document.getElementById('show-saved').addEventListener('click', loadSaved) document.getElementById('show-saved').addEventListener('click', loadSaved)
document.getElementById('refresh-replacements').addEventListener('click', refreshReplacements)
document.getElementById('deactivate').addEventListener('click', toggleDeactivate) document.getElementById('deactivate').addEventListener('click', toggleDeactivate)
document.getElementById('enable-observer').addEventListener('click', toggleMutationObserver)
// set disable/enable button // set disable/enable button
setDeactivateKey() setDeactivateKey()
setMutationObserverKey()
}); });
@ -21,11 +24,6 @@ const changeName = () => {
} }
} }
const clearName = () => {
chrome.storage.sync.remove('person', chrome.tabs.reload())
chrome.storage.local.remove('person', chrome.tabs.reload())
}
const replaceOther = () => { const replaceOther = () => {
const input_word = document.getElementById('replace-word').value const input_word = document.getElementById('replace-word').value
const replacement = document.getElementById('replace-with').value const replacement = document.getElementById('replace-with').value
@ -72,7 +70,7 @@ const loadSavedItemsWrapper = isLocal => items => loadSavedItems(items, isLocal)
const loadSavedItems = (items, isLocal) => { const loadSavedItems = (items, isLocal) => {
const list = document.getElementById('saved-items-list') const list = document.getElementById('saved-items-list')
for (var key in items) { for (var key in items) {
if (key !== DEACTIVATE_KEY && !key.endsWith('_case_sensitive')) { if (key !== DEACTIVATE_KEY && key !== MUTATION_OBSERVER_KEY && !key.endsWith('_case_sensitive')) {
const label = key === 'person' ? 'Y/N' : key const label = key === 'person' ? 'Y/N' : key
const case_sensitive = !!items[`${key}_case_sensitive`] const case_sensitive = !!items[`${key}_case_sensitive`]
const case_sensitive_string = case_sensitive ? 'case sensitive' : 'not case sensitive' const case_sensitive_string = case_sensitive ? 'case sensitive' : 'not case sensitive'
@ -107,8 +105,10 @@ const setDeactivateKey = () => {
toggleDeactivateLabel(is_deactivated) toggleDeactivateLabel(is_deactivated)
if (is_deactivated) { if (is_deactivated) {
const other_elements = document.getElementById('all-but-deactivate-wrapper') const other_elements = document.getElementsByClassName('fade-when-deactivate')
other_elements.style.opacity = '0.5' Array.from(other_elements).forEach(element => {
element.style.opacity = '0.5'
})
const input_elements = document.getElementsByTagName('INPUT') const input_elements = document.getElementsByTagName('INPUT')
Array.from(input_elements).forEach(input => { Array.from(input_elements).forEach(input => {
if (input.id !== 'deactivate') { if (input.id !== 'deactivate') {
@ -119,10 +119,20 @@ const setDeactivateKey = () => {
}) })
} }
const toggleDeactivateLabel = (reactivateBool) => { const setMutationObserverKey = () => {
const prefix = reactivateBool ? 'Re-activate' : 'Deactivate' chrome.storage.sync.get(MUTATION_OBSERVER_KEY, obj => {
const deactivate_button = document.getElementById('deactivate') const is_enabled = obj[MUTATION_OBSERVER_KEY]
deactivate_button.value = `${prefix} Extension` toggleMutationObserverLabel(is_enabled)
})
}
const toggleDeactivateLabel = (isDeactivated) => {
document.getElementById('deactivate').checked = isDeactivated;
}
const toggleMutationObserverLabel = (isEnabled) => {
document.getElementById('enable-observer').checked = isEnabled;
} }
const toggleDeactivate = () => { const toggleDeactivate = () => {
@ -142,3 +152,19 @@ const toggleDeactivate = () => {
window.close() window.close()
}) })
} }
const toggleMutationObserver = () => {
chrome.storage.sync.get(MUTATION_OBSERVER_KEY, obj => {
const was_enabled = obj[MUTATION_OBSERVER_KEY]
if (was_enabled) {
chrome.storage.sync.remove(MUTATION_OBSERVER_KEY)
} else {
const new_object = {}
new_object[MUTATION_OBSERVER_KEY] = true
chrome.storage.sync.set(new_object)
}
chrome.tabs.reload()
})
}