refactor: pull in copy-to-clipboard component directly into the 2 different places rendering UI related to it

Author: sghoweri

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

@@ -6,19 +6,25 @@ import Hogan from 'hogan.js';
 
 try {
   /* load pattern nav */
-  var template = document.querySelector('.pl-js-pattern-nav-template');
-  var templateCompiled = Hogan.compile(template.innerHTML);
-  var templateRendered = templateCompiled.render(navItems);
+  const template = document.querySelector('.pl-js-pattern-nav-template');
+  const templateCompiled = Hogan.compile(template.innerHTML);
+  const templateRendered = templateCompiled.render(window.navItems);
   document.querySelector(
     '.pl-js-pattern-nav-target'
   ).innerHTML = templateRendered;
 
   /* load ish controls */
-  var template = document.querySelector('.pl-js-ish-controls-template');
-  var templateCompiled = Hogan.compile(template.innerHTML);
-  var templateRendered = templateCompiled.render(ishControls);
-  document.querySelector('.pl-js-controls').innerHTML = templateRendered;
+  const controlsTemplate = document.querySelector(
+    '.pl-js-ish-controls-template'
+  );
+  const controlsTemplateCompiled = Hogan.compile(controlsTemplate.innerHTML);
+  const controlsTemplateRendered = controlsTemplateCompiled.render(
+    window.ishControls
+  );
+  document.querySelector(
+    '.pl-js-controls'
+  ).innerHTML = controlsTemplateRendered;
 } catch (e) {
-  var message = '<p>Please generate your site before trying to view it.</p>';
+  const message = '<p>Please generate your site before trying to view it.</p>';
   document.querySelector('.pl-js-pattern-nav-target').innerHTML = message;
 }

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

@@ -3,6 +3,7 @@
  */
 
 import { panelsUtil } from './panels-util';
