shibori 1.0.0.beta1

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

@@ -0,0 +1,289 @@
+/*!
+ * Annotations Support for the Viewer - v0.3
+ *
+ * Copyright (c) 2013 Brad Frost, http://bradfrostweb.com & Dave Olsen, http://dmolsen.com
+ * Licensed under the MIT license
+ *
+ */
+
+var annotationsViewer = {
+
+	// set-up default sections
+	commentsActive:          false,
+	commentsViewAllActive:   false,
+	targetOrigin:            (window.location.protocol === "file:") ? "*" : window.location.protocol+"//"+window.location.host,
+	moveToOnInit:            0,
+
+	/**
+	* add the onclick handler to the annotations link in the main nav
+	*/
+	onReady: function() {
+
+		// not sure this is used anymore...
+		$('body').addClass('comments-ready');
+
+		$(window).resize(function() {
+			if(!annotationsViewer.commentsActive) {
+				annotationsViewer.slideComment($('#sg-annotation-container').outerHeight());
+			}
+		});
+
+		$('#sg-t-annotations').click(function(e) {
+
+			e.preventDefault();
+
+			// remove the class from the "eye" nav item
+			$('#sg-t-toggle').removeClass('active');
+
+			// turn the annotations section on and off
+			annotationsViewer.toggleComments();
+
+		});
+
+		// initialize the annotations viewer
+		annotationsViewer.commentContainerInit();
+
+		// load the query strings in case code view has to show by default
+		var queryStringVars = urlHandler.getRequestVars();
+		if ((queryStringVars.view !== undefined) && ((queryStringVars.view === "annotations") || (queryStringVars.view === "a"))) {
+			annotationsViewer.openComments();
+			if (queryStringVars.number !== undefined) {
+				annotationsViewer.moveToOnInit = queryStringVars.number;
+			}
+		}
+
+	},
+
+	/**
+	* decide on if the annotations panel should be open or closed
+	*/
+	toggleComments: function() {
+
+		if (!annotationsViewer.commentsActive) {
+			annotationsViewer.openComments();
+		} else {
+			annotationsViewer.closeComments();
+		}
+
+	},
+
+	/**
+	* open the annotations panel
+	*/
+	openComments: function() {
+
+		// make sure the code view overlay is off before showing the annotations view
+		$('#sg-t-code').removeClass('active');
+		codeViewer.codeActive = false;
+		var obj = JSON.stringify({ "codeToggle": "off" });
+		document.getElementById('sg-viewport').contentWindow.postMessage(obj,annotationsViewer.targetOrigin);
+		codeViewer.slideCode(999);
+
+		// tell the iframe annotation view has been turned on
+		var obj = JSON.stringify({ "commentToggle": "on" });
+		document.getElementById('sg-viewport').contentWindow.postMessage(obj,annotationsViewer.targetOrigin);
+
+		// note that it's turned on in the viewer
+		annotationsViewer.commentsActive = true;
+		$('#sg-t-annotations').addClass('active');
+	},
+
+	/**
+	* close the annotations panel
+	*/
+	closeComments: function() {
+		annotationsViewer.commentsActive = false;
+		var obj = JSON.stringify({ "commentToggle": "off" });
+		document.getElementById('sg-viewport').contentWindow.postMessage(obj,annotationsViewer.targetOrigin);
+		annotationsViewer.slideComment($('#sg-annotation-container').outerHeight());
+		$('#sg-t-annotations').removeClass('active');
+	},
+
+	/**
+	* add the basic mark-up and events for the annotations container
+	*/
+	commentContainerInit: function() {
+
+		// the bulk of this template is in core/templates/index.mustache
+		if (document.getElementById("sg-annotation-container") === null) {
+			$('<div id="sg-annotation-container" class="sg-view-container"></div>').html($("#annotations-template").html()).appendTo('body').css('bottom',-$(document).outerHeight());
+			setTimeout(function(){ $('#sg-annotation-container').addClass('anim-ready'); },50); //Add animation class once container is positioned out of frame
+		}
+
+		// make sure the close button handles the click
+		$('body').delegate('#sg-annotation-close-btn','click',function() {
+			annotationsViewer.commentsActive = false;
+			$('#sg-t-annotations').removeClass('active');
+			annotationsViewer.slideComment($('#sg-annotation-container').outerHeight());
+			var obj = JSON.stringify({ "commentToggle": "off" });
+			document.getElementById('sg-viewport').contentWindow.postMessage(obj,annotationsViewer.targetOrigin);
+			return false;
+		});
+
+	},
+
+	/**
+	* slides the panel
+	*/
+	slideComment: function(pos) {
+		$('#sg-annotation-container').css('bottom',-pos);
+	},
+
+	/**
+	* moves to a particular item in the viewer
+	*/
+	moveTo: function(number) {
+		if (document.getElementById("annotation-"+number) !== undefined) {
+			var top = document.getElementById("annotation-"+number).offsetTop;
+			$('#sg-annotation-container').animate({scrollTop: top - 10}, 600);
+		}
+	},
+
+	/**
+	* when turning on or switching between patterns with annotations view on make sure we get
+	* the annotations from from the pattern via post message
+	*/
+	updateComments: function(comments) {
+
+		var commentsContainer = document.getElementById("sg-comments-container");
+
+		// clear out the comments container
+		if (commentsContainer.innerHTML !== "") {
+			commentsContainer.innerHTML = "";
+		}
+
+		// see how many comments this pattern might have. if more than zero write them out. if not alert the user to the fact their aren't any
+		var count = Object.keys(comments).length;
+		if (count > 0) {
+
+			for (i = 1; i <= count; i++) {
+
+				var displayNum = comments[i].number;
+
+				var span = document.createElement("span");
+				span.id = "annotation-state-" + displayNum;
+				span.style.fontSize = "0.8em";
+				span.style.color    = "#666";
+				if (comments[i].state === false) {
+					span.innerHTML  = " hidden";
+				}
+
+				var h2 = document.createElement("h2");
+				h2.innerHTML  = displayNum + ". " + comments[i].title;
+				h2.appendChild(span);
+
+				var div = document.createElement("div");
+				div.innerHTML = comments[i].comment;
+
+				var commentDiv = document.createElement("div");
+				commentDiv.classList.add("sg-comment-container");
+				commentDiv.id = "annotation-" + displayNum;
+				commentDiv.appendChild(h2);
+				commentDiv.appendChild(div);
+
+				commentsContainer.appendChild(commentDiv);
+
+			}
+
+		} else {
+
+			var h2        = document.createElement("h2");
+			h2.innerHTML  = "No Annotations";
+
+			var div       = document.createElement("div");
+			div.innerHTML = "There are no annotations for this pattern.";
+
+			var commentDiv = document.createElement("div");
+			commentDiv.classList.add("sg-comment-container");
+			commentDiv.appendChild(h2);
+			commentDiv.appendChild(div);
+
+			commentsContainer.appendChild(commentDiv);
+
+		}
+
+		// slide the comment section into view
+		annotationsViewer.slideComment(0);
+
+		if (annotationsViewer.moveToOnInit != "0") {
+			annotationsViewer.moveTo(annotationsViewer.moveToOnInit);
+			annotationsViewer.moveToOnInit = "0";
+		}
+
+	},
+
+	/**
+	* toggle the comment pop-up based on a user clicking on the pattern
+	* based on the great MDN docs at https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
+	* @param  {Object}      event info
+	*/
+	receiveIframeMessage: function(event) {
+
+		var data = (typeof event.data !== "string") ? event.data : JSON.parse(event.data);
+
+		// does the origin sending the message match the current host? if not dev/null the request
+		if ((window.location.protocol !== "file:") && (event.origin !== window.location.protocol+"//"+window.location.host)) {
+			return;
+		}
+
+		if (data.commentOverlay !== undefined) {
+			if (data.commentOverlay === "on") {
+				annotationsViewer.updateComments(data.comments);
+			} else {
+				annotationsViewer.slideComment($('#sg-annotation-container').outerHeight());
+			}
+		} else if (data.annotationState !== undefined) {
+			document.getElementById("annotation-state-"+data.displayNumber).innerHTML = (data.annotationState == true) ? "" : " hidden";
+		} else if (data.displaynumber !== undefined) {
+			annotationsViewer.moveTo(data.displaynumber);
+		} else if (data.keyPress !== undefined) {
+			if (data.keyPress == 'ctrl+shift+a') {
+				annotationsViewer.toggleComments();
+				return false;
+			} else if (data.keyPress == 'esc') {
+				if (annotationsViewer.commentsActive) {
+					annotationsViewer.closeComments();
+					return false;
+				}
+			}
+		} else if (data.patternpartial !== undefined) {
+			if (annotationsViewer.commentsViewAllActive && (data.patternpartial.indexOf("viewall-") != -1)) {
+				var obj = JSON.stringify({ "commentToggle": "on" });
+				document.getElementById('sg-viewport').contentWindow.postMessage(obj,annotationsViewer.targetOrigin);
+			}
+		}
+
+	}
+
+};
+
+$(document).ready(function() { annotationsViewer.onReady(); });
+window.addEventListener("message", annotationsViewer.receiveIframeMessage, false);
+
+// make sure if a new pattern or view-all is loaded that comments are turned on as appropriate
+$('#sg-viewport').load(function() {
+	if (annotationsViewer.commentsActive) {
+		var obj = JSON.stringify({ "commentToggle": "on" });
+		document.getElementById('sg-viewport').contentWindow.postMessage(obj,annotationsViewer.targetOrigin);
+	}
+});
+
+// no idea why this has to be outside. there's something funky going on with the JS pattern
+$('#sg-view li a').click(function() {
+	$(this).parent().parent().removeClass('active');
+	$(this).parent().parent().parent().parent().removeClass('active');
+});
+
+// toggle the annotations panel
+jwerty.key('ctrl+shift+a', function (e) {
+	annotationsViewer.toggleComments();
+	return false;
+});
+
+// close the annotations panel if using escape
+jwerty.key('esc', function (e) {
+	if (annotationsViewer.commentsActive) {
+		annotationsViewer.closeComments();
+		return false;
+	}
+});

