shibori 1.0.0.beta1

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

@@ -0,0 +1,114 @@
+/*!
+ * Pattern Finder
+ *
+ * Copyright (c) 2014 Dave Olsen, http://dmolsen.com
+ * Licensed under the MIT license
+ *
+ */
+
+var patternFinder = {
+
+  data:   [],
+  active: false,
+
+  init: function() {
+
+    for (var patternType in patternPaths) {
+      if (patternPaths.hasOwnProperty(patternType)) {
+        for (var pattern in patternPaths[patternType]) {
+          var obj = {};
+          obj.patternPartial = patternType+"-"+pattern;
+          obj.patternPath    = patternPaths[patternType][pattern];
+          this.data.push(obj);
+        }
+      }
+    }
+
+    // instantiate the bloodhound suggestion engine
+    var patterns = new Bloodhound({
+      datumTokenizer: function(d) { return Bloodhound.tokenizers.nonword(d.patternPartial); },
+      queryTokenizer: Bloodhound.tokenizers.nonword,
+      limit: 10,
+      local: this.data
+    });
+
+    // initialize the bloodhound suggestion engine
+    patterns.initialize();
+
+    $('#sg-find .typeahead').typeahead({ highlight: true }, {
+      displayKey: 'patternPartial',
+      source: patterns.ttAdapter()
+    }).on('typeahead:selected', patternFinder.onAutocompleted).on('typeahead:autocompleted', patternFinder.onSelected);
+
+  },
+
+  passPath: function(item) {
+    // update the iframe via the history api handler
+    patternFinder.closeFinder();
+    var obj = JSON.stringify({ "path": urlHandler.getFileName(item.patternPartial) });
+    document.getElementById("sg-viewport").contentWindow.postMessage(JSON.parse(obj), urlHandler.targetOrigin);
+  },
+
+  onSelected: function(e,item) {
+    patternFinder.passPath(item);
+  },
+
+  onAutocompleted: function(e,item) {
+    patternFinder.passPath(item);
+  },
+
+  toggleFinder: function() {
+    if (!patternFinder.active) {
+      patternFinder.openFinder();
+    } else {
+      patternFinder.closeFinder();
+    }
+  },
+
+  openFinder: function() {
+    patternFinder.active = true;
+    $('#sg-find .typeahead').val("");
+    $("#sg-find").addClass('show-overflow');
+    $('#sg-find .typeahead').focus();
+  },
+
+  closeFinder: function() {
+    patternFinder.active = false;
+    $("#sg-find").removeClass('show-overflow');
+    $('.sg-acc-handle, .sg-acc-panel').removeClass('active');
+    $('#sg-find .typeahead').val("");
+  },
+
+  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.keyPress !== undefined) {
+      if (data.keyPress == 'ctrl+shift+f') {
+        patternFinder.toggleFinder();
+        return false;
+      }
+    }
+
+  }
+
+}
+
+patternFinder.init();
+
+window.addEventListener("message", patternFinder.receiveIframeMessage, false);
+
+$('#sg-find .typeahead').focus(function() {
+  if (!patternFinder.active) {
+    patternFinder.openFinder();
+  }
+});
+
+$('#sg-find .typeahead').blur(function() {
+  patternFinder.closeFinder();
+});

data/public/styleguide/js/postmessage.js

@@ -0,0 +1,127 @@
+/*!
+ * Basic postMessage Support - v0.1
+ *
+ * Copyright (c) 2013-2014 Dave Olsen, http://dmolsen.com
+ * Licensed under the MIT license
+ *
+ * Handles the postMessage stuff in the pattern, view-all, and style guide templates.
+ *
+ */
+
+// alert the iframe parent that the pattern has loaded assuming this view was loaded in an iframe
+if (self != top) {
+	
+	// handle the options that could be sent to the parent window
+	//   - all get path
+	//   - pattern & view all get a pattern partial, styleguide gets all
+	//   - pattern shares lineage
+	var path = window.location.toString();
+	var parts = path.split("?");
+	var options = { "path": parts[0] };
+	options.patternpartial = (patternPartial !== "") ? patternPartial : "all";
+	if (lineage !== "") {
+		options.lineage = lineage;
+	}
+	
+	var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
+	parent.postMessage(options, targetOrigin);
+	
+	// find all links and add an onclick handler for replacing the iframe address so the history works
+	var aTags = document.getElementsByTagName('a');
+	for (var i = 0; i < aTags.length; i++) {
+		aTags[i].onclick = function(e) {
+			e.preventDefault();
+			var href = this.getAttribute("href");
+			if (href != "#") {
+				window.location.replace(href);
+			}
+		};
+	}
+	
+	// bind the keyboard shortcuts for various viewport resizings + pattern search
+	var keys = [ "s", "m", "l", "d", "h", "f" ];
+	for (var i = 0; i < keys.length; i++) {
+		jwerty.key('ctrl+shift+'+keys[i],  function (k,t) {
+			return function(e) {
+				parent.postMessage({ "keyPress": "ctrl+shift+"+k },t);
+				return false;
+			}
+		}(keys[i],targetOrigin));
+	}
+	
+	// bind the keyboard shortcuts for mqs
+	var i = 0;
+	while (i < 10) {
+		jwerty.key('ctrl+shift+'+i, function (k,t) {
+			return function(e) {
+				var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
+				parent.postMessage({ "keyPress": "ctrl+shift+"+k },t);
+				return false;
+			}
+		}(i,targetOrigin));
+		i++;
+	}
+	
+}
+
+// if there are clicks on the iframe make sure the nav in the iframe parent closes
+var body = document.getElementsByTagName('body');
+body[0].onclick = function() {
+	var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
+	parent.postMessage({ "bodyclick": "bodyclick" },targetOrigin);
+};
+
+// watch the iframe source so that it can be sent back to everyone else.
+function receiveIframeMessage(event) {
+	
+	var path;
+	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;
+	}
+	
+	// see if it got a path to replace
+	if (data.path !== undefined) {
+		
+		if (patternPartial !== "") {
+
+			if(baseurl){
+        // create main site url
+        var siteurl = window.location.protocol+"//"+window.location.host;
+        // add a trailing slash if it doesn't exist
+        siteurl = siteurl.replace(/\/?$/, '/');
+        // remove a begining slash for baseurl if it exists
+        baseurl = baseurl.replace(/^\//, '');
+        // connect baseurl to siteurl
+        siteurl = siteurl + baseurl;
+        // add a trailing slash if it doesn't exist
+        siteurl = siteurl.replace(/\/?$/, '/');
+        // build our final path
+        path = siteurl+data.path+'?'+Date.now();
+      } else {
+			// handle patterns and the view all page
+        var re = /patterns\/(.*)$/;
+        path = window.location.protocol+"//"+window.location.host+window.location.pathname.replace(re,'')+data.path+'?'+Date.now();
+      }
+      
+			window.location.replace(path);
+			
+		} else {
+			
+			// handle the style guide
+			path = window.location.protocol+"//"+window.location.host+window.location.pathname.replace("styleguide\/html\/styleguide.html","")+data.path+'?'+Date.now();
+			window.location.replace(path);
+			
+		}
+		
+	} else if (data.reload !== undefined) {
+		
+		// reload the location if there was a message to do so
+		window.location.reload();
+		
+	}
+	
+}
+window.addEventListener("message", receiveIframeMessage, false);