Skip to content
This repository was archived by the owner on Feb 7, 2023. It is now read-only.

Commit 5411e3f

Browse files
dmolsendmolsen
committed
Merge branch 'feature-cleanpostmessage' into dev
2 parents c543985 + 00f41f5 commit 5411e3f

File tree

4 files changed

+148
-178
lines changed

4 files changed

+148
-178
lines changed

‎public/styleguide/js/postmessage.js

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
/*!
2+
* Basic postMessage Support - v0.1
3+
*
4+
* Copyright (c) 2013 Dave Olsen, http://dmolsen.com
5+
* Licensed under the MIT license
6+
*
7+
* Handles the postMessage stuff in the pattern, view-all, and style guide templates.
8+
*
9+
*/
10+
11+
// alert the iframe parent that the pattern has loaded assuming this view was loaded in an iframe
12+
if (self != top) {
13+
14+
// handle the options that could be sent to the parent window
15+
// - all get path
16+
// - pattern & view all get a pattern partial, styleguide gets all
17+
// - pattern shares lineage
18+
var options = { "path": window.location.toString() };
19+
options.patternpartial = (patternPartial != "") ? patternPartial : "all";
20+
if (lineage != "") {
21+
options.lineage = lineage;
22+
}
23+
24+
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
25+
parent.postMessage(options, targetOrigin);
26+
27+
// find all links and add an onclick handler for replacing the iframe address so the history works
28+
var aTags = document.getElementsByTagName('a');
29+
for (a in aTags) {
30+
aTags[a].onclick = function(e) {
31+
e.preventDefault();
32+
window.location.replace(this.getAttribute("href"));
33+
};
34+
}
35+
36+
}
37+
38+
// if there are clicks on the iframe make sure the nav in the iframe parent closes
39+
var body = document.getElementsByTagName('body');
40+
body[0].onclick = function() {
41+
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
42+
parent.postMessage( { "bodyclick": "bodyclick" }, targetOrigin)
43+
};
44+
45+
// watch the iframe source so that it can be sent back to everyone else.
46+
function receiveIframeMessage(event) {
47+
48+
// does the origin sending the message match the current host? if not dev/null the request
49+
if ((window.location.protocol != "file:") && (event.origin !== window.location.protocol+"//"+window.location.host)) {
50+
return;
51+
}
52+
53+
// see if it got a path to replace
54+
if (event.data.path != undefined) {
55+
56+
if (patternPartial != "") {
57+
58+
// handle patterns and the view all page
59+
var re = /patterns\/(.*)$/;
60+
var path = window.location.protocol+"//"+window.location.host+window.location.pathname.replace(re,'')+event.data.path;
61+
window.location.replace(path);
62+
63+
} else {
64+
65+
// handle the style guide
66+
var path = window.location.protocol+"//"+window.location.host+window.location.pathname.replace("styleguide\/html\/styleguide.html","")+event.data.path;
67+
window.location.replace(path);
68+
69+
}
70+
71+
} else if (event.data.reload != undefined) {
72+
73+
// reload the location if there was a message to do so
74+
window.location.reload();
75+
}
76+
77+
}
78+
window.addEventListener("message", receiveIframeMessage, false);

‎source/_patternlab-files/pattern-header-footer/footer.html

Lines changed: 4 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -7,48 +7,11 @@
77

88
<!-- DO NOT MODIFY -->
99
<script>
10-
11-
// alert the iframe parent that the pattern has loaded. for page follow.
12-
if (self != top) {
13-
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
14-
parent.postMessage( { "patternpartial": "{{ patternPartial }}", "path": window.location.toString(), "lineage": {{ lineage }} }, targetOrigin);
15-
}
16-
17-
// if there are clicks on the iframe make sure the nav in the iframe parent closes
18-
var body = document.getElementsByTagName('body');
19-
body[0].onclick = function() {
20-
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
21-
parent.postMessage( { "bodyclick": "bodyclick" }, targetOrigin)
22-
};
23-
24-
// find all links and add an onclick handler for replacing the iframe address so the history works
25-
var aTags = document.getElementsByTagName('a');
26-
for (a in aTags) {
27-
aTags[a].onclick = function(e) {
28-
e.preventDefault();
29-
window.location.replace(this.getAttribute("href"));
30-
};
31-
}
32-
33-
// watch the iframe source so that it can be sent back to everyone else.
34-
function receiveIframeMessage(event) {
35-
36-
// does the origin sending the message match the current host? if not dev/null the request
37-
if ((window.location.protocol != "file:") && (event.origin !== window.location.protocol+"//"+window.location.host)) {
38-
return;
39-
}
40-
41-
if (event.data.path != undefined) {
42-
var re = /patterns\/(.*)$/;
43-
var path = window.location.protocol+"//"+window.location.host+window.location.pathname.replace(re,'')+event.data.path;
44-
window.location.replace(path);
45-
} else if (event.data.reload != undefined) {
46-
window.location.reload();
47-
}
48-
49-
}
50-
window.addEventListener("message", receiveIframeMessage, false);
10+
// handle injection of items from PHP
11+
var patternPartial = "{{ patternPartial }}";
12+
var lineage = {{ lineage }};
5113
</script>
14+
<script src="../../styleguide/js/postmessage.js"></script>
5215
<script src="../../data/annotations.js"></script>
5316
<script src="../../styleguide/js/annotations-pattern.js"></script>
5417
<!-- /DO NOT MODIFY -->

