Factor report into class

GoogleChrome · Jan 14, 2017 · 84b2aad · 84b2aad
1 parent 97d48d3
commit 84b2aad
Showing 1 changed file with 67 additions and 50 deletions.
diff --git a/lighthouse-core/report/scripts/lighthouse-report.js b/lighthouse-core/report/scripts/lighthouse-report.js
@@ -19,65 +19,82 @@
 
 'use strict';
 
-/**
- * Opens a new tab to the online viewer and sends the local page's JSON results
- * to the online viewer using postMessage.
- */
-function sendJSONReport() {
-  const VIEWER_ORIGIN = 'https://googlechrome.github.io';
-  const VIEWER_URL = `${VIEWER_ORIGIN}/lighthouse/viewer/`;
+class LighthouseReport {
+
+  /**
+   * @param {Object=} lhresults Lighthouse JSON results.
+   */
+  constructor(lhresults) {
+    this.json = lhresults || null;
+    this._addEventListeners();
+  }
 
-  // Chrome doesn't allow us to immediately postMessage to a popup right
-  // after it's created. Normally, we could also listen for the popup window's
-  // load event, however it is cross-domain and won't fire. Instead, listen
-  // for a message from the target app saying "I'm open".
-  window.addEventListener('message', function msgHandler(e) {
-    if (e.origin !== VIEWER_ORIGIN) {
-      return;
+  _addEventListeners() {
+    this._setupExpandDetailsWhenPrinting();
+
+    const printButton = document.querySelector('.js-print');
+    if (printButton) {
+      printButton.addEventListener('click', _ => window.print());
     }
 
-    if (e.data.opened) {
-      popup.postMessage({lhresults: window.lhresults}, VIEWER_ORIGIN);
-      window.removeEventListener('message', msgHandler);
+    const openButton = document.querySelector('.js-open');
+    if (openButton) {
+      openButton.addEventListener('click', this.sendJSONReport.bind(this));
     }
-  });
+  }
 
-  const popup = window.open(VIEWER_URL, '_blank');
-}
+  /**
+   * Opens a new tab to the online viewer and sends the local page's JSON results
+   * to the online viewer using postMessage.
+   */
+  sendJSONReport() {
+    const VIEWER_ORIGIN = 'https://googlechrome.github.io';
+    const VIEWER_URL = `${VIEWER_ORIGIN}/lighthouse/viewer/`;
 
-/**
- * Sets up listeners to expand audit `<details>` when the user prints the page.
- * Ideally, a print stylesheet could take care of this, but CSS has no way to
- * open a `<details>` element. When the user closes the print dialog, all
- * `<details>` are collapsed.
- */
-function expandDetailsWhenPrinting() {
-  const details = Array.from(document.querySelectorAll('details'));
+    // Chrome doesn't allow us to immediately postMessage to a popup right
+    // after it's created. Normally, we could also listen for the popup window's
+    // load event, however it is cross-domain and won't fire. Instead, listen
+    // for a message from the target app saying "I'm open".
+    window.addEventListener('message', function msgHandler(e) {
+      if (e.origin !== VIEWER_ORIGIN) {
+        return;
+      }
+
+      if (e.data.opened) {
+        popup.postMessage({lhresults: this.json}, VIEWER_ORIGIN);
+        window.removeEventListener('message', msgHandler);
+      }
+    }.bind(this));
 
-  // FF and IE implement these old events.
-  if ('onbeforeprint' in window) {
-    window.addEventListener('beforeprint', _ => {
-      details.map(detail => detail.open = true);
-    });
-    window.addEventListener('afterprint', _ => {
-      details.map(detail => detail.open = false);
-    });
-  } else {
-    // Note: while FF has media listeners, it doesn't fire when matching 'print'.
-    window.matchMedia('print').addListener(mql => {
-      details.map(detail => detail.open = mql.matches);
-    });
+    const popup = window.open(VIEWER_URL, '_blank');
   }
-}
 
-window.addEventListener('DOMContentLoaded', _ => {
-  expandDetailsWhenPrinting();
+  /**
+   * Sets up listeners to expand audit `<details>` when the user prints the page.
+   * Ideally, a print stylesheet could take care of this, but CSS has no way to
+   * open a `<details>` element. When the user closes the print dialog, all
+   * `<details>` are collapsed.
+   */
+  _setupExpandDetailsWhenPrinting() {
+    const details = Array.from(document.querySelectorAll('details'));
 
-  const printButton = document.querySelector('.js-print');
-  printButton.addEventListener('click', _ => {
-    window.print();
-  });
+    // FF and IE implement these old events.
+    if ('onbeforeprint' in window) {
+      window.addEventListener('beforeprint', _ => {
+        details.map(detail => detail.open = true);
+      });
+      window.addEventListener('afterprint', _ => {
+        details.map(detail => detail.open = false);
+      });
+    } else {
+      // Note: while FF has media listeners, it doesn't fire when matching 'print'.
+      window.matchMedia('print').addListener(mql => {
+        details.map(detail => detail.open = mql.matches);
+      });
+    }
+  }
+}
 
-  const openButton = document.querySelector('.js-open');
-  openButton.addEventListener('click', sendJSONReport);
+window.addEventListener('DOMContentLoaded', _ => {
+  new LighthouseReport(window.lhresults);
 });