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';
MUTATION_OBSERVER_KEY = 'observe-this-dom-pls-interactive-fics-yalla-bina';
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if ('input_word' in message){
@ -13,6 +15,20 @@ const replaceAll = () => {
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) => {
if (!items[DEACTIVATE_KEY]) {
for (var key in items) {
@ -56,6 +72,7 @@ const replaceText = (textNode, input_word, replace_value) => {
textNode.nodeValue = node_value
}
function walk(node, v, p){
// I stole this function from here:
// http://is.gd/mwZp7E
@ -78,3 +95,4 @@ function walk(node, v, p){
}
replaceAll()
observeChanges()

2
manifest.json
View File

@ -3,7 +3,7 @@
"manifest_version": 2,
"name": "InteractiveFics",
"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.",
"browser_action": {
"default_title": "InteractiveFics",

54
popup.css
View File

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

25
popup.html
View File

@ -1,4 +1,5 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<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>
</head>
<body>
<div id="all-but-deactivate-wrapper">
<div class="fade-when-deactivate">
<h1>Enter the name here:</h1>
<form id="change-name-form">
<input type="text" id="change-name-form-text"/>
<input type="submit" 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"/>
<input type="submit" class="change" value="Change"/>
</form>
<details>
<summary>Need to replace something other than Y/N?</summary>
@ -51,13 +46,21 @@
</ul>
</div>
</details>
</div>
<div>
<details>
<summary>About</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>
<summary>⚙️ Settings</summary>
<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>
</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="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>
</html>

54
popup.js
View File

@ -1,16 +1,19 @@
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 () {
// event listeners
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('refresh-replacements-form').addEventListener('submit', refreshReplacements)
document.getElementById('show-saved').addEventListener('click', loadSaved)
document.getElementById('refresh-replacements').addEventListener('click', refreshReplacements)
document.getElementById('deactivate').addEventListener('click', toggleDeactivate)
document.getElementById('enable-observer').addEventListener('click', toggleMutationObserver)
// set disable/enable button
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 input_word = document.getElementById('replace-word').value
const replacement = document.getElementById('replace-with').value
@ -72,7 +70,7 @@ const loadSavedItemsWrapper = isLocal => items => loadSavedItems(items, isLocal)
const loadSavedItems = (items, isLocal) => {
const list = document.getElementById('saved-items-list')
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 case_sensitive = !!items[`${key}_case_sensitive`]
const case_sensitive_string = case_sensitive ? 'case sensitive' : 'not case sensitive'
@ -107,8 +105,10 @@ const setDeactivateKey = () => {
toggleDeactivateLabel(is_deactivated)
if (is_deactivated) {
const other_elements = document.getElementById('all-but-deactivate-wrapper')
other_elements.style.opacity = '0.5'
const other_elements = document.getElementsByClassName('fade-when-deactivate')
Array.from(other_elements).forEach(element => {
element.style.opacity = '0.5'
})
const input_elements = document.getElementsByTagName('INPUT')
Array.from(input_elements).forEach(input => {
if (input.id !== 'deactivate') {
@ -119,10 +119,20 @@ const setDeactivateKey = () => {
})
}
const toggleDeactivateLabel = (reactivateBool) => {
const prefix = reactivateBool ? 'Re-activate' : 'Deactivate'
const deactivate_button = document.getElementById('deactivate')
deactivate_button.value = `${prefix} Extension`
const setMutationObserverKey = () => {
chrome.storage.sync.get(MUTATION_OBSERVER_KEY, obj => {
const is_enabled = obj[MUTATION_OBSERVER_KEY]
toggleMutationObserverLabel(is_enabled)
})
}
const toggleDeactivateLabel = (isDeactivated) => {
document.getElementById('deactivate').checked = isDeactivated;
}
const toggleMutationObserverLabel = (isEnabled) => {
document.getElementById('enable-observer').checked = isEnabled;
}
const toggleDeactivate = () => {
@ -142,3 +152,19 @@ const toggleDeactivate = () => {
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()
})
}