data/public/styleguide/js/code-pattern.js

@@ -0,0 +1,120 @@
+/*!
+ * Code View Support for Patterns - v0.3
+ *
+ * Copyright (c) 2013-2014 Dave Olsen, http://dmolsen.com
+ * Licensed under the MIT license
+ *
+ */
+
+var codePattern = {
+
+	codeOverlayActive:  false,
+	codeEmbeddedActive: false,
+	targetOrigin: (window.location.protocol === "file:") ? "*" : window.location.protocol+"//"+window.location.host,
+
+	/**
+	* toggle the annotation feature on/off
+	* based on the great MDN docs at https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
+	* @param  {Object}      event info
+	*/
+	receiveIframeMessage: function(event) {
+
+		var data = (typeof event.data !== "string") ? event.data : JSON.parse(event.data);
+
+		// does the origin sending the message match the current host? if not dev/null the request
+		if ((window.location.protocol != "file:") && (event.origin !== window.location.protocol+"//"+window.location.host)) {
+			return;
+		}
+
+		if (data.codeToggle !== undefined) {
+
+			var els, i;
+
+			// if this is an overlay make sure it's active for the onclick event
+			codePattern.codeOverlayActive  = false;
+			codePattern.codeEmbeddedActive = false;
+
+			// see which flag to toggle based on if this is a styleguide or view-all page
+			if ((data.codeToggle == "on") && (document.getElementById("sg-patterns") !== null)) {
+				codePattern.codeEmbeddedActive = true;
+			} else if (data.codeToggle == "on") {
+				codePattern.codeOverlayActive  = true;
+			}
+
+			// if comments embedding is turned off make sure to hide the annotations div
+			if (!codePattern.codeEmbeddedActive && (document.getElementById("sg-patterns") !== null)) {
+				els = document.getElementsByClassName("sg-code");
+				for (i = 0; i < els.length; i++) {
+					els[i].style.display = "none";
+				}
+			}
+
+			// if comments overlay is turned on add the has-comment class and pointer
+			if (codePattern.codeOverlayActive) {
+
+				var obj = JSON.stringify({ "codeOverlay": "on", "lineage": lineage, "lineageR": lineageR, "patternPartial": patternPartial, "patternState": patternState, "cssEnabled": cssEnabled });
+				parent.postMessage(obj,codePattern.targetOrigin);
+
+			} else if (codePattern.codeEmbeddedActive) {
+
+				// if code embedding is turned on simply display them
+				els = document.getElementsByClassName("sg-code");
+				for (i = 0; i < els.length; ++i) {
+					els[i].style.display = "block";
+				}
+
+			}
+
+		}
+
+	}
+
+};
+
+// add the onclick handlers to the elements that have an annotations
+window.addEventListener("message", codePattern.receiveIframeMessage, false);
+
+// before unloading the iframe make sure any active overlay is turned off/closed
+window.onbeforeunload = function() {
+	var obj = JSON.stringify({ "codeOverlay": "off" });
+	parent.postMessage(obj,codePattern.targetOrigin);
+};
+
+// tell the parent iframe that keys were pressed
+
+// toggle the code panel
+jwerty.key('ctrl+shift+c', function (e) {
+	var obj = JSON.stringify({ "keyPress": "ctrl+shift+c" });
+	parent.postMessage(obj,codePattern.targetOrigin);
+	return false;
+});
+
+// when the code panel is open hijack cmd+a so that it only selects the code view
+jwerty.key('cmd+a/ctrl+a', function (e) {
+	if (codePattern.codeOverlayActive) {
+		var obj = JSON.stringify({ "keyPress": "cmd+a" });
+		parent.postMessage(obj,codePattern.targetOrigin);
+		return false;
+	}
+});
+
+// open the mustache panel
+jwerty.key('ctrl+shift+u', function (e) {
+	var obj = JSON.stringify({ "keyPress": "ctrl+shift+u" });
+	parent.postMessage(obj,codePattern.targetOrigin);
+	return false;
+});
+
+// open the html panel
+jwerty.key('ctrl+shift+h', function (e) {
+	var obj = JSON.stringify({ "keyPress": "ctrl+shift+h" });
+	parent.postMessage(obj,codePattern.targetOrigin);
+	return false;
+});
+
+// close the code panel if using escape
+jwerty.key('esc', function (e) {
+	var obj = JSON.stringify({ "keyPress": "esc" });
+	parent.postMessage(obj,codePattern.targetOrigin);
+	return false;
+});