shibori 1.0.0.beta1

data/public/styleguide/js/styleguide.js

@@ -0,0 +1,600 @@
+(function(w){
+
+	var sw = document.body.clientWidth, //Viewport Width
+		sh = $(document).height(), //Viewport Height
+		minViewportWidth = 240, //Minimum Size for Viewport
+		maxViewportWidth = 2600, //Maxiumum Size for Viewport
+		viewportResizeHandleWidth = 14, //Width of the viewport drag-to-resize handle
+		$sgViewport = $('#sg-viewport'), //Viewport element
+		$sizePx = $('.sg-size-px'), //Px size input element in toolbar
+		$sizeEms = $('.sg-size-em'), //Em size input element in toolbar
+		$bodySize = parseInt($('body').css('font-size')), //Body size of the document
+		$headerHeight = $('.sg-header').height(),
+		discoID = false,
+		discoMode = false,
+		fullMode = true,
+		hayMode = false;
+
+	$(w).resize(function(){ //Update dimensions on resize
+		sw = document.body.clientWidth;
+		sh = $(document).height();
+
+		setAccordionHeight();
+
+		if(fullMode === true) {
+			sizeiframe(sw, false);
+		};
+
+	});
+
+	/* Pattern Lab accordion dropdown */
+	// Accordion dropdown
+	$('.sg-acc-handle').on("click", function(e){
+		e.preventDefault();
+
+		var $this = $(this),
+			$panel = $this.next('.sg-acc-panel'),
+			subnav = $this.parent().parent().hasClass('sg-acc-panel');
+
+		//Close other panels if link isn't a subnavigation item
+		if (!subnav) {
+			$('.sg-acc-handle').not($this).removeClass('active');
+			$('.sg-acc-panel').not($panel).removeClass('active');
+		}
+
+		//Activate selected panel
+		$this.toggleClass('active');
+		$panel.toggleClass('active');
+		setAccordionHeight();
+	});
+
+	//Accordion Height
+	function setAccordionHeight() {
+		var $activeAccordion = $('.sg-acc-panel.active').first(),
+			accordionHeight = $activeAccordion.height(),
+			availableHeight = sh-$headerHeight; //Screen height minus the height of the header
+
+		$activeAccordion.height(availableHeight); //Set height of accordion to the available height
+	}
+
+	$('.sg-nav-toggle').on("click", function(e){
+		e.preventDefault();
+		$('.sg-nav-container').toggleClass('active');
+	});
+
+	//"View (containing clean, code, raw, etc options) Trigger
+	$('#sg-t-toggle').on("click", function(e){
+		e.preventDefault();
+		$(this).parents('ul').toggleClass('active');
+	});
+
+	//Size Trigger
+	$('#sg-size-toggle').on("click", function(e){
+		e.preventDefault();
+		$(this).parents('ul').toggleClass('active');
+	});
+
+	//Phase View Events
+	$('.sg-size[data-size]').on("click", function(e){
+		e.preventDefault();
+		killDisco();
+		killHay();
+		fullMode = false;
+
+		var val = $(this).attr('data-size');
+
+		if (val.indexOf('px') > -1) {
+			$bodySize = 1;
+		}
+
+		val = val.replace(/[^\d.-]/g,'')
+		sizeiframe(Math.floor(val*$bodySize));
+	});
+
+	//Size View Events
+
+	// handle small button
+	function goSmall() {
+		killDisco();
+		killHay();
+		fullMode = false;
+		sizeiframe(getRandom(minViewportWidth,500));
+	}
+
+	$('#sg-size-s').on("click", function(e){
+		e.preventDefault();
+		goSmall();
+	});
+
+	jwerty.key('ctrl+shift+s', function(e) {
+		goSmall();
+		return false;
+	});
+
+	// handle medium button
+	function goMedium() {
+		killDisco();
+		killHay();
+		fullMode = false;
+		sizeiframe(getRandom(500,800));
+	}
+
+	$('#sg-size-m').on("click", function(e){
+		e.preventDefault();
+		goMedium();
+	});
+
+	jwerty.key('ctrl+shift+m', function(e) {
+		goMedium();
+		return false;
+	});
+
+	// handle large button
+	function goLarge() {
+		killDisco();
+		killHay();
+		fullMode = false;
+		sizeiframe(getRandom(800,1200));
+	}
+
+	$('#sg-size-l').on("click", function(e){
+		e.preventDefault();
+		goLarge();
+	});
+
+	jwerty.key('ctrl+shift+l', function(e) {
+		goLarge();
+		return false;
+	});
+
+	//Click Full Width Button
+	$('#sg-size-full').on("click", function(e){ //Resets
+		e.preventDefault();
+		killDisco();
+		killHay();
+		fullMode = true;
+		sizeiframe(sw);
+	});
+
+	//Click Random Size Button
+	$('#sg-size-random').on("click", function(e){
+		e.preventDefault();
+		killDisco();
+		killHay();
+		sizeiframe(getRandom(minViewportWidth,sw));
+	});
+
+	//Click for Disco Mode, which resizes the viewport randomly
+	$('#sg-size-disco').on("click", function(e){
+		e.preventDefault();
+		killHay();
+		fullMode = false;
+
+		if (discoMode) {
+			killDisco();
+
+		} else {
+			startDisco();
+		}
+	});
+
+	/* Disco Mode */
+	function disco() {
+		sizeiframe(getRandom(minViewportWidth,sw));
+	}
+
+	function killDisco() {
+		discoMode = false;
+		clearInterval(discoID);
+		discoID = false;
+	}
+
+	function startDisco() {
+		killHay();
+		discoMode = true;
+		discoID = setInterval(disco, 800);
+	}
+
+	jwerty.key('ctrl+shift+d', function(e) {
+		if (!discoMode) {
+			startDisco();
+		} else {
+			killDisco();
+		}
+		return false;
+	});
+
+	//Stephen Hay Mode - "Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!"
+	$('#sg-size-hay').on("click", function(e){
+		e.preventDefault();
+		killDisco();
+		if (hayMode) {
+			killHay();
+		} else {
+			startHay();
+		}
+	});
+
+	//Stop Hay! Mode
+	function killHay() {
+		var currentWidth = $sgViewport.width();
+		hayMode = false;
+		$sgViewport.removeClass('hay-mode');
+		$('#sg-gen-container').removeClass('hay-mode');
+		sizeiframe(Math.floor(currentWidth));
+	}
+
+	// start Hay! mode
+	function startHay() {
+		killDisco();
+		hayMode = true;
+		$('#sg-gen-container').removeClass("vp-animate").width(minViewportWidth+viewportResizeHandleWidth);
+		$sgViewport.removeClass("vp-animate").width(minViewportWidth);
+
+		var timeoutID = window.setTimeout(function(){
+			$('#sg-gen-container').addClass('hay-mode').width(maxViewportWidth+viewportResizeHandleWidth);
+			$sgViewport.addClass('hay-mode').width(maxViewportWidth);
+
+			setInterval(function(){ var vpSize = $sgViewport.width(); updateSizeReading(vpSize); },100);
+		}, 200);
+	}
+
+	// start hay from a keyboard shortcut
+	jwerty.key('ctrl+shift+h', function(e) {
+		if (hayMode) {
+			killHay();
+		} else {
+			startHay();
+		}
+		return false;
+	});
+
+	//Pixel input
+	$sizePx.on('keydown', function(e){
+		var val = Math.floor($(this).val());
+
+		if(e.keyCode === 38) { //If the up arrow key is hit
+			val++;
+			sizeiframe(val,false);
+		} else if(e.keyCode === 40) { //If the down arrow key is hit
+			val--;
+			sizeiframe(val,false);
+		} else if(e.keyCode === 13) { //If the Enter key is hit
+			e.preventDefault();
+			sizeiframe(val); //Size Iframe to value of text box
+			$(this).blur();
+		}
+	});
+
+	$sizePx.on('keyup', function(){
+		var val = Math.floor($(this).val());
+		updateSizeReading(val,'px','updateEmInput');
+	});
+
+	//Em input
+	$sizeEms.on('keydown', function(e){
+		var val = parseFloat($(this).val());
+
+		if(e.keyCode === 38) { //If the up arrow key is hit
+			val++;
+			sizeiframe(Math.floor(val*$bodySize),false);
+		} else if(e.keyCode === 40) { //If the down arrow key is hit
+			val--;
+			sizeiframe(Math.floor(val*$bodySize),false);
+		} else if(e.keyCode === 13) { //If the Enter key is hit
+			e.preventDefault();
+			sizeiframe(Math.floor(val*$bodySize)); //Size Iframe to value of text box
+		}
+	});
+
+	$sizeEms.on('keyup', function(){
+		var val = parseFloat($(this).val());
+		updateSizeReading(val,'em','updatePxInput');
+	});
+
+	// set 0 to 320px as a default
+	jwerty.key('ctrl+shift+0', function(e) {
+		e.preventDefault();
+		sizeiframe(320,true);
+		return false;
+	});
+
+	// handle the MQ click
+	var mqs = [];
+	$('#sg-mq a').each(function(i) {
+
+		mqs.push($(this).html());
+
+		// bind the click
+		$(this).on("click", function(i,k) {
+			return function(e) {
+				e.preventDefault();
+				var val = $(k).html();
+				var type = (val.indexOf("px") !== -1) ? "px" : "em";
+				val = val.replace(type,"");
+				var width = (type === "px") ? val*1 : val*$bodySize;
+				sizeiframe(width,true);
+			}
+		}(i,this));
+
+		// bind the keyboard shortcut. can't use cmd on a mac because 3 & 4 are for screenshots
+		jwerty.key('ctrl+shift+'+(i+1), function (k) {
+			return function(e) {
+				var val = $(k).html();
+				var type = (val.indexOf("px") !== -1) ? "px" : "em";
+				val = val.replace(type,"");
+				var width = (type === "px") ? val*1 : val*$bodySize;
+				sizeiframe(width,true);
+				return false;
+			}
+		}(this));
+
+	});
+
+	//Resize the viewport
+	//'size' is the target size of the viewport
+	//'animate' is a boolean for switching the CSS animation on or off. 'animate' is true by default, but can be set to false for things like nudging and dragging
+	function sizeiframe(size,animate) {
+		var theSize;
+
+		if(size>maxViewportWidth) { //If the entered size is larger than the max allowed viewport size, cap value at max vp size
+			theSize = maxViewportWidth;
+		} else if(size<minViewportWidth) { //If the entered size is less than the minimum allowed viewport size, cap value at min vp size
+			theSize = minViewportWidth;
+		} else {
+			theSize = size;
+		}
+
+		//Conditionally remove CSS animation class from viewport
+		if(animate==false) {
+			$('#sg-gen-container,#sg-viewport').removeClass("vp-animate"); //If aninate is set to false, remove animate class from viewport
+		} else {
+			$('#sg-gen-container,#sg-viewport').addClass("vp-animate");
+		}
+
+		$('#sg-gen-container').width(theSize+viewportResizeHandleWidth); //Resize viewport wrapper to desired size + size of drag resize handler
+		$sgViewport.width(theSize); //Resize viewport to desired size
+
+		updateSizeReading(theSize); //Update values in toolbar
+		saveSize(theSize); //Save current viewport to cookie
+	}
+
+	function saveSize(size) {
+		if (!DataSaver.findValue('vpWidth')) {
+			DataSaver.addValue("vpWidth",size);
+		} else {
+			DataSaver.updateValue("vpWidth",size);
+		}
+	}
+
+
+	//Update Pixel and Em inputs
+	//'size' is the input number
+	//'unit' is the type of unit: either px or em. Default is px. Accepted values are 'px' and 'em'
+	//'target' is what inputs to update. Defaults to both
+	function updateSizeReading(size,unit,target) {
+		if(unit=='em') { //If size value is in em units
+			emSize = size;
+			pxSize = Math.floor(size*$bodySize);
+		} else { //If value is px or absent
+			pxSize = size;
+			emSize = size/$bodySize;
+		}
+
+		if (target == 'updatePxInput') {
+			$sizePx.val(pxSize);
+		} else if (target == 'updateEmInput') {
+			$sizeEms.val(emSize.toFixed(2));
+		} else {
+			$sizeEms.val(emSize.toFixed(2));
+			$sizePx.val(pxSize);
+		}
+	}
+
+	/* Returns a random number between min and max */
+	function getRandom (min, max) {
+	    return Math.random() * (max - min) + min;
+	}
+
+	function updateViewportWidth(size) {
+
+		$("#sg-viewport").width(size);
+		$("#sg-gen-container").width(size*1 + 14);
+
+		updateSizeReading(size);
+	}
+
+	// handles widening the "viewport"
+	//   1. on "mousedown" store the click location
+	//   2. make a hidden div visible so that it can track mouse movements and make sure the pointer doesn't get lost in the iframe
+	//   3. on "mousemove" calculate the math, save the results to a cookie, and update the viewport
+	$('#sg-rightpull').mousedown(function(event) {
+
+		// capture default data
+		var origClientX = event.clientX;
+		var origViewportWidth = $sgViewport.width();
+
+		fullMode = false;
+
+		// show the cover
+		$("#sg-cover").css("display","block");
+
+		// add the mouse move event and capture data. also update the viewport width
+		$('#sg-cover').mousemove(function(event) {
+
+			viewportWidth = (origClientX > event.clientX) ? origViewportWidth - ((origClientX - event.clientX)*2) : origViewportWidth + ((event.clientX - origClientX)*2);
+
+			if (viewportWidth > minViewportWidth) {
+
+				if (!DataSaver.findValue('vpWidth')) {
+					DataSaver.addValue("vpWidth",viewportWidth);
+				} else {
+					DataSaver.updateValue("vpWidth",viewportWidth);
+				}
+
+				sizeiframe(viewportWidth,false);
+			}
+		});
+	});
+
+	// on "mouseup" we unbind the "mousemove" event and hide the cover again
+	$('body').mouseup(function(event) {
+		$('#sg-cover').unbind('mousemove');
+		$('#sg-cover').css("display","none");
+	});
+
+	// capture the viewport width that was loaded and modify it so it fits with the pull bar
+	var origViewportWidth = $("#sg-viewport").width();
+	$("#sg-gen-container").width(origViewportWidth);
+	$("#sg-viewport").width(origViewportWidth - 14);
+	updateSizeReading($("#sg-viewport").width());
+
+	// get the request vars
+	var oGetVars = urlHandler.getRequestVars();
+
+	// pre-load the viewport width
+	var vpWidth = 0;
+	var trackViewportWidth = true; // can toggle this feature on & off
+	if ((oGetVars.h != undefined) || (oGetVars.hay != undefined)) {
+		startHay();
+	} else if ((oGetVars.d != undefined) || (oGetVars.disco != undefined)) {
+		startDisco();
+	} else if ((oGetVars.w != undefined) || (oGetVars.width != undefined)) {
+		vpWidth = (oGetVars.w != undefined) ? oGetVars.w : oGetVars.width;
+		vpWidth = (vpWidth.indexOf("em") != -1) ? Math.floor(Math.floor(vpWidth.replace("em",""))*$bodySize) : Math.floor(vpWidth.replace("px",""));
+		DataSaver.updateValue("vpWidth",vpWidth);
+		updateViewportWidth(vpWidth);
+	} else if (trackViewportWidth && (vpWidth = DataSaver.findValue("vpWidth"))) {
+		updateViewportWidth(vpWidth);
+	}
+
+	// load the iframe source
+	var patternName = "all";
+	var patternPath = "";
+	var iFramePath  = window.location.protocol+"//"+window.location.host+window.location.pathname.replace("index.html","")+"styleguide/html/styleguide.html";
+	if ((oGetVars.p != undefined) || (oGetVars.pattern != undefined)) {
+		patternName = (oGetVars.p != undefined) ? oGetVars.p : oGetVars.pattern;
+		patternPath = urlHandler.getFileName(patternName);
+		iFramePath  = (patternPath != "") ? window.location.protocol+"//"+window.location.host+window.location.pathname.replace("index.html","")+patternPath : iFramePath;
+	}
+
+	if (patternName != "all") {
+		document.getElementById("title").innerHTML = "Pattern Lab - "+patternName;
+		history.replaceState({ "pattern": patternName }, null, null);
+	}
+
+	document.getElementById("sg-raw").setAttribute("href",urlHandler.getFileName(patternName));
+
+	urlHandler.skipBack = true;
+	document.getElementById("sg-viewport").contentWindow.location.replace(iFramePath);
+
+	//IFrame functionality
+
+
+
+// update the iframe with the source from clicked element in pull down menu. also close the menu
+// having it outside fixes an auto-close bug i ran into
+$('.sg-nav a').not('.sg-acc-handle').on("click", function(e){
+
+	e.preventDefault();
+
+	// update the iframe via the history api handler
+	document.getElementById("sg-viewport").contentWindow.postMessage( { "path": urlHandler.getFileName($(this).attr("data-patternpartial")) }, urlHandler.targetOrigin);
+
+	// close up the menu
+	$(this).parents('.sg-acc-panel').toggleClass('active');
+	$(this).parents('.sg-acc-panel').siblings('.sg-acc-handle').toggleClass('active');
+
+	return false;
+
+});
+
+// handle when someone clicks on the grey area of the viewport so it auto-closes the nav
+function closePanels() {
+	// close up the menu
+	$('.sg-acc-panel').each(function() {
+		if ($(this).hasClass('active')) {
+			$(this).toggleClass('active');
+		}
+	});
+
+	$('.sg-acc-handle').each(function() {
+		if ($(this).hasClass('active')) {
+			$(this).toggleClass('active');
+		}
+	});
+}
+
+$('#sg-vp-wrap').click(function(e) {
+
+	closePanels();
+
+});
+
+// watch the iframe source so that it can be sent back to everyone else.
+// based on the great MDN docs at https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
+function receiveIframeMessage(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.bodyclick !== undefined) {
+
+		closePanels();
+
+	} else if (data.patternpartial !== undefined) {
+
+		if (!urlHandler.skipBack) {
+
+			if ((history.state === undefined) || (history.state === null) || (history.state.pattern !== data.patternpartial)) {
+				urlHandler.pushPattern(data.patternpartial, data.path);
+			}
+
+			if (this.wsnConnected) {
+				var iFramePath = urlHandler.getFileName(data.patternpartial);
+				wsn.send( '{"url": "'+iFramePath+'", "patternpartial": "'+event.data.patternpartial+'" }' );
+			}
+		}
+
+		// reset the defaults
+		urlHandler.skipBack = false;
+
+	} else if (data.keyPress !== undefined) {
+		if (data.keyPress == 'ctrl+shift+s') {
+			goSmall();
+		} else if (data.keyPress == 'ctrl+shift+m') {
+			goMedium();
+		} else if (data.keyPress == 'ctrl+shift+l') {
+			goLarge();
+		} else if (data.keyPress == 'ctrl+shift+d') {
+			if (!discoMode) {
+				startDisco();
+			} else {
+				killDisco();
+			}
+		} else if (data.keyPress == 'ctrl+shift+h') {
+			if (!hayMode) {
+				startHay();
+			} else {
+				killHay();
+			}
+		} else if (data.keyPress == 'ctrl+shift+0') {
+			sizeiframe(320,true);
+		} else if (found == data.keyPress.match(/ctrl\+shift\+([1-9])/)) {
+			var val = mqs[(found[1]-1)];
+			var type = (val.indexOf("px") !== -1) ? "px" : "em";
+			val = val.replace(type,"");
+			var width = (type === "px") ? val*1 : val*$bodySize;
+			sizeiframe(width,true);
+		}
+		return false;
+	}
+}
+
+window.addEventListener("message", receiveIframeMessage, false);
+
+})(this);