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

Formatting popup

This commit is contained in:
Jean Viscogliosi-Pate 2024-12-19 23:25:13 -08:00
parent 4ed39f9e23
commit 404f1a92a3
4 changed files with 283 additions and 335 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/manifest.json
View File

@ -9,10 +9,10 @@
"browser_action": { "browser_action": {
"default_title": "MetamorPOV", "default_title": "MetamorPOV",
"default_icon": { "default_icon": {
"32": "icons/icon-32.png", "32": "img/mpov-32.png",
"48": "icons/icon-48.png" "48": "img/mpov-48.png"
}, },
"default_popup": "popup.html" "default_popup": "popup/popup.html"
}, },
"permissions": [ "permissions": [
"storage", "storage",
@ -20,12 +20,12 @@
], ],
"icons": { "icons": {
"16": "icons/icon-16.png", "16": "img/mpov-16.png",
"32": "icons/icon-32.png", "32": "img/mpov-32.png",
"48": "icons/icon-48.png", "48": "img/mpov-48.png",
"64": "icons/icon-64.png", "64": "img/mpov-64.png",
"96": "icons/icon-96.png", "96": "img/mpov-96.png",
"128": "icons/icon-128.png" "128": "img/mpov-128.png"
}, },
"content_scripts": [ "content_scripts": [
@ -39,9 +39,8 @@
] ]
} }
], ],
"incognito": "split",
"background": { "background": {
"page": "popup.html" "page": "popup/popup.html"
}, },
"homepage_url": "https://git.viscogliosi-pate.com/jean/metamorpov" "homepage_url": "https://git.viscogliosi-pate.com/jean/metamorpov"
} }

154
src/popup/popup.css
View File

@ -1,100 +1,88 @@
:root {
--background-color: white;
--text-color: black;
}
body { body {
background-color: white; background-color: var(--background-color);
color: #2C3531; color: var(--text-color);
width: 380px; width: 350px;
padding-left: 10px;
padding-right: 10px;
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
padding:10px; font-size: 12pt;
margin: 8px;
} }
h1 { #hostname {
font-size: 16px; font-size: 14pt;
} font-weight: 400;
a{ text-align: center;
color: #51A99C;
transition-duration: 0.5s;
}
a:hover{
color: #1E7669;
} }
label *:not([type="checkbox"]){ #display-enabled {
display:block; display: grid;
grid-template-columns: 1fr 2fr;
} }
.other-words input:not([type="checkbox"]){ #display-enabled img {
margin-top:0.5em; width: 50%;
width:100%; justify-self: center;
} align-self: center;
.other-words .other, .other-words .replace-with{
width:98%;
}
.other-words .change{
margin-right:0;
}
.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; cursor: pointer;
} }
#clear-name, #refresh-replacements{
margin-top:0.5em; #display-enabled h2 {
margin-bottom: 0.5em; font-size: 14pt;
width:96%; font-weight: 400;
margin-right: 15%;
} }
#refresh-replacements { #display-features {
font-size: 1.005em; display: grid;
background-color: #EF626C; grid-template-columns: repeat(3, 1fr);
border-radius: 0.5em; gap: 10px;
color: white; text-align: center;
border-color: rgba(0, 0, 0, 0); }
#display-features img {
width: 50%;
}
#display-features p {
margin-top: 0;
}
button {
display: flex;
justify-content: center;
align-items: center;
border: 0;
border-radius: 30px;
width: 100%;
font-size: 12pt;
padding: 6px;
margin-top: 6px;
margin-bottom: 6px;
gap: 8px;
text-align: center;
cursor: pointer;
}
button:hover {
transition-duration: 0.3s; transition-duration: 0.3s;
} }
#refresh-replacements:hover { ul {
background-color: #D64953;
cursor: pointer;
}
input[type="text"]{
width:70%;
}
.strikethrough{
text-decoration: line-through;
}
.one-saved-item:hover{
background-color: #e74c3c;
color: white;
cursor: pointer;
}
.saved-items-list-wrapper{
height:100px;
overflow: auto;
}
details {
margin-top: 0.8em;
}
summary {
cursor: pointer;
}
input[type="button"]{
margin-top: 0.8em;
margin-bottom: 0.8em;
}
input[type="checkbox"]:hover{
cursor:pointer;
}
#src-code {
font-size: 0.8em;
text-align: right; text-align: right;
list-style: none;
}
a{
color: var(--text-color);
text-decoration: none;
transition-duration: 0.3s;
}
a:hover{
text-decoration: underline;
} }

83
src/popup/popup.html
View File

