Add ESLint to the build process, and cleanup default ESLint issues. (#…

…474)

This adds a basic [ESLint](https://eslint.org/) definition that, to not be too onerous, ignores whitespace constraints and picks the most common style from our existing `.js` files.

This is split into three commits: one to add ESLint, one to run `eslint --fix` on the affected files, and one for the couple of manual changes.

.eslintrc.yml

@@ -0,0 +1,16 @@
+env:
+  browser: true
+  es6: true
+extends: 'eslint:recommended'
+rules:
+  indent:
+    - off
+  linebreak-style:
+    - error
+    - unix
+  quotes:
+    - error
+    - double
+  semi:
+    - error
+    - always

build.sh

@@ -5,8 +5,11 @@ set -eu
 # This script uses node-sass and uglifyjs
 # npm install -g node-sass
 # npm install -g uglify-es
+# npm install -g eslint
 
 echo "Processing scss..."
 node-sass --output-style compressed src/css/main.scss static/css/main.min.css
 echo "Minifying js..."
 uglifyjs static/js/main.js -o static/js/main.min.js  -c -m
+echo "Checking js..."
+find static/js -name "*.js" -not -name "*min.js" | xargs eslint

static/js/ga.js

@@ -1,5 +1,7 @@
 // Google Analytics
+/*eslint-disable*/
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
-gtag('js', new Date());
-gtag('config', 'UA-56433935-1');
+/*eslint-enable*/
+gtag("js", new Date());
+gtag("config", "UA-56433935-1");

static/js/glossary.js

@@ -1,22 +1,23 @@
 // search all links (into definitions) linking to elements in the current page (href starts with #) 
 // To set the title of the link to the definition it points to
-document.querySelectorAll('[id^="def-"]').forEach(function(def){
+document.querySelectorAll("[id^=\"def-\"]").forEach(function(def){
 	const id = def.id;
 	let title = def.parentNode.textContent;
 	if ( title.match(/\.\s/) ) {
 		// We take everything until the last period. (Everything after are links such as "Wikipedia"
 		title = title.match(/^.*\.\s/)[0];
 	}
-	document.querySelectorAll('.definition>a[href^="#'+id+'"]').forEach(function(a){
+	document.querySelectorAll(".definition>a[href^=\"#"+id+"\"]").forEach(function(a){
 		a.title = title;
 	});
 });
 
 // search for invalid links
-document.querySelectorAll('.definition>a[href^="#"]').forEach(function(a){
+/*eslint no-console: ["error", { allow: ["error"] }] */
+document.querySelectorAll(".definition>a[href^=\"#\"]").forEach(function(a){
 	if ( a.title ) return;
 	let href = a.href;
-	let id = href.substring(href.indexOf('#')+1);
+	let id = href.substring(href.indexOf("#")+1);
 	if ( ! id ) return;
 	let el = document.getElementById(id);
 	if ( ! el ) {

static/js/main.js

@@ -4,47 +4,47 @@
 
 (function (window, document) {
 
-const MENU_ID = 'menu';
+const MENU_ID = "menu";
 const MENU_SELECTOR = `#${MENU_ID}`;
 
-const MENU_OPEN_CLASS = 'open';
+const MENU_OPEN_CLASS = "open";
 
 // Applied to NAV_MENU_PARENTs when they're active/open.
 // Note that this doesn't not get applied with NAV_MENU_HOVERABLE.
-const NAV_MENU_ACTIVE_CLASS = 'pure-menu-active';
+const NAV_MENU_ACTIVE_CLASS = "pure-menu-active";
 const NAV_MENU_ACTIVE_SELECTOR = `.${NAV_MENU_ACTIVE_CLASS}`;
 
 // When applied to a NAV_MENU_PARENT_ item, the menu will toggle on hover
 // (See https://purecss.io/menus/#dropdowns)
-const NAV_MENU_HOVERABLE_CLASS = 'pure-menu-allow-hover';
+const NAV_MENU_HOVERABLE_CLASS = "pure-menu-allow-hover";
 
 // Applied to nav menu items that are parents of a sub-menu
-const NAV_MENU_PARENT_CLASS = 'pure-menu-has-children';
+const NAV_MENU_PARENT_CLASS = "pure-menu-has-children";
 const NAV_MENU_PARENT_SELECTOR = `.${NAV_MENU_PARENT_CLASS}`;
 
 // The containing <ul> of a sub-menu's items
-const NAV_MENU_CHILD_CLASS = 'pure-menu-children';
+const NAV_MENU_CHILD_CLASS = "pure-menu-children";
 const NAV_MENU_CHILD_SELECTOR = `.${NAV_MENU_CHILD_CLASS}`;
 
-const NAV_LINK_CLASS = 'pure-menu-link';
+const NAV_LINK_CLASS = "pure-menu-link";
 const NAV_LINK_SELECTOR = `.${NAV_LINK_CLASS}`;
 
 const menu = document.getElementById(MENU_ID);
-const WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize';
+const WINDOW_CHANGE_EVENT = ("onorientationchange" in window) ? "orientationchange":"resize";
 
 function toggleHorizontal() {
     [].forEach.call(
-        document.getElementById(MENU_ID).querySelectorAll('.custom-can-transform'),
+        document.getElementById(MENU_ID).querySelectorAll(".custom-can-transform"),
         function(el){
-            el.classList.toggle('pure-menu-horizontal');
+            el.classList.toggle("pure-menu-horizontal");
         }
     );
 }
 
 function toggleMenu() {
     // set timeout so that the panel has a chance to roll up
     // before the menu switches states
-    if (menu.classList.contains('open')) {
+    if (menu.classList.contains("open")) {
         toggleHorizontal();
         enableDropdowns();
     }
@@ -60,13 +60,13 @@ function openNavMenu(el) {
   closeAllNavMenus(el);
   el.classList.add(NAV_MENU_ACTIVE_CLASS);
   el.querySelector(`${NAV_MENU_PARENT_SELECTOR} > ${NAV_LINK_SELECTOR}`)
-    .setAttribute('aria-expanded', true);
+    .setAttribute("aria-expanded", true);
 }
 
 function closeNavMenu(el) {
   el.classList.remove(NAV_MENU_ACTIVE_CLASS);
   el.querySelector(`${NAV_MENU_PARENT_SELECTOR} > ${NAV_LINK_SELECTOR}`)
-    .setAttribute('aria-expanded', false);
+    .setAttribute("aria-expanded", false);
 }
 
 function closeAllNavMenus(exclude) {
@@ -84,9 +84,9 @@ function enableDropdowns() {
       document.getElementById(MENU_ID).querySelectorAll(NAV_MENU_PARENT_SELECTOR),
       function(el){
         el.classList.add(NAV_MENU_HOVERABLE_CLASS);
-        el.addEventListener('focusin', function(e) {
+        el.addEventListener("focusin", function() {
           openNavMenu(el);
-        })
+        });
       }
   );
 }
@@ -107,51 +107,51 @@ function closeMenu() {
   }
 }
 
-document.getElementById('menuIcon').addEventListener('click', function (e) {
+document.getElementById("menuIcon").addEventListener("click", function (e) {
   // Don't propagate to the document-level click listener, since that closes the menu
   e.stopPropagation();
   toggleMenu();
 });
 
 [].forEach.call(
   document.getElementById(MENU_ID).querySelectorAll(NAV_MENU_PARENT_SELECTOR), function(el) {
-    el.firstElementChild.addEventListener('click', function (e) {e.preventDefault();});
+    el.firstElementChild.addEventListener("click", function (e) {e.preventDefault();});
   }
 );
 
 window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
 
 // Initialize nav menu aria roles/state
-menu.querySelector('.pure-menu-list').setAttribute('role', 'menubar');
+menu.querySelector(".pure-menu-list").setAttribute("role", "menubar");
 
 [].forEach.call(
   menu.querySelectorAll(NAV_LINK_SELECTOR), function(el) {
-    el.setAttribute('role', 'menuitem');
-    el.parentNode.setAttribute('role', 'none');
+    el.setAttribute("role", "menuitem");
+    el.parentNode.setAttribute("role", "none");
 
     if (el.parentNode.classList.contains(NAV_MENU_PARENT_CLASS)) {
-      el.setAttribute('aria-haspopup', true);
-      el.setAttribute('aria-expanded', false);
+      el.setAttribute("aria-haspopup", true);
+      el.setAttribute("aria-expanded", false);
 
       var childMenu = el.parentNode.querySelector(NAV_MENU_CHILD_SELECTOR);
-      childMenu.setAttribute('role', 'menu');
-      childMenu.setAttribute('aria-label', el.text);
+      childMenu.setAttribute("role", "menu");
+      childMenu.setAttribute("aria-label", el.text);
     }
   }
 );
 
 enableDropdowns();
 
-document.addEventListener('click', function(e) {
+document.addEventListener("click", function(e) {
   if (!e.target.closest(MENU_SELECTOR)) {
     closeMenu();
   }
-})
+});
 
-document.addEventListener('keyup', function(e) {
+document.addEventListener("keyup", function(e) {
   if (e.keyCode === 27) {
     closeMenu();
   }
-})
+});
 
 })(this, this.document);