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

Commit 1d4374b

Browse files
bradfrostbradfrost
committed
Merge branch 'dev' of https://github.com/pattern-lab/patternlab-php into dev
2 parents c770365 + 136744c commit 1d4374b

File tree

12 files changed

+428
-242
lines changed

12 files changed

+428
-242
lines changed

‎builder/builder.php

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
*
1111
* php builder.php -g
1212
* Iterates over the 'source' directories & files and generates the entire site a single time.
13+
* It also cleans the 'public' directory.
1314
*
1415
* php builder.php -w
1516
* Generates the site like the -g flag and then watches for changes in the 'source' directories &
@@ -40,7 +41,7 @@
4041
$g->generate();
4142
print "your site has been generated...\n";
4243

43-
} elseif (isset($args["w"])) {
44+
} else if (isset($args["w"])) {
4445

4546
// initiate the w (watch) switch
4647

@@ -60,7 +61,8 @@
6061
print "\n";
6162
print "Usage:\n\n";
6263
print " php ".$_SERVER["PHP_SELF"]." -g\n";
63-
print " Iterates over the 'source' directories & files and generates the entire site a single time.\n\n";
64+
print " Iterates over the 'source' directories & files and generates the entire site a single time.\n";
65+
print " It also cleans the 'public' directory.\n\n";
6466
print " php ".$_SERVER["PHP_SELF"]." -w\n";
6567
print " Generates the site like the -g flag and then watches for changes in the 'source' directories &\n";
6668
print " files. Will re-generate files if they've changed.\n\n";

‎builder/lib/builder.lib.php

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -727,6 +727,78 @@ protected function updateChangeTime() {
727727

728728
}
729729

730+
/**
731+
* Delete patterns and user-created directories and files in public/
732+
*/
733+
protected function cleanPublic() {
734+
735+
// find all of the patterns in public/. sort by the children first
736+
$objects = new RecursiveIteratorIterator(new RecursiveDirectoryIterator(__DIR__."/../../public/patterns/"), RecursiveIteratorIterator::CHILD_FIRST);
737+
738+
// make sure dots are skipped
739+
$objects->setFlags(FilesystemIterator::SKIP_DOTS);
740+
741+
// for each file figure out what to do with it
742+
foreach($objects as $name => $object) {
743+
744+
if ($object->isDir()) {
745+
// if this is a directory remove it
746+
rmdir($name);
747+
} else if ($object->isFile() && ($object->getFilename() != "README")) {
748+
// if this is a file remove it
749+
unlink($name);
750+
}
751+
752+
}
753+
754+
// scan source/ & public/ to figure out what directories might need to be cleaned up
755+
$sourceDirs = glob(__DIR__."/../../source/*",GLOB_ONLYDIR);
756+
$publicDirs = glob(__DIR__."/../../public/*",GLOB_ONLYDIR);
757+
758+
// make sure some directories aren't deleted
759+
$ignoreDirs = array("listeners","styleguide");
760+
foreach ($ignoreDirs as $ignoreDir) {
761+
$key = array_search(__DIR__."/../../public/".$ignoreDir,$publicDirs);
762+
if ($key !== false){
763+
unset($publicDirs[$key]);
764+
}
765+
}
766+
767+
// compare source dirs against public. remove those dirs w/ an underscore in source/ from the public/ list
768+
foreach ($sourceDirs as $sourceDir) {
769+
$cleanDir = str_replace(__DIR__."/../../source/","",$sourceDir);
770+
if ($cleanDir[0] == "_") {
771+
$key = array_search(__DIR__."/../../public/".str_replace("_","",$cleanDir),$publicDirs);
772+
if ($key !== false){
773+
unset($publicDirs[$key]);
774+
}
775+
}
776+
}
777+
778+
// for the remaining dirs in public delete them and their files
779+
foreach ($publicDirs as $dir) {
780+
781+
$objects = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($dir), RecursiveIteratorIterator::CHILD_FIRST);
782+
783+
// make sure dots are skipped
784+
$objects->setFlags(FilesystemIterator::SKIP_DOTS);
785+
786+
foreach($objects as $name => $object) {
787+
788+
if ($object->isDir()) {
789+
rmdir($name);
790+
} else if ($object->isFile()) {
791+
unlink($name);
792+
}
793+
794+
}
795+
796+
rmdir($dir);
797+
798+
}
799+
800+
}
801+
730802
/**
731803
* Copies a file from the given source path to the given public path.
732804
* THIS IS NOT FOR PATTERNS

‎builder/lib/generator.lib.php

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ public function __construct() {
2828
*/
2929
public function generate() {
3030

31+
// clean the public directory to remove old files
32+
$this->cleanPublic();
33+
3134
// gather data
3235
$this->gatherData();
3336

@@ -52,7 +55,7 @@ public function generate() {
5255

5356
}
5457

55-
// iterate over all of the other files in the source directory and move them if their modified time has changed
58+
// iterate over all of the other files in the source directory
5659
$objects = new RecursiveIteratorIterator(new RecursiveDirectoryIterator(__DIR__."/../../source/"), RecursiveIteratorIterator::SELF_FIRST);
5760

5861
// make sure dots are skipped
@@ -73,7 +76,7 @@ public function generate() {
7376
}
7477

7578
// check to see if it's a new file or a file that has changed
76-
if (!$ignoreDir && $object->isFile() && (!file_exists(__DIR__."/../../public/".$fileName) || ($object->getMTime() > filemtime(__DIR__."/../../public/".$fileName)))) {
79+
if (!$ignoreDir && $object->isFile() && (!file_exists(__DIR__."/../../public/".$fileName))) {
7780
$this->moveStaticFile($fileName);
7881
}
7982

‎public/styleguide/js/annotations-pattern.js

Lines changed: 166 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Annotations Support for Patterns - v0.2
2+
* Annotations Support for Patterns - v0.3
33
*
44
* Copyright (c) 2013 Dave Olsen, http://dmolsen.com
55
* Licensed under the MIT license
@@ -8,35 +8,119 @@
88

99
var annotationsPattern = {
1010

11-
commentsActive: false,
11+
commentsOverlayActive: false,
12+
commentsOverlay: false,
13+
commentsOverlayElement: "",
14+
commentsEmbeddedActive: false,
15+
commentsEmbedded: false,
1216

1317
/**
1418
* add an onclick handler to each element in the pattern that has an annotation
1519
*/
1620
showComments: function() {
1721

18-
for (comment in comments.comments) {
19-
var item = comments.comments[comment];
20-
var els = document.querySelectorAll(item.el);
21-
for (var i = 0; i < els.length; ++i) {
22-
els[i].onclick = (function(item) {
23-
return function(e) {
24-
if (annotationsPattern.commentsActive) {
22+
// make sure this only added when we're on a pattern specific view
23+
var body = document.getElementsByTagName("body");
24+
if (!body[0].classList.contains("pattern-list")) {
25+
for (comment in comments.comments) {
26+
var item = comments.comments[comment];
27+
var els = document.querySelectorAll(item.el);
28+
for (var i = 0; i < els.length; ++i) {
29+
els[i].onclick = (function(item) {
30+
return function(e) {
2531
e.preventDefault();
2632
e.stopPropagation();
27-
var obj = { "el": item.el, "title": item.title, "comment": item.comment };
33+
var obj = {};
34+
35+
if (annotationsPattern.commentsOverlayActive && !annotationsPattern.commentsOverlay) {
36+
37+
// if this is for an overlay and comments overlay is false set the payload to turn the overlay on
38+
annotationsPattern.commentsOverlay = true;
39+
obj = { "commentOverlay": "on", "swapOverlay": false, "el": item.el, "title": item.title, "comment": item.comment };
40+
41+
} else if (annotationsPattern.commentsOverlayActive && annotationsPattern.commentsOverlay) {
42+
43+
if (item.el == annotationsPattern.commentsOverlayElement) {
44+
45+
// if the last element was clicked again turn off the overlay
46+
annotationsPattern.commentsOverlay = false;
47+
obj = { "commentOverlay": "off" };
48+
49+
} else {
50+
51+
// if an element was clicked on while the overlay was already on swap it
52+
obj = { "commentOverlay": "on", "swapOverlay": true, "el": item.el, "title": item.title, "comment": item.comment };
53+
54+
}
55+
56+
}
57+
58+
annotationsPattern.commentsOverlayElement = item.el;
2859
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
2960
parent.postMessage(obj,targetOrigin);
61+
3062
}
31-
}
32-
})(item);
63+
})(item);
64+
}
3365
}
3466
}
3567

36-
},
68+
},
69+
70+
/**
71+
* embed a comment by building the sg-annotations div (if necessary) and building an sg-annotation div
72+
* @param {Object} element to check the parent node of
73+
* @param {String} the title of the comment
74+
* @param {String} the comment HTML
75+
*/
76+
embedComments: function (el,title,comment) {
77+
78+
// build the annotation div and add the content to it
79+
var annotationDiv = document.createElement("div");
80+
annotationDiv.classList.add("sg-annotation");
81+
82+
var h3 = document.createElement("h3");
83+
var p = document.createElement("p");
84+
h3.innerHTML = title;
85+
p.innerHTML = comment;
86+
87+
annotationDiv.appendChild(h3);
88+
annotationDiv.appendChild(p);
89+
90+
// find the parent element to attach things to
91+
var parentEl = annotationsPattern.findParent(el);
92+
93+
// see if a child with the class annotations exists
94+
var els = parentEl.getElementsByClassName("sg-annotations");
95+
if (els.length > 0) {
96+
els[0].appendChild(annotationDiv);
97+
} else {
98+
var annotationsDiv = document.createElement("div");
99+
annotationsDiv.classList.add("sg-annotations");
100+
annotationsDiv.appendChild(annotationDiv);
101+
parentEl.appendChild(annotationsDiv);
102+
}
103+
104+
},
105+
106+
/**
107+
* recursively find the parent of an element to see if it contains the sg-pattern class
108+
* @param {Object} element to check the parent node of
109+
*/
110+
findParent: function(el) {
111+
112+
if (el.parentNode.classList.contains("sg-pattern")) {
113+
return el.parentNode;
114+
} else {
115+
var parentEl = annotationsPattern.findParent(el.parentNode);
116+
}
117+
118+
return parentEl;
119+
120+
},
37121

38122
/**
39-
* toggle the has-comment class on/off based on user clicking in the viewer UI
123+
* toggle the annotation feature on/off
40124
* based on the great MDN docs at https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
41125
* @param {Object} event info
42126
*/
@@ -48,22 +132,81 @@ var annotationsPattern = {
48132
}
49133

50134
if (event.data.commentToggle != undefined) {
51-
annotationsPattern.commentsActive = (event.data.commentToggle == "on") ? true : false;
52-
for (comment in comments.comments) {
53-
var item = comments.comments[comment];
54-
var els = document.querySelectorAll(item.el);
55-
for (var i = 0; i < els.length; ++i) {
56-
if (event.data.commentToggle == "on") {
135+
136+
// if this is an overlay make sure it's active for the onclick event
137+
annotationsPattern.commentsOverlayActive = false;
138+
annotationsPattern.commentsEmbeddedActive = false;
139+
140+
// see which flag to toggle based on if this is a styleguide or view-all page
141+
var body = document.getElementsByTagName("body");
142+
if ((event.data.commentToggle == "on") && (body[0].classList.contains("pattern-list"))) {
143+
annotationsPattern.commentsEmbeddedActive = true;
144+
} else if (event.data.commentToggle == "on") {
145+
annotationsPattern.commentsOverlayActive = true;
146+
}
147+
148+
// if comments overlay is turned off make sure to remove the has-comment class and pointer
149+
if (!annotationsPattern.commentsOverlayActive) {
150+
var els = document.querySelectorAll(".has-comment");
151+
for (var i = 0; i < els.length; i++) {
152+
els[i].classList.remove("has-comment");
153+
}
154+
}
155+
156+
// if comments embedding is turned off make sure to hide the annotations div
157+
if (!annotationsPattern.commentsEmbeddedActive) {
158+
var els = document.getElementsByClassName("sg-annotations");
159+
for (var i = 0; i < els.length; i++) {
160+
els[i].style.display = "none";
161+
}
162+
}
163+
164+
// if comments overlay is turned on add the has-comment class and pointer
165+
if (annotationsPattern.commentsOverlayActive) {
166+
167+
for (comment in comments.comments) {
168+
var item = comments.comments[comment];
169+
var els = document.querySelectorAll(item.el);
170+
for (var i = 0; i < els.length; i++) {
57171
els[i].classList.add("has-comment");
58-
} else {
59-
els[i].classList.remove("has-comment");
60172
}
61173
}
174+
175+
} else if (annotationsPattern.commentsEmbeddedActive && !annotationsPattern.commentsEmbedded) {
176+
177+
// if comment embedding is turned on and comments haven't been embedded yet do it
178+
for (comment in comments.comments) {
179+
var item = comments.comments[comment];
180+
var els = document.querySelectorAll(item.el);
181+
for (var i = 0; i < els.length; ++i) {
182+
annotationsPattern.embedComments(els[i],item.title,item.comment);
183+
}
184+
annotationsPattern.commentsEmbedded = true;
185+
}
186+
187+
} else if (annotationsPattern.commentsEmbeddedActive && annotationsPattern.commentsEmbedded) {
188+
189+
// if comment embedding is turned on and comments have been embedded simply display them
190+
var els = document.getElementsByClassName("sg-annotations");
191+
for (var i = 0; i < els.length; ++i) {
192+
els[i].style.display = "block";
193+
}
194+
62195
}
196+
63197
}
198+
64199
}
65200

66201
};
67202

203+
// add the onclick handlers to the elements that have an annotations
68204
annotationsPattern.showComments();
69-
window.addEventListener("message", annotationsPattern.receiveIframeMessage, false);
205+
window.addEventListener("message", annotationsPattern.receiveIframeMessage, false);
206+
207+
// before unloading the iframe make sure any active overlay is turned off/closed
208+
window.onbeforeunload = function() {
209+
var obj = { "commentOverlay": "off" };
210+
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
211+
parent.postMessage(obj,targetOrigin);
212+
};

0 commit comments

Comments
 (0)