From 264a9720587c3c19aa86314c2e1915c33ecd6954 Mon Sep 17 00:00:00 2001
From: Brad Frost <frostbd@gmail.com>
Date: Sat, 22 Jun 2013 19:30:16 -0400
Subject: [PATCH] Viewport resizing manual mode

Keyup and keydown functionality.
Can press and hold up and down arrows to fine tune the viewport size.
On-the-fly px-to-em (and vice-versa) conversion
Consolidated Dave's duplicate functions into the main behavior
---
 public/styleguide/css/styleguide.css          |   2 +-
 public/styleguide/css/styleguide.scss         |   4 +-
 public/styleguide/js/styleguide.js            | 414 +++++++++---------
 .../templates/partials/ishControls.mustache   |   7 +-
 4 files changed, 215 insertions(+), 212 deletions(-)

diff --git a/public/styleguide/css/styleguide.css b/public/styleguide/css/styleguide.css
index aa1e2c0..bbc7bbd 100644
--- a/public/styleguide/css/styleguide.css
+++ b/public/styleguide/css/styleguide.css
@@ -380,7 +380,7 @@ html, body {
   font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
   font-size: 70%;
   font-weight: normal;
-  padding: 1em; }
+  padding: 1em 0; }
   .sg-head a {
     display: block;
     border-bottom: 1px solid #222222;
diff --git a/public/styleguide/css/styleguide.scss b/public/styleguide/css/styleguide.scss
index 55dd94e..2a7feba 100644
--- a/public/styleguide/css/styleguide.scss
+++ b/public/styleguide/css/styleguide.scss
@@ -540,12 +540,14 @@ html, body {
 	font-family: $sg-font;
 	font-size: $sg-font-size-sm;
 	font-weight: normal;
-	padding: $sg-pad;
+	padding: $sg-pad 0;
+
 	a {
 		display: block;
 		border-bottom: 1px solid $sg-primary;
 		color: #222;
 		text-decoration: none;
+		
 		&:hover {
 			color: $sg-secondary;
 			border-bottom-color: $sg-secondary;
diff --git a/public/styleguide/js/styleguide.js b/public/styleguide/js/styleguide.js
index c74eccc..f9c1938 100644
--- a/public/styleguide/js/styleguide.js
+++ b/public/styleguide/js/styleguide.js
@@ -3,11 +3,13 @@
 		sh = document.body.clientHeight, //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
 		$viewToggle = $('#sg-t-toggle'), //Toggle 
-		$sizeToggle = $('#sg-size-toggle'),
 		$tAnnotations = $('#sg-t-annotations'),
-		$tSize = $('#sg-size'),
+		$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
 		$vp = Object,
 		$sgPattern = Object,
 		discoID = false,
@@ -18,7 +20,15 @@
 	$(w).resize(function(){ //Update dimensions on resize
 		sw = document.body.clientWidth;
 		sh = document.body.clientHeight;
-		displayWidth();
+	});
+
+	/* Pattern Lab accordion dropdown */
+	$('.sg-acc-handle').on("click", function(e){
+		var $this = $(this),
+			$panel = $this.next('.sg-acc-panel');
+		e.preventDefault();
+		$this.toggleClass('active');
+		$panel.toggleClass('active');
 	});
 
 	$('.sg-nav-toggle').on("click", function(e){
@@ -35,7 +45,7 @@
 	});
 
 	//Size Trigger
-	$sizeToggle.on("click", function(e){
+	$('#sg-size-toggle').on("click", function(e){
 		e.preventDefault();
 		$(this).parents('ul').toggleClass('active');
 	});
@@ -53,15 +63,14 @@
 		killDisco();
 		killHay();
 		
-		var val = $(this).attr('data-size'),
-			bodySize = parseInt($('body').css('font-size'));
+		var val = $(this).attr('data-size');
 		
 		if (val.indexOf('px') > -1) {
-			bodySize = 1;
+			$bodySize = 1;
 		}
 		
 		val = val.replace(/[^\d.-]/g,'')		
-		sizeiframe(Math.floor(val*bodySize));
+		sizeiframe(Math.floor(val*$bodySize));
 	});
 	
 	//Size View Events
@@ -99,7 +108,7 @@
 	});
 
 	//Click Full Width Button
-	$('#sg-size-full').on("click", function(e){
+	$('#sg-size-full').on("click", function(e){ //Resets 
 		e.preventDefault();
 		killDisco();
 		killHay();
@@ -128,6 +137,17 @@
 		}
 	});
 
+	/* Disco Mode */
+	function disco() {
+		sizeiframe(getRandom(minViewportWidth,sw));
+	}
+	
+	function killDisco() {
+		discoMode = false;
+		clearInterval(discoID);
+		discoID = 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();
@@ -137,50 +157,202 @@
 			killHay();
 		} else {
 			hayMode = true;
-			$('#sg-gen-container').removeClass("vp-animate").width(minViewportWidth+14);
-			$('#sg-viewport').removeClass("vp-animate").width(minViewportWidth);		
+			$('#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+14);
-				$('#sg-viewport').addClass('hay-mode').width(maxViewportWidth);
+				$('#sg-gen-container').addClass('hay-mode').width(maxViewportWidth+viewportResizeHandleWidth);
+				$sgViewport.addClass('hay-mode').width(maxViewportWidth);
 			}, 200);	
 		}
 	});
 
