Reworking select-all and default setting selection, + other styling, fixes, and cleanup

pull/311/head
Kevin Payravi 2023-11-03 04:20:45 -05:00
parent e91b6d7aaf
commit 1b2738838c
7 changed files with 375 additions and 364 deletions

View File

@ -95,13 +95,18 @@ function insertCSS() {
.iwb-notice button:hover {
outline: 1px solid !important;
}
.iwb-new-link {
.iwb-new-link-container {
display: inline-block;
font-size: 12px !important;
text-decoration: none;
padding-left: 5px;
position: relative;
}
.iwb-new-link {
display: inline-block;
text-decoration: none;
position: relative;
}
.iwb-new-link:hover {
text-decoration: none;
z-index: 9999999;
@ -145,20 +150,30 @@ function insertCSS() {
text-decoration: line-through !important;
}
.iwb-enable-result {
display: none;
padding: 2px 8px;
margin: 2px 8px;
cursor: pointer;
.iwb-result-controls {
display: inline-block;
margin: .5em;
font-size: 12px;
color: white !important;
border: 1px solid white;
border-radius: 10px;
mix-blend-mode: difference !important;
}
.iwb-disavow .iwb-enable-result {
.iwb-result-controls > div {
display: inline-block;
cursor: pointer;
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-thickness: 1px;
padding: 0 1em;
}
.iwb-notice .iwb-result-controls {
margin: 8px 0 0 0;
}
.iwb-notice .iwb-result-controls > div{
padding: .5em 1em 0 0;
}
`
style = document.createElement('style');
style.classList.add('iwb-styles');
@ -192,25 +207,27 @@ function replaceSearchResults(searchResultContainer, site, link) {
searchParams = 'start?do=search&q=' + article;
break;
}
newURL = 'https://' + site["destination_base_url"] + site["destination_content_path"] + searchParams;
newURL = 'https://' + site['destination_base_url'] + site['destination_content_path'] + searchParams;
} else {
newURL = 'https://' + site["destination_base_url"];
newURL = 'https://' + site['destination_base_url'];
}
if (searchResultContainer && !searchResultContainer.classList.contains('iwb-detected')) {
searchResultContainer.classList.add('iwb-detected');
var indieResultLink = document.createElement('a');
let indieContainer = document.createElement('div');
indieContainer.classList.add('iwb-new-link-container');
let indieResultLink = document.createElement('a');
indieResultLink.href = newURL;
indieResultLink.classList.add('iwb-new-link');
var indieResultButton = document.createElement('button');
var indieResultFaviconContainer = document.createElement('div');
var indieResultFavicon = document.createElement('img');
let indieResultButton = document.createElement('button');
let indieResultFaviconContainer = document.createElement('div');
let indieResultFavicon = document.createElement('img');
indieResultFavicon.alt = '';
indieResultFavicon.width = '12';
indieResultFavicon.height = '12';
indieResultFavicon.src = chrome.runtime.getURL('favicons/' + site.lang.toLowerCase() + '/' + site.destination_icon);
indieResultFaviconContainer.append(indieResultFavicon);
var indieResultText = document.createElement('span');
let indieResultText = document.createElement('span');
if (article) {
indieResultText.innerText = 'Look up "' + decodeURIComponent(decodeURIComponent(article.replaceAll('_', ' '))) + '" on ' + site.destination;
} else {
@ -219,17 +236,24 @@ function replaceSearchResults(searchResultContainer, site, link) {
indieResultButton.append(indieResultFaviconContainer);
indieResultButton.append(indieResultText);
indieResultLink.appendChild(indieResultButton);
indieContainer.appendChild(indieResultLink);
// Output container for result controls:
let resultControls = document.createElement('div');
resultControls.classList.add('iwb-result-controls');
// Output link to re-enable disabled result:
enableResult = document.createElement('div');
enableResult.classList.add('iwb-enable-result');
enableResult.innerText = 'Re-enable original result';
enableResult.addEventListener('click', function (e) {
let enableResultButton = document.createElement('div');
enableResultButton.innerText = 'Re-enable the result below';
resultControls.prepend(enableResultButton);
enableResultButton.addEventListener('click', function (e) {
e.target.closest('.iwb-disavow').classList.remove('iwb-disavow');
e.target.classList.add('iwb-hide');
});
searchResultContainer.prepend(enableResult);
searchResultContainer.prepend(indieResultLink);
indieContainer.appendChild(indieResultLink);
indieContainer.appendChild(resultControls);
searchResultContainer.prepend(indieContainer);
searchResultContainer.classList.add('iwb-disavow');
countFiltered++;
}
@ -259,12 +283,15 @@ function hideSearchResults(searchResultContainer, searchEngine, site) {
searchRemovalNotice.appendChild(searchRemovalNoticePosttext);
searchRemovalNotice.appendChild(linebreak);
// Output "show results" button
let showResultsButton = document.createElement('button');
showResultsButton.classList.add('iwb-show-results-button');
// Output container for result controls:
let resultControls = document.createElement('div');
resultControls.classList.add('iwb-result-controls');
// Output link to show hidden results:
let showResultsButton = document.createElement('div');
showResultsButton.setAttribute('data-group', 'iwb-search-result-' + elementId);
showResultsButton.textContent = 'Show filtered results';
searchRemovalNotice.appendChild(showResultsButton);
showResultsButton.innerText = 'Show filtered results';
resultControls.appendChild(showResultsButton)
showResultsButton.onclick = function (e) {
if (e.target.textContent.includes('Show')) {
e.target.textContent = 'Re-hide filtered results';
@ -283,27 +310,7 @@ function hideSearchResults(searchResultContainer, searchEngine, site) {
}
}
// Output "disable filtering" button
let disableFilterButton = document.createElement('button');
disableFilterButton.classList.add('iwb-disable-filtering-button');
disableFilterButton.textContent = 'Stop filtering ' + site.origin_group + ' in future searches';
disableFilterButton.style.border = '1px solid';
searchRemovalNotice.appendChild(disableFilterButton);
disableFilterButton.onclick = function (e) {
if (e.target.textContent.includes('Stop')) {
chrome.storage.sync.get({ 'searchEngineSettings': {} }, function (response) {
response.searchEngineSettings.get(site.id).set('action', 'disabled');
chrome.storage.sync.set({ 'searchEngineSettings': response.searchEngineSettings });
e.target.textContent = 'Re-enable filtering for ' + site.origin_group;
})
} else {
chrome.storage.sync.get({ 'searchEngineSettings': {} }, function (response) {
response.searchEngineSettings.get(site.id).set('action', 'hide');
chrome.storage.sync.set({ 'searchEngineSettings': response.searchEngineSettings });
e.target.textContent = 'Stop filtering ' + site.origin_group + ' in future searches';
})
}
}
searchRemovalNotice.appendChild(resultControls);
switch (searchEngine) {
case 'google':

View File

@ -142,12 +142,7 @@
<h2>Individual wiki settings help</h2>
<p>
In the individual settings section, you can configure your settings per-wiki.
<br />
<br />
The "Default settings for future wikis" options let you set the default behavior for wikis added to Indie Wiki Buddy in the future.
<br />
<br />
Below that is a list of all supported wikis. You can select what happens whenever you visit each listed non-indie wiki.
You can refer to the legend or hover over the icons to learn what each column controls.
</p>
<p>
The first set of radio buttons controls what happens when you visit the listed non-indie wikis.
@ -187,9 +182,9 @@
</li>
</ul>
<p>
In the table header, clicking on the icons will apply that setting to all wikis in the table.
In the second row, the stars represent the default settings for wikis that are added in future updates.
By default, all wikis will be set to alert, with search engine replacement enabled.
You can quickly change the settings for all wikis in the current language view by using the control
buttons above the list of wikis.
</p>
<h2>Have questions or feedback?</h2>
<p>

BIN
images/star-off.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
images/star-on.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

View File

@ -86,8 +86,8 @@
padding: 1em;
display: none;
}
#notificationBannerContainer span[style*="display: block"] + span[style*="display: block"]{
border-top: 1px solid #000;
#notificationBannerContainer span ~ span[style] {
border-top: 1px solid #005799;
}
/* POWER TOGGLE */

View File

@ -7,24 +7,6 @@
<link rel="icon" href="images/logo.png" />
<title>Indie Wiki Buddy settings</title>
<style>
#togglesKey > div {
position: relative;
}
#togglesKey > div:hover::after {
content: attr(data-title);
padding: 5px;
width: fit-content;
border: 1px solid #000;
position: absolute;
color: #fff;
background: #000;
z-index: 999999;
transform: translateX(calc(-100% - 24px));
opacity: 80%;
top: 30px;
}
/* ELEMENTS */
body {
max-width: 700px;
@ -84,18 +66,34 @@
}
fieldset>span {
margin: .4rem .8rem 0;
margin: .8rem 0 .4rem;
display: block;
}
legend {
margin-left: .5rem;
font-weight: 600;
}
/* CONTAINERS AND LAYOUT */
.container {
background: #fff;
}
.two-col {
display: flex;
flex-wrap: wrap;
gap: 1em;
padding-bottom: .5rem;
}
.two-col>div {
flex: 1;
}
@media (max-width: 600px) {
.two-col>div {
flex: 100%;
}
}
/* HEADER */
#header {
line-height: 1.5rem;
@ -155,13 +153,15 @@
font-size: .9em;
line-height: 1.3em;
}
#notificationBannerContainer span {
padding: .5rem 1rem;
display: none;
}
#notificationBannerContainer span ~ span[style] {
border-top: 1px solid #005799;
}
/* GLOBAL SETTINGS SECTION */
/* SETTINGS SECTION */
.options {
box-sizing: border-box;
padding-bottom: .5rem;
@ -169,34 +169,6 @@
width: 100%;
}
/* GLOBAL SETTING TOGGLES */
#power input {
height: 0;
width: 0;
margin: 0;
border: none;
appearance: none;
}
#power img {
margin-left: -8px;
}
.two-col {
display: flex;
flex-wrap: wrap;
gap: 1em;
padding-bottom: .5rem;
}
.two-col>div {
flex: 1;
}
@media (max-width: 600px) {
.two-col>div {
flex: 100%;
}
}
.settingToggle {
cursor: pointer;
width: fit-content;
@ -224,37 +196,14 @@
cursor: default;
}
/* WIKI CONTROLS */
#wikiControls {
margin: 0 auto;
padding-bottom: .5rem;
}
#wikiControls button {
background: #ffffff;
border: 1px solid #333333;
color: #333333;
border-radius: 5px;
padding: 3px 5px;
margin: 3px 5px;
}
#wikiControls button:hover {
cursor: pointer;
background: #005799;
border: 1px solid#005799;
color: #ffffff;
}
#wikiControls button:hover img {
filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(100%) contrast(100%);
}
#individualWikiSettings {
#legend {
text-align: center;
}
#individualWikiSettings legend {
text-align: left;
#legend div {
display: inline-flex;
align-items: center;
gap: 5px;
}
#langSelectContainer {
@ -267,31 +216,132 @@
white-space: nowrap;
position: relative;
}
.toggles img {
line-height: 1.2rem;
}
.toggles a img {
padding-right: .5rem;
}
.toggles span {
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.toggles label {
display: flex;
align-items: center;
}
.toggles>div:hover {
background-color: #e8f0fe;
}
.toggles input {
cursor: pointer;
margin: 0;
}
.toggles>div {
line-height: 2rem;
display: flex;
flex-direction: row;
padding: 0 1rem;
padding: 0 .5rem;
}
.toggles .inputsContainer {
display: flex;
float: right;
width: 150px;
justify-content: space-between;
}
.togglesHeader {
border-bottom: 1px solid #ccc;
background-color: #f5fbff;
}
.togglesHeader span {
text-align: right;
font-style: italic;
margin-right: 1em;
}
.togglesHeader img {
cursor: pointer;
}
.togglesHeader .inputsContainer img {
width: auto;
max-width: 17px;
height: auto;
max-height: 18px;
vertical-align: middle;
}
.togglesHeader .inputsContainer>div:nth-child(4),
.toggles>div>div>label:nth-child(4) {
padding-left: 5px;
border-left: 1px solid #ccc;
}
#toggles>div:hover {
background-color: #e8f0fe;
}
#togglesKeys {
position: sticky;
top: 0;
z-index: 999;
}
#togglesKeys button {
all: unset;
height: 18px;
display: block;
}
#togglesKeys button:focus {
outline: revert;
}
#togglesKeys .inputsContainer>div {
position: relative;
}
#togglesDefaults input[type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
#togglesDefaults input+label {
width: 100%;
height: 100%;
background-image: url('images/star-off.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-size: 18px;
}
#togglesDefaults input:checked+label {
background-image: url('images/star-on.png');
}
#togglesDefaults label {
cursor: pointer;
}
#togglesKeys .inputsContainer button:hover::after,
#togglesDefaults .inputsContainer label:hover::after {
content: attr(data-title);
padding: 5px;
width: fit-content;
border: 1px solid #000;
position: absolute;
color: #fff;
background: #000;
z-index: 999999;
transform: translateX(calc(-100% - 24px));
top: 30px;
}
#togglesColumnLabels>div>div {
display: flex;
width: 150px;
}
#togglesColumnLabels>div>div>div {
flex: 1 1 0;
font-weight: 600;
font-size: .9em;
white-space: break-spaces;
line-height: initial;
text-align: center;
}
.inputsContainer>label,
@ -301,45 +351,9 @@
text-align: center;
}
#togglesKey img {
width: auto;
max-width: 17px;
height: auto;
max-height: 18px;
vertical-align: middle;
}
.toggles img {
line-height: 1.2rem;
}
.toggles a img {
padding-right: .5rem;
}
.toggles span {
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
}
#defaultToggles {
border-bottom: 1px solid #ccc;
background-color: #f5fbff;
position: sticky;
top: 0;
z-index: 999;
}
#togglesKey>div:nth-child(3),
.toggles>div>div>label:nth-child(3) {
padding-right: .4rem;
}
#togglesKey>div:nth-child(4),
.toggles>div>div>label:nth-child(4) {
padding-left: .4rem;
border-left: 1px solid #333;
.inputsContainer label:nth-child(1) input,
.inputsContainer label:nth-child(4) input {
accent-color: #bc3c3c;
}
/* CONTROL CLASSES */
@ -414,20 +428,21 @@
Use the links above to see the full guide, submit new wikis, or contact the developer.
<br /><br />
In the settings below, you can toggle features on and off.
By default, search engine filtering and notifications when you are redirected are turned on.
You can also turn on <a href="https://breezewiki.com/" target="_blank">BreezeWiki</a>, which will render Fandom
wikis without ads or bloat.
This includes the option to enable <a href="https://breezewiki.com/" target="_blank">BreezeWiki</a>,
an alternative frontend that renders Fandom wikis without ads or bloat.
<br /><br />
Below that, you can configure what happens when you visit each Fandom and Fextralife wiki that has an
independent alternative.
This includes whether you want to be
independent alternative, as well as what happens to their results in search engines.
For visiting wikis, you can choose to be
<img src="images/toggle-alert.png" width="12" alt="" /> alerted (default)
or
<img src="images/toggle-redirect.png" width="12" alt="" />
automatically redirected.
You can also toggle whether you want to
<img src="images/toggle-search-filter.png" width="12" alt="" />
filter the non-indie wikis from search engines (on by default).
On search engines, you can choose to
<img src="images/toggle-replace.png" width="12" alt="" /> replace (default)
or
<img src="images/toggle-hide.png" width="12" alt="" /> hide
search results.
<br /><br />
You can access these settings in the future via the extension's icon
<img src="./images/logo-32.png" width="15" alt="icon of an arrow pointing to the right" />
@ -471,144 +486,138 @@
<select name="breezewikiHost" id="breezewikiHostSelect"></select>
</div>
</fieldset>
<div id="wikiControls">
<h2>Individual wiki settings</h2>
<fieldset id="defaultBehaviorSettings">
<legend>
<span aria-hidden="true">📥</span> Default settings for future wikis
</legend>
<div class="two-col">
<div>
<span class="text-sm">When visiting a Fandom or Fextralife wiki:</span>
<div class="settingToggle">
<label for="defaultWikiActionDisabledRadio">
<input id="defaultWikiActionDisabledRadio" type="radio" name="defaultWikiAction" value="disabled" />
<span id="defaultWikiActionDisabledText">
<img src="images/toggle-disabled.png" width="16" alt="" /> Do nothing
</span>
</label>
</div>
<div class="settingToggle">
<label for="defaultWikiActionRedirectRadio">
<input id="defaultWikiActionRedirectRadio" type="radio" name="defaultWikiAction" value="redirect" />
<span id="defaultWikiActionRedirectText">
<img src="images/toggle-redirect.png" width="16" alt="" /> Redirect to indie wiki
</span>
</label>
</div>
<div class="settingToggle">
<label for="defaultWikiActionAlertRadio">
<input id="defaultWikiActionAlertRadio" type="radio" name="defaultWikiAction" value="alert" />
<span id="defaultWikiActionAlertText">
<img src="images/toggle-alert.png" width="16" alt="" /> Display banner linking to indie wiki
</span>
</label>
</div>
</div>
<div>
<span class="text-sm">When using search engines:</span>
<div class="settingToggle">
<label for="defaultSearchActionDisabledRadio">
<input id="defaultSearchActionDisabledRadio" type="radio" name="defaultSearchAction"
value="disabled" />
<span id="defaultSearchActionDisabledText">
<img src="images/toggle-disabled.png" width="16" alt="" /> Do nothing
</span>
</label>
</div>
<div class="settingToggle">
<label for="defaultSearchActionHideRadio">
<input id="defaultSearchActionHideRadio" type="radio" name="defaultSearchAction" value="hide" />
<span id="defaultSearchActionHideText">
<img src="images/toggle-hide.png" width="16" alt="" /> Hide non-indie results
</span>
</label>
</div>
<div class="settingToggle">
<label for="defaultSearchActionReplaceRadio">
<input id="defaultSearchActionReplaceRadio" type="radio" name="defaultSearchAction"
value="replace" />
<span id="defaultSearchActionReplaceText">
<img src="images/toggle-replace.png" width="16" alt="" /> Replace non-indie results
</span>
</label>
</div>
</div>
</div>
<span class="text-sm">Tip: These settings are for wikis added in the future. To change settings for current wikis, use the settings below.</span>
</fieldset>
<fieldset id="individualWikiSettings">
<legend>
<span aria-hidden="true">🎛</span>
Change settings for all wikis displayed below
</legend>
<span class="text-sm">When visiting a Fandom or Fextralife wiki:</span>
<button id="setAllDisabled" type="button">
<img src="images/toggle-disabled.png" width="12" height="12" alt="" /> Do nothing
</button>
<button id="setAllRedirect" type="button">
<img src="images/toggle-redirect.png" width="12" height="12" alt="" /> Redirect to
indie wiki
</button>
<button id="setAllAlert" type="button">
<img src="images/toggle-alert.png" width="12" height="12" alt="" /> Display banner
linking to indie wiki
</button>
<br />
<span class="text-sm">When using search engines:</span>
<button id="setAllSearchEngineDisabled" type="button">
<img src="images/toggle-search-filter.png" width="12" height="12" alt="" /> Do nothing
</button>
<button id="setAllSearchEngineHide" type="button">
<img src="images/toggle-hide.png" width="12" height="12" alt="" /> Hide non-indie results
</button>
<button id="setAllSearchEngineReplace" type="button">
<img src="images/toggle-replace.png" width="12" height="12" alt="" /> Replace non-indie results
</button>
</fieldset>
<div id="langSelectContainer">
Filter wikis by language:&nbsp;
<select name="lang" id="langSelect">
<option value="ALL" selected>All languages</option>
<option value="DE">Deutsch (DE)</option>
<option value="EN">English (EN)</option>
<option value="ES">Español (ES)</option>
<option value="FR">Français (FR)</option>
<option value="IT">Italiano (IT)</option>
<option value="PL">Polski (PL)</option>
<option value="TOK">Toki Pona (TOK)</option>
</select>
<h2>Individual wiki settings</h2>
<fieldset id="legend">
<legend>
Legend
</legend>
<span class="text-sm">When visiting a Fandom or Fextralife wiki that has an independent alternative, Indie
Wiki Buddy can:</span>
<div>
<img src="images/toggle-disabled.png" width="18" height="18" alt="" /> Do nothing
</div>
<div>
<img src="images/toggle-alert.png" width="18" height="18" alt="" /> Display a banner
linking to indie wiki
</div>
<div>
<img src="images/toggle-redirect.png" width="18" height="18" alt="" /> Redirect to
indie wiki
</div>
<br />
<span class="text-sm">When using search engines, Indie Wiki Buddy can:</span>
<div>
<img src="images/toggle-disabled.png" width="18" height="18" alt="" /> Do nothing
</div>
<div>
<img src="images/toggle-replace.png" width="18" height="18" alt="" /> Replace non-indie results with links
to indie wikis
</div>
<div>
<img src="images/toggle-hide.png" width="18" height="18" alt="" /> Hide non-indie results when an
indie wiki is avialable
</div>
</fieldset>
<div id="langSelectContainer">
Filter wikis by language:&nbsp;
<select name="lang" id="langSelect">
<option value="ALL" selected>All languages</option>
<option value="DE">Deutsch (DE)</option>
<option value="EN">English (EN)</option>
<option value="ES">Español (ES)</option>
<option value="FR">Français (FR)</option>
<option value="IT">Italiano (IT)</option>
<option value="PL">Polski (PL)</option>
<option value="TOK">Toki Pona (TOK)</option>
</select>
</div>
<div id="defaultToggles" class="toggles">
<div id="togglesColumnLabels" class="toggles">
<div>
<span></span>
<div id="togglesKey" class="inputsContainer">
<div data-title="Do nothing when visiting non-indie wiki">
<img src="images/toggle-disabled.png" width="15" alt="Do nothing" />
<div>
<div>Wiki experience</div>
<div>Search experience</div>
</div>
</div>
</div>
<div id="togglesKeys" class="toggles togglesHeader">
<div>
<span>Click icon to set all wikis in column:</span>
<div class="inputsContainer">
<div>
<button id="setAllDisabled" type="button" data-title="Do nothing when visiting non-indie wiki">
<img src="images/toggle-disabled.png" width="18" alt="" />
</button>
</div>
<div data-title="Automatically redirect to indie wiki">
<img src="images/toggle-redirect.png" width="15" alt="Automatically redirect to indie wiki" />
<div>
<button id="setAllAlert" type="button" data-title="Show banner when indie wiki is available">
<img src="images/toggle-alert.png" width="18" alt="" />
</button>
</div>
<div data-title="Show banner when indie wiki is available">
<img src="images/toggle-alert.png" width="15"
alt="Show banner when indie wiki is available" />
<div>
<button id="setAllRedirect" type="button" data-title="Automatically redirect to indie wiki">
<img src="images/toggle-redirect.png" width="18" alt="Automatically redirect to indie wiki" />
</button>
</div>
<div data-title="Do nothing on search engines">
<img src="images/toggle-search-filter.png" width="15" alt="Do nothing" />
<div>
<button id="setAllSearchEngineDisabled" type="button" data-title="Do nothing on search engines">
<img src="images/toggle-disabled.png" width="18" alt="" />
</button>
</div>
<div data-title="Hide non-indie wiki from search results">
<img src="images/toggle-hide.png" width="15" alt="Hide non-indie wiki from search results" />
<div>
<button id="setAllSearchEngineReplace" type="button" data-title="Replace non-indie search results">
<img src="images/toggle-replace.png" width="18" alt="" />
</button>
</div>
<div data-title="Replace non-indie search results">
<img src="images/toggle-replace.png" width="15" alt="Replace non-indie search results" />
<div>
<button id="setAllSearchEngineHide" type="button" data-title="Hide non-indie wiki from search results">
<img src="images/toggle-hide.png" width="18" alt="" />
</button>
</div>
</div>
</div>
</div>
<div id="togglesDefaults" class="toggles togglesHeader">
<div>
<span>Default for new wikis in future updates:</span>
<div class="inputsContainer">
<div>
<input id="defaultWikiActionDisabledRadio" type="radio" name="defaultWikiAction" value="disabled"
title="Do nothing" />
<label data-title="Do nothing when visiting non-indie wiki"
for="defaultWikiActionDisabledRadio"></label>
</div>
<div>
<input id="defaultWikiActionAlertRadio" type="radio" name="defaultWikiAction" value="alert"
title="Display a banner linking to indie wiki" />
<label data-title="Show banner when indie wiki is available" for="defaultWikiActionAlertRadio"></label>
</div>
<div>
<input id="defaultWikiActionRedirectRadio" type="radio" name="defaultWikiAction" value="redirect"
title="Redirect to indie wiki" />
<label data-title="Automatically redirect to indie wiki" for="defaultWikiActionRedirectRadio"></label>
</div>
<div>
<input id="defaultSearchActionDisabledRadio" type="radio" name="defaultSearchAction" value="disabled"
title="Do nothing" />
<label data-title="Do nothing on search engines" for="defaultSearchActionDisabledRadio"></label>
</div>
<div>
<input id="defaultSearchActionReplaceRadio" type="radio" name="defaultSearchAction" value="replace"
title="Replace non-indie results" />
<label data-title="Replace non-indie search results" for="defaultSearchActionReplaceRadio"></label>
</div>
<div>
<input id="defaultSearchActionHideRadio" type="radio" name="defaultSearchAction" value="hide"
title="Hide non-indie results" />
<label data-title="Hide non-indie wiki from search results" for="defaultSearchActionHideRadio"></label>
</div>
</div>
</div>
</div>
<div id="toggles" class="toggles"></div>
</form>
<br />
<hr />
<div id="footer">
<h2>Fun Stats</h2>
Alerted to indie wikis <span id="countAlerts"></span> times

View File

@ -200,16 +200,6 @@ async function loadOptions(lang) {
inputDisabled.lang = sites[i].language;
inputDisabled.setAttribute('data-wiki-key', key);
// Create radio for redirecting wiki:
let labelRedirect = document.createElement("label");
let inputRedirect = document.createElement("input");
inputRedirect.classList = 'toggleRedirect';
inputRedirect.type = "radio";
inputRedirect.name = key + '-wiki-action';
inputRedirect.title = 'Automatically redirect ' + sites[i].origins_label + ' to ' + sites[i].destination;
inputRedirect.lang = sites[i].language;
inputRedirect.setAttribute('data-wiki-key', key);
// Create radio for inserting banner on wiki:
let labelAlert = document.createElement("label");
let inputAlert = document.createElement("input");
@ -220,6 +210,16 @@ async function loadOptions(lang) {
inputAlert.lang = sites[i].language;
inputAlert.setAttribute('data-wiki-key', key);
// Create radio for redirecting wiki:
let labelRedirect = document.createElement("label");
let inputRedirect = document.createElement("input");
inputRedirect.classList = 'toggleRedirect';
inputRedirect.type = "radio";
inputRedirect.name = key + '-wiki-action';
inputRedirect.title = 'Automatically redirect ' + sites[i].origins_label + ' to ' + sites[i].destination;
inputRedirect.lang = sites[i].language;
inputRedirect.setAttribute('data-wiki-key', key);
// Create radio for disabling action on search engines:
let labelSearchEngineDisabled = document.createElement("label");
let inputSearchEngineDisabled = document.createElement("input");
@ -230,16 +230,6 @@ async function loadOptions(lang) {
inputSearchEngineDisabled.lang = sites[i].language;
inputSearchEngineDisabled.setAttribute('data-wiki-key', key);
// Create radio for hiding results on search engines:
let labelSearchEngineHide = document.createElement("label");
let inputSearchEngineHide = document.createElement("input");
inputSearchEngineHide.classList = 'toggleSearchEngineHide';
inputSearchEngineHide.type = "radio";
inputSearchEngineHide.name = key + '-search-engine-action';
inputSearchEngineHide.title = 'Hide ' + sites[i].origins_label + ' from search engine results';
inputSearchEngineHide.lang = sites[i].language;
inputSearchEngineHide.setAttribute('data-wiki-key', key);
// Create radio for replacing results on search engines:
let labelSearchEngineReplace = document.createElement("label");
let inputSearchEngineReplace = document.createElement("input");
@ -250,6 +240,16 @@ async function loadOptions(lang) {
inputSearchEngineReplace.lang = sites[i].language;
inputSearchEngineReplace.setAttribute('data-wiki-key', key);
// Create radio for hiding results on search engines:
let labelSearchEngineHide = document.createElement("label");
let inputSearchEngineHide = document.createElement("input");
inputSearchEngineHide.classList = 'toggleSearchEngineHide';
inputSearchEngineHide.type = "radio";
inputSearchEngineHide.name = key + '-search-engine-action';
inputSearchEngineHide.title = 'Hide ' + sites[i].origins_label + ' from search engine results';
inputSearchEngineHide.lang = sites[i].language;
inputSearchEngineHide.setAttribute('data-wiki-key', key);
// Check radio buttons based on user's settings
if (siteSettings[key] && siteSettings[key].action) {
if (siteSettings[key].action === 'disabled') {
@ -298,10 +298,10 @@ async function loadOptions(lang) {
}
// Add listeners for when user clicks control:
inputRedirect.addEventListener('click', function (input) {
inputDisabled.addEventListener('click', function (input) {
chrome.storage.sync.get({ 'siteSettings': {} }, function (response) {
var key = input.target.getAttribute('data-wiki-key');
response.siteSettings.get(key).set('action', 'redirect');
response.siteSettings.get(key).set('action', 'disabled');
chrome.storage.sync.set({ 'siteSettings': response.siteSettings });
});
});
@ -312,10 +312,10 @@ async function loadOptions(lang) {
chrome.storage.sync.set({ 'siteSettings': response.siteSettings });
});
});
inputDisabled.addEventListener('click', function (input) {
inputRedirect.addEventListener('click', function (input) {
chrome.storage.sync.get({ 'siteSettings': {} }, function (response) {
var key = input.target.getAttribute('data-wiki-key');
response.siteSettings.get(key).set('action', 'disabled');
response.siteSettings.get(key).set('action', 'redirect');
chrome.storage.sync.set({ 'siteSettings': response.siteSettings });
});
});
@ -326,13 +326,6 @@ async function loadOptions(lang) {
chrome.storage.sync.set({ 'searchEngineSettings': response.searchEngineSettings });
});
});
inputSearchEngineHide.addEventListener('click', function (input) {
chrome.storage.sync.get({ 'searchEngineSettings': {} }, function (response) {
var key = input.target.getAttribute('data-wiki-key');
response.searchEngineSettings.get(key).set('action', 'hide');
chrome.storage.sync.set({ 'searchEngineSettings': response.searchEngineSettings });
});
});
inputSearchEngineReplace.addEventListener('click', function (input) {
chrome.storage.sync.get({ 'searchEngineSettings': {} }, function (response) {
var key = input.target.getAttribute('data-wiki-key');
@ -340,6 +333,13 @@ async function loadOptions(lang) {
chrome.storage.sync.set({ 'searchEngineSettings': response.searchEngineSettings });
});
});
inputSearchEngineHide.addEventListener('click', function (input) {
chrome.storage.sync.get({ 'searchEngineSettings': {} }, function (response) {
var key = input.target.getAttribute('data-wiki-key');
response.searchEngineSettings.get(key).set('action', 'hide');
chrome.storage.sync.set({ 'searchEngineSettings': response.searchEngineSettings });
});
});
// Output wiki disable radio button:
let inputDisabledText = document.createElement('span');
@ -348,13 +348,6 @@ async function loadOptions(lang) {
labelDisabled.appendChild(inputDisabled);
labelDisabled.appendChild(inputDisabledText);
// Output wiki redirect radio button:
let inputRedirectText = document.createElement('span');
inputRedirectText.classList.add('visuallyHidden');
inputRedirectText.textContent = 'Automatically redirect ' + sites[i].origins_label + ' to ' + sites[i].destination;
labelRedirect.appendChild(inputRedirect);
labelRedirect.appendChild(inputRedirectText);
// Output wiki alert radio button:
let inputAlertText = document.createElement('span');
inputAlertText.classList.add('visuallyHidden');
@ -362,6 +355,13 @@ async function loadOptions(lang) {
labelAlert.appendChild(inputAlert);
labelAlert.appendChild(inputAlertText);
// Output wiki redirect radio button:
let inputRedirectText = document.createElement('span');
inputRedirectText.classList.add('visuallyHidden');
inputRedirectText.textContent = 'Automatically redirect ' + sites[i].origins_label + ' to ' + sites[i].destination;
labelRedirect.appendChild(inputRedirect);
labelRedirect.appendChild(inputRedirectText);
// Output search engine disable radio button:
let inputSearchEngineDisabledText = document.createElement('span');
inputSearchEngineDisabledText.classList.add('visuallyHidden');
@ -369,13 +369,6 @@ async function loadOptions(lang) {
labelSearchEngineDisabled.appendChild(inputSearchEngineDisabled);
labelSearchEngineDisabled.appendChild(inputSearchEngineDisabledText);
// Output search engine hide radio button:
let inputSearchEngineHideText = document.createElement('span');
inputSearchEngineHideText.classList.add('visuallyHidden');
inputSearchEngineHideText.textContent = 'Hide ' + sites[i].origins_label + ' from search engines';
labelSearchEngineHide.appendChild(inputSearchEngineHide);
labelSearchEngineHide.appendChild(inputSearchEngineHideText);
// Output search engine replace radio button:
let inputSearchEngineReplaceText = document.createElement('span');
inputSearchEngineReplaceText.classList.add('visuallyHidden');
@ -383,6 +376,13 @@ async function loadOptions(lang) {
labelSearchEngineReplace.appendChild(inputSearchEngineReplace);
labelSearchEngineReplace.appendChild(inputSearchEngineReplaceText);
// Output search engine hide radio button:
let inputSearchEngineHideText = document.createElement('span');
inputSearchEngineHideText.classList.add('visuallyHidden');
inputSearchEngineHideText.textContent = 'Hide ' + sites[i].origins_label + ' from search engines';
labelSearchEngineHide.appendChild(inputSearchEngineHide);
labelSearchEngineHide.appendChild(inputSearchEngineHideText);
// Output wiki info:
let wikiInfo = document.createElement('span');
let wikiLink = document.createElement("a");
@ -407,11 +407,11 @@ async function loadOptions(lang) {
// Output inputs container:
let inputsContainer = document.createElement('div');
inputsContainer.appendChild(labelDisabled);
inputsContainer.appendChild(labelRedirect);
inputsContainer.appendChild(labelAlert);
inputsContainer.appendChild(labelRedirect);
inputsContainer.appendChild(labelSearchEngineDisabled);
inputsContainer.appendChild(labelSearchEngineHide);
inputsContainer.appendChild(labelSearchEngineReplace);
inputsContainer.appendChild(labelSearchEngineHide);
inputsContainer.classList = 'inputsContainer';
siteContainer.appendChild(wikiInfo);
siteContainer.appendChild(inputsContainer);