refactor: finish high-level refactoring of the 2nd half of styleguide.js's existing logic

Author: sghoweri

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

@@ -334,7 +334,7 @@ import { patternFinder } from './pattern-finder';
   //'size' is the target size of the viewport
   //'animate' is a boolean for switching the CSS animation on or off. 'animate' is true by default, but can be set to false for things like nudging and dragging
   function sizeiframe(size, animate) {
-    var theSize;
+    let theSize;
 
     if (size > maxViewportWidth) {
       //If the entered size is larger than the max allowed viewport size, cap value at max vp size
@@ -356,11 +356,11 @@ import { patternFinder } from './pattern-finder';
     $('.pl-js-vp-iframe-container').width(theSize + viewportResizeHandleWidth); //Resize viewport wrapper to desired size + size of drag resize handler
     $sgIframe.width(theSize); //Resize viewport to desired size
 
-    var targetOrigin =
+    const targetOrigin =
       window.location.protocol === 'file:'
         ? '*'
         : window.location.protocol + '//' + window.location.host;
-    var obj = JSON.stringify({
+    const obj = JSON.stringify({
       event: 'patternLab.resize',
       resize: 'true',
     });
@@ -375,11 +375,11 @@ import { patternFinder } from './pattern-finder';
   $('.pl-js-vp-iframe-container').on(
     'transitionend webkitTransitionEnd',
     function(e) {
-      var targetOrigin =
+      const targetOrigin =
         window.location.protocol === 'file:'
           ? '*'
           : window.location.protocol + '//' + window.location.host;
-      var obj = JSON.stringify({
+      const obj = JSON.stringify({
         event: 'patternLab.resize',
         resize: 'true',
       });
@@ -402,7 +402,7 @@ import { patternFinder } from './pattern-finder';
   //'unit' is the type of unit: either px or em. Default is px. Accepted values are 'px' and 'em'
   //'target' is what inputs to update. Defaults to both
   function updateSizeReading(size, unit, target) {
-    var emSize, pxSize;
+    let emSize, pxSize;
 
     if (unit === 'em') {
       //If size value is in em units
@@ -445,19 +445,17 @@ import { patternFinder } from './pattern-finder';
   //   3. on "mousemove" calculate the math, save the results to a cookie, and update the viewport
   $('.pl-js-resize-handle').mousedown(function(event) {
     // capture default data
-    var origClientX = event.clientX;
-    var origViewportWidth = $sgIframe.width();
+    const origClientX = event.clientX;
+    const origViewportWidth = $sgIframe.width();
 
     fullMode = false;
 
     // show the cover
     $('.pl-js-viewport-cover').css('display', 'block');
 
     // add the mouse move event and capture data. also update the viewport width
-    $('.pl-js-viewport-cover').mousemove(function(event) {
-      var viewportWidth;
-
-      viewportWidth = origViewportWidth + 2 * (event.clientX - origClientX);
+    $('.pl-js-viewport-cover').mousemove(function(e) {
+      const viewportWidth = origViewportWidth + 2 * (e.clientX - origClientX);
 
       if (viewportWidth > minViewportWidth) {
         if (!DataSaver.findValue('vpWidth')) {
@@ -480,16 +478,16 @@ import { patternFinder } from './pattern-finder';
   });
 
   // capture the viewport width that was loaded and modify it so it fits with the pull bar
-  var origViewportWidth = $('.pl-js-iframe').width();
+  const origViewportWidth = $('.pl-js-iframe').width();
   $('.pl-js-vp-iframe-container').width(origViewportWidth);
 
-  var testWidth = window.screen.width;
+  let testWidth = window.screen.width;
   if (window.orientation !== undefined) {
     testWidth =
       window.orientation === 0 ? window.screen.width : window.screen.height;
   }
   if (
-    $(window).width() == testWidth &&
+    $(window).width() === testWidth &&
     'ontouchstart' in document.documentElement &&
     $(window).width() <= 1024
   ) {
@@ -500,11 +498,11 @@ import { patternFinder } from './pattern-finder';
   updateSizeReading($('.pl-js-iframe').width());
 
   // get the request vars
-  var oGetVars = urlHandler.getRequestVars();
+  const oGetVars = urlHandler.getRequestVars();
 
   // pre-load the viewport width
-  var vpWidth = 0;
-  var trackViewportWidth = true; // can toggle this feature on & off
+  let vpWidth = 0;
+  const trackViewportWidth = true; // can toggle this feature on & off
 
   if (oGetVars.h !== undefined || oGetVars.hay !== undefined) {
     startHay();
@@ -523,18 +521,18 @@ import { patternFinder } from './pattern-finder';
   }
 
   // set up the defaults for the
-  var baseIframePath =
+  const baseIframePath =
     window.location.protocol +
     '//' +
     window.location.host +
     window.location.pathname.replace('index.html', '');
-  var patternName =
+  let patternName =
     window.config.defaultPattern !== undefined &&
     typeof window.config.defaultPattern === 'string' &&
     window.config.defaultPattern.trim().length > 0
       ? window.config.defaultPattern
       : 'all';
-  var iFramePath =
+  let iFramePath =
     baseIframePath + 'styleguide/html/styleguide.html?' + Date.now();
   if (oGetVars.p !== undefined || oGetVars.pattern !== undefined) {
     patternName = oGetVars.p !== undefined ? oGetVars.p : oGetVars.pattern;
@@ -582,7 +580,7 @@ import { patternFinder } from './pattern-finder';
   $('a[data-patternpartial]').on('click', function(e) {
     e.preventDefault();
     // update the iframe via the history api handler
-    var obj = JSON.stringify({
+    const obj = JSON.stringify({
       event: 'patternLab.updatePath',
       path: urlHandler.getFileName($(this).attr('data-patternpartial')),
     });
@@ -599,7 +597,7 @@ import { patternFinder } from './pattern-finder';
 
   // Listen for resize changes
   if (window.orientation !== undefined) {
-    var origOrientation = window.orientation;
+    let origOrientation = window.orientation;
     window.addEventListener(
       'orientationchange',
       function() {
@@ -619,17 +617,21 @@ import { patternFinder } from './pattern-finder';
   function receiveIframeMessage(event) {
     // does the origin sending the message match the current host? if not dev/null the request
     if (
-      window.location.protocol !== 'file:' &&
-      event.origin !== window.location.protocol + '//' + window.location.host
+      (window.location.protocol !== 'file:' &&
+        event.origin !==
+          window.location.protocol + '//' + window.location.host) ||
+      event.data === '' // message received, but no data included; prevents JSON.parse error below
     ) {
       return;
     }
 
-    var data = {};
+    let data = {};
     try {
       data =
         typeof event.data !== 'string' ? event.data : JSON.parse(event.data);
-    } catch (e) {}
+    } catch (e) {
+      throw Error(e);
+    }
 
     if (data.event !== undefined) {
       if (data.event === 'patternLab.pageLoad') {
@@ -673,14 +675,17 @@ import { patternFinder } from './pattern-finder';
           }
         } else if (data.keyPress === 'ctrl+shift+0') {
           sizeiframe(320, true);
-        } else if (found == data.keyPress.match(/ctrl\+shift\+([1-9])/)) {
-          var val = mqs[found[1] - 1];
-          var type = val.indexOf('px') !== -1 ? 'px' : 'em';
-          val = val.replace(type, '');
-          var width = type === 'px' ? val * 1 : val * $bodySize;
-          sizeiframe(width, true);
         }
-        return false;
+
+        // @todo: chat with Brian on if this code is still used and necessary; both the `mqs` and `found` variables are both currently undefined.
+        // else if (found === data.keyPress.match(/ctrl\+shift\+([1-9])/)) {
+        //   let val = mqs[found[1] - 1];
+        //   const type = val.indexOf('px') !== -1 ? 'px' : 'em';
+        //   val = val.replace(type, '');
+        //   const width = type === 'px' ? val * 1 : val * $bodySize;
+        //   sizeiframe(width, true);
+        // }
+        // return false;
       }
     }
   }