4176 passive listeners

fec/fec/static/js/modules/helpers.js

@@ -563,6 +563,34 @@ function getCookie(name) {
   return cookieValue;
 }
 
+/**
+ * Passive listeners on touchstart and scroll events improve page performance
+ * but could crash non-supportive browsers.
+ * This function will return either an object to be used in addEventListener,
+ * or will return null if the browser doesn't support `passive()`
+ * @returns Object or false depending on whether the browser supports passive listeners
+ */
+function passiveListenerIfSupported() {
+  var supported = false;
+  /**
+   * Let's check whether the browser supports passive event listeners
+   */
+  try {
+    let options = {
+      get passive() {
+        supported = true;
+        return false;
+      }
+    };
+    window.addEventListener('test', null, options);
+    window.removeEventListener('test', null, options);
+  } catch (err) {
+    supported = false;
+  }
+
+  return supported ? { passive: true } : false;
+}
+
 module.exports = {
   anchorify: anchorify,
   scrollAnchor: scrollAnchor,
@@ -594,5 +622,6 @@ module.exports = {
   getWindowWidth: getWindowWidth,
   sanitizeValue: sanitizeValue,
   sanitizeQueryParams: sanitizeQueryParams,
-  getCookie: getCookie
+  getCookie: getCookie,
+  passiveListener: passiveListenerIfSupported
 };

fec/fec/static/js/widgets/contributions-by-state-box.js

@@ -21,7 +21,7 @@ const breakpointToXL = 860;
 const rootPathToIndividualContributions =
   '/data/receipts/individual-contributions/';
 
-import { buildUrl } from '../modules/helpers';
+import { buildUrl, passiveListener } from '../modules/helpers';
 import typeahead from '../modules/typeahead';
 import { defaultElectionYear } from './widget-vars';
 import 'abortcontroller-polyfill/dist/polyfill-patch-fetch';
@@ -230,11 +230,13 @@ ContributionsByState.prototype.init = function() {
   );
   theTypeaheadElement.addEventListener(
     'mousedown',
-    this.handleTypeaheadFocus.bind(this)
+    this.handleTypeaheadFocus.bind(this),
+    passiveListener()
   );
   theTypeaheadElement.addEventListener(
     'touchstart',
-    this.handleTypeaheadFocus.bind(this)
+    this.handleTypeaheadFocus.bind(this),
+    passiveListener()
   );
 
   // Listen for any field updates, looking for errors

fec/fec/static/js/widgets/pres-finance-map-box.js

@@ -71,7 +71,7 @@ const selector_candidateListDisclaimer = '.js-cand-list-note';
 
 // Imports, etc
 // const $ = jquery;
-import { buildUrl } from '../modules/helpers';
+import { buildUrl, passiveListener } from '../modules/helpers';
 // import { defaultElectionYear } from './widget-vars';
 import 'abortcontroller-polyfill/dist/polyfill-patch-fetch';
 import analytics from '../modules/analytics';
@@ -1257,49 +1257,39 @@ PresidentialFundsMap.prototype.openDownloads = function() {
 PresidentialFundsMap.prototype.handleExportRaisingClick = function(e) {
   e.preventDefault();
 
-  //scroll downloads area into view
+  // scroll downloads area into view
   this.downloadsWrapper.scrollIntoView();
+
   // Wait until the downloadsWrapper is in view before opening (if not already open)
-  let instance = this;
-  //'this' refers to the main protoype here
-  window.onscroll = function() {
-    //'this' is window inside the context of this function
-    let theWindow = this;
-    let windowScroll = theWindow.scrollY,
-      downloadsScrollPosition =
-        instance.downloadsWrapper.getBoundingClientRect().top + windowScroll,
-      downloadsHeight = instance.downloadsWrapper.offsetHeight,
-      windowHeight = window.innerHeight;
-    if (
-      windowScroll >
-      downloadsScrollPosition + downloadsHeight - windowHeight
-    ) {
-      {
-        instance.openDownloads();
-        window.onscroll = null; // remove listener
-      }
-    }
-  };
+  document.addEventListener(
+    'scroll',
+    this.handleDocScrolling.bind(this),
+    passiveListener()
+  );
 };
 
 /**
- * TODO -
+ * Fired on each tick/update of the scroll position. Removes its own listener when scroll is complete
+ * @param {UiEvent} e
  */
-PresidentialFundsMap.prototype.handleToggleRaisingExports = function(e) {
-  e.preventDefault();
-
-  //toggle export area
-  if (this.downloadsLinksWrapper.style.height > '0px') {
-    this.raisingExportsToggle.classList.toggle('button--close', false);
-    this.downloadsLinksWrapper.style.height = 0;
-  } else {
-    this.raisingExportsToggle.classList.toggle('button--close', true);
-    this.downloadsLinksWrapper.style.height = 'auto';
+PresidentialFundsMap.prototype.handleDocScrolling = function() {
+  let windowScroll = window.scrollY;
+  let downloadsScrollPosition =
+    this.downloadsWrapper.getBoundingClientRect().top + windowScroll;
+  let downloadsHeight = this.downloadsWrapper.offsetHeight;
+  let windowHeight = window.innerHeight;
+
+  if (windowScroll > downloadsScrollPosition + downloadsHeight - windowHeight) {
+    {
+      this.openDownloads();
+      window.removeEventListener('scroll', this.handleDocScrolling.bind(this));
+    }
   }
 };
 
 /**
- * TODO -
+ * Handles when 'Export raising data' is clicked, toggles the list of state abbreviations
+ * @param {MouseEvent} e
  */
 PresidentialFundsMap.prototype.handleToggleRaisingExports = function(e) {
   e.preventDefault();

package.json

@@ -117,7 +117,7 @@
     "karma-coverage-istanbul-reporter": "^2.0.5",
     "karma-mocha": "^0.2.2",
     "karma-webpack": "^3.0.5",
-    "leaflet": "^1.4.0",
+    "leaflet": "^1.7.1",
     "mocha": "^5.2.0",
     "mockdate": "^2.0.2",
     "natives": "^1.1.6",