-	//Set Manual Pixel Contenteditable region 
-	$('.sg-size-px').on("keydown", function(e){
-		var val = $(this).val();
+	//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));
+	}
 
-	    if(e.keyCode == 13) { //If the Enter key is hit
+	//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(Math.floor(val)); //Size Iframe to value of text box
-			updateEmSizeReading(val);
+			sizeiframe(val); //Size Iframe to value of text box
 			$(this).blur();
-	    } else { //If any other character is entered
-	    
 	    }
+	    
 	});
 
-	//Set Manual 
-	$('.sg-size-em').on("keydown", function(e){
-		var val = $(this).val();
-		var bodySize = parseInt($('body').css('font-size'));
+	$sizePx.on('keyup', function(e){
+		var val = Math.floor($(this).val());
+		updateSizeReading(val,'updateEmInput');
+	});
 
-	    //if(e.keyCode == 13) { //If the Enter key is hit
+	//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
-			updatePxSizeReading(val);
-	    //} else { //If any other character is entered
-	    //	
-	    //}
+			sizeiframe(Math.floor(val*$bodySize)); //Size Iframe to value of text box
+	    } 
 	});
 
+	$sizeEms.on('keyup', function(e){
+		var val = parseFloat($(this).val());
+		updateSizeReading(val,'em','updatePxInput');
+	});
+	
+	//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 (!findValue('vpWidth')) {
+			addValue("vpWidth",size);
+		} else {
+			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);
+			console.log('pxSize='+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(Math.floor(size) + 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();
+		
+		// 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 (!findValue('vpWidth')) {
+					addValue("vpWidth",viewportWidth);
+				} else {
+					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);
+
+	// pre-load the viewport width
+	var vpWidth = 0;
+	var trackViewportWidth = true; // can toggle this feature on & off
+	if (trackViewportWidth && (vpWidth = findValue("vpWidth"))) {
+		updateViewportWidth(vpWidth);
+	}
+
+	//IFrame functionality
+
 	//Scripts to run after the page has loaded into the iframe
 	$sgViewport.load(function (){
 		var $sgSrc = $sgViewport.attr('src'),
 			$vp = $sgViewport.contents(),
 			$sgPattern = $vp.find('.sg-pattern');
-		
-		
 
 		//Clean View Trigger
 		$('#sg-t-clean').on("click", function(e){
@@ -249,181 +421,5 @@
 		});
 	});
 	
-	//Resize the viewport
-	function sizeiframe(size) {
-		var theSize;
-
-		if(size>maxViewportWidth) {
-			theSize = maxViewportWidth;
-		} else if(size<minViewportWidth) {
-			theSize = minViewportWidth;
-		} else {
-			theSize = size;
-		}
-
-		$('#sg-gen-container').addClass("vp-animate");
-		$('#sg-viewport').addClass("vp-animate");
-		$('#sg-gen-container').width(theSize+14);
-		$('#sg-viewport').width(theSize);
-		updateSizeReading(theSize);
-		saveSize(theSize);
-	}
-	
-	function saveSize(size) {
-		if (!findValue('vpWidth')) {
-			addValue("vpWidth",size);
-		} else {
-			updateValue("vpWidth",size);
-		}
-	}
-	
-	//Update Size Reading 
-	var $sizePx = $('.sg-size-px');
-	var $sizeEms = $('.sg-size-em');
-	var $bodySize = parseInt($('body').css('font-size'));
-	
-	function displayWidth() {
-		var vpWidth = $sgViewport.width() - 14;
-		var emSize = vpWidth/$bodySize;
-		$sizePx.val(vpWidth);
-		$sizeEms.val(emSize.toFixed(2));
-	}
-	
-	displayWidth();
-	
-	function updateSizeReading(size) {
-		var theSize = Math.floor(size);
-		var emSize = theSize/$bodySize;
-		$sizePx.val(theSize);
-		$sizeEms.val(emSize.toFixed(2));
-	}
-
-	//Update Em Reading from Pixels
-	function updateEmSizeReading(pxVal) {
-		var emSize = pxVal/$bodySize;
-		$sizeEms.val(emSize.toFixed(2));
-	}
-
-	//Update Pixel Reading From Ems
-	function updatePxSizeReading(emVal) {
-		var pxSize = emVal*$bodySize;
-		$sizePx.val(pxSize);
-	}
-
-
-	
-	/* Disco Mode */
-	function disco() {
-		sizeiframe(getRandom(240,sw));
-	}
-	
-	function killDisco() {
-		discoMode = false;
-		clearInterval(discoID);
-		discoID = false;
-	}
-
-	function killHay() {
-		var currentWidth = $('#sg-viewport').width();
-		hayMode = false;
-		$sgViewport.removeClass('hay-mode');
-		$('#sg-gen-container').removeClass('hay-mode');
-		sizeiframe(Math.floor(currentWidth));
-	}
-	
-	/* Returns a random number between min and max */
-	function getRandom (min, max) {
-	    return Math.random() * (max - min) + min;
-	}
-	
-	/* Accordion */
-	$('.sg-acc-handle').on("click", function(e){
-		var $this = $(this),
-			$panel = $this.next('.sg-acc-panel');
-		e.preventDefault();
-		$this.toggleClass('active');
-		$panel.toggleClass('active');
-	});
-	
-	/* load iframe */
-	function loadIframe(iframeName, url) {
-	    var $iframe = $('#' + iframeName);
-	    if ( $iframe.length ) {
-	        $iframe.attr('src',url);   
-	        return false;
-	    }
-	    return true;
-	}
-	
 })(this);
 
