In popup, adding default behavior options + using fieldsets
Kevin Payravi
parent
7e73b85f57
commit
d144dd830b
222
popup.html
222
popup.html
|
|
@ -43,6 +43,41 @@
|
|||
margin: 1em 0;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
background-color: #f5fbff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
padding: 3px 0 8px 0;
|
||||
margin: 0;
|
||||
margin-bottom: .5em;
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
fieldset+fieldset {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
fieldset>div {
|
||||
margin: .4rem .5rem;
|
||||
}
|
||||
|
||||
fieldset>span {
|
||||
margin: .8rem 0 .4rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: .85em;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#openSettingsContainer {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
|
@ -53,8 +88,8 @@
|
|||
border: 1px solid #333333;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
padding: .5em;
|
||||
margin: 0 .5em .5em .5em;
|
||||
padding: .4em;
|
||||
margin: .5em;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
|
|
@ -90,7 +125,7 @@
|
|||
}
|
||||
|
||||
#notificationBannerContainer span {
|
||||
padding: 1em;
|
||||
padding: .5rem 1rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -139,8 +174,8 @@
|
|||
}
|
||||
|
||||
#links {
|
||||
text-align: center;
|
||||
margin-bottom: .5em;
|
||||
background-color: #e5f4ff;
|
||||
padding: .5rem 1rem 0;
|
||||
}
|
||||
|
||||
/* GLOBAL SETTINGS SECTION */
|
||||
|
|
@ -151,10 +186,6 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.options .settingToggleContainer {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.options .settingToggleContainer:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
|
@ -163,6 +194,12 @@
|
|||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.radioGroup {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
/* GLOBAL SETTING TOGGLES */
|
||||
.settingToggle {
|
||||
cursor: pointer;
|
||||
|
|
@ -183,7 +220,6 @@
|
|||
#breezewikiHost {
|
||||
display: none;
|
||||
padding-left: 3em;
|
||||
padding-top: 0.8em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -198,66 +234,16 @@
|
|||
</div>
|
||||
<h1>Indie Wiki Buddy</h1>
|
||||
</div>
|
||||
<div id="content">
|
||||
<div class="options">
|
||||
<div class="settingToggleContainer">
|
||||
<div class="settingToggle">
|
||||
<label>
|
||||
<input id="notificationsCheckbox" type="checkbox" />
|
||||
<span id="notificationsIcon" aria-hidden="true"></span>
|
||||
Desktop notifications for
|
||||
redirections
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settingToggleContainer">
|
||||
<div class="settingToggle">
|
||||
<label>
|
||||
<input id="crossLanguageCheckbox" type="checkbox" />
|
||||
<span id="crossLanguageIcon" aria-hidden="true"></span>
|
||||
Redirect non-English Fandom/Fextralife wikis to
|
||||
English indie wikis when no same-language wiki exists
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settingToggleContainer">
|
||||
<div class="settingToggle">
|
||||
<label>
|
||||
<input id="breezewikiCheckbox" type="checkbox" />
|
||||
🌬️ Use BreezeWiki on Fandom (English only)
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
(<a href="https://breezewiki.com/" target="_blank">learn more</a>)
|
||||
</div>
|
||||
<div class="settingToggleContainer">
|
||||
<div id="breezewikiHost" class="settingToggle">
|
||||
<label for="breezewikiHostSelect">BreezeWiki host: </label>
|
||||
<select name="breezewikiHost" id="breezewikiHostSelect"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div id="openSettingsContainer">
|
||||
<button id="openSettings">
|
||||
View All Settings
|
||||
</button>
|
||||
<br />
|
||||
View all settings to configure your options per-wiki.
|
||||
</div>
|
||||
<hr />
|
||||
<div id="links">
|
||||
<a href="guide.html" target="_blank">Guide</a>
|
||||
|
||||
<a href="https://getindie.wiki/#guide" target="_blank">Website</a>
|
||||
|
||||
<a href="https://getindie.wiki/changelog/" target="_blank">Changelog</a>
|
||||
|
||||
<a href="https://getindie.wiki/#submit" target="_blank">Submit a Wiki</a>
|
||||
|
||||
<a href="https://github.com/KevinPayravi/indie-wiki-buddy" target="_blank">Source Code</a>
|
||||
</div>
|
||||
<div id="links">
|
||||
<a href="guide.html">Guide</a>
|
||||
|
||||
<a href="https://getindie.wiki" target="_blank">Website</a>
|
||||
|
||||
<a href="https://getindie.wiki/changelog/" target="_blank">Changelog</a>
|
||||
|
||||
<a href="https://getindie.wiki/#submit" target="_blank">Submit a Wiki</a>
|
||||
|
||||
<a href="https://github.com/KevinPayravi/indie-wiki-buddy" target="_blank">Source Code</a>
|
||||
</div>
|
||||
<div id="notificationBannerContainer">
|
||||
<span id="notificationBannerChromeBug">
|
||||
|
|
@ -274,6 +260,102 @@
|
|||
<a id="operaPermsHideLink" href="#">Hide this message</a>
|
||||
</span>
|
||||
</div>
|
||||
<div id="content">
|
||||
<form name="options" class="options">
|
||||
<fieldset id="defaultSettings">
|
||||
<legend><span aria-hidden="true">⚙️</span> Default behaviors (apply to all current and new wikis in future updates)</legend>
|
||||
<div class="settingToggleContainer" role="radiogroup" aria-labelledby="defaultWikiActionLabel">
|
||||
<span id="defaultWikiActionLabel">Default behavior when visiting a Fandom/Fextralife wiki:</span>
|
||||
<div class="radioGroup">
|
||||
<label>
|
||||
<input id="defaultWikiActionDisabledRadio" type="radio" name="defaultWikiAction" value="disabled" />
|
||||
<img src="images/toggle-disabled.png" height="12" alt="" />
|
||||
Do nothing
|
||||
</label>
|
||||
<label>
|
||||
<input id="defaultWikiActionAlertRadio" type="radio" name="defaultWikiAction" value="alert" />
|
||||
<img src="images/toggle-alert.png" height="12" alt="" />
|
||||
Display a banner linking to indie wiki
|
||||
</label>
|
||||
<label>
|
||||
<input id="defaultWikiActionRedirectRadio" type="radio" name="defaultWikiAction" value="redirect" />
|
||||
<img src="images/toggle-redirect.png" height="12" alt="" />
|
||||
Redirect to indie wiki
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settingToggleContainer" role="radiogroup" aria-labelledby="defaultSearchActionLabel">
|
||||
<span id="defaultSearchActionLabel">Default behavior on search engines:</span>
|
||||
<div class="radioGroup">
|
||||
<label>
|
||||
<input id="defaultSearchActionDisabledRadio" type="radio" name="defaultSearchAction" value="disabled" />
|
||||
<img src="images/toggle-disabled.png" height="12" alt="" />
|
||||
Do nothing
|
||||
</label>
|
||||
<label>
|
||||
<input id="defaultSearchActionAlertRadio" type="radio" name="defaultSearchAction" value="replace" />
|
||||
<img src="images/toggle-replace.png" height="12" alt="" />
|
||||
Replace non-indie results
|
||||
</label>
|
||||
<label>
|
||||
<input id="defaultSearchActionRedirectRadio" type="radio" name="defaultSearchAction" value="hide" />
|
||||
<img src="images/toggle-hide.png" height="12" alt="" />
|
||||
Hide non-indie results
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
View <a href="settings.html" target="_blank">all settings</a> to change behavior per-wiki.
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset id="generalSettings">
|
||||
<legend><span aria-hidden="true">⚙️</span> General settings</legend>
|
||||
<div class="settingToggle">
|
||||
<label>
|
||||
<input id="notificationsCheckbox" type="checkbox" />
|
||||
<span id="notificationsIcon" aria-hidden="true"></span>
|
||||
Desktop notifications for
|
||||
redirections
|
||||
</label>
|
||||
</div>
|
||||
<div class="settingToggle">
|
||||
<label>
|
||||
<input id="crossLanguageCheckbox" type="checkbox" />
|
||||
<span id="crossLanguageIcon" aria-hidden="true"></span>
|
||||
Redirect non-English Fandom/Fextralife wikis to
|
||||
English wikis when no same-language wiki exists
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset id="breezewikiSettings">
|
||||
<legend>
|
||||
<span aria-hidden="true">༄</span> BreezeWiki settings (<a href="https://breezewiki.com/"
|
||||
target="_blank">learn more</a>)
|
||||
</legend>
|
||||
<div class="settingToggle">
|
||||
<label>
|
||||
<input id="breezewikiCheckbox" type="checkbox" />
|
||||
Use BreezeWiki alternative frontend on Fandom (English only)
|
||||
</label>
|
||||
</div>
|
||||
<div id="breezewikiHost" class="settingToggle">
|
||||
<label>
|
||||
BreezeWiki host:
|
||||
<select name="breezewikiHost" id="breezewikiHostSelect"></select>
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
<div id="openSettingsContainer">
|
||||
<button id="openSettings">
|
||||
View All Settings
|
||||
</button>
|
||||
<br />
|
||||
<span class="text-sm">
|
||||
View all settings to configure your options per-wiki.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script type="text/javascript" src="popup.js"></script>
|
||||
|
||||
|
|
|
|||
63
popup.js
63
popup.js
|
|
@ -1,3 +1,5 @@
|
|||
const LANGS = ["DE", "EN", "ES", "FR", "IT", "PL", "TOK"];
|
||||
|
||||
// Set power setting
|
||||
function setPower(setting) {
|
||||
chrome.storage.local.set({ 'power': setting });
|
||||
|
|
@ -11,6 +13,22 @@ function setPower(setting) {
|
|||
});
|
||||
}
|
||||
|
||||
// Get wiki data from data folder
|
||||
async function getData() {
|
||||
var sites = [];
|
||||
let promises = [];
|
||||
for (let i = 0; i < LANGS.length; i++) {
|
||||
promises.push(fetch(chrome.runtime.getURL('data/sites' + LANGS[i] + '.json'))
|
||||
.then((resp) => resp.json())
|
||||
.then(function (jsonData) {
|
||||
jsonData.forEach((site) => site.language = LANGS[i]);
|
||||
sites = sites.concat(jsonData);
|
||||
}));
|
||||
}
|
||||
await Promise.all(promises);
|
||||
return sites;
|
||||
}
|
||||
|
||||
// Populate BreezeWiki dropdown when enabled
|
||||
async function loadBreezeWikiOptions() {
|
||||
// Load BreezeWiki options:
|
||||
|
|
@ -164,6 +182,27 @@ function setCrossLanguage(setting, storeSetting = true) {
|
|||
}
|
||||
}
|
||||
|
||||
// Set default action setting
|
||||
chrome.storage.sync.get(['defaultWikiAction'], function (item) {
|
||||
if (item.defaultWikiAction === 'disabled') {
|
||||
document.options.defaultWikiAction.value = 'disabled';
|
||||
} else if (item.defaultWikiAction === 'redirect') {
|
||||
document.options.defaultWikiAction.value = 'redirect';
|
||||
} else {
|
||||
document.options.defaultWikiAction.value = 'alert';
|
||||
}
|
||||
});
|
||||
// Set default search engine setting
|
||||
chrome.storage.sync.get(['defaultSearchAction'], function (item) {
|
||||
if (item.defaultSearchAction === 'disabled') {
|
||||
document.options.defaultSearchAction.value = 'disabled';
|
||||
} else if (item.defaultSearchAction === 'hide') {
|
||||
document.options.defaultSearchAction.value = 'hide';
|
||||
} else {
|
||||
document.options.defaultSearchAction.value = 'replace';
|
||||
}
|
||||
});
|
||||
|
||||
// Set BreezeWiki settings
|
||||
function setBreezeWiki(setting, storeSetting = true) {
|
||||
if (storeSetting) {
|
||||
|
|
@ -326,4 +365,28 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
breezewikiHostSelect.addEventListener('change', function () {
|
||||
chrome.storage.sync.set({ 'breezewikiHost': breezewikiHostSelect.value });
|
||||
});
|
||||
document.querySelectorAll('[name="defaultWikiAction"]').forEach((el) => {
|
||||
el.addEventListener('change', async function () {
|
||||
chrome.storage.sync.set({ 'defaultWikiAction': document.options.defaultWikiAction.value })
|
||||
|
||||
let wikiSettings = {};
|
||||
sites = await getData();
|
||||
sites.forEach((site) => {
|
||||
wikiSettings[site.id] = document.options.defaultWikiAction.value;
|
||||
});
|
||||
chrome.storage.sync.set({ 'wikiSettings': wikiSettings });
|
||||
});
|
||||
});
|
||||
document.querySelectorAll('[name="defaultSearchAction"]').forEach((el) => {
|
||||
el.addEventListener('change', async function () {
|
||||
chrome.storage.sync.set({ 'defaultSearchAction': document.options.defaultSearchAction.value })
|
||||
|
||||
let searchEngineSettings = {};
|
||||
sites = await getData();
|
||||
sites.forEach((site) => {
|
||||
searchEngineSettings[site.id] = document.options.defaultSearchAction.value;
|
||||
});
|
||||
chrome.storage.sync.set({ 'searchEngineSettings': searchEngineSettings });
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -517,8 +517,10 @@
|
|||
</label>
|
||||
</div>
|
||||
<div id="breezewikiHost" class="settingToggle">
|
||||
<label for="breezewikiHostSelect">BreezeWiki host: </label>
|
||||
<select name="breezewikiHost" id="breezewikiHostSelect"></select>
|
||||
<label>
|
||||
BreezeWiki host:
|
||||
<select name="breezewikiHost" id="breezewikiHostSelect"></select>
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<h2>Individual wiki settings</h2>
|
||||
|
|
|
|||
Loading…
Reference in New Issue