@ -5,65 +5,48 @@
<link href='popup.css' rel='stylesheet' type='text/css'> <link href='popup.css' rel='stylesheet' type='text/css'>
<script src="popup.js" type="text/javascript"></script> <script src="popup.js" type="text/javascript"></script>
</head> </head>
<body> <body>
<h1>Website name here</h1> <main>
<h1>MetamorPOV is <b>TODO</b> for this website</h1> <h1 id="hostname">TODO</h1>
<form id="change-name-form"> <div id="display-enabled">
<input type="text" id="change-name-form-text"/> <img id="toggle" src="../img/toggle-on.svg" alt="Toggle"/>
<input type="submit" class="change" value="Change"/> <h2>MetamorPOV is <b>TODO</b> for this website</h2>
</form>
<details>
<summary>Need to replace something other than Y/N?</summary>
<p><small>This change will go away when you refresh/go to another page unless you check the box next to "Store this replacement".</small></p>
<p>
<form id="replace-other-words-form" class="other-words">
<label>
<span>Value (e.g. L/N, E/C, etc):</span>
<input type="text" id="replace-word" class="other"/>
</label>
<label>
<input type="checkbox" id="is-case-sensitive">Case sensitive
</label>
<br><br>
<label>
<span>Replace with:</span>
<input type="text" id="replace-with" class="replace-with"/>
</label>
<br>
<label>
<input type="checkbox" id="is-perm">Store this replacement
</label>
<input type="submit" class="change" value="Change">
</form>
</p>
</details>
<details>
<summary id="show-saved">Stored Replacements</summary>
<p><small>To remove, simply click on a replacement. To change, re-enter in the previous section.</small></p>
<div class="saved-items-list-wrapper">
<ul id="saved-items-list">
</ul>
</div>
</details>
<div>
<details>
<summary>⚙️ Settings</summary>
<div><input type="checkbox" id="enable-observer"> Auto-detect page changes <small>(Wattpad support)</small><br></div>
<div><input type="checkbox" id="pause"> Pause extension on "<span id="this-url"></span>"<br></div>
<input type="checkbox" id="deactivate"> Deactivate extension
</details>
</div> </div>
<input type="button" id="refresh-replacements" value="Refresh replacements"/> <div id="display-features">
<div id="yn-usage">
<img src="../img/check.svg" alt="Check"/>
<p>Y/n is used on this page</p>
</div>
<div id="prn-usage">
<img src="../img/check.svg" alt="Check"/>
<p>prn/ is used on this page</p>
</div>
<div id="pov-usage">
<img src="../img/check.svg" alt="Check"/>
<p>pov/ is used on this page</p>
</div>
</div>
</main>
<button id="configure">
<img src="../img/configure.svg" alt=""/>
Configure name, pronouns, and POV
</button>
<button id="refresh">
<img src="../img/refresh.svg" alt=""/>
Refresh replacements
</button>
<ul class="links"> <ul class="links">
<li><a href="https://git.viscogliosi-pate.com/jean/metamorpov/wiki" target="_blank">How to write for MetamorPOV</a></li> <li><a href="https://git.viscogliosi-pate.com/jean/metamorpov/wiki" target="_blank">How to write for MetamorPOV</a></li>
<li><a href="https://git.viscogliosi-pate.com/jean/metamorpov/issues" target="_blank">Report an issue</a></li> <li><a href="https://git.viscogliosi-pate.com/jean/metamorpov/issues" target="_blank">Report an issue</a></li>
<li><a href="https://git.viscogliosi-pate.com/jean/metamorpov" target="_blank">Source code</a></li> <li><a href="https://git.viscogliosi-pate.com/jean/metamorpov" target="_blank">Source code</a></li>
</ul> </ul>
</body> </body>
</html> </html>

24
src/popup/popup.js
View File

@ -1,6 +1,5 @@
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'; MUTATION_OBSERVER_KEY = 'observe-this-dom-pls-interactive-fics-yalla-bina';
PAUSED_KEY = 'pause-this-domain-pls-interactive-fics-yalla-bina';
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
@ -9,15 +8,12 @@ document.addEventListener('DOMContentLoaded', function () {
document.getElementById('replace-other-words-form').addEventListener('submit', replaceOther) document.getElementById('replace-other-words-form').addEventListener('submit', replaceOther)
document.getElementById('show-saved').addEventListener('click', loadSaved) document.getElementById('show-saved').addEventListener('click', loadSaved)
document.getElementById('refresh-replacements').addEventListener('click', refreshReplacements) document.getElementById('refresh-replacements').addEventListener('click', refreshReplacements)
document.getElementById('deactivate').addEventListener('click', toggleDeactivate)
document.getElementById('enable-observer').addEventListener('click', toggleMutationObserver) document.getElementById('enable-observer').addEventListener('click', toggleMutationObserver)
document.getElementById('pause').addEventListener('click', togglePauseDomain) document.getElementById('toggle').addEventListener('click', togglePauseDomain)
// set settings buttons // set settings buttons
setDeactivateKey()
setMutationObserverKey() setMutationObserverKey()
setPauseDomainKey() setPauseDomainKey()
addToucanBanner()
}); });
@ -173,24 +169,6 @@ const togglePauseDomainLabel = (isPaused) => {
document.getElementById('pause').checked = isPaused; document.getElementById('pause').checked = isPaused;
} }
const toggleDeactivate = () => {
chrome.storage.sync.get(DEACTIVATE_KEY, obj => {
const was_deactivated = obj[DEACTIVATE_KEY]
toggleDeactivateLabel(!was_deactivated)
if (was_deactivated) {
chrome.storage.sync.remove(DEACTIVATE_KEY)
} else {
const new_object = {}
new_object[DEACTIVATE_KEY] = true
chrome.storage.sync.set(new_object)
}
chrome.tabs.reload()
window.close()
})
}
const toggleMutationObserver = () => { const toggleMutationObserver = () => {
chrome.storage.sync.get(MUTATION_OBSERVER_KEY, obj => { chrome.storage.sync.get(MUTATION_OBSERVER_KEY, obj => {
const was_enabled = obj[MUTATION_OBSERVER_KEY] const was_enabled = obj[MUTATION_OBSERVER_KEY]