In popup, adding default behavior options + using fieldsets
parent
7e73b85f57
commit
d144dd830b
222
popup.html
222
popup.html
|
@ -43,6 +43,41 @@
|
||||||
margin: 1em 0;
|
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 {
|
#openSettingsContainer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -53,8 +88,8 @@
|
||||||
border: 1px solid #333333;
|
border: 1px solid #333333;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: .5em;
|
padding: .4em;
|
||||||
margin: 0 .5em .5em .5em;
|
margin: .5em;
|
||||||
font-size: 1.3em;
|
font-size: 1.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -90,7 +125,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#notificationBannerContainer span {
|
#notificationBannerContainer span {
|
||||||
padding: 1em;
|
padding: .5rem 1rem;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -139,8 +174,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#links {
|
#links {
|
||||||
text-align: center;
|
background-color: #e5f4ff;
|
||||||
margin-bottom: .5em;
|
padding: .5rem 1rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* GLOBAL SETTINGS SECTION */
|
/* GLOBAL SETTINGS SECTION */
|
||||||
|
@ -151,10 +186,6 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.options .settingToggleContainer {
|
|
||||||
padding-bottom: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.options .settingToggleContainer:last-child {
|
.options .settingToggleContainer:last-child {
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
|
@ -163,6 +194,12 @@
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.radioGroup {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
/* GLOBAL SETTING TOGGLES */
|
/* GLOBAL SETTING TOGGLES */
|
||||||
.settingToggle {
|
.settingToggle {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -183,7 +220,6 @@
|
||||||
#breezewikiHost {
|
#breezewikiHost {
|
||||||
display: none;
|
display: none;
|
||||||
padding-left: 3em;
|
padding-left: 3em;
|
||||||
padding-top: 0.8em;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
@ -198,66 +234,16 @@
|
||||||
</div>
|
</div>
|
||||||
<h1>Indie Wiki Buddy</h1>
|
<h1>Indie Wiki Buddy</h1>
|
||||||
</div>
|
</div>
|
||||||
<div id="content">
|
<div id="links">
|
||||||
<div class="options">
|
<a href="guide.html">Guide</a>
|
||||||
<div class="settingToggleContainer">
|
|
||||||
<div class="settingToggle">
|
<a href="https://getindie.wiki" target="_blank">Website</a>
|
||||||
<label>
|
|
||||||
<input id="notificationsCheckbox" type="checkbox" />
|
<a href="https://getindie.wiki/changelog/" target="_blank">Changelog</a>
|
||||||
<span id="notificationsIcon" aria-hidden="true"></span>
|
|
||||||
Desktop notifications for
|
<a href="https://getindie.wiki/#submit" target="_blank">Submit a Wiki</a>
|
||||||
redirections
|
|
||||||
</label>
|
<a href="https://github.com/KevinPayravi/indie-wiki-buddy" target="_blank">Source Code</a>
|
||||||
</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>
|
</div>
|
||||||
<div id="notificationBannerContainer">
|
<div id="notificationBannerContainer">
|
||||||
<span id="notificationBannerChromeBug">
|
<span id="notificationBannerChromeBug">
|
||||||
|
@ -274,6 +260,102 @@
|
||||||
<a id="operaPermsHideLink" href="#">Hide this message</a>
|
<a id="operaPermsHideLink" href="#">Hide this message</a>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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>
|
</body>
|
||||||
<script type="text/javascript" src="popup.js"></script>
|
<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
|
// Set power setting
|
||||||
function setPower(setting) {
|
function setPower(setting) {
|
||||||
chrome.storage.local.set({ 'power': 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
|
// Populate BreezeWiki dropdown when enabled
|
||||||
async function loadBreezeWikiOptions() {
|
async function loadBreezeWikiOptions() {
|
||||||
// Load BreezeWiki options:
|
// 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
|
// Set BreezeWiki settings
|
||||||
function setBreezeWiki(setting, storeSetting = true) {
|
function setBreezeWiki(setting, storeSetting = true) {
|
||||||
if (storeSetting) {
|
if (storeSetting) {
|
||||||
|
@ -326,4 +365,28 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||||
breezewikiHostSelect.addEventListener('change', function () {
|
breezewikiHostSelect.addEventListener('change', function () {
|
||||||
chrome.storage.sync.set({ 'breezewikiHost': breezewikiHostSelect.value });
|
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>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div id="breezewikiHost" class="settingToggle">
|
<div id="breezewikiHost" class="settingToggle">
|
||||||
<label for="breezewikiHostSelect">BreezeWiki host: </label>
|
<label>
|
||||||
<select name="breezewikiHost" id="breezewikiHostSelect"></select>
|
BreezeWiki host:
|
||||||
|
<select name="breezewikiHost" id="breezewikiHostSelect"></select>
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<h2>Individual wiki settings</h2>
|
<h2>Individual wiki settings</h2>
|
||||||
|
|
Loading…
Reference in New Issue