cleanup

ThirstyHead · Jul 27, 2023 · 2807d1f · 2807d1f
1 parent 9eb1936
commit 2807d1f
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 46 deletions.
diff --git a/components/lh-issue/index.js b/components/lh-issue/index.js
@@ -1,31 +1,12 @@
 class LhIssue extends HTMLElement{
     constructor(){
       super();
-      this.LIGHTHOUSE = undefined;
-      this.listener = this.lighthouseListener.bind(this);
-
-      this.title = 'title';
-      this.description = 'description';
     }
 
     connectedCallback(){      
       let shadowRoot = this.attachShadow({mode:'open'});
       shadowRoot.appendChild(this.styleBlock);
       shadowRoot.appendChild(this.bodyBlock);
-
-      window.addEventListener("LighthouseUpdate", this.listener);
-      console.log('connectedCallback');
-    }
-
-    lighthouseListener(event){
-        this.LIGHTHOUSE = window.__LIGHTHOUSE_JSON__;
-        //console.log(this.LIGHTHOUSE.audits[this.rule].title);
-        this.title = this.LIGHTHOUSE.audits[this.rule].title;
-        this.description = this.LIGHTHOUSE.audits[this.rule].description;
-    }
-
-    get rule(){
-        return this.getAttribute('rule');
     }
 
     get styleBlock(){
@@ -41,9 +22,10 @@ class LhIssue extends HTMLElement{
       let bodyBlock = document.createElement('div');
 
       bodyBlock.innerHTML = `
-        <p>Source: Lighthouse</p>
-        <p>${this.title}</p>
-        <p>${this.description}</p>
+        <p class="source">Source: Lighthouse</p>
+        <p class="title">title</p>
+        <p class="description">description</p>
+        <p class="score">score</p>
       `;
 
       return bodyBlock;

diff --git a/index.html b/index.html
@@ -45,55 +45,71 @@
 
         const select = document.querySelector('#lighthouse-url');
         select.addEventListener("change", lighthouseReportListener);
-        window.addEventListener("LighthouseUpdate", debugListener);
-      }
-
-      function debugListener(event){
-        console.log(event);
+        //window.addEventListener("LighthouseUpdate", debugListener);
       }
 
       function lighthouseReportListener(event){
-        console.log(event);
-        console.log(event.srcElement.value);
-        const targetUrl = event.srcElement.value; 
-        updateLighthouseReport(targetUrl);
+        updateLighthouseReport(event.srcElement.value);
       }
 
+      /**
+       * Display/Update Lighthouse HTML report in iframe
+       * 
+       * @param url path to audited webpage (Example: '/about/index.html') 
+       */
       function updateLighthouseReport(url){
-        const baseUrl = "https://thirstyhead.com/unlighthouse-explorer/reports/mobile/2023-07-25/reports";
+        // "https://thirstyhead.com/unlighthouse-explorer/reports/mobile/2023-07-25/reports";
+        const baseUrl = "https://thirstyhead.com/unlighthouse-explorer/reports/";
+        const reportType = "mobile"; // mobile or desktop
+        const dateStamp = "2023-07-25"; // yyyy-mm-dd
+        const reportUrl = `${baseUrl}/${reportType}/${dateStamp}/reports`;
+
+        // change path from audited webpage to html lighthouse report
         let path = url.replace('/index.html', '/index/lighthouse.html');
         if(path == "/"){
           path = "/index/lighthouse.html";
         }
 
+        // load html lighthouse report in iframe
         const lighthouseReport = document.querySelector('#lighthouse-report');
-        lighthouseReport.src = baseUrl + path;
-        console.log(lighthouseReport.src);
+        lighthouseReport.src = reportUrl + path;
 
-        //load JSON Lighthouse report into global variable
+        // load JSON Lighthouse report
         let jsonPath = path.replace('.html', '.json');
-        console.log(baseUrl + jsonPath);
-        fetchLighthouseJson(baseUrl + jsonPath);
+        fetchLighthouseJson(reportUrl + jsonPath);
       }
 
+      /**
+       * Fetch JSON Lighthouse report
+       * 
+       * @param url path to lighthouse json (Example: 'https://thirstyhead.com/unlighthouse-explorer/reports/mobile/2023-07-25/reports/about/index/lighthouse.json')
+       */
       async function fetchLighthouseJson(url){
         const response = await fetch(url);
         const json = await response.json();
         window.__LIGHTHOUSE_JSON__ = json;
-        console.log(window.__LIGHTHOUSE_JSON__);
 
         const lighthouseEvent = new CustomEvent('LighthouseUpdate', {detail: url});
         this.dispatchEvent(lighthouseEvent);
       }
 
+      /**
+       * Fetches json list of all available webpages with Lighthouse audits reports (HTML and JSON)
+       */
       async function fetchReports() {
-        const response = await fetch("https://thirstyhead.com/unlighthouse-explorer/reports/mobile/2023-07-25/ci-result.json");
+        // https://thirstyhead.com/unlighthouse-explorer/reports/mobile/2023-07-25/ci-result.json
+        const baseUrl = "https://thirstyhead.com/unlighthouse-explorer/reports/";
+        const reportType = "mobile"; // mobile or desktop
+        const dateStamp = "2023-07-25"; // yyyy-mm-dd
+        const reportUrl = `${baseUrl}/${reportType}/${dateStamp}/ci-result.json`;
+
+        const response = await fetch(reportUrl);
         const reports = await response.json();        
-        console.log(reports);
 
         const select = document.querySelector('#lighthouse-url');
-        for(let item=0; item < reports.length; item++){
-          select.appendChild(new Option(`${reports[item].path}`, `${reports[item].path}`));
+        select.innerHTML = "";
+        for(let page=0; page < reports.length; page++){
+          select.appendChild(new Option(`${reports[page].path}`, `${reports[page].path}`));
         }
       }
 
@@ -332,7 +348,6 @@ <h2>WCAG 2.1</h2>
 
             <details data-sc="2.4.4" data-level="A" data-version="2.0">
               <summary><h5>2.4.4 Link Purpose (In Context)</h5></summary>
-              <lh-issue rule="link-name"></lh-issue>
             </details>
 
             <details data-sc="2.4.5" data-level="AA" data-version="2.0">

diff --git a/package.json b/package.json
@@ -4,9 +4,7 @@
   "description": "Exploring iframes",
   "main": "index.js",
   "scripts": {
-    "testm": "unlighthouse-ci --site https://fpacbc.usda.gov --mobile  --output-path reports/mobile ",
-    "testd": "unlighthouse-ci --site https://fpacbc.usda.gov --desktop --output-path reports/desktop ",
-    "test":  "unlighthouse-ci --site https://fpacbc.usda.gov"
+    "test":  " echo 'Test'"
   },
   "author": "Scott Davis <[email protected]> (https://thirstyhead.com/)",
   "license": "CC-BY-4.0"