Skip to content

Commit

Permalink
Merge branch 'feature/sitelist-management' into 2.1.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@aajfranklin
aajfranklin committed May 17, 2020
2 parents 3c59b11 + c5d02e5 commit f11c9fd
Show file tree
Hide file tree
Showing 7 changed files with 1,012 additions and 341 deletions.
173 changes: 125 additions & 48 deletions scripts/popup/popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,31 @@ function Popup() {
this.utils = new Utils();
this.tab = null;

this.loadSiteList = () => {
return this.getSites()
.then(sites => {
let siteListHTML = '<ul>';
const buttonHTML = config.buttonString;

sites.forEach(site => {
siteListHTML += `<li><span>${site}</span>${buttonHTML}</li>`;
});

siteListHTML += '</ul>';
document.getElementById('sites-list-container').innerHTML = siteListHTML;
});
};

this.getSites = () => {
return this.utils.getFromSyncStorage()
.then(res => res ? Object.keys(res).filter(key => config.nonCustomSettings.indexOf(key) === -1) : []);
};

this.addToggleAnimation = (slider) => {
slider.classList.add('slider');
slider.classList.remove('slider-initial');
};

this.toggleCheckbox = (id) => {
const checkbox = document.getElementById(id);
if (checkbox.getAttribute('checked') === 'checked') {
Expand All @@ -11,37 +36,15 @@ function Popup() {
}
};

this.toggleOnOffSetting = (setting) => {
return this.utils.isSettingOn(setting)
.then(isSettingOn => {
if (isSettingOn) {
return this.utils.saveToSyncStorage(setting, '')
.then(() => {
this.utils.messageActiveTab({message: 'stop'});
browser.browserAction.setIcon({path: '../assets/static/inactive32.png', tabId: this.tab.id});
})
} else {
this.utils.removeFromSyncStorage(setting);
return this.utils.isExtensionOn(this.utils.getTabUrl(this.tab))
.then(isExtensionOnForDomain => {
if (isExtensionOnForDomain) {
this.utils.messageActiveTab({message: 'start'});
browser.browserAction.setIcon({path: '../assets/static/active32.png', tabId: this.tab.id});
}
});
}
});
};

this.toggleSetting = (setting) => {
const isOnByDefault = config.defaultOffSettings.indexOf(setting) === -1;

return this.utils.isSettingOn(setting)
.then(isOn => {
if (setting === 'dark') this.applyColourScheme(!isOn);
if (setting === 'reverse') this.utils.messageActiveTab({message: 'toggle-reverse', isOn: !isOn});
if (isOn) {
return this.utils.removeFromSyncStorage(setting);
}
return this.utils.saveToSyncStorage(setting, 'true');
if (isOn) return isOnByDefault ? this.utils.saveToSyncStorage(setting, '') : this.utils.removeFromSyncStorage(setting);
return isOnByDefault ? this.utils.removeFromSyncStorage(setting) : this.utils.saveToSyncStorage(setting, 'true');
})
};

Expand All @@ -54,56 +57,130 @@ function Popup() {
document.body.classList.remove('dark-mode');
};

this.addToggleAnimation = (slider) => {
slider.classList.add('slider');
slider.classList.remove('slider-initial');
this.updateIconAndStatus = () => {
return this.utils.isExtensionOn(this.utils.getTabUrl(this.tab))
.then(isExtensionOnForDomain => {
if (isExtensionOnForDomain) {
this.utils.messageActiveTab({message: 'start'});
browser.browserAction.setIcon({path: '../assets/static/active32.png', tabId: this.tab.id});
} else {
this.utils.messageActiveTab({message: 'stop'});
browser.browserAction.setIcon({path: '../assets/static/inactive32.png', tabId: this.tab.id});
}
});
};

this.initialiseSettings = () => {
let whitelist;

return this.utils.getActiveTab()
.then(tab => {
this.tab = tab;
return this.utils.isSettingOn(this.utils.getTabUrl(this.tab));
return this.utils.isSettingOn('whitelist');
}).then((isOn) => {
whitelist = isOn;
if (whitelist) document.getElementById('whitelist').classList.add('active');
if (!whitelist) document.getElementById('blacklist').classList.add('active');
return this.utils.getFromSyncStorage(this.utils.getTabUrl(this.tab));
})
.then(isOn => {
if (isOn) this.toggleCheckbox('domain-toggle');
.then(res => {
if ((res !== null && whitelist) || (res === null && !whitelist)) this.toggleCheckbox('domain-input');
return this.utils.isSettingOn('clickAndRoll');
})
.then(isOn => {
if (isOn) this.toggleCheckbox('extension-toggle');
if (isOn) this.toggleCheckbox('extension-input');
return this.utils.isSettingOn('reverse');
})
.then(isOn => {
if (isOn) this.toggleCheckbox('reverse-toggle');
if (isOn) this.toggleCheckbox('reverse-input');
return this.utils.isSettingOn('dark');
})
.then(isOn => {
if (isOn) {
this.toggleCheckbox('dark-toggle');
this.toggleCheckbox('dark-input');
this.applyColourScheme(true);
}
this.loadSiteList();
});
};

this.handleClick = (e) => {
const id = e.target.id;
const targetIsToggle = id.indexOf('-toggle') !== -1;
e.preventDefault();
const targetIsSlider = e.target.id.indexOf('-slider') !== -1;
const targetIsNamedToggle = e.target.classList.contains('named-toggle-button');
const targetIsTab = e.target.classList.contains('tab');
const targetIsLink = e.target.href !== undefined;
const isButton = e.target.tagName === 'BUTTON';

if (targetIsToggle) {
const slider = e.target.nextElementSibling;
if (targetIsSlider) return this.handleToggle(e);
if (targetIsNamedToggle) return this.handleNamedToggle(e);
if (targetIsTab) return this.handleTab(e);
if (isButton) return this.handleButton(e);
if (targetIsLink) browser.tabs.create({url: e.target.href});
};

if (slider.classList.contains('slider-initial')) {
this.addToggleAnimation(slider);
}
this.handleToggle = (e) => {
const id = e.target.id;

this.toggleCheckbox(id);
if (id === 'domain-toggle') this.toggleOnOffSetting(this.utils.getTabUrl(this.tab));
if (id === 'extension-toggle') this.toggleOnOffSetting('clickAndRoll');
if (id === 'reverse-toggle') this.toggleSetting('reverse');
if (id === 'dark-toggle') this.toggleSetting('dark');
if (e.target.classList.contains('slider-initial')) {
this.addToggleAnimation(e.target);
}

if (targetIsLink) browser.tabs.create({url: e.target.href});
this.toggleCheckbox(`${id.split('-')[0]}-input`);

switch (id) {
case 'domain-slider':
return this.handleToggleDomain();
case 'extension-slider':
return this.toggleSetting('clickAndRoll').then(() => this.updateIconAndStatus());
case 'reverse-slider':
return this.toggleSetting('reverse');
case 'dark-slider':
return this.toggleSetting('dark');
default:
return
}
};

this.handleToggleDomain = () => {
const tabUrl = this.utils.getTabUrl(this.tab);
return this.utils.getFromSyncStorage(tabUrl)
.then(res => {
if (res === null) return this.utils.saveToSyncStorage(tabUrl, '');
return this.utils.removeFromSyncStorage(tabUrl);
})
.then(() => this.updateIconAndStatus())
.then(() => this.loadSiteList());
};

this.handleNamedToggle = (e) => {
if (e.target.classList.contains('active')) return;

const namedToggleButtons = document.getElementsByClassName('named-toggle-button');
for (let button of namedToggleButtons) button.classList.remove('active');
e.target.classList.add('active');

return this.toggleSetting('whitelist')
.then(() => this.updateIconAndStatus())
.then(() => this.toggleCheckbox('domain-input'));
};

this.handleTab = (e) => {
const tabs = document.getElementsByClassName('tab');
for (let tab of tabs) tab.classList.remove('active');
e.target.classList.add('active');

const tabSections = document.getElementsByClassName('tab-section');
for (let section of tabSections) section.classList.remove('active');
document.getElementById(`${e.target.id}-section`).classList.add('active');
};

this.handleButton = (e) => {
const urlToRemove = e.target.previousElementSibling.textContent;
const tabUrl = this.utils.getTabUrl(this.tab);
if (urlToRemove === tabUrl) this.toggleCheckbox('domain-input');
return this.utils.removeFromSyncStorage(urlToRemove)
.then(() => this.updateIconAndStatus())
.then(() => this.loadSiteList());
}
}
4 changes: 3 additions & 1 deletion scripts/utils/config.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
const config = {
buttonString: '<button><svg data-prefix="fas" data-icon="times-circle" class="svg-inline--fa fa-times-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path></svg></button>',
cmPerFeet: 30.48,
cmPerInch: 2.54,
currentCacheRecordVersion: '2.0.0',
defaultOffSettings: ['reverse', 'dark'],
defaultOffSettings: ['dark', 'reverse', 'whitelist'],
emptyRowString: '<tr><td class="season stick-left">n/a</td><td>n/a</td><td>n/a</td><td>n/a</td><td>n/a</td><td>n/a</td><td>n/a</td><td>n/a</td><td>n/a</td><td>n/a</td><td>n/a</td><td>n/a</td><td>n/a</td><td>n/a</td><td>n/a</td><td>n/a</td><td>n/a</td><td>n/a</td><td>n/a</td><td>n/a</td><td>n/a</td><td>n/a</td><td style="width: 100%">n/a</td></tr>',
hoverTimeout: 500,
kgPerLb: 0.45359237,
maxCachedPlayers: 100,
maxFrameContainerHeight: 500,
maxFrameContainerWidth: 825,
networkTimeout: 10 * 1000,
nonCustomSettings: ['clickAndRoll', 'dark', 'reverse', 'whitelist'],
playerHeaderHeight: 37,
playerUpdateInterval: 3 * 60 * 60 * 1000,
playersUpdateInterval: 24 * 60 * 60 * 1000,
Expand Down
50 changes: 33 additions & 17 deletions scripts/utils/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ function Utils() {
this.getFromLocalStorage = (name) => {
return new Promise(resolve => {
browser.storage.local.get([name], result => {
return resolve(!result || $.isEmptyObject(result) ? null : result[name]);
return resolve((!result || $.isEmptyObject(result)) ? null : result[name]);
})
})
};
Expand All @@ -58,6 +58,14 @@ function Utils() {
browser.storage.local.remove([name], () => {})
};

this.getFromSyncStorage = (name) => {
return new Promise(resolve => {
browser.storage.sync.get(name ? [name] : null, result => {
return resolve((!result || $.isEmptyObject(result)) ? null : (name === undefined ? result : result[name]));
})
})
};

this.saveToSyncStorage = (name, value) => {
return new Promise(resolve => {
browser.storage.sync.set({[name]: value}, () => {
Expand All @@ -67,30 +75,38 @@ function Utils() {
};

this.removeFromSyncStorage = (name) => {
browser.storage.sync.remove([name], () => {})
};

this.isSettingOn = (setting) => {
return new Promise(resolve => {
browser.storage.sync.get(setting, result => {
if ($.isEmptyObject(result)) {
return resolve(config.defaultOffSettings.indexOf(setting) === -1);
}
return resolve(!!result[setting]);
browser.storage.sync.remove([name], () => {
return resolve();
});
});
};

this.isSettingOn = (setting) => {
const isOnByDefault = config.defaultOffSettings.indexOf(setting) === -1;

return this.getFromSyncStorage(setting)
.then(result => Promise.resolve(isOnByDefault ? result === null : result !== null));
};

this.isExtensionOn = (domain) => {
let isExtensionOnGlobally;
let isDomainListed;
let whitelist;

return this.isSettingOn('clickAndRoll')
.then(isExtensionOn => {
if (isExtensionOn) {
return this.isSettingOn(domain);
}
return Promise.resolve(false);
.then(isOn => {
isExtensionOnGlobally = isOn;
return this.getFromSyncStorage(domain);
})
.then(res => {
isDomainListed = res !== null;
return this.isSettingOn('whitelist');
})
.then(isDomainOn => {
return isDomainOn;
.then(isOn => {
whitelist = isOn;
const isExtensionOnForDomain = whitelist ? isDomainListed : !isDomainListed;
return isExtensionOnGlobally && isExtensionOnForDomain;
})
}

Expand Down
Loading

0 comments on commit f11c9fd

Please sign in to comment.