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

Commit c543985

Browse files
dmolsendmolsen
committed
Merge branch 'feature-viewall-annotations' into dev
2 parents ae8d45e + 9374d4a commit c543985

File tree

6 files changed

+204
-65
lines changed

6 files changed

+204
-65
lines changed

‎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+
};

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

Lines changed: 26 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*!
2-
* Annotations Support for the Viewer - v0.2
2+
* Annotations Support for the Viewer - v0.3
33
*
4-
* Copyright (c) 2013 Dave Olsen, http://dmolsen.com
4+
* Copyright (c) 2013 Brad Frost, http://bradfrostweb.com & Dave Olsen, http://dmolsen.com
55
* Licensed under the MIT license
66
*
77
*/
@@ -15,30 +15,31 @@ var annotationsViewer = {
1515
onReady: function() {
1616

1717
$('body').addClass('comments-ready');
18-
$('#sg-t-annotations').click(function(){
18+
$('#sg-t-annotations').click(function(e) {
19+
20+
e.preventDefault();
21+
1922
annotationsViewer.toggleComments();
20-
return false;
23+
annotationsViewer.commentContainerInit();
24+
2125
});
2226

23-
annotationsViewer.commentContainerInit();
24-
2527
},
2628

2729
toggleComments: function() {
2830

2931
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
32+
$('#sg-t-annotations').toggleClass('active');
3033

3134
if (!annotationsViewer.commentsActive) {
3235

3336
annotationsViewer.commentsActive = true;
3437
document.getElementById('sg-viewport').contentWindow.postMessage({ "commentToggle": "on" },targetOrigin);
35-
$('#sg-t-annotations').text('Annotations On');
3638

3739
} else {
3840

3941
annotationsViewer.commentsActive = false;
4042
document.getElementById('sg-viewport').contentWindow.postMessage({ "commentToggle": "off" },targetOrigin);
41-
$('#sg-t-annotations').text('Annotations Off');
4243
annotationsViewer.slideComment(999);
4344

4445
}
@@ -47,7 +48,9 @@ var annotationsViewer = {
4748

4849
commentContainerInit: function() {
4950

50-
$('<div id="comment-container" style="display: none;"></div>').html('<a href="#" id="close-comments">Close</a><h2 id="comment-title">Annotation Title</h2><div id="comment-text">Here is some comment text</div>').appendTo('body').css('bottom',-$(document).outerHeight());
51+
if (document.getElementById("comment-container") == undefined) {
52+
$('<div id="comment-container" style="display: none;"></div>').html('<a href="#" id="close-comments">Close</a><h2 id="comment-title">Annotation Title</h2><div id="comment-text">Here is some comment text</div>').appendTo('body').css('bottom',-$(document).outerHeight());
53+
}
5154

5255
if (annotationsViewer.sw < annotationsViewer.breakpoint) {
5356
$('#comment-container').hide();
@@ -96,8 +99,12 @@ var annotationsViewer = {
9699
return;
97100
}
98101

99-
if (event.data.title != undefined) {
100-
annotationsViewer.updateComment(event.data.el,event.data.title,event.data.comment);
102+
if (event.data.commentOverlay != undefined) {
103+
if (event.data.commentOverlay == "on") {
104+
annotationsViewer.updateComment(event.data.el,event.data.title,event.data.comment);
105+
} else {
106+
annotationsViewer.slideComment($('#comment-container').outerHeight());
107+
}
101108
}
102109

103110
}
@@ -107,6 +114,14 @@ var annotationsViewer = {
107114
$(document).ready(function() { annotationsViewer.onReady(); });
108115
window.addEventListener("message", annotationsViewer.receiveIframeMessage, false);
109116

117+
// make sure if a new pattern or view-all is loaded that comments are turned on as appropriate
118+
$('#sg-viewport').load(function() {
119+
if (annotationsViewer.commentsActive) {
120+
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
121+
document.getElementById('sg-viewport').contentWindow.postMessage({ "commentToggle": "on" },targetOrigin);
122+
}
123+
});
124+
110125
// no idea why this has to be outside. there's something funky going on with the JS pattern
111126
$('#sg-view li a').click(function() {
112127
$(this).parent().parent().removeClass('active');

‎public/styleguide/js/styleguide.js

Lines changed: 1 addition & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -384,11 +384,6 @@
384384
var $sgSrc = $sgViewport.attr('src'),
385385
$vp = $sgViewport.contents(),
386386
$sgPattern = $vp.find('.sg-pattern');
387-
388-
//Inject styleguide CSS into iframe
389-
//The styleguide CSS is being injected via Javascript as to keep the user-generated source code as clean as possible.
390-
//Final code won't include any trace of Pattern Lab
391-
$vp.find("head").prepend($("<link/>", { rel: "stylesheet", href: "../../styleguide/css/styleguide.css", type: "text/css" })).prepend('<!--styleguide.css is inserted for annotation and demo purposes. Will not be included in final code. -->');
392387

393388
//Code View Trigger
394389
$('#sg-t-code').click(function(e){
@@ -402,19 +397,6 @@
402397
$code.toggle();
403398
}
404399
});
405-
406-
//Annotation View Trigger
407-
$('#sg-t-annotations').click(function(e){
408-
var $annotations = $vp.find('.sg-annotations');
409-
e.preventDefault();
410-
$(this).toggleClass('active');
411-
412-
if($vp.find('.sg-annotations').length==0) {
413-
buildAnnotationView();
414-
} else {
415-
$annotations.toggle();
416-
}
417-
});
418400

419401
//Add code blocks after each pattern
420402
function buildCodeView() {
@@ -427,17 +409,7 @@
427409
});
428410
$vp.find('.sg-code').show();
429411
}
430-
431-
//Add annotation blocks after each pattern
432-
function buildAnnotationView() {
433-
$sgPattern.each(function(index) { //Loop through each pattern
434-
$this = $(this),
435-
$thisAnnotation = "This is an example of an annotation. Eventually this annotation will be replaced by a real annotation defined in an external JSON file."; //Example Annotation
436-
437-
$('<div class="sg-annotations" />').html($thisAnnotation).appendTo($this); //Create new node, fill it with the annotation text, then append it to the pattern
438-
});
439-
$vp.find('.sg-annotations').show();
440-
}
412+
441413
});
442414

443415
})(this);

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@
1010
Therefore all calls to assets should have the ../../ in order to work in an apache-less environment
1111
-->
1212
<link rel="stylesheet" href="../../css/style.css" media="all" />
13+
<style>
14+
.has-comment, .has-comment a {
15+
cursor: help !important;
16+
}
17+
</style>
1318

1419
</head>
1520
<body>

0 commit comments

Comments
 (0)