From a6487f7e7b0079c0e7bcde0c56f0a808315b8f46 Mon Sep 17 00:00:00 2001
From: Douglas Muth <dmuth@dmuth.org>
Date: Sun, 26 Apr 2015 17:53:43 -0400
Subject: [PATCH] Added resizing of results window with animation.

---
 index.html |  2 +-
 main.js    | 62 ++++++++++++++++++++++++++++++++++++++++++++----------
 2 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index 5a43538..fe2677b 100644
--- a/index.html
+++ b/index.html
@@ -120,7 +120,7 @@
 
 	<div class="row">
 		<div class="col-md-12" >
-		<div class="results" >
+		<div class="results">
 
 		</div>
 		</div>
diff --git a/main.js b/main.js
index fb028d8..92c2069 100644
--- a/main.js
+++ b/main.js
@@ -64,6 +64,7 @@ function display_row(rows, cb) {
 
 	var duration = 250;
 	var fadein_delay = 500;
+	var fadeout_delay = 400;
 
 	if (rows.length) {
 		//
@@ -75,7 +76,7 @@ function display_row(rows, cb) {
 			.fadeIn(duration, function() {
 				display_row(rows, cb);
 			})
-			.delay(1000).fadeOut();
+			.delay(fadeout_delay).fadeOut();
 
 	} else {
 		//
@@ -90,8 +91,10 @@ function display_row(rows, cb) {
 
 /**
 * Display the actual results.
+*
+* @param cb object Optional callback to fire when done
 */
-function display_results() {
+function display_results(cb) {
 
 	jQuery(".results_words_key").hide().clone().appendTo(".results");
 	jQuery(".results_words_value").hide().clone().appendTo(".results");
@@ -99,10 +102,14 @@ function display_results() {
 	jQuery(".results_phrase_key").hide().clone().appendTo(".results");
 	jQuery(".results_phrase_value").hide().clone().appendTo(".results");
 
-	jQuery(".results_words_key").fadeIn(500, function() {
-		jQuery(".results_words_value").fadeIn(500, function() {
-		jQuery(".results_phrase_key").fadeIn(500, function() {
-		jQuery(".results_phrase_value").fadeIn(500);
+	jQuery(".results .results_words_key").fadeIn(500, function() {
+		jQuery(".results .results_words_value").fadeIn(500, function() {
+		jQuery(".results .results_phrase_key").fadeIn(500, function() {
+		jQuery(".results .results_phrase_value").fadeIn(500, function() {
+			if (cb) {
+				cb();
+			}
+		});
 		});
 		});
 		});
@@ -110,12 +117,20 @@ function display_results() {
 } // End of display_results()
 
 
+/**
+* Return the width of the browser window.
+*/
+function get_width() {
+	return(jQuery(window).width());
+}
+
+
 /**
 * Return true if we are running on a mobile screen.
 */
 function is_mobile() {
 
-	if (jQuery(window).width() < 480) {
+	if (get_width() <= 480) {
 		return(true);
 	}
 
@@ -130,12 +145,20 @@ function is_mobile() {
 //
 jQuery("#roll_dice").on("click", function(e) {
 
+	var target_height = 300;
+	if (is_mobile()) {
+		target_height = 1000;
+	}
+
+	jQuery(".results").animate({height: target_height}, 400);
+
 	//
 	// If we're running on an iPhone or similar, scroll down so that we can 
 	// see the dice rolls and passphrase.
 	//
 	if (is_mobile()) {
-		location.hash = "#roll_dice_button";
+		var aTag = $("a[name='roll_dice_button']");
+		$("html,body").animate({scrollTop: aTag.offset().top}, "slow");
 	}
 
 	//
@@ -201,7 +224,25 @@ jQuery("#roll_dice").on("click", function(e) {
 	//
 	// Now display those rows.
 	//
-	display_row(rows, display_results);
+	display_row(rows, function() {
+		display_results(function() {
+
+		//
+		// Set the height of this back to auto so we don't have unused space.
+		// I'm amazed that we don't see a "flash" of the results div 
+		// temporarily shrinking, but this seems to work as per what I saw 
+		// at http://stackoverflow.com/questions/5003220/javascript-jquery-animate-to-auto-height
+		//
+		// Well then.
+		//
+		var height = jQuery(".results").height();
+		jQuery(".results").css("height", "auto");
+		var new_height = jQuery(".results").height();
+		jQuery(".results").height(height);
+		jQuery(".results").animate({height: new_height}, 400);
+
+		});
+		});
 
 });
 
@@ -211,8 +252,7 @@ jQuery("#roll_dice").on("click", function(e) {
 //
 jQuery.getScript("./wordlist.js").done(
 	function(data) {
-// TEST
-		jQuery("#roll_dice").click(); // Debugging
+		//jQuery("#roll_dice").click(); // Debugging
 
 	}).fail(
 	function(jqxhr, settings, exception) {