Declare EntryOnClick as an object: handleEvent
This commit is contained in:
tophf
parent
2875bb77d0
commit
1af1194e9f
55
manage.js
55
manage.js
|
|
@ -5,7 +5,7 @@ const installed = $('#installed');
|
|||
const TARGET_LABEL = t('appliesDisplay', '').trim();
|
||||
const TARGET_TYPES = ['domains', 'urls', 'urlPrefixes', 'regexps'];
|
||||
const TARGET_LIMIT = 10;
|
||||
|
||||
const handleEvent = {};
|
||||
|
||||
getStylesSafe()
|
||||
.then(showStyles)
|
||||
|
|
@ -31,7 +31,7 @@ function initGlobalEvents() {
|
|||
$('#search').oninput = searchStyles;
|
||||
$('#manage-options-button').onclick = () => chrome.runtime.openOptionsPage();
|
||||
$('#manage-shortcuts-button').onclick = configureCommands.open;
|
||||
$$('#header a[href^="http"]').forEach(a => (a.onclick = EntryOnClick.external));
|
||||
$$('#header a[href^="http"]').forEach(a => (a.onclick = handleEvent.external));
|
||||
|
||||
// focus search field on / key
|
||||
document.onkeypress = event => {
|
||||
|
|
@ -90,15 +90,13 @@ function showStyles(styles = []) {
|
|||
installed.appendChild(renderBin);
|
||||
if (index < sorted.length) {
|
||||
setTimeout(renderStyles, 0, index);
|
||||
} else if (shouldRenderAll && history.state && 'scrollY' in history.state) {
|
||||
} else if (shouldRenderAll && 'scrollY' in (history.state || {})) {
|
||||
setTimeout(() => scrollTo(0, history.state.scrollY));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// silence the inapplicable warning for async code
|
||||
/* eslint no-use-before-define: [2, {"functions": false, "classes": false}] */
|
||||
function createStyleElement({style, name}) {
|
||||
const entry = template.style.cloneNode(true);
|
||||
entry.classList.add(style.enabled ? 'enabled' : 'disabled');
|
||||
|
|
@ -120,11 +118,11 @@ function createStyleElement({style, name}) {
|
|||
const styleNameEditLink = $('a', styleName);
|
||||
styleNameEditLink.appendChild(document.createTextNode(style.name));
|
||||
styleNameEditLink.href = styleNameEditLink.getAttribute('href') + style.id;
|
||||
styleNameEditLink.onclick = EntryOnClick.edit;
|
||||
styleNameEditLink.onclick = handleEvent.edit;
|
||||
if (style.url) {
|
||||
const homepage = template.styleHomepage.cloneNode(true);
|
||||
homepage.href = style.url;
|
||||
homepage.onclick = EntryOnClick.external;
|
||||
homepage.onclick = handleEvent.external;
|
||||
styleName.appendChild(document.createTextNode(' '));
|
||||
styleName.appendChild(homepage);
|
||||
}
|
||||
|
|
@ -170,19 +168,20 @@ function createStyleElement({style, name}) {
|
|||
|
||||
const editLink = $('.style-edit-link', entry);
|
||||
editLink.href = editLink.getAttribute('href') + style.id;
|
||||
editLink.onclick = EntryOnClick.edit;
|
||||
editLink.onclick = handleEvent.edit;
|
||||
|
||||
$('.enable', entry).onclick = EntryOnClick.toggle;
|
||||
$('.disable', entry).onclick = EntryOnClick.toggle;
|
||||
$('.check-update', entry).onclick = EntryOnClick.check;
|
||||
$('.update', entry).onclick = EntryOnClick.update;
|
||||
$('.delete', entry).onclick = EntryOnClick.delete;
|
||||
$('.enable', entry).onclick = handleEvent.toggle;
|
||||
$('.disable', entry).onclick = handleEvent.toggle;
|
||||
$('.check-update', entry).onclick = handleEvent.check;
|
||||
$('.update', entry).onclick = handleEvent.update;
|
||||
$('.delete', entry).onclick = handleEvent.delete;
|
||||
return entry;
|
||||
}
|
||||
|
||||
class EntryOnClick {
|
||||
|
||||
static edit(event) {
|
||||
Object.assign(handleEvent, {
|
||||
|
||||
edit(event) {
|
||||
if (event.altKey) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -209,18 +208,18 @@ class EntryOnClick {
|
|||
location.href = url;
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
static toggle(event) {
|
||||
toggle(event) {
|
||||
enableStyle(getClickedStyleId(event), this.matches('.enable'))
|
||||
.then(handleUpdate);
|
||||
}
|
||||
},
|
||||
|
||||
static check(event) {
|
||||
check(event) {
|
||||
checkUpdate(getClickedStyleElement(event));
|
||||
}
|
||||
},
|
||||
|
||||
static update(event) {
|
||||
update(event) {
|
||||
const styleElement = getClickedStyleElement(event);
|
||||
// update everything but name
|
||||
saveStyle(Object.assign(styleElement.updatedCode, {
|
||||
|
|
@ -228,9 +227,9 @@ class EntryOnClick {
|
|||
name: null,
|
||||
reason: 'update',
|
||||
}));
|
||||
}
|
||||
},
|
||||
|
||||
static delete(event) {
|
||||
delete(event) {
|
||||
const styleElement = getClickedStyleElement(event);
|
||||
const id = styleElement.styleId;
|
||||
const {name} = cachedStyles.byId.get(id) || {};
|
||||
|
|
@ -246,13 +245,13 @@ class EntryOnClick {
|
|||
deleteStyle(id);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
static external(event) {
|
||||
external(event) {
|
||||
openURL({url: event.target.closest('a').href});
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
function handleUpdate(style, {reason} = {}) {
|
||||
|
|
@ -332,7 +331,7 @@ function checkUpdate(element) {
|
|||
$('.update-note', element).innerHTML = t('checkingForUpdate');
|
||||
element.classList.remove('checking-update', 'no-update', 'can-update');
|
||||
element.classList.add('checking-update');
|
||||
return new Updater(element).run();
|
||||
return new Updater(element).run(); // eslint-disable-line no-use-before-define
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
130
popup.js
130
popup.js
|
|
@ -3,6 +3,7 @@
|
|||
|
||||
let installed;
|
||||
let tabURL;
|
||||
const handleEvent = {};
|
||||
|
||||
getActiveTabRealURL().then(url => {
|
||||
tabURL = RX_SUPPORTED_URLS.test(url) ? url : '';
|
||||
|
|
@ -53,9 +54,9 @@ function initPopup(url) {
|
|||
$('#disableAll').onchange = () =>
|
||||
installed.classList.toggle('disabled', prefs.get('disableAll'));
|
||||
setupLivePrefs(['disableAll']);
|
||||
$('#find-styles-link').onclick = openURLandHide;
|
||||
$('#find-styles-link').onclick = handleEvent.openURLandHide;
|
||||
$('#popup-manage-button').href = 'manage.html';
|
||||
$('#popup-manage-button').onclick = openURLandHide;
|
||||
$('#popup-manage-button').onclick = handleEvent.openURLandHide;
|
||||
$('#popup-options-button').onclick = () => chrome.runtime.openOptionsPage();
|
||||
$('#popup-shortcuts-button').onclick = configureCommands.open;
|
||||
|
||||
|
|
@ -90,7 +91,7 @@ function initPopup(url) {
|
|||
textContent: prefs.get('popup.breadcrumbs.usePath')
|
||||
? new URL(url).pathname.slice(1)
|
||||
: t('writeStyleForURL').replace(/ /g, '\u00a0'), // this URL
|
||||
onclick: openLinkInTabOrWindow,
|
||||
onclick: handleEvent.openLink,
|
||||
});
|
||||
if (prefs.get('popup.breadcrumbs')) {
|
||||
urlLink.onmouseenter =
|
||||
|
|
@ -112,7 +113,7 @@ function initPopup(url) {
|
|||
href: 'edit.html?domain=' + encodeURIComponent(domain),
|
||||
textContent: domain,
|
||||
title: `domain("${domain}")`,
|
||||
onclick: openLinkInTabOrWindow,
|
||||
onclick: handleEvent.openLink,
|
||||
});
|
||||
domainLink.setAttribute('subdomain', domain.substring(0, domain.indexOf('.')));
|
||||
matchTargets.appendChild(domainLink);
|
||||
|
|
@ -165,8 +166,6 @@ function showStyles(styles) {
|
|||
}
|
||||
|
||||
|
||||
// silence the inapplicable warning for async code
|
||||
/* eslint no-use-before-define: [2, {"functions": false, "classes": false}] */
|
||||
function createStyleElement({
|
||||
style,
|
||||
container = installed,
|
||||
|
|
@ -178,34 +177,34 @@ function createStyleElement({
|
|||
id: 'style-' + style.id,
|
||||
styleId: style.id,
|
||||
className: entry.className + ' ' + (style.enabled ? 'enabled' : 'disabled'),
|
||||
onmousedown: openEditorOnMiddleclick,
|
||||
onauxclick: openEditorOnMiddleclick,
|
||||
onmousedown: handleEvent.middleClick,
|
||||
onauxclick: handleEvent.middleClick,
|
||||
});
|
||||
|
||||
const checkbox = $('.checker', entry);
|
||||
Object.assign(checkbox, {
|
||||
id: 'style-' + style.id,
|
||||
checked: style.enabled,
|
||||
onclick: EntryOnClick.toggle,
|
||||
onclick: handleEvent.toggle,
|
||||
});
|
||||
|
||||
const editLink = $('.style-edit-link', entry);
|
||||
Object.assign(editLink, {
|
||||
href: editLink.getAttribute('href') + style.id,
|
||||
onclick: openLinkInTabOrWindow,
|
||||
onclick: handleEvent.openLink,
|
||||
});
|
||||
|
||||
const styleName = $('.style-name', entry);
|
||||
Object.assign(styleName, {
|
||||
htmlFor: 'style-' + style.id,
|
||||
onclick: EntryOnClick.name,
|
||||
onclick: handleEvent.name,
|
||||
});
|
||||
styleName.checkbox = checkbox;
|
||||
styleName.appendChild(document.createTextNode(style.name));
|
||||
|
||||
$('.enable', entry).onclick = EntryOnClick.toggle;
|
||||
$('.disable', entry).onclick = EntryOnClick.toggle;
|
||||
$('.delete', entry).onclick = EntryOnClick.delete;
|
||||
$('.enable', entry).onclick = handleEvent.toggle;
|
||||
$('.disable', entry).onclick = handleEvent.toggle;
|
||||
$('.delete', entry).onclick = handleEvent.delete;
|
||||
|
||||
if (postponeDetect) {
|
||||
setTimeout(detectSloppyRegexps, 0, {entry, style});
|
||||
|
|
@ -222,21 +221,21 @@ function createStyleElement({
|
|||
}
|
||||
|
||||
|
||||
class EntryOnClick {
|
||||
Object.assign(handleEvent, {
|
||||
|
||||
static name(event) {
|
||||
name(event) {
|
||||
this.checkbox.click();
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
|
||||
static toggle(event) {
|
||||
toggle(event) {
|
||||
saveStyle({
|
||||
id: getClickedStyleId(event),
|
||||
enabled: this.type == 'checkbox' ? this.checked : this.matches('.enable'),
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
static delete(event) {
|
||||
delete(event) {
|
||||
const id = getClickedStyleId(event);
|
||||
const box = $('#confirm');
|
||||
box.dataset.display = true;
|
||||
|
|
@ -264,62 +263,59 @@ class EntryOnClick {
|
|||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
static indicator(event) {
|
||||
indicator(event) {
|
||||
const entry = getClickedStyleElement(event);
|
||||
const info = template.regexpProblemExplanation.cloneNode(true);
|
||||
$$('#' + info.id).forEach(el => el.remove());
|
||||
$$('a', info).forEach(el => (el.onclick = openURLandHide));
|
||||
$$('button', info).forEach(el => (el.onclick = EntryOnClick.closeExplanation));
|
||||
$$('a', info).forEach(el => (el.onclick = handleEvent.openURLandHide));
|
||||
$$('button', info).forEach(el => (el.onclick = handleEvent.closeExplanation));
|
||||
entry.appendChild(info);
|
||||
}
|
||||
},
|
||||
|
||||
static closeExplanation(event) {
|
||||
closeExplanation(event) {
|
||||
$('#regexp-explanation').remove();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
function openLinkInTabOrWindow(event) {
|
||||
if (!prefs.get('openEditInWindow', false)) {
|
||||
openURLandHide(event);
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
chrome.windows.create(
|
||||
Object.assign({
|
||||
url: event.target.href
|
||||
}, prefs.get('windowPosition', {}))
|
||||
);
|
||||
close();
|
||||
}
|
||||
|
||||
|
||||
function openEditorOnMiddleclick(event) {
|
||||
if (event.button != 1) {
|
||||
return;
|
||||
}
|
||||
// open an editor on middleclick
|
||||
if (event.target.matches('.entry, .style-name, .style-edit-link')) {
|
||||
$('.style-edit-link', this).click();
|
||||
openLink(event) {
|
||||
if (!prefs.get('openEditInWindow', false)) {
|
||||
handleEvent.openURLandHide.call(this, event);
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
// prevent the popup being opened in a background tab
|
||||
// when an irrelevant link was accidentally clicked
|
||||
if (event.target.closest('a')) {
|
||||
chrome.windows.create(
|
||||
Object.assign({
|
||||
url: this.href
|
||||
}, prefs.get('windowPosition', {}))
|
||||
);
|
||||
close();
|
||||
},
|
||||
|
||||
middleClick(event) {
|
||||
if (event.button != 1) {
|
||||
return;
|
||||
}
|
||||
// open an editor on middleclick
|
||||
if (event.target.matches('.entry, .style-name, .style-edit-link')) {
|
||||
$('.style-edit-link', this).click();
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
// prevent the popup being opened in a background tab
|
||||
// when an irrelevant link was accidentally clicked
|
||||
if (event.target.closest('a')) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
openURLandHide(event) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function openURLandHide(event) {
|
||||
event.preventDefault();
|
||||
openURL({url: this.href})
|
||||
.then(close);
|
||||
}
|
||||
openURL({url: this.href})
|
||||
.then(close);
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
function handleUpdate(style) {
|
||||
|
|
@ -367,7 +363,7 @@ function detectSloppyRegexps({entry, style}) {
|
|||
entry.classList.toggle('regexp-invalid', entry.hasInvalidRegexps);
|
||||
const indicator = template.regexpProblemIndicator.cloneNode(true);
|
||||
indicator.appendChild(document.createTextNode(entry.sectionsSkipped || '!'));
|
||||
indicator.onclick = EntryOnClick.indicator;
|
||||
indicator.onclick = handleEvent.indicator;
|
||||
$('.main-controls', entry).appendChild(indicator);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user