-/************************
- * Dave's stuff... don't want to hack at the original styleguide too much
- ************************/
-
-// update the viewportWidth and note difference in the toolbar
-function updateViewportWidth(size) {
-	
-	var sizePx = $('.sg-size-px');
-	var sizeEms = $('.sg-size-em');
-	var bodySize = parseInt($('body').css('font-size'));
-	
-	$("#sg-viewport").width(size);
-	$("#sg-gen-container").width(Math.floor(size) + 14);
-	
-	var emSize = (Math.floor(size))/bodySize;
-	sizePx.val(Math.floor(size));
-	sizeEms.val(emSize.toFixed(2));
-}
-
-// 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) {
-	
-	$('#sg-gen-container').removeClass("vp-animate");
-	$('#sg-viewport').removeClass("vp-animate");
-	
-	// capture default data
-	var origClientX = event.clientX;
-	var origViewportWidth = $("#sg-viewport").width();
-	
-	// 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 > 240) {
-			
-			if (!findValue('vpWidth')) {
-				addValue("vpWidth",viewportWidth);
-			} else {
-				updateValue("vpWidth",viewportWidth);
-			}
-			
-			updateViewportWidth(viewportWidth);	
-		}
-	});
-});
-
-// 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);
-
-// pre-load the viewport width
-var vpWidth = 0;
-var trackViewportWidth = true; // can toggle this feature on & off
-if (trackViewportWidth && (vpWidth = findValue("vpWidth"))) {
-	updateViewportWidth(vpWidth);
-}
diff --git a/source/templates/partials/ishControls.mustache b/source/templates/partials/ishControls.mustache
index a29b089..d8cff0a 100644
--- a/source/templates/partials/ishControls.mustache
+++ b/source/templates/partials/ishControls.mustache
@@ -12,7 +12,12 @@
 					</ul>
 				</li>
 				<li class="sg-size">
-					<div class="sg-current-size"><form id="sg-form">Size <input type="text" class="sg-input sg-size-px" value="320">px / <input type="text" class="sg-input sg-size-em" value="20">em</form></div>
+					<div class="sg-current-size">
+						<form id="sg-form">
+							Size <input type="text" class="sg-input sg-size-px" value="320">px / 
+							<input type="text" class="sg-input sg-size-em" value="20">em
+						</form><!--end #sg-form-->
+					</div><!--end #sg-current-size-->
 					<ul class="sg-acc-panel sg-size-options">
 						<li class="sg-quarter"><a href="#" id="sg-size-s">S</a></li> 
 						<li class="sg-quarter"><a href="#" id="sg-size-m">M</a></li>