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

Commit 15c751c

Browse files
committed
Merge branch 'hotfix-all-link' into dev
2 parents 7ea2e3a + 1c57ba2 commit 15c751c

File tree

11 files changed

+72
-35
lines changed

11 files changed

+72
-35
lines changed

public/styleguide/js/styleguide.js

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
(function(w){
2+
23
var sw = document.body.clientWidth, //Viewport Width
34
sh = document.body.clientHeight, //Viewport Height
45
minViewportWidth = 240, //Minimum Size for Viewport
@@ -355,7 +356,7 @@
355356
}
356357

357358
// load the iframe source
358-
var patternName = "";
359+
var patternName = "all";
359360
var patternPath = "";
360361
var iFramePath = window.location.protocol+"//"+window.location.host+window.location.pathname.replace("index.html","")+"styleguide/html/styleguide.html";
361362
if ((oGetVars.p != undefined) || (oGetVars.pattern != undefined)) {
@@ -364,14 +365,20 @@
364365
iFramePath = (patternPath != "") ? window.location.protocol+"//"+window.location.host+window.location.pathname.replace("index.html","")+patternPath : iFramePath;
365366
}
366367

367-
document.getElementById("sg-viewport").contentWindow.location.assign(iFramePath);
368+
if (patternName != "all") {
369+
document.getElementById("title").innerHTML = "Pattern Lab - "+patternName;
370+
history.replaceState({ "pattern": patternName }, null, null);
371+
}
368372

369-
history.replaceState({ "pattern": patternName }, null, null);
373+
urlHandler.skipBack = true;
374+
document.getElementById("sg-viewport").contentWindow.location.replace(iFramePath);
370375

371376
//IFrame functionality
372377

373378
//Scripts to run after the page has loaded into the iframe
374379
$sgViewport.load(function (){
380+
381+
/*
375382
var $sgSrc = $sgViewport.attr('src'),
376383
$vp = $sgViewport.contents(),
377384
$sgPattern = $vp.find('.sg-pattern');
@@ -431,6 +438,7 @@
431438
});
432439
$vp.find('.sg-annotations').show();
433440
}
441+
*/
434442

435443
// Pattern Click
436444
// this doesn't work because patternlab-php assumes the iframe is being refreshed. not the overall app
@@ -449,15 +457,15 @@
449457
// having it outside fixes an auto-close bug i ran into
450458
$('.sg-nav a').not('.sg-acc-handle').on("click", function(e){
451459

460+
e.preventDefault();
461+
452462
// update the iframe via the history api handler
453-
urlHandler.pushPattern($(this).attr("data-patternpartial"));
463+
document.getElementById("sg-viewport").contentWindow.postMessage( { "path": urlHandler.getFileName($(this).attr("data-patternpartial")) }, urlHandler.targetOrigin);
454464

455465
// close up the menu
456466
$(this).parents('.sg-acc-panel').toggleClass('active');
457467
$(this).parents('.sg-acc-panel').siblings('.sg-acc-handle').toggleClass('active');
458468

459-
e.stopPropagation();
460-
461469
return false;
462470

463471
});
@@ -501,9 +509,12 @@ function receiveIframeMessage(event) {
501509

502510
if (!urlHandler.skipBack) {
503511

504-
var iFramePath = urlHandler.getFileName(event.data.patternpartial);
505-
urlHandler.pushPattern(event.data.patternpartial, event.data.path);
512+
if ((history.state == null) || (history.state.pattern != event.data.patternpartial)) {
513+
urlHandler.pushPattern(event.data.patternpartial, event.data.path);
514+
}
515+
506516
if (wsnConnected) {
517+
var iFramePath = urlHandler.getFileName(event.data.patternpartial);
507518
wsn.send( '{"url": "'+iFramePath+'", "patternpartial": "'+event.data.patternpartial+'" }' );
508519
}
509520

public/styleguide/js/url-handler.js

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ var urlHandler = {
3131
return fileName;
3232
}
3333

34+
if (name == "all") {
35+
return "styleguide/html/styleguide.html";
36+
}
37+
3438
var paths = (name.indexOf("viewall-") != -1) ? viewAllPaths : patternPaths;
3539
nameClean = name.replace("viewall-","");
3640

@@ -125,10 +129,13 @@ var urlHandler = {
125129
var fileName = urlHandler.getFileName(pattern);
126130
var expectedPath = window.location.protocol+"//"+window.location.host+window.location.pathname.replace("public/index.html","public/")+fileName;
127131
if (givenPath != expectedPath) {
132+
// make sure to update the iframe because there was a click
128133
document.getElementById("sg-viewport").contentWindow.postMessage( { "path": fileName }, urlHandler.targetOrigin);
129134
} else {
135+
// add to the history
130136
var addressReplacement = (window.location.protocol == "file:") ? null : window.location.protocol+"//"+window.location.host+window.location.pathname.replace("index.html","")+"?p="+pattern;
131137
history.pushState(data, null, addressReplacement);
138+
document.getElementById("title").innerHTML = "Pattern Lab - "+pattern;
132139
}
133140
},
134141

@@ -141,13 +148,8 @@ var urlHandler = {
141148
var state = e.state;
142149

143150
if (state == null) {
144-
var rVars = this.getRequestVars();
145-
if ((rVars.p != undefined) || (rVars.pattern != undefined)) {
146-
var patternName = (rVars.p != undefined) ? rVars.p : rVars.pattern;
147-
} else {
148-
this.skipBack = false;
149-
return;
150-
}
151+
this.skipBack = false;
152+
return;
151153
} else if (state != null) {
152154
var patternName = state.pattern;
153155
}
@@ -159,6 +161,7 @@ var urlHandler = {
159161
}
160162

161163
document.getElementById("sg-viewport").contentWindow.postMessage( { "path": iFramePath }, urlHandler.targetOrigin);
164+
document.getElementById("title").innerHTML = "Pattern Lab - "+patternName;
162165

163166
if (wsnConnected) {
164167
wsn.send( '{"url": "'+iFramePath+'", "patternpartial": "'+patternName+'" }' );

source/_patternlab-files/index.mustache

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>Pattern Lab</title>
4+
<title id="title">Pattern Lab</title>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width" />
77
<link rel="stylesheet" href="styleguide/css/styleguide.css" media="all" />

source/_patternlab-files/partials/patternNav.mustache

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,5 @@
1313
{{/ patternItems }}
1414
</ol></li>
1515
{{/ buckets }}
16+
<li><a href="styleguide/html/styleguide.html" class="sg-pop" data-patternpartial="all">All</a></li>
1617
</ol>

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
<!-- End of Pattern -->
1+
<!-- End of Pattern -->
2+
</div>
3+
</div>
24

35
<!--
46
Remember that patterns are displayed from two-levels deep (e.g. patterns/patterntype-patternsubtype-patternname/patterntype-patternsubtype-patternname.html)
@@ -9,8 +11,10 @@
911
<script>
1012

1113
// alert the iframe parent that the pattern has loaded. for page follow.
12-
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
13-
parent.postMessage( { "patternpartial": "{{ patternPartial }}", "path": window.location.toString() }, targetOrigin);
14+
if (self != top) {
15+
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
16+
parent.postMessage( { "patternpartial": "{{ patternPartial }}", "path": window.location.toString() }, targetOrigin);
17+
}
1418

1519
// if there are clicks on the iframe make sure the nav in the iframe parent closes
1620
var body = document.getElementsByTagName('body');

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,15 @@
99
Remember that patterns are displayed from two-levels deep (e.g. patterns/patterntype-patternsubtype-patternname/patterntype-patternsubtype-patternname.html)
1010
Therefore all calls to assets should have the ../../ in order to work in an apache-less environment
1111
-->
12-
<link rel="stylesheet" href="../../css/style.css" media="all" />
13-
<script src="../../js/modernizr.js"></script>
12+
<link rel="stylesheet" href="../../styleguide/css/styleguide.css" media="all" />
13+
<link rel="stylesheet" href="../../css/style.css" media="all" />
1414
</head>
1515
<body>
16-
17-
<!-- Start of Pattern -->
16+
17+
<div class="sg-main" role="main">
18+
19+
<!--Patterns-->
20+
<div id="patterns">
21+
<div class="sg-pattern">
22+
23+
<!-- Start of Pattern -->

source/_patternlab-files/styleguide.mustache

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,12 @@
2323
</div> <!--end #patterns-->
2424
</div><!--End Style Guide Main Content-->
2525
<script>
26+
27+
if (self != top) {
28+
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
29+
parent.postMessage( { "patternpartial": "all", "path": window.location.toString() }, targetOrigin);
30+
}
31+
2632
var body = document.getElementsByTagName('body');
2733
body[0].onclick = function() {
2834
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
@@ -32,9 +38,11 @@
3238
var els = document.getElementsByClassName("patternLink");
3339
for (i in els) {
3440
els[i].onclick = function() {
35-
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
36-
parent.postMessage( { "patternpartial": this.getAttribute("data-patternpartial"), "path": "foo" }, targetOrigin);
37-
return false;
41+
if (self != top) {
42+
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
43+
parent.postMessage( { "patternpartial": this.getAttribute("data-patternpartial"), "path": "foo" }, targetOrigin);
44+
return false;
45+
}
3846
}
3947
}
4048

source/_patternlab-files/viewall.mustache

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,12 @@
2525
</div><!--end .sg-main-->
2626
<script>
2727
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+
2834
var body = document.getElementsByTagName('body');
2935
body[0].onclick = function() {
3036
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
@@ -34,16 +40,14 @@
3440
var els = document.getElementsByClassName("patternLink");
3541
for (i in els) {
3642
els[i].onclick = function() {
37-
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
38-
parent.postMessage( { "patternpartial": this.getAttribute("data-patternpartial"), "path": "foo" }, targetOrigin);
39-
return false;
43+
if (self != top) {
44+
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
45+
parent.postMessage( { "patternpartial": this.getAttribute("data-patternpartial"), "path": "foo" }, targetOrigin);
46+
return false;
47+
}
4048
}
4149
}
4250
43-
// alert the iframe parent that the pattern has loaded. for page follow.
44-
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
45-
parent.postMessage( { "patternpartial": "{{ patternPartial }}", "path": window.location.toString() }, targetOrigin);
46-
4751
// watch the iframe source so that it can be sent back to everyone else.
4852
function receiveIframeMessage(event) {
4953

0 commit comments

Comments
 (0)