Merge pull request #1167 from JosefBredereck/feature-resize-viewport-and-shortcuts

Support for manual viewport size input & reintroduce resize key combinations

Author: sghoweri

packages/docs/src/docs/advanced-keyboard-shortcuts.md

@@ -15,12 +15,12 @@ Pattern Lab comes with support for a number of special keyboard shortcuts to mak
 
 Modifying the viewport:
 
-- **ctrl+shift+0**: set the viewport to 320px
-- **ctrl+shift+s**: set the viewport to "small"
-- **ctrl+shift+m**: set the viewport to "medium"
-- **ctrl+shift+l**: set the viewport to "large"
-- **ctrl+shift+h**: toggle Hay mode
-- **ctrl+shift+d**: toggle disco mode
+- **ctrl+alt+0**: set the viewport to 320px
+- **ctrl+alt+s**: set the viewport to "small"
+- **ctrl+alt+m**: set the viewport to "medium"
+- **ctrl+alt+l**: set the viewport to "large"
+- **ctrl+alt+h**: toggle Hay mode
+- **ctrl+alt+d**: toggle disco mode
 
 Modifying the views:
 

packages/uikit-workshop/src/icons/hay.svg

@@ -5,6 +5,7 @@
 
 import { panelsUtil } from './panels-util';
 import './pl-copy-to-clipboard/pl-copy-to-clipboard';
+import { iframeMsgDataExtraction } from '../utils';
 
 export const modalStyleguide = {
   // set up some defaults
@@ -195,24 +196,11 @@ export const modalStyleguide = {
   /**
    * toggle the comment pop-up based on a user clicking on the pattern
    * based on the great MDN docs at https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
-   * @param  {Object}      event info
+   *
+   * @param {MessageEvent} e A message received by a target object.
    */
-  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
-    ) {
-      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?
-    }
+  receiveIframeMessage(e) {
+    const data = iframeMsgDataExtraction(e);
 
     // see if it got a path to replace
     if (data.event !== undefined && data.event === 'patternLab.patternQuery') {

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

@@ -4,7 +4,7 @@
  */
 
 import { scrollTo } from 'scroll-js';
-import { urlHandler, Dispatcher } from '../utils';
+import { urlHandler, Dispatcher, iframeMsgDataExtraction } from '../utils';
 import { panelsViewer } from './panels-viewer';
 import { store } from '../store.js';
 // These are the actions needed by this element.
@@ -283,25 +283,11 @@ export const modalViewer = {
   /**
    * toggle the comment pop-up based on a user clicking on the pattern
    * based on the great MDN docs at https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
-   * @param  {Object}      event info
+   *
+   * @param {MessageEvent} e A message received by a target object.
    */
-  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
-    ) {
-      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?
-    }
+  receiveIframeMessage(e) {
+    const data = iframeMsgDataExtraction(e);
 
     if (data.event !== undefined && data.event === 'patternLab.pageLoad') {
       // @todo: refactor to better handle async iframe loading

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

@@ -7,6 +7,7 @@ const classNames = require('classnames');
 import { getParents } from './get-parents';
 import { store } from '../../store.js'; // redux store
 import { BaseComponent } from '../base-component.js';
+import { iframeMsgDataExtraction } from '../../utils';
 import Mousetrap from 'mousetrap';
 import 'url-search-params-polyfill';
 
@@ -89,24 +90,13 @@ class Nav extends BaseComponent {
     }
   }
 
-  receiveIframeMessage(event) {
+  /**
+   *
+   * @param {MessageEvent} e A message received by a target object.
+   */
+  receiveIframeMessage(e) {
     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?
-    }
+    const data = iframeMsgDataExtraction(e);
 
     if (data.event !== undefined && data.event === 'patternLab.pageClick') {
       try {

packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js

@@ -10,7 +10,7 @@ import Mousetrap from 'mousetrap';
 import VisuallyHidden from '@reach/visually-hidden';
 import Autosuggest from 'react-autosuggest';
 
-import { urlHandler } from '../../utils';
+import { urlHandler, iframeMsgDataExtraction } from '../../utils';
 import { BaseComponent } from '../base-component';
 
 @define
@@ -118,22 +118,12 @@ class Search extends BaseComponent {
     document.activeElement.blur();
   }
 
-  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
-    ) {
-      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?
-    }
+  /**
+   *
+   * @param {MessageEvent} e A message received by a target object.
+   */
+  receiveIframeMessage(e) {
+    const data = iframeMsgDataExtraction(e);
 
     if (data.event !== undefined && data.event === 'patternLab.keyPress') {
       if (data.key === 'f' && data.metaKey === true) {

packages/uikit-workshop/src/scripts/components/pl-search/pl-search.js

@@ -3,6 +3,7 @@ import { store } from '../../store.js'; // connect to redux
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { html } from 'lit-html';
 import { BaseLitComponent } from '../../components/base-component';
+import { iframeMsgDataExtraction } from '../../utils';
 import { customElement } from 'lit-element';
 import Mousetrap from 'mousetrap';
 import styles from './pl-header.scss?external';
@@ -142,24 +143,14 @@ class Header extends BaseLitComponent {
     `;
   }
 
-  receiveIframeMessage(event) {
+  /**
+   *
+   * @param {MessageEvent} e A message received by a target object.
+   */
+  receiveIframeMessage(e) {
     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?
-    }
+    const data = iframeMsgDataExtraction(e);
 
     if (data.event !== undefined && data.event === 'patternLab.pageClick') {
       try {

packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.js

@@ -2,7 +2,7 @@
 import { define, props } from 'skatejs';
 import Mousetrap from 'mousetrap';
 import { h } from 'preact';
-import { urlHandler, patternName } from '../../utils';
+import { urlHandler, patternName, iframeMsgDataExtraction } from '../../utils';
 import { store } from '../../store'; // redux store
 import styles from './pl-tools-menu.scss?external';
 
@@ -99,23 +99,14 @@ class ToolsMenu extends BaseLitComponent {
     this.toggle();
   }
 
-  receiveIframeMessage(event) {
+  /**
+   *
+   * @param {MessageEvent} e A message received by a target object.
+   */
+  receiveIframeMessage(e) {
     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?
-    }
+    const data = iframeMsgDataExtraction(e);
 
     if (data.event !== undefined && data.event === 'patternLab.pageClick') {
       try {

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

@@ -0,0 +1,24 @@
+import { targetOrigin } from '../../utils';
+
+function sendPatternLabKeyEvent(e, name) {
+  try {
+    window.parent.postMessage(
+      JSON.stringify({
+        event: `patternLab.${name}`,
+        key: e.key,
+        code: e.code,
+      }),
+      targetOrigin
+    );
+  } catch (error) {
+    // @todo: how do we want to handle exceptions here?
+  }
+}
+
+document.addEventListener('keydown', e => {
+  sendPatternLabKeyEvent(e, 'iframeKeyDownEvent');
+});
+
+document.addEventListener('keyup', e => {
+  sendPatternLabKeyEvent(e, 'iframeKeyUpEvent');
+});