refactor: update Tools Menu to use new <pl-button> and <pl-icon> components + switch to rendering using lit-html

Author: sghoweri

packages/uikit-workshop/src/scripts/components/pl-tools-menu/pl-tools-menu.js

@@ -5,111 +5,175 @@ import { BaseComponent } from '../base-component.js';
 import { urlHandler, patternName } from '../../utils';
 import { store } from '../../store'; // redux store
 
-import NewTabIcon from '../../../icons/new-tab.svg';
-import HelpIcon from '../../../icons/help.svg';
-import SettingsIcon from '../../../icons/settings.svg';
+let listeningForBodyClicks = false;
+
+import { html } from 'lit-html';
+import { BaseLitComponent } from '../base-component.js';
 
 @define
-class ToolsMenu extends BaseComponent {
+class ToolsMenu extends BaseLitComponent {
   static is = 'pl-tools-menu';
 
+  static props = {
+    isOpen: props.boolean,
+    layoutMode: props.string,
+  };
+
   _stateChanged(state) {
-    this.currentUrl =
-      state.app.currentUrl || urlHandler.getFileName(patternName);
+    if (this.currentUrl !== state.app.currentUrl) {
+      this.currentUrl =
+        state.app.currentUrl || urlHandler.getFileName(patternName);
+    }
+
+    if (this.layoutMode !== state.app.layoutMode) {
+      this.layoutMode = state.app.layoutMode || 'vertical';
+    }
   }
 
   constructor(self) {
     self = super(self);
     self.handleClick = self.handleClick.bind(self);
+    self.receiveIframeMessage = self.receiveIframeMessage.bind(self);
+    self.handleExternalClicks = self.handleExternalClicks.bind(self);
     self.useShadow = false;
     return self;
   }
 
   connecting() {
+    super.connecting && super.connecting();
     const state = store.getState();
     const { ishControlsHide } = window.ishControls;
     this.currentUrl =
       state.app.currentUrl || urlHandler.getFileName(patternName);
     this.ishControlsHide = ishControlsHide;
+
+    window.addEventListener('message', this.receiveIframeMessage, false);
+    document.addEventListener('click', this.handleExternalClicks);
+  }
+
+  disconnecting() {
+    super.disconnecting && super.disconnecting();
+    document.removeEventListener('click', this.handleExternalClicks);
+    window.removeEventListener('message', this.receiveIframeMessage);
+  }
+
+  handleExternalClicks(e) {
+    if (window.innerWidth >= 670 && this.layoutMode === 'vertical') {
+      return;
+    }
+
+    if (!this.contains(e.target) && this.isOpen === true) {
+      this.isOpen = false;
+    }
+  }
+
+  close() {
+    this.isOpen = false;
+  }
+
+  toggle() {
+    if (this.isOpen) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  open() {
+    this.isOpen = true;
   }
 
   handleClick(e) {
-    const elem = e.target.closest('.pl-js-acc-handle');
-    const panel = elem.nextSibling;
+    if (window.innerWidth >= 670 && this.layoutMode === 'vertical') {
+      return;
+    }
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    this.toggle();
+  }
+
+  receiveIframeMessage(event) {
+    const self = this;
+    // 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
+    ) {
+      return;
+    }
+
+    let data = {};
+    try {
+      data =
+        typeof event.data !== 'string' ? event.data : JSON.parse(event.data);
+    } catch (e) {
+      // @todo: how do we want to handle exceptions here?
+    }
 
-    // Activate selected panel
-    elem.classList.toggle('pl-is-active');
-    panel.classList.toggle('pl-is-active');
+    if (data.event !== undefined && data.event === 'patternLab.pageClick') {
+      try {
+        console.log('patternLab.pageClick');
+        self.isOpen = false;
+      } catch (error) {
+        console.log(error);
+      }
+    }
   }
 
   render() {
-    return (
+    if (window.innerWidth >= 670 && this.layoutMode === 'vertical') {
+      this.isOpen = true;
+    }
+
+    return html`
       <div class="pl-c-tools">
-        <button
-          class="pl-c-tools__toggle pl-js-acc-handle"
-          title="Tools"
-          onClick={this.handleClick}
+        <pl-button
+          icon-only
+          @click="${this.handleClick}"
+          class="pl-c-tools__toggle"
+        >
+          <pl-icon name="settings" slot="after"></pl-icon>
+        </pl-button>
+        <ul
+          class="pl-c-tools__list pl-js-acc-panel ${this.isOpen
+            ? 'is-open'
+            : ''}"
         >
-          <SettingsIcon
-            width={18}
-            height={18}
-            viewBox="0 0 24 24"
-            className="pl-c-tools__toggle-icon"
-            fill="currentColor"
-          />
-        </button>
-        <ul class="pl-c-tools__list pl-js-acc-panel">
           <li class="pl-c-tools__item">
-            <pl-toggle-info />
+            <pl-toggle-info></pl-toggle-info>
           </li>
+
           <li class="pl-c-tools__item">
-            <pl-toggle-layout text="Switch Layout" />
+            <pl-toggle-layout text="Switch Layout"></pl-toggle-layout>
           </li>
           <li class="pl-c-tools__item">
-            <pl-toggle-theme />
+            <pl-toggle-theme></pl-toggle-theme>
           </li>
 
-          {!this.ishControlsHide['views-new'] && (
-            <li class="pl-c-tools__item">
-              <a
-                href={this.currentUrl}
-                class="pl-c-tools__action pl-js-open-new-window"
-                target="_blank"
-              >
-                <span class="pl-c-tools__action-text">Open In New Tab</span>
-                <span class="pl-c-tools__action-icon">
-                  <NewTabIcon
-                    height={20}
-                    width={20}
-                    viewBox="0 0 24 24"
-                    fill="currentColor"
-                  />
-                </span>
-              </a>
-            </li>
-          )}
-
-          {!this.ishControlsHide['tools-docs'] && (
-            <li class="pl-c-tools__item">
-              <a
-                href="http://patternlab.io/docs/"
-                class="pl-c-tools__action"
-                target="_blank"
-              >
-                <span class="pl-c-tools__action-text">Pattern Lab Docs</span>
-                <span class="pl-c-tools__action-icon">
-                  <HelpIcon
-                    height={20}
-                    width={20}
-                    viewBox="0 0 24 24"
-                    fill="currentColor"
-                  />
-                </span>
-              </a>
-            </li>
-          )}
+          ${!this.ishControlsHide['views-new']
+            ? html`
+                <li class="pl-c-tools__item">
+                  <pl-button href="${this.currentUrl}" target="_blank">
+                    Open In New Tab
+                    <pl-icon name="new-tab" slot="after"></pl-icon>
+                  </pl-button>
+                </li>
+              `
+            : ''}
+          ${!this.ishControlsHide['tools-docs']
+            ? html`
+                <li class="pl-c-tools__item">
+                  <pl-button href="http://patternlab.io/docs/" target="_blank">
+                    Pattern Lab Docs
+                    <pl-icon name="help" slot="after"></pl-icon>
+                  </pl-button>
+                </li>
+              `
+            : ''}
         </ul>
       </div>
-    );
+    `;
   }
 }

packages/uikit-workshop/src/scripts/components/pl-tools-menu/pl-tools-menu.scss

@@ -19,47 +19,34 @@ pl-tools-menu {
   display: flex;
 }
 
-/**
- * Tools menu button
- * 1) This is the button that contains the toggle and 
- *    triggers the tools dropdown list
- */
-.pl-c-tools__toggle {
-  @include linkStyle();
-  margin: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  min-width: 30px;
-}
-
-/**
- * Tools Toggle SVG icon
- * 1) Cog icon
- * 2) Set the width and height of the icon to be the same height of font
- */
-.pl-c-tools__toggle-icon {
-  transition: inherit; // inherit transition styles from parent toggle
-  // pointer-events: none;
-}
-
 /**
  * Tools dropdown list
  */
 .pl-c-tools__list {
   @include listReset();
-  @include accordionPanel();
   transform: translateY(-10px);
   position: absolute;
-  right: 3px;
+  right: 4px;
   z-index: 10; // make sure context dropdown z-index is higher than nav dropdown z-index
   width: 12rem;
   border-radius: 6px;
-  top: calc(100% + 4px);
-  box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+  top: calc(100% - 2px);
+  box-shadow: 0 0 5px rgba(0, 0, 0, .2);
   background-color:  $pl-color-gray-87;
   background-color: var(--theme-primary,  $pl-color-gray-87);
+  transform: translateY(-4rem);
+  opacity: 0;
+  max-height: 0;
+  visibility: hidden;
+  pointer-events: none;
+
+  &.is-open {
+    opacity: 1;
+    max-height: 9999px;
+    visibility: visible;
+    pointer-events: auto;
+    transform: translateY(0);
+  }
 
   .pl-c-body--theme-light & {
     background-color: $pl-color-white;
@@ -73,10 +60,11 @@ pl-tools-menu {
       transform: none;
       border-radius: 0;
       background-color: transparent;
+      right: 0;
     }
   }
 
-  &.pl-is-active {
+  &.is-active {
     overflow: visible;
   }
 
@@ -91,8 +79,6 @@ pl-tools-menu {
     top: -10px;
     transform: translateY(50%) translateX(-50%) rotate(45deg);
     transition: opacity 0.1s ease-out;
-    opacity: 0;
-    visibility: hidden;
     box-shadow: 0 0 5px rgba(0, 0, 0, .1);
 
     .pl-c-body--theme-sidebar & {
@@ -102,7 +88,7 @@ pl-tools-menu {
     }
   }
 
-  &.pl-is-active:before {
+  &.is-active:before {
     opacity: 1;
     visibility: visible;
   }
@@ -111,6 +97,7 @@ pl-tools-menu {
 .pl-c-tools__item {
   position: relative;
   overflow: hidden;
+  background-color: inherit;
 
   // crop list item when hover
   &:first-child {
@@ -136,28 +123,3 @@ pl-tools-menu {
   }
 }
 
-
-/**
- * Tools dropdown actions
- * 1) Links and buttons inside of the tools dropdown
- */
-.pl-c-tools__action {
-  @include linkStyle();
-  padding-top: 0.4rem;
-  padding-bottom: 0.4rem;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  margin: 0;
-  flex-direction: row-reverse;
-  justify-content: flex-end;
-}
-
-// Make sure the text and icon align to the opposite ends
-.pl-c-tools__action-icon {
-  margin-right: 0.5rem;
-
-  &:first-child:last-child {
-    margin-right: 0;
-  }
-}