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

Commit 00f41f5

Browse files
dmolsendmolsen
committed
cleaning up postmessage in the templates
1 parent a558c00 commit 00f41f5

File tree

3 files changed

+70
-178
lines changed

3 files changed

+70
-178
lines changed

‎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)