Declare EntryOnClick as an object: handleEvent

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;
+  $('.enable', entry).onclick = handleEvent.toggle;
-  $('.disable', entry).onclick = EntryOnClick.toggle;
+  $('.disable', entry).onclick = handleEvent.toggle;
-  $('.check-update', entry).onclick = EntryOnClick.check;
+  $('.check-update', entry).onclick = handleEvent.check;
-  $('.update', entry).onclick = EntryOnClick.update;
+  $('.update', entry).onclick = handleEvent.update;
-  $('.delete', entry).onclick = EntryOnClick.delete;
+  $('.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
 }
 
 

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,
+    onmousedown: handleEvent.middleClick,
-    onauxclick: openEditorOnMiddleclick,
+    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;
+  $('.enable', entry).onclick = handleEvent.toggle;
-  $('.disable', entry).onclick = EntryOnClick.toggle;
+  $('.disable', entry).onclick = handleEvent.toggle;
-  $('.delete', entry).onclick = EntryOnClick.delete;
+  $('.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));
+    $$('a', info).forEach(el => (el.onclick = handleEvent.openURLandHide));
-    $$('button', info).forEach(el => (el.onclick = EntryOnClick.closeExplanation));
+    $$('button', info).forEach(el => (el.onclick = handleEvent.closeExplanation));
     entry.appendChild(info);
-  }
+  },
 
-  static closeExplanation(event) {
+  closeExplanation(event) {
     $('#regexp-explanation').remove();
-  }
+  },
-}
 
-
+  openLink(event) {
-function openLinkInTabOrWindow(event) {
+    if (!prefs.get('openEditInWindow', false)) {
-  if (!prefs.get('openEditInWindow', false)) {
+      handleEvent.openURLandHide.call(this, event);
-    openURLandHide(event);
+      return;
-    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();
     event.preventDefault();
-    return;
+    chrome.windows.create(
-  }
+      Object.assign({
-  // prevent the popup being opened in a background tab
+        url: this.href
-  // when an irrelevant link was accidentally clicked
+      }, prefs.get('windowPosition', {}))
-  if (event.target.closest('a')) {
+    );
+    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;
+    openURL({url: this.href})
-  }
+      .then(close);
-}
+  },
-
+});
-
-function openURLandHide(event) {
-  event.preventDefault();
-  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);
   }
 }