github/diceware
1
0
Fork 0
mirror of https://github.com/dmuth/diceware.git synced 2024-11-21 16:36:28 -05:00
Code Issues Projects Releases Packages Wiki Activity

Added resizing of results window with animation.

Browse source
This commit is contained in:
Douglas Muth 2015-04-26 17:53:43 -04:00
parent 88b36faca7
commit a6487f7e7b
2 changed files with 52 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -120,7 +120,7 @@
<div class="row"> <div class="row">
<div class="col-md-12" > <div class="col-md-12" >
<div class="results" > <div class="results">
</div> </div>
</div> </div>

62
main.js
View file

@ -64,6 +64,7 @@ function display_row(rows, cb) {
var duration = 250; var duration = 250;
var fadein_delay = 500; var fadein_delay = 500;
var fadeout_delay = 400;
if (rows.length) { if (rows.length) {
// //
@ -75,7 +76,7 @@ function display_row(rows, cb) {
.fadeIn(duration, function() { .fadeIn(duration, function() {
display_row(rows, cb); display_row(rows, cb);
}) })
.delay(1000).fadeOut(); .delay(fadeout_delay).fadeOut();
} else { } else {
// //
@ -90,8 +91,10 @@ function display_row(rows, cb) {
/** /**
* Display the actual results. * 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_key").hide().clone().appendTo(".results");
jQuery(".results_words_value").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_key").hide().clone().appendTo(".results");
jQuery(".results_phrase_value").hide().clone().appendTo(".results"); jQuery(".results_phrase_value").hide().clone().appendTo(".results");
jQuery(".results_words_key").fadeIn(500, function() { jQuery(".results .results_words_key").fadeIn(500, function() {
jQuery(".results_words_value").fadeIn(500, function() { jQuery(".results .results_words_value").fadeIn(500, function() {
jQuery(".results_phrase_key").fadeIn(500, function() { jQuery(".results .results_phrase_key").fadeIn(500, function() {
jQuery(".results_phrase_value").fadeIn(500); jQuery(".results .results_phrase_value").fadeIn(500, function() {
if (cb) {
cb();
}
});
}); });
}); });
}); });
@ -110,12 +117,20 @@ function display_results() {
} // End of 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. * Return true if we are running on a mobile screen.
*/ */
function is_mobile() { function is_mobile() {
if (jQuery(window).width() < 480) { if (get_width() <= 480) {
return(true); return(true);
} }
@ -130,12 +145,20 @@ function is_mobile() {
// //
jQuery("#roll_dice").on("click", function(e) { 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 // If we're running on an iPhone or similar, scroll down so that we can
// see the dice rolls and passphrase. // see the dice rolls and passphrase.
// //
if (is_mobile()) { 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. // 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( jQuery.getScript("./wordlist.js").done(
function(data) { function(data) {
// TEST //jQuery("#roll_dice").click(); // Debugging
jQuery("#roll_dice").click(); // Debugging
}).fail( }).fail(
function(jqxhr, settings, exception) { function(jqxhr, settings, exception) {