Skip to content

Support for manual viewport size input & reintroduce resize key combinations #1167

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
May 9, 2020
Merged

Support for manual viewport size input & reintroduce resize key combinations #1167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
93faada
Add support for viewport resizing
JosefBredereck Apr 28, 2020
ad59246
#1167: Fix wrong event binding
JosefBredereck Apr 28, 2020
c7cf394
#1167: Add em value edit
JosefBredereck May 2, 2020
6e86b73
Merge branch 'dev' into feature-resize-viewport-and-shortcuts
sghoweri May 4, 2020
f991005
#1167: Fix broken value input
JosefBredereck May 4, 2020
db28a9a
Merge branch 'dev' into feature-resize-viewport-and-shortcuts
bmuenzenmeyer May 5, 2020
0f44b3a
#1167: Fix zooming in size input when on phone
JosefBredereck May 9, 2020
e92002d
Merge branch 'dev' into feature-resize-viewport-and-shortcuts
JosefBredereck May 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions packages/docs/src/docs/advanced-keyboard-shortcuts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down
3 changes: 3 additions & 0 deletions packages/uikit-workshop/src/icons/hay.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 5 additions & 17 deletions packages/uikit-workshop/src/scripts/components/modal-styleguide.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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') {
Expand Down
24 changes: 5 additions & 19 deletions packages/uikit-workshop/src/scripts/components/modal-viewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand Down
24 changes: 7 additions & 17 deletions packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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 {
Expand Down
24 changes: 7 additions & 17 deletions packages/uikit-workshop/src/scripts/components/pl-search/pl-search.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Copy link
Contributor

@sghoweri sghoweri May 4, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1 on moving this logic out out into utils. Been itching to do this but hadn't gotten around to it!

import { BaseComponent } from '../base-component';

@define
Expand Down Expand Up @@ -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) {
Expand Down
23 changes: 7 additions & 16 deletions packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 {
Expand Down
23 changes: 7 additions & 16 deletions packages/uikit-workshop/src/scripts/lit-components/pl-tools-menu/pl-tools-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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 {
Expand Down
24 changes: 24 additions & 0 deletions ...p/src/scripts/lit-components/pl-viewport-size-list/pl-viewport-size-list.iframe-helper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
});
Loading