Skip to content

Commit 7e801dc

Browse files
committed
Found and fixed pattern-lab/patternlab-php#277 within PL Node
Keyboard support :) Closes #107 standardized postMessage across some usages. IE10 and up seemed fine. closes #108
1 parent 9c56035 commit 7e801dc

File tree

3 files changed

+178
-69
lines changed

3 files changed

+178
-69
lines changed

config.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"tools-all": true,
2626
"tools-follow": false,
2727
"tools-reload": false,
28-
"tools-shortcuts": false,
28+
"tools-shortcuts": true,
2929
"tools-docs": true
3030
},
3131
"patternStates": {

public/styleguide/js/postmessage.js

Lines changed: 28 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*!
22
* Basic postMessage Support - v0.1
33
*
4-
* Copyright (c) 2013 Dave Olsen, http://dmolsen.com
4+
* Copyright (c) 2013-2014 Dave Olsen, http://dmolsen.com
55
* Licensed under the MIT license
66
*
77
* Handles the postMessage stuff in the pattern, view-all, and style guide templates.
@@ -15,9 +15,11 @@ if (self != top) {
1515
// - all get path
1616
// - pattern & view all get a pattern partial, styleguide gets all
1717
// - pattern shares lineage
18-
var options = { "path": window.location.toString() };
19-
options.patternpartial = (patternPartial != "") ? patternPartial : "all";
20-
if (lineage != "") {
18+
var path = window.location.toString();
19+
var parts = path.split("?");
20+
var options = { "path": parts[0] };
21+
options.patternpartial = (patternPartial !== "") ? patternPartial : "all";
22+
if (lineage !== "") {
2123
options.lineage = lineage;
2224
}
2325

@@ -26,20 +28,22 @@ if (self != top) {
2628

2729
// find all links and add an onclick handler for replacing the iframe address so the history works
2830
var aTags = document.getElementsByTagName('a');
29-
for (a in aTags) {
30-
aTags[a].onclick = function(e) {
31+
for (var i = 0; i < aTags.length; i++) {
32+
aTags[i].onclick = function(e) {
3133
e.preventDefault();
32-
window.location.replace(this.getAttribute("href"));
34+
var href = this.getAttribute("href");
35+
if (href != "#") {
36+
window.location.replace(href);
37+
}
3338
};
3439
}
35-
40+
3641
// bind the keyboard shortcuts for various viewport resizings + pattern search
3742
var keys = [ "s", "m", "l", "d", "h", "f" ];
3843
for (var i = 0; i < keys.length; i++) {
3944
jwerty.key('ctrl+shift+'+keys[i], function (k,t) {
4045
return function(e) {
41-
var obj = JSON.stringify({ "keyPress": "ctrl+shift+"+k });
42-
parent.postMessage(obj,t);
46+
parent.postMessage({ "keyPress": "ctrl+shift+"+k },t);
4347
return false;
4448
}
4549
}(keys[i],targetOrigin));
@@ -51,8 +55,7 @@ if (self != top) {
5155
jwerty.key('ctrl+shift+'+i, function (k,t) {
5256
return function(e) {
5357
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
54-
var obj = JSON.stringify({ "keyPress": "ctrl+shift+"+k });
55-
parent.postMessage(obj,t);
58+
parent.postMessage({ "keyPress": "ctrl+shift+"+k },t);
5659
return false;
5760
}
5861
}(i,targetOrigin));
@@ -65,40 +68,44 @@ if (self != top) {
6568
var body = document.getElementsByTagName('body');
6669
body[0].onclick = function() {
6770
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
68-
parent.postMessage( { "bodyclick": "bodyclick" }, targetOrigin)
71+
parent.postMessage({ "bodyclick": "bodyclick" },targetOrigin);
6972
};
7073

7174
// watch the iframe source so that it can be sent back to everyone else.
7275
function receiveIframeMessage(event) {
73-
76+
77+
var path;
78+
var data = (typeof event.data !== "string") ? event.data : JSON.parse(event.data);
79+
7480
// does the origin sending the message match the current host? if not dev/null the request
7581
if ((window.location.protocol != "file:") && (event.origin !== window.location.protocol+"//"+window.location.host)) {
7682
return;
7783
}
7884

7985
// see if it got a path to replace
80-
if (event.data.path != undefined) {
86+
if (data.path !== undefined) {
8187

82-
if (patternPartial != "") {
88+
if (patternPartial !== "") {
8389

8490
// handle patterns and the view all page
85-
var re = /patterns\/(.*)$/;
86-
var path = window.location.protocol+"//"+window.location.host+window.location.pathname.replace(re,'')+event.data.path;
91+
var re = /patterns\/(.*)$/;
92+
path = window.location.protocol+"//"+window.location.host+window.location.pathname.replace(re,'')+data.path+'?'+Date.now();
8793
window.location.replace(path);
8894

8995
} else {
9096

9197
// handle the style guide
92-
var path = window.location.protocol+"//"+window.location.host+window.location.pathname.replace("styleguide\/html\/styleguide.html","")+event.data.path;
98+
path = window.location.protocol+"//"+window.location.host+window.location.pathname.replace("styleguide\/html\/styleguide.html","")+data.path+'?'+Date.now();
9399
window.location.replace(path);
94100

95101
}
96102

97-
} else if (event.data.reload != undefined) {
103+
} else if (data.reload !== undefined) {
98104

99105
// reload the location if there was a message to do so
100106
window.location.reload();
107+
101108
}
102109

103110
}
104-
window.addEventListener("message", receiveIframeMessage, false);
111+
window.addEventListener("message", receiveIframeMessage, false);

0 commit comments

Comments
 (0)