Adding control options to banner

pull/161/head
Kevin Payravi 2023-06-25 21:49:04 -04:00
parent c9fb6e4f05
commit c1fc40217e
1 changed files with 129 additions and 23 deletions

View File

@ -55,38 +55,144 @@ async function getData() {
return sites; return sites;
} }
function displayRedirectBanner(url, destination, storage) { function displayRedirectBanner(url, id, destination, storage) {
// Output CSS
styleString = `
#indie-wiki-banner {
font-size: 18px;
font-family: sans-serif;
width: 100%;
z-index: 2147483647;
position: fixed;
text-align: center;
background-color: #acdae2;
min-height: 40px;
line-height: 28px;
padding: 5px 10px;
}
#indie-wiki-banner-exit {
float: right;
font-size: 1.5em;
color: #333;
cursor: pointer;
}
.indie-wiki-banner-link {
color: navy;
font-weight: 600;
cursor: pointer;
padding: 0 10px;
display: block;
width: fit-content;
margin: 0 auto;
}
.indie-wiki-banner-link:hover {
text-decoration: underline;
}
.indie-wiki-banner-link-small {
display: inline-block;
font-size: .7em;
min-width: 180px;
}
.indie-wiki-banner-disabled {
color: #333;
cursor: default;
}
.indie-wiki-banner-disabled:hover {
text-decoration: none;
}
.indie-wiki-banner-hidden {
display: none;
}
`
style = document.createElement('style');
style.textContent = styleString;
document.head.append(style);
// Output banner // Output banner
var banner = document.createElement('div'); var banner = document.createElement('div');
banner.id = 'indie-wiki-banner'; banner.id = 'indie-wiki-banner';
banner.style.fontSize = '18px';
banner.style.fontFamily = 'sans-serif';
banner.style.width = '100%';
banner.style.zIndex = '2147483647';
banner.style.position = 'fixed';
banner.style.textAlign = 'center';
banner.style.backgroundColor = '#acdae2';
banner.style.minHeight = '40px';
banner.style.lineHeight = '40px';
var bannerExit = document.createElement('div'); var bannerExit = document.createElement('div');
bannerExit.id = 'indie-wiki-banner-exit';
banner.appendChild(bannerExit); banner.appendChild(bannerExit);
bannerExit.style.float = 'right';
bannerExit.style.paddingRight = '10px';
bannerExit.style.fontSize = '1.5em';
bannerExit.style.color = '#333';
bannerExit.style.cursor = 'pointer';
bannerExit.innerText = '✕'; bannerExit.innerText = '✕';
bannerExit.onclick = function () { this.parentElement.remove(); }; bannerExit.onclick = function () { this.parentElement.remove(); };
// Output "restore banner" link
var bannerRestoreLink = document.createElement('div');
bannerRestoreLink.id = 'indie-wiki-banner-restore';
bannerRestoreLink.classList.add('indie-wiki-banner-link');
bannerRestoreLink.classList.add('indie-wiki-banner-link-small');
bannerRestoreLink.classList.add('indie-wiki-banner-hidden');
bannerRestoreLink.innerText = '⎌ Restore banner';
banner.appendChild(bannerRestoreLink);
bannerRestoreLink.onclick = function (e) {
chrome.storage.sync.get({ 'siteSettings': {} }, function (response) {
response.siteSettings.get(id).set('action', 'alert');
chrome.storage.sync.set({ 'siteSettings': response.siteSettings });
e.target.innerText = '✓ Banner restored';
e.target.classList.add('indie-wiki-banner-disabled');
document.getElementById('indie-wiki-banner-redirect').innerText = '↪ Auto redirect this wiki';
document.getElementById('indie-wiki-banner-redirect').classList.remove('indie-wiki-banner-disabled');
document.getElementById('indie-wiki-banner-disable').innerText = '✕ Disable banner for this wiki';
document.getElementById('indie-wiki-banner-disable').classList.remove('indie-wiki-banner-disabled');
});
}
// Output "disable banner" link
var bannerDisableLink = document.createElement('div');
bannerDisableLink.id = 'indie-wiki-banner-disable';
bannerDisableLink.classList.add('indie-wiki-banner-link');
bannerDisableLink.classList.add('indie-wiki-banner-link-small');
bannerDisableLink.innerText = '✕ Disable banner for this wiki'
banner.appendChild(bannerDisableLink);
bannerDisableLink.onclick = function (e) {
chrome.storage.sync.get({ 'siteSettings': {} }, function (response) {
response.siteSettings.get(id).set('action', 'disabled');
chrome.storage.sync.set({ 'siteSettings': response.siteSettings });
e.target.innerText = '✓ Banner disabled';
e.target.classList.add('indie-wiki-banner-disabled');
document.getElementById('indie-wiki-banner-redirect').innerText = '↪ Auto redirect this wiki';
document.getElementById('indie-wiki-banner-redirect').classList.remove('indie-wiki-banner-disabled');
document.getElementById('indie-wiki-banner-restore').innerText = '⎌ Restore banner';
document.getElementById('indie-wiki-banner-restore').classList.remove('indie-wiki-banner-hidden');
document.getElementById('indie-wiki-banner-restore').classList.remove('indie-wiki-banner-disabled');
});
}
// Output "auto redirect" link
var bannerRedirectLink = document.createElement('div');
bannerRedirectLink.id = 'indie-wiki-banner-redirect';
bannerRedirectLink.classList.add('indie-wiki-banner-link');
bannerRedirectLink.classList.add('indie-wiki-banner-link-small');
bannerRedirectLink.innerText = '↪ Auto redirect this wiki';
banner.appendChild(bannerRedirectLink);
bannerRedirectLink.onclick = function (e) {
chrome.storage.sync.get({ 'siteSettings': {} }, function (response) {
response.siteSettings.get(id).set('action', 'redirect');
chrome.storage.sync.set({ 'siteSettings': response.siteSettings });
e.target.innerText = '✓ Redirect enabled';
e.target.classList.add('indie-wiki-banner-disabled');
document.getElementById('indie-wiki-banner-disable').innerText = '✕ Disable banner for this wiki';
document.getElementById('indie-wiki-banner-disable').classList.remove('indie-wiki-banner-disabled');
document.getElementById('indie-wiki-banner-restore').innerText = '⎌ Restore banner';
document.getElementById('indie-wiki-banner-restore').classList.remove('indie-wiki-banner-hidden');
document.getElementById('indie-wiki-banner-restore').classList.remove('indie-wiki-banner-disabled');
});
}
banner.appendChild(document.createElement('br'));
// Output main banner text
var bannerText = document.createElement('span'); var bannerText = document.createElement('span');
banner.appendChild(bannerText); banner.appendChild(bannerText);
bannerText.textContent = 'There is an independent wiki covering this topic!' bannerText.textContent = 'There is an independent wiki covering this topic!'
bannerText.appendChild(document.createElement('br')); var bannerWikiLink = document.createElement('a');
var bannerLink = document.createElement('a'); bannerWikiLink.classList.add('indie-wiki-banner-link');
bannerText.appendChild(bannerLink); bannerText.appendChild(bannerWikiLink);
bannerLink.href = url; bannerWikiLink.href = url;
bannerLink.style.color = 'navy'; bannerWikiLink.innerText = 'Visit ' + destination + ' →';
bannerLink.style.fontWeight = '600';
bannerLink.innerText = 'Visit ' + destination + '→'; // Increment stats
if (document.readyState === 'interactive' || document.readyState === 'complete') { if (document.readyState === 'interactive' || document.readyState === 'complete') {
document.body.insertAdjacentElement('beforeBegin', banner); document.body.insertAdjacentElement('beforeBegin', banner);
if (storage.breezewiki === 'on') { if (storage.breezewiki === 'on') {
@ -276,7 +382,7 @@ function main(mutations = null, observer = null) {
newURL = 'https://' + site["destination_base_url"]; newURL = 'https://' + site["destination_base_url"];
} }
// Notify that another wiki is available // Notify that another wiki is available
displayRedirectBanner(newURL, site['destination'], storage); displayRedirectBanner(newURL, site['id'], site['destination'], storage);
} }
} }
} }