‎source/_patternlab-files/styleguide.mustache

Lines changed: 33 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,38 @@
11
<!DOCTYPE html>
22
<html id="patternlab-html">
3-
<head id="patternlab-head">
4-
<title>Style Guide</title>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width" />
7-
<link rel="stylesheet" href="../../styleguide/css/styleguide.css" media="all" />
8-
<link rel="stylesheet" href="../../css/style.css" media="all" />
9-
</head>
10-
<body id="patternlab-body" class="pattern-list">
11-
12-
<!--Style Guide Main Content-->
13-
<div class="sg-main" role="main">
14-
15-
<!--Patterns-->
16-
<div id="patterns">
17-
{{# partials }}
18-
<div class="sg-pattern">
19-
<h2 class="sg-head sg-sub" ><a href="../../patterns/{{ patternLink }}" class="patternLink" data-patternpartial="{{ patternPartialPath }}">{{ patternName }}</a></h2>
20-
{{{ patternPartial }}}
21-
</div>
22-
{{/ partials }}
23-
</div> <!--end #patterns-->
24-
</div><!--End Style Guide Main Content-->
25-
<script>
26-
27-
// alert the iframe parent that the pattern has loaded. for page follow.
28-
if (self != top) {
29-
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
30-
parent.postMessage( { "patternpartial": "all", "path": window.location.toString() }, targetOrigin);
31-
}
32-
33-
// if there are clicks on the iframe make sure the nav in the iframe parent closes
34-
var body = document.getElementsByTagName("body");
35-
body[0].onclick = function() {
36-
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
37-
parent.postMessage( { "bodyclick": "bodyclick" }, targetOrigin)
38-
};
39-
40-
// find all links and add an onclick handler for replacing the iframe address so the history works
41-
if (self != top) {
42-
var aTags = document.getElementsByTagName("a");
43-
for (a in aTags) {
44-
aTags[a].onclick = function(e) {
45-
e.preventDefault();
46-
window.location.replace(this.getAttribute("href"));
47-
};
48-
}
49-
}
50-
51-
// watch the iframe source so that it can be sent back to everyone else.
52-
function receiveIframeMessage(event) {
3+
<head id="patternlab-head">
4+
<title>Pattern Lab Style Guide</title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width" />
7+
<link rel="stylesheet" href="../../styleguide/css/styleguide.css" media="all" />
8+
<link rel="stylesheet" href="../../css/style.css" media="all" />
9+
</head>
10+
<body id="patternlab-body" class="pattern-list">
5311

54-
// does the origin sending the message match the current host? if not dev/null the request
55-
if ((window.location.protocol != "file:") && (event.origin !== window.location.protocol+"//"+window.location.host)) {
56-
return;
57-
}
58-
59-
if (event.data.path != undefined) {
60-
var path = window.location.protocol+"//"+window.location.host+window.location.pathname.replace("styleguide\/html\/styleguide.html","")+event.data.path;
61-
window.location.replace(path);
62-
} else if (event.data.reload != undefined) {
63-
window.location.reload();
64-
}
12+
<!-- Style Guide Main Content -->
13+
<div class="sg-main" role="main">
14+
15+
<!-- Patterns -->
16+
<div id="patterns">
17+
{{# partials }}
18+
<div class="sg-pattern">
19+
<h2 class="sg-head sg-sub" ><a href="../../patterns/{{ patternLink }}" class="patternLink" data-patternpartial="{{ patternPartialPath }}">{{ patternName }}</a></h2>
20+
{{{ patternPartial }}}
21+
</div>
22+
{{/ partials }}
23+
</div> <!--end #patterns-->
24+
25+
</div><!--End Style Guide Main Content-->
26+
27+
<!-- JS to hook everything together and do annotations -->
28+
<script>
29+
// handle injection of items from PHP
30+
var patternPartial = "";
31+
var lineage = "";
32+
</script>
33+
<script src="../../styleguide/js/postmessage.js"></script>
34+
<script src="../../data/annotations.js"></script>
35+
<script src="../../styleguide/js/annotations-pattern.js"></script>
6536

66-
}
67-
window.addEventListener("message", receiveIframeMessage, false);
68-
</script>
69-
<script src="../../data/annotations.js"></script>
70-
<script src="../../styleguide/js/annotations-pattern.js"></script>
71-
</body>
37+
</body>
7238
</html>

‎source/_patternlab-files/viewall.mustache

Lines changed: 33 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,38 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<title>Style Guide for a Specific Pattern Sub-Type</title>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width" />
7-
<link rel="stylesheet" href="../../styleguide/css/styleguide.css" media="all" />
8-
<link rel="stylesheet" href="../../css/style.css" media="all" />
9-
</head>
10-
<body class="pattern-list">
11-
12-
<!--Style Guide Main Content-->
13-
<div class="sg-main" role="main">
14-
15-
<!--Patterns-->
16-
<div id="patterns">
17-
{{# partials }}
18-
<div class="sg-pattern">
19-
<h2 class="sg-head sg-sub" ><a href="../../patterns/{{ patternLink }}" class="patternLink" data-patternpartial="{{ patternPartialPath }}">{{ patternName }}</a></h2>
20-
{{{ patternPartial }}}
21-
</div>
22-
{{/ partials }}
23-
</div> <!--end #patterns-->
24-
25-
</div><!--end .sg-main-->
26-
<script>
27-
28-
// alert the iframe parent that the pattern has loaded. for page follow.
29-
if (self != top) {
30-
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
31-
parent.postMessage( { "patternpartial": "{{ patternPartial }}", "path": window.location.toString() }, targetOrigin);
32-
}
33-
34-
// if there are clicks on the iframe make sure the nav in the iframe parent closes
35-
var body = document.getElementsByTagName('body');
36-
body[0].onclick = function() {
37-
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
38-
parent.postMessage( { "bodyclick":"bodyclick" }, targetOrigin)
39-
};
40-
41-
// find all links and add an onclick handler for replacing the iframe address so the history works
42-
if (self != top) {
43-
var aTags = document.getElementsByTagName('a');
44-
for (a in aTags) {
45-
aTags[a].onclick = function(e) {
46-
e.preventDefault();
47-
window.location.replace(this.getAttribute("href"));
48-
};
49-
}
50-
}
51-
52-
// watch the iframe source so that it can be sent back to everyone else.
53-
function receiveIframeMessage(event) {
2+
<html id="patternlab-html">
3+
<head id="patternlab-head">
4+
<title>Pattern Lab Sub-type Style Guide</title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width" />
7+
<link rel="stylesheet" href="../../styleguide/css/styleguide.css" media="all" />
8+
<link rel="stylesheet" href="../../css/style.css" media="all" />
9+
</head>
10+
<body id="patternlab-body" class="pattern-list">
5411

55-
// does the origin sending the message match the current host? if not dev/null the request
56-
if ((window.location.protocol != "file:") && (event.origin !== window.location.protocol+"//"+window.location.host)) {
57-
return;
58-
}
12+
<!-- View All Patterns in a Pattern Sub-Type -->
13+
<div class="sg-main" role="main">
14+
15+
<!-- Patterns -->
16+
<div id="patterns">
17+
{{# partials }}
18+
<div class="sg-pattern">
19+
<h2 class="sg-head sg-sub" ><a href="../../patterns/{{ patternLink }}" class="patternLink" data-patternpartial="{{ patternPartialPath }}">{{ patternName }}</a></h2>
20+
{{{ patternPartial }}}
21+
</div>
22+
{{/ partials }}
23+
</div> <!--end #patterns-->
24+
25+
</div><!--end .sg-main-->
5926

60-
if (event.data.path != undefined) {
61-
var re = /patterns\/(.*)$/;
62-
var path = window.location.protocol+"//"+window.location.host+window.location.pathname.replace(re,'')+event.data.path;
63-
window.location.replace(path);
64-
} else if (event.data.reload != undefined) {
65-
window.location.reload();
66-
}
27+
<!-- JS to hook everything together and do annotations -->
28+
<script>
29+
// handle injection of items from PHP
30+
var patternPartial = "{{ patternPartial }}";
31+
var lineage = "";
32+
</script>
33+
<script src="../../styleguide/js/postmessage.js"></script>
34+
<script src="../../data/annotations.js"></script>
35+
<script src="../../styleguide/js/annotations-pattern.js"></script>
6736

68-
}
69-
window.addEventListener("message", receiveIframeMessage, false);
70-
71-
</script>
72-
<script src="../../data/annotations.js"></script>
73-
<script src="../../styleguide/js/annotations-pattern.js"></script>
74-
</body>
37+
</body>
7538
</html>

0 commit comments

Comments
 (0)