shibori 1.0.0.beta1

data/public/styleguide/css/vendor/prism.css

@@ -0,0 +1,112 @@
+/**
+ * okaidia theme for JavaScript, CSS and HTML
+ * Loosely based on Monokai textmate theme by http://www.monokai.nl/
+ * @author ocodia
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #f8f8f2;
+	text-shadow: 0 1px rgba(0,0,0,0.3);
+	font-family: Consolas, Monaco, 'Andale Mono', monospace;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+	border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #272822;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: slategray;
+}
+
+.token.punctuation {
+	color: #f8f8f2;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol {
+	color: #f92672;
+}
+
+.token.boolean,
+.token.number{
+	color: #ae81ff;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.builtin {
+	color: #a6e22e;
+}
+
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+	color: #f8f8f2;
+}
+
+.token.atrule,
+.token.attr-value
+{
+	color: #e6db74;
+}
+
+
+.token.keyword{
+color: #66d9ef;
+}
+
+.token.regex,
+.token.important {
+	color: #fd971f;
+}
+
+.token.important {
+	font-weight: bold;
+}
+
+.token.entity {
+	cursor: help;
+}

data/public/styleguide/css/vendor/typeahead.css

@@ -0,0 +1,66 @@
+#sg-find {
+  color: #000;
+  text-transform: lowercase;
+}
+
+.show-overflow {
+  overflow: visible;
+}
+
+.typeahead,
+.tt-query,
+.tt-hint {
+  width: 220px;
+  height: 30px;
+  padding: 8px 12px;
+  font-size: 14px;
+  line-height: 16px;
+  border: 2px solid #ccc;
+  outline: none;
+}
+
+.typeahead {
+  background-color: #fff;
+}
+
+.typeahead:focus {
+  border: 2px solid #999;
+}
+
+.tt-query {
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.tt-hint {
+  color: #999
+}
+
+.tt-dropdown-menu {
+  width: 422px;
+  padding: 8px 0;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  text-align: left;
+  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+          box-shadow: 0 5px 10px rgba(0,0,0,.2);
+}
+
+.tt-suggestion {
+  padding: 3px 13px;
+  font-size: 14px;
+  line-height: 16px;
+}
+
+.tt-suggestion.tt-cursor {
+  color: #fff;
+  background-color: #0097cf;
+
+}
+
+.tt-suggestion p {
+  margin: 0;
+}

data/public/styleguide/fonts/icomoon.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="512">
+<font-face units-per-em="512" ascent="480" descent="-32" />
+<missing-glyph horiz-adv-x="512" />
+<glyph unicode="&#x20;" d="" horiz-adv-x="256" />
+<glyph unicode="&#xe600;" d="M496.131 44.302l-121.276 103.147c-12.537 11.283-25.945 16.463-36.776 15.963 28.628 33.534 45.921 77.039 45.921 124.588 0 106.039-85.961 192-192 192-106.038 0-192-85.961-192-192 0-106.039 85.961-192 192-192 47.549 0 91.054 17.293 124.588 45.922-0.5-10.831 4.68-24.239 15.963-36.776l103.147-121.276c17.661-19.623 46.511-21.277 64.11-3.678s15.946 46.449-3.677 64.11zM192 160c-70.692 0-128 57.308-128 128s57.308 128 128 128 128-57.308 128-128-57.307-128-128-128z" />
+<glyph unicode="&#xe601;" d="M512 175.953v96.094l-73.387 12.231c-2.979 9.066-6.611 17.834-10.847 26.25l43.227 60.517-67.948 67.949-60.413-43.152c-8.455 4.277-17.269 7.944-26.384 10.951l-12.201 73.207h-96.094l-12.201-73.208c-9.115-3.007-17.929-6.674-26.383-10.951l-60.414 43.152-67.949-67.949 43.227-60.518c-4.235-8.415-7.867-17.183-10.846-26.249l-73.387-12.23v-96.094l73.559-12.26c2.98-8.984 6.605-17.674 10.821-26.015l-43.374-60.724 67.949-67.948 60.827 43.447c8.301-4.175 16.945-7.764 25.882-10.717l12.289-73.736h96.094l12.289 73.737c8.937 2.953 17.581 6.542 25.883 10.716l60.826-43.446 67.948 67.948-43.372 60.723c4.216 8.341 7.839 17.031 10.82 26.016l73.559 12.259zM256 160c-35.346 0-64 28.653-64 64 0 35.346 28.654 64 64 64 35.347 0 64-28.654 64-64 0-35.347-28.653-64-64-64z" />
+<glyph unicode="&#xe602;" d="M0 272v-96c0-8.836 7.164-16 16-16h480c8.836 0 16 7.164 16 16v96c0 8.836-7.164 16-16 16h-480c-8.836 0-16-7.164-16-16z" />
+<glyph unicode="&#xe603;" d="M496 288h-176v176c0 8.836-7.164 16-16 16h-96c-8.836 0-16-7.164-16-16v-176h-176c-8.836 0-16-7.164-16-16v-96c0-8.836 7.164-16 16-16h176v-176c0-8.836 7.164-16 16-16h96c8.836 0 16 7.164 16 16v176h176c8.836 0 16 7.164 16 16v96c0 8.836-7.164 16-16 16z" />
+<glyph unicode="&#xe604;" d="M32 384h448v-96h-448zM32 256h448v-96h-448zM32 128h448v-96h-448z" />
+<glyph unicode="&#xe605;" d="M256 480c-141.385 0-256-114.615-256-256s114.615-256 256-256 256 114.615 256 256-114.615 256-256 256zM256 32c-106.039 0-192 85.961-192 192s85.961 192 192 192c106.039 0 192-85.961 192-192 0-106.039-85.961-192-192-192zM160 224c0 53.019 42.981 96 96 96s96-42.981 96-96c0-53.019-42.981-96-96-96-53.019 0-96 42.981-96 96z" />
+<glyph unicode="&#xe606;" d="M256 480c-141.385 0-256-114.615-256-256s114.615-256 256-256 256 114.615 256 256-114.615 256-256 256zM256 32c-106.039 0-192 85.961-192 192s85.961 192 192 192c106.039 0 192-85.961 192-192 0-106.039-85.961-192-192-192z" />
+<glyph unicode="&#xe607;" d="M446.059 385.941l-60.117 60.118c-18.669 18.668-55.542 33.941-81.942 33.941h-224c-26.4 0-48-21.6-48-48v-416c0-26.4 21.6-48 48-48h352c26.4 0 48 21.6 48 48v288c0 26.4-15.273 63.273-33.941 81.941zM320 412.219c1.098-0.402 2.226-0.84 3.379-1.318 9.030-3.741 15.299-8.088 17.308-10.097l60.118-60.119c2.009-2.009 6.356-8.277 10.097-17.307 0.478-1.153 0.916-2.281 1.318-3.378h-92.22v92.219zM416 32h-320v384h192v-128h128v-256zM128 224h256v-32h-256zM128 160h256v-32h-256zM128 96h256v-32h-256z" />
+<glyph unicode="&#xe608;" d="M476.698 442.679l-2.014 2.021c-47.074 47.067-124.097 47.067-171.163 0l-109.053-109.068c-47.067-47.066-47.067-124.088 0-171.155l2.013-2.013c3.916-3.924 8.073-7.462 12.368-10.729l39.924 39.925c-4.651 2.747-9.063 6.036-13.058 10.030l-2.021 2.021c-25.557 25.549-25.557 67.136 0 92.695l109.064 109.056c25.558 25.559 67.137 25.559 92.693 0l2.021-2.012c25.55-25.558 25.55-67.146 0-92.695l-49.343-49.343c8.566-21.154 12.624-43.7 12.269-66.193l76.302 76.302c47.067 47.068 47.067 124.089-0.002 171.158zM315.521 285.533c-3.916 3.916-8.073 7.461-12.368 10.72l-39.924-39.916c4.652-2.748 9.063-6.037 13.058-10.031l2.021-2.020c25.558-25.558 25.558-67.136 0-92.694l-109.065-109.067c-25.559-25.551-67.138-25.551-92.694 0l-2.021 2.021c-25.549 25.56-25.549 67.138 0 92.694l49.344 49.343c-8.567 21.153-12.623 43.701-12.269 66.193l-76.301-76.299c-47.068-47.066-47.068-124.089 0-171.162l2.013-2.016c47.076-47.064 124.096-47.064 171.164 0l109.055 109.059c47.067 47.066 47.067 124.097 0 171.163l-2.013 2.012z" />
+<glyph unicode="&#xe609;" d="M544 416h-512c-17.6 0-32-14.4-32-32v-320c0-17.6 14.4-32 32-32h512c17.6 0 32 14.4 32 32v320c0 17.6-14.4 32-32 32zM320 352h64v-64h-64v64zM416 256v-64h-64v64h64zM224 352h64v-64h-64v64zM320 256v-64h-64v64h64zM128 352h64v-64h-64v64zM224 256v-64h-64v64h64zM64 352h32v-64h-32v64zM64 256h64v-64h-64v64zM96 96h-32v64h32v-64zM384 96h-256v64h256v-64zM512 96h-96v64h96v-64zM512 192h-64v64h64v-64zM512 288h-96v64h96v-64z" horiz-adv-x="576" />
+<glyph unicode="&#xe60a;" d="M160 448h-128v-128h128v128zM192 480v0-192h-192v192h192zM64 416h64v-64h-64zM480 448h-128v-128h128v128zM512 480v0-192h-192v192h192zM384 416h64v-64h-64zM160 128h-128v-128h128v128zM192 160v0-192h-192v192h192zM64 96h64v-64h-64zM224 480h32v-32h-32zM256 448h32v-32h-32zM224 416h32v-32h-32zM256 384h32v-32h-32zM224 352h32v-32h-32zM256 320h32v-32h-32zM224 288h32v-32h-32zM224 224h32v-32h-32zM256 192h32v-32h-32zM224 160h32v-32h-32zM256 128h32v-32h-32zM224 96h32v-32h-32zM256 64h32v-32h-32zM224 32h32v-32h-32zM256 0h32v-32h-32zM480 224h32v-32h-32zM32 224h32v-32h-32zM64 256h32v-32h-32zM0 256h32v-32h-32zM128 256h32v-32h-32zM160 224h32v-32h-32zM192 256h32v-32h-32zM288 224h32v-32h-32zM320 256h32v-32h-32zM352 224h32v-32h-32zM384 256h32v-32h-32zM416 224h32v-32h-32zM448 256h32v-32h-32zM480 160h32v-32h-32zM288 160h32v-32h-32zM320 192h32v-32h-32zM352 160h32v-32h-32zM416 160h32v-32h-32zM448 192h32v-32h-32zM480 96h32v-32h-32zM288 96h32v-32h-32zM320 128h32v-32h-32zM384 128h32v-32h-32zM416 96h32v-32h-32zM448 128h32v-32h-32zM480 32h32v-32h-32zM320 64h32v-32h-32zM352 32h32v-32h-32zM384 64h32v-32h-32zM416 32h32v-32h-32zM320 0h32v-32h-32zM384 0h32v-32h-32zM448 0h32v-32h-32z" />
+<glyph unicode="&#xe60b;" d="M256 384c-111.659 0-208.441-65.021-256-160 47.559-94.979 144.341-160 256-160 111.657 0 208.439 65.021 256 160-47.558 94.979-144.343 160-256 160zM382.225 299.148c30.081-19.187 55.571-44.887 74.717-75.148-19.146-30.261-44.637-55.961-74.718-75.149-37.797-24.108-81.445-36.851-126.224-36.851-44.78 0-88.428 12.743-126.225 36.852-30.080 19.186-55.57 44.886-74.717 75.148 19.146 30.262 44.637 55.962 74.717 75.148 1.959 1.25 3.938 2.461 5.929 3.65-4.979-13.664-7.704-28.411-7.704-43.798 0-70.692 57.308-128 128-128s128 57.308 128 128c0 15.387-2.725 30.134-7.704 43.799 1.99-1.189 3.969-2.401 5.929-3.651zM256 275c0-26.51-21.49-48-48-48s-48 21.49-48 48 21.49 48 48 48 48-21.49 48-48z" />
+</font></defs></svg>

data/public/styleguide/html/README

@@ -0,0 +1 @@
+will hold the auto-generated styleguide.html

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

@@ -0,0 +1,308 @@
+/*!
+ * Annotations Support for Patterns - v0.3
+ *
+ * Copyright (c) 2013-2014 Dave Olsen, http://dmolsen.com
+ * Licensed under the MIT license
+ *
+ */
+
+var annotationsPattern = {
+	
+	commentsOverlayActive:  false,
+	commentsOverlay:        false,
+	commentsEmbeddedActive: false,
+	commentsEmbedded:       false,
+	commentsGathered:       { "commentOverlay": "on", "comments": { } },
+	trackedElements:        [ ],
+	targetOrigin:           (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host,
+	
+	/**
+	* record which annotations are related to this pattern so they can be sent to the viewer when called
+	*/
+	gatherComments: function() {
+		
+		// make sure this only added when we're on a pattern specific view
+		if (document.getElementById("sg-patterns") === null) {
+			
+			var count = 0;
+			
+			for (comment in comments.comments) {
+				var item = comments.comments[comment];
+				var els  = document.querySelectorAll(item.el);
+				if (els.length > 0) {
+					
+					count++;
+					item.displaynumber = count;
+					
+					for (var i = 0; i < els.length; ++i) {
+						els[i].onclick = (function(item) {
+							return function(e) {
+								
+								if (annotationsPattern.commentsOverlayActive) {
+									
+									e.preventDefault();
+									e.stopPropagation();
+									
+									// if an element was clicked on while the overlay was already on swap it
+									var obj = JSON.stringify({ "displaynumber": item.displaynumber, "el": item.el, "title": item.title, "comment": item.comment });
+									parent.postMessage(obj,annotationsPattern.targetOrigin);
+									
+								}
+								
+							}
+						})(item);
+					}
+				}
+				
+				
+			}
+			
+		} else {
+			
+			var obj = JSON.stringify({ "commentOverlay": "off" });
+			parent.postMessage(obj,annotationsPattern.targetOrigin);
+			
+		}
+		
+	},
+	
+	/**
+	* embed a comment by building the sg-annotations div (if necessary) and building an sg-annotation div
+	* @param  {Object}      element to check the parent node of
+	* @param  {String}      the title of the comment
+	* @param  {String}      the comment HTML
+	*/
+	embedComments: function (el,title,comment) {
+		
+		// build the annotation div and add the content to it
+		var annotationDiv = document.createElement("div");
+		annotationDiv.classList.add("sg-annotation");
+		
+		var h3       = document.createElement("h3");
+		var p        = document.createElement("p");
+		h3.innerHTML = title;
+		p.innerHTML  = comment;
+		
+		annotationDiv.appendChild(h3);
+		annotationDiv.appendChild(p);
+		
+		// find the parent element to attach things to
+		var parentEl = annotationsPattern.findParent(el);
+		
+		// see if a child with the class annotations exists
+		var els = parentEl.getElementsByClassName("sg-annotations");
+		if (els.length > 0) {
+			els[0].appendChild(annotationDiv);
+		} else {
+			var annotationsDiv = document.createElement("div");
+			annotationsDiv.classList.add("sg-annotations");
+			annotationsDiv.appendChild(annotationDiv);
+			parentEl.appendChild(annotationsDiv);
+		}
+		
+	},
+	
+	/**
+	* recursively find the parent of an element to see if it contains the sg-pattern class
+	* @param  {Object}      element to check the parent node of
+	*/
+	findParent: function(el) {
+		
+		var parentEl;
+		
+		if (el.classList.contains("sg-pattern")) {
+			return el;
+		} else if (el.parentNode.classList.contains("sg-pattern")) {
+			return el.parentNode;
+		} else {
+			parentEl = annotationsPattern.findParent(el.parentNode);
+		}
+		
+		return parentEl;
+		
+	},
+	
+	/**
+	* 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.resize !== undefined) && (annotationsPattern.commentsOverlayActive)) {
+			
+			for (var i = 0; i < annotationsPattern.trackedElements.length; ++i) {
+				var el = annotationsPattern.trackedElements[i];
+				if (window.getComputedStyle(el.element,null).getPropertyValue("max-height") == "0px") {
+					el.element.firstChild.style.display = "none";
+					var obj = JSON.stringify({"annotationState": false, "displayNumber": el.displayNumber });
+					parent.postMessage(obj,annotationsPattern.targetOrigin);
+				} else {
+					el.element.firstChild.style.display = "block";
+					var obj = JSON.stringify({"annotationState": true, "displayNumber": el.displayNumber });
+					parent.postMessage(obj,annotationsPattern.targetOrigin);
+				}
+			}
+			
+		} else if (data.commentToggle !== undefined) {
+			
+			var i, els, item, displayNum;
+			
+			// if this is an overlay make sure it's active for the onclick event
+			annotationsPattern.commentsOverlayActive  = false;
+			annotationsPattern.commentsEmbeddedActive = false;
+			
+			// see which flag to toggle based on if this is a styleguide or view-all page
+			if ((data.commentToggle === "on") && (document.getElementById("sg-patterns") !== null)) {
+				annotationsPattern.commentsEmbeddedActive = true;
+			} else if (data.commentToggle === "on") {
+				annotationsPattern.commentsOverlayActive  = true;
+			}
+			
+			// if comments overlay is turned off make sure to remove the has-annotation class and pointer
+			if (!annotationsPattern.commentsOverlayActive) {
+				els = document.querySelectorAll(".has-annotation");
+				for (i = 0; i < els.length; i++) {
+					els[i].classList.remove("has-annotation");
+				}
+				els = document.querySelectorAll(".annotation-tip");
+				for (i = 0; i < els.length; i++) {
+					els[i].style.display = "none";
+				}
+			}
+			
+			// if comments embedding is turned off make sure to hide the annotations div
+			if (!annotationsPattern.commentsEmbeddedActive) {
+				els = document.getElementsByClassName("sg-annotations");
+				for (i = 0; i < els.length; i++) {
+					els[i].style.display = "none";
+				}
+			}
+			
+			// if comments overlay is turned on add the has-annotation class and pointer
+			if (annotationsPattern.commentsOverlayActive) {
+				
+				var count = 0;
+				
+				for (i = 0; i < comments.comments.length; i++) {
+					item = comments.comments[i];
+					els  = document.querySelectorAll(item.el);
+					
+					var state = true;
+					
+					if (els.length) {
+						
+						count++;
+						
+						//Loop through all items with annotations
+						for (k = 0; k < els.length; k++) {
+							
+							els[k].classList.add("has-annotation");
+							
+							var span       = document.createElement("span");
+							span.innerHTML = count;
+							span.classList.add("annotation-tip");
+							
+							if (window.getComputedStyle(els[k],null).getPropertyValue("max-height") == "0px") {
+								span.style.display = "none";
+								state = false;
+							}
+							
+							annotationsPattern.trackedElements.push({ "itemel": item.el, "element": els[k], "displayNumber": count, "state": state });
+							
+							els[k].insertBefore(span,els[k].firstChild);
+							
+						}
+						
+					}
+					
+				}
+				
+				// count elements so it can be used when displaying the results in the viewer
+				var count = 0;
+				
+				// iterate over the comments in annotations.js
+				for(i = 0; i < comments.comments.length; i++) {
+					
+					var state = true;
+					
+					var item  = comments.comments[i];
+					var els   = document.querySelectorAll(item.el);
+					
+					// if an element is found in the given pattern add it to the overall object so it can be passed when the overlay is turned on
+					if (els.length > 0) {
+						count++;
+						for (k = 0; k < els.length; k++) {
+							if (window.getComputedStyle(els[k],null).getPropertyValue("max-height") == "0px") {
+								state = false;
+							}
+						}
+						annotationsPattern.commentsGathered.comments[count] = { "el": item.el, "title": item.title, "comment": item.comment, "number": count, "state": state };
+					}
+				
+				}
+				
+				// send the list of annotations for the page back to the parent
+				var obj = JSON.stringify(annotationsPattern.commentsGathered);
+				parent.postMessage(obj,annotationsPattern.targetOrigin);
+				
+			} else if (annotationsPattern.commentsEmbeddedActive && !annotationsPattern.commentsEmbedded) {
+				
+				// if comment embedding is turned on and comments haven't been embedded yet do it
+				for (i = 0; i < comments.comments.length; i++)  {
+					item = comments.comments[i];
+					els  = document.querySelectorAll(item.el);
+					if (els.length > 0) {
+						annotationsPattern.embedComments(els[0],item.title,item.comment); //Embed the comment
+					}
+					annotationsPattern.commentsEmbedded = true;
+				}
+				
+			} else if (annotationsPattern.commentsEmbeddedActive && annotationsPattern.commentsEmbedded) {
+				
+				// if comment embedding is turned on and comments have been embedded simply display them
+				els = document.getElementsByClassName("sg-annotations");
+				for (i = 0; i < els.length; ++i) {
+					els[i].style.display = "block";
+				}
+				
+			}
+			
+		}
+		
+	}
+	
+};
+
+// add the onclick handlers to the elements that have an annotations
+annotationsPattern.gatherComments();
+window.addEventListener("message", annotationsPattern.receiveIframeMessage, false);
+
+// before unloading the iframe make sure any active overlay is turned off/closed
+window.onbeforeunload = function() {
+	var obj = JSON.stringify({ "commentOverlay": "off" });
+	parent.postMessage(obj,annotationsPattern.targetOrigin);
+};
+
+// tell the parent iframe that keys were pressed
+
+// toggle the annotations panel
+jwerty.key('ctrl+shift+a', function (e) {
+	var obj = JSON.stringify({ "keyPress": "ctrl+shift+a" });
+	parent.postMessage(obj,codePattern.targetOrigin);
+	return false;
+});
+
+// close the annotations panel if using escape
+jwerty.key('esc', function (e) {
+	var obj = JSON.stringify({ "keyPress": "esc" });
+	parent.postMessage(obj,codePattern.targetOrigin);
+	return false;
+});