refactor: wrapping up refactoring / fixing eslint and prettier issues in remaining UIKit JavaScript component files

Author: sghoweri

packages/uikit-workshop/src/scripts/components/modal-styleguide.js

@@ -18,10 +18,10 @@ export const modalStyleguide = {
    */
   onReady() {
     // go through the panel toggles and add click event to the pattern extra toggle button
-    let els = document.querySelectorAll('.pl-js-pattern-extra-toggle');
+    const els = document.querySelectorAll('.pl-js-pattern-extra-toggle');
     for (let i = 0; i < els.length; ++i) {
       els[i].onclick = function(e) {
-        let patternPartial = this.getAttribute('data-patternpartial');
+        const patternPartial = this.getAttribute('data-patternpartial');
         modalStyleguide.toggle(patternPartial);
       };
     }
@@ -36,7 +36,7 @@ export const modalStyleguide = {
       modalStyleguide.active[patternPartial] === undefined ||
       !modalStyleguide.active[patternPartial]
     ) {
-      let el = document.getElementById('pl-pattern-data-' + patternPartial);
+      const el = document.getElementById('pl-pattern-data-' + patternPartial);
       modalStyleguide.collectAndSend(el, true, false);
     } else {
       modalStyleguide.highlightsHide();
@@ -116,7 +116,7 @@ export const modalStyleguide = {
      * getting thrown when certain script tags aren't rendered with partial.patternData content.
      */
     if (/\S/.test(el.innerHTML)) {
-      let patternData = JSON.parse(el.innerHTML);
+      const patternData = JSON.parse(el.innerHTML);
       if (patternData.patternName !== undefined) {
         const patternMarkupEl = document.querySelector(
           '#' + patternData.patternPartial + ' > .pl-js-pattern-example'
@@ -172,8 +172,10 @@ export const modalStyleguide = {
         iframePassback,
         switchText,
       });
-      parent.postMessage(obj, modalStyleguide.targetOrigin);
-    } catch (e) {}
+      window.parent.postMessage(obj, modalStyleguide.targetOrigin);
+    } catch (e) {
+      // @todo: how do we want to handle exceptions here?
+    }
   },
 
   /**
@@ -182,8 +184,6 @@ export const modalStyleguide = {
    * @param  {Object}      event info
    */
   receiveIframeMessage(event) {
-    let i;
-
     // does the origin sending the message match the current host? if not dev/null the request
     if (
       window.location.protocol !== 'file:' &&
@@ -196,31 +196,31 @@ export const modalStyleguide = {
     try {
       data =
         typeof event.data !== 'string' ? event.data : JSON.parse(event.data);
-    } catch (e) {}
+    } catch (e) {
+      // @todo: how do we want to handle exceptions here?
+    }
 
     // see if it got a path to replace
-    if (data.event !== undefined && data.event == 'patternLab.patternQuery') {
-      let els, iframePassback, patternData, patternMarkupEl;
-
+    if (data.event !== undefined && data.event === 'patternLab.patternQuery') {
       // find all elements related to pattern info
-      els = document.querySelectorAll('.pl-js-pattern-data');
-      iframePassback = els.length > 1;
+      const els = document.querySelectorAll('.pl-js-pattern-data');
+      const iframePassback = els.length > 1;
 
       // send each up to the parent to be read and compiled into panels
       for (let i = 0; i < els.length; i++) {
         modalStyleguide.collectAndSend(els[i], iframePassback, data.switchText);
       }
     } else if (
       data.event !== undefined &&
-      data.event == 'patternLab.patternModalInsert'
+      data.event === 'patternLab.patternModalInsert'
     ) {
       // insert the previously rendered content being passed from the iframe
       modalStyleguide.open(data.patternPartial, data.modalContent);
     } else if (
       data.event !== undefined &&
-      data.event == 'patternLab.annotationsHighlightShow'
+      data.event === 'patternLab.annotationsHighlightShow'
     ) {
-      let elsToHighlight, j, item, span;
+      let elsToHighlight, item, span;
 
       // go over the supplied annotations
       for (let i = 0; i < data.annotations.length; i++) {
@@ -238,12 +238,12 @@ export const modalStyleguide = {
             if (
               window
                 .getComputedStyle(elsToHighlight[j], null)
-                .getPropertyValue('max-height') == '0px'
+                .getPropertyValue('max-height') === '0px'
             ) {
               span.style.display = 'none';
             }
 
-            annotationTip = document.querySelector(
+            const annotationTip = document.querySelector(
               item.el + ' > span.pl-c-annotation-tip'
             );
             if (annotationTip === null) {
@@ -255,35 +255,37 @@ export const modalStyleguide = {
               annotationTip.style.display = 'inline';
             }
 
-            elsToHighlight[j].onclick = (function(item) {
+            elsToHighlight[j].onclick = (function(el) {
               return function(e) {
                 e.preventDefault();
                 e.stopPropagation();
-                let obj = JSON.stringify({
+                const obj = JSON.stringify({
                   event: 'patternLab.annotationNumberClicked',
-                  displayNumber: item.displayNumber,
+                  displayNumber: el.displayNumber,
                 });
-                parent.postMessage(obj, modalStyleguide.targetOrigin);
+                window.parent.postMessage(obj, modalStyleguide.targetOrigin);
               };
             })(item);
           }
         }
       }
     } else if (
       data.event !== undefined &&
-      data.event == 'patternLab.annotationsHighlightHide'
+      data.event === 'patternLab.annotationsHighlightHide'
     ) {
       modalStyleguide.highlightsHide();
     } else if (
       data.event !== undefined &&
-      data.event == 'patternLab.patternModalClose'
+      data.event === 'patternLab.patternModalClose'
     ) {
-      let keys = [];
-      for (let k in modalStyleguide.active) {
-        keys.push(k);
+      const keys = [];
+      for (const k in modalStyleguide.active) {
+        if (k) {
+          keys.push(k);
+        }
       }
       for (let i = 0; i < keys.length; i++) {
-        let patternPartial = keys[i];
+        const patternPartial = keys[i];
         if (modalStyleguide.active[patternPartial]) {
           modalStyleguide.close(patternPartial);
         }

packages/uikit-workshop/src/scripts/components/modal-viewer.js

@@ -53,7 +53,7 @@ export const modalViewer = {
     modalViewer.hide();
 
     // review the query strings in case there is something the modal viewer is supposed to handle by default
-    var queryStringVars = urlHandler.getRequestVars();
+    const queryStringVars = urlHandler.getRequestVars();
 
     // show the modal if code view is called via query string
     if (
@@ -108,8 +108,6 @@ export const modalViewer = {
    * close the modal window
    */
   close() {
-    let obj;
-
     // note that the modal viewer is no longer active
     DataSaver.updateValue('modalActive', 'false');
     modalViewer.active = false;
@@ -125,7 +123,7 @@ export const modalViewer = {
     $('.pl-js-pattern-info-toggle').html('Show Pattern Info');
 
     // tell the styleguide to close
-    obj = JSON.stringify({
+    const obj = JSON.stringify({
       event: 'patternLab.patternModalClose',
     });
     document
@@ -151,7 +149,7 @@ export const modalViewer = {
   insert(templateRendered, patternPartial, iframePassback, switchText) {
     if (iframePassback) {
       // send a message to the pattern
-      let obj = JSON.stringify({
+      const obj = JSON.stringify({
         event: 'patternLab.patternModalInsert',
         patternPartial,
         modalContent: templateRendered.outerHTML,
@@ -201,14 +199,14 @@ export const modalViewer = {
    */
   slideToAnnotation(pos) {
     // remove active class
-    els = document.querySelectorAll('.pl-js-annotations li');
-    for (i = 0; i < els.length; ++i) {
+    const els = document.querySelectorAll('.pl-js-annotations li');
+    for (let i = 0; i < els.length; ++i) {
       els[i].classList.remove('pl-is-active');
     }
 
     // add active class to called element and scroll to it
     for (let i = 0; i < els.length; ++i) {
-      if (i + 1 == pos) {
+      if (i + 1 === pos) {
         els[i].classList.add('pl-is-active');
         $('.pl-js-pattern-info').animate(
           {
@@ -240,7 +238,7 @@ export const modalViewer = {
     }
 
     // send a message to the pattern
-    let obj = JSON.stringify({
+    const obj = JSON.stringify({
       event: 'patternLab.patternQuery',
       switchText,
     });
@@ -268,7 +266,9 @@ export const modalViewer = {
     try {
       data =
         typeof event.data !== 'string' ? event.data : JSON.parse(event.data);
-    } catch (e) {}
+    } catch (e) {
+      // @todo: how do we want to handle exceptions here?
+    }
 
     if (data.event !== undefined && data.event === 'patternLab.pageLoad') {
       if (

packages/uikit-workshop/src/scripts/components/panels-util.js

@@ -9,14 +9,14 @@ export const panelsUtil = {
    * @param  {String}      the pattern partial for the modal
    */
   addClickEvents(templateRendered, patternPartial) {
-    var els = templateRendered.querySelectorAll('.pl-js-tab-link');
+    const els = templateRendered.querySelectorAll('.pl-js-tab-link');
     for (let i = 0; i < els.length; ++i) {
       els[i].onclick = function(e) {
         e.preventDefault();
 
-        var patternPartial = this.getAttribute('data-patternpartial');
-        var panelID = this.getAttribute('data-panelid');
-        panelsUtil.show(patternPartial, panelID);
+        const partial = this.getAttribute('data-patternpartial');
+        const panelID = this.getAttribute('data-panelid');
+        panelsUtil.show(partial, panelID);
       };
     }
 

packages/uikit-workshop/src/scripts/components/panels-viewer.js

@@ -54,14 +54,14 @@ export const panelsViewer = {
     Dispatcher.addListener('checkPanels', panelsViewer.checkPanels);
 
     // set-up defaults
-    let template, templateCompiled, templateRendered, panel;
+    let template, templateCompiled, templateRendered;
 
     // get the base panels
-    let panels = Panels.get();
+    const panels = Panels.get();
 
     // evaluate panels array and create content
     for (let i = 0; i < panels.length; ++i) {
-      panel = panels[i];
+      const panel = panels[i];
 
       // catch pattern panel since it doesn't have a name defined by default
       if (panel.name === undefined) {
@@ -79,11 +79,13 @@ export const panelsViewer = {
       if (panel.templateID !== undefined && panel.templateID) {
         if (panel.httpRequest !== undefined && panel.httpRequest) {
           // need a file and then render
-          let fileBase = urlHandler.getFileName(
+          const fileBase = urlHandler.getFileName(
             patternData.patternPartial,
             false
           );
-          let e = new XMLHttpRequest();
+          const e = new XMLHttpRequest();
+          // @todo: look deeper into how we can refactor this particular code block
+          /* eslint-disable */
           e.onload = (function(i, panels, patternData, iframeRequest) {
             return function() {
               const prismedContent = Prism.highlight(
@@ -105,7 +107,7 @@ export const panelsViewer = {
               ]);
             };
           })(i, panels, patternData, iframePassback);
-
+          /* eslint-enable */
           e.open(
             'GET',
             fileBase + panel.httpRequestReplace + '?' + new Date().getTime(),
@@ -135,11 +137,13 @@ export const panelsViewer = {
    * @param  {String}      the data from the pattern
    * @param  {Boolean}     if this is going to be passed back to the styleguide
    */
-  renderPanels(panels, patternData, iframePassback, switchText) {
+  renderPanels(panels, plData, iframePassback, switchText) {
     // set-up defaults
-    let template, templateCompiled, templateRendered;
-    let annotation, comment, count, div, els, item, markup, i;
-    let patternPartial = patternData.patternPartial;
+    const patternData = plData; // prevents params from getting re-assigned
+
+    let templateRendered;
+    let annotation, count, els, item;
+    const patternPartial = patternData.patternPartial;
     patternData.panels = panels;
 
     // set a default pattern description for modal pop-up
@@ -151,15 +155,15 @@ export const panelsViewer = {
     patternData.patternNameCaps = patternData.patternName.toUpperCase();
 
     // check for annotations in the given mark-up
-    markup = document.createElement('div');
+    const markup = document.createElement('div');
     markup.innerHTML = patternData.patternMarkup;
 
     count = 1;
     patternData.annotations = [];
     delete patternData.patternMarkup;
 
-    for (let i = 0; i < comments.comments.length; ++i) {
-      item = comments.comments[i];
+    for (let i = 0; i < window.comments.comments.length; ++i) {
+      item = window.comments.comments[i];
       els = markup.querySelectorAll(item.el);
 
       if (els.length > 0) {
@@ -176,7 +180,7 @@ export const panelsViewer = {
 
     // alert the pattern that annotations should be highlighted
     if (patternData.annotations.length > 0) {
-      let obj = JSON.stringify({
+      const obj = JSON.stringify({
         event: 'patternLab.annotationsHighlightShow',
         annotations: patternData.annotations,
       });
@@ -234,12 +238,12 @@ export const panelsViewer = {
     patternData.isPatternView = iframePassback === false;
 
     // render all of the panels in the base panel template
-    template = document.querySelector('.pl-js-panel-template-base');
-    templateCompiled = Hogan.compile(template.innerHTML);
+    const template = document.querySelector('.pl-js-panel-template-base');
+    const templateCompiled = Hogan.compile(template.innerHTML);
     templateRendered = templateCompiled.render(patternData);
 
     // make sure templateRendered is modified to be an HTML element
-    div = document.createElement('div');
+    const div = document.createElement('div');
     div.className = 'pl-c-pattern-info';
     div.innerHTML = templateRendered;
     templateRendered = div;
@@ -272,7 +276,7 @@ export const panelsViewer = {
     // find lineage links in the rendered content and add postmessage handlers in case it's in the modal
     $('.pl-js-lineage-link', templateRendered).on('click', function(e) {
       e.preventDefault();
-      let obj = JSON.stringify({
+      const obj = JSON.stringify({
         event: 'patternLab.updatePath',
         path: urlHandler.getFileName($(this).attr('data-patternpartial')),
       });