+import './copy-to-clipboard';
 
 export const modalStyleguide = {
   // set up some defaults
@@ -167,9 +168,9 @@ export const modalStyleguide = {
     try {
       let obj = JSON.stringify({
         event: 'patternLab.patternQueryInfo',
-        patternData: patternData,
-        iframePassback: iframePassback,
-        switchText: switchText,
+        patternData,
+        iframePassback,
+        switchText,
       });
       parent.postMessage(obj, modalStyleguide.targetOrigin);
     } catch (e) {}

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

@@ -153,7 +153,7 @@ export const modalViewer = {
       // send a message to the pattern
       let obj = JSON.stringify({
         event: 'patternLab.patternModalInsert',
-        patternPartial: patternPartial,
+        patternPartial,
         modalContent: templateRendered.outerHTML,
       });
       document
@@ -193,16 +193,6 @@ export const modalViewer = {
    */
   slide(pos) {
     $('.pl-js-modal').toggleClass('pl-is-active');
-
-    // WIP: refactoring viewport panel to use CSS vars to resize
-    // if ($('.pl-js-modal').hasClass('pl-is-active')) {
-    //   $('html').css(
-    //     '--pl-viewport-height',
-    //     window.innerHeight - $('.pl-js-modal').innerHeight() - 32 + 'px'
-    //   );
-    // } else {
-    //   $('html').css('--pl-viewport-height', window.innerHeight - 32 + 'px');
-    // }
   },
 
   /**
@@ -252,7 +242,7 @@ export const modalViewer = {
     // send a message to the pattern
     let obj = JSON.stringify({
       event: 'patternLab.patternQuery',
-      switchText: switchText,
+      switchText,
     });
     document
       .querySelector('.pl-js-iframe')
@@ -275,14 +265,14 @@ export const modalViewer = {
       return;
     }
 
-    var data = {};
+    let data = {};
 
     try {
       data =
         typeof event.data !== 'string' ? event.data : JSON.parse(event.data);
     } catch (e) {}
 
-    if (data.event !== undefined && data.event == 'patternLab.pageLoad') {
+    if (data.event !== undefined && data.event === 'patternLab.pageLoad') {
       if (
         modalViewer.active === false &&
         data.patternpartial !== undefined &&
@@ -296,7 +286,7 @@ export const modalViewer = {
       }
     } else if (
       data.event !== undefined &&
-      data.event == 'patternLab.patternQueryInfo'
+      data.event === 'patternLab.patternQueryInfo'
     ) {
       // refresh the modal if a new pattern is loaded and the modal is active
       modalViewer.refresh(
@@ -306,7 +296,7 @@ export const modalViewer = {
       );
     } else if (
       data.event !== undefined &&
-      data.event == 'patternLab.annotationNumberClicked'
+      data.event === 'patternLab.annotationNumberClicked'
     ) {
       // slide to a given annoation
       modalViewer.slideToAnnotation(data.displayNumber);

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

@@ -8,6 +8,7 @@ import Prism from 'prismjs';
 import { Panels } from './panels';
 import { panelsUtil } from './panels-util';
 import { urlHandler, Dispatcher } from '../utils';
+import './copy-to-clipboard';
 
 export const panelsViewer = {
   // set up some defaults
@@ -307,27 +308,14 @@ $('.pl-js-modal-resizer').mousedown(function(event) {
 
   $('.pl-js-modal-cover').css('display', 'block'); /* 2 */
 
-  $('.pl-js-modal-cover').mousemove(function(event) {
+  $('.pl-js-modal-cover').mousemove(function(e) {
     /* 3 */
-    const panelHeight = window.innerHeight - event.clientY + 32; /* 4 */
+    const panelHeight = window.innerHeight - e.clientY + 32; /* 4 */
     $('.pl-js-modal').css('height', panelHeight + 'px'); /* 4 */
-
-    // WIP: updating PL viewport to be resized via CSS Vars
-    // $('.pl-js-modal').css('transition', 'none');
-    // $('.pl-js-vp-iframe-container').css('transition', 'none');
-    // $('html').css(
-    //   '--pl-viewport-height',
-    //   window.innerHeight - panelHeight - 32 + 'px'
-    // ); /* 4 */
   });
 });
 
 $('body').mouseup(function() {
-  /* 5 */
   $('.pl-js-modal').unbind('mousemove'); /* 5 */
   $('.pl-js-modal-cover').css('display', 'none'); /* 5 */
-
-  // WIP: updating viewport resizer to use CSS custom props.
-  // $('.pl-js-modal').css('transition', '');
-  // $('.pl-js-vp-iframe-container').css('transition', '');
 });

packages/uikit-workshop/src/scripts/components/prism-languages.js

@@ -6,9 +6,9 @@ export const PrismLanguages = {
   languages: [],
 
   get(key) {
-    var language;
+    let language;
 
-    for (var i = 0; i < this.languages.length; ++i) {
+    for (let i = 0; i < this.languages.length; ++i) {
       language = this.languages[i];
       if (language[key] !== undefined) {
         return language[key];
@@ -20,9 +20,9 @@ export const PrismLanguages = {
 
   add(language) {
     // see if the language already exists, overwrite if it does
-    for (var key in language) {
+    for (const key in language) {
       if (language.hasOwnProperty(key)) {
-        for (var i = 0; i < this.languages.length; ++i) {
+        for (let i = 0; i < this.languages.length; ++i) {
           if (this.languages[i][key] !== undefined) {
             this.languages[i][key] = language[key];
             return;
@@ -39,6 +39,7 @@ export const PrismLanguages = {
 PrismLanguages.add({
   twig: 'markup',
 });
+
 PrismLanguages.add({
   mustache: 'markup',
 });

packages/uikit-workshop/src/scripts/patternlab-viewer.js

@@ -2,7 +2,6 @@ import './components/typeahead';
 import './components/layout';
 import './components/modal-viewer';
 import './components/panels';
-import './components/copy-to-clipboard';
 import './components/panels-viewer';
 import './components/pattern-finder';
 import './components/plugin-loader';