Changed code from a self-contained function into an object with code

that no longer runs when the file is included.  This is in preparation
for Qunit testing.
This commit is contained in:
Douglas Muth 2017-01-29 06:47:08 -05:00
parent d80c532d8f
commit 7598f49c4a
2 changed files with 192 additions and 178 deletions

View file

@ -267,6 +267,9 @@ Feel free to reach out to me if you have any comments, suggestions, or bug repor
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="./main.js"></script> <script src="./main.js"></script>
<script>
Diceware.go();
</script>
</body> </body>
</html> </html>

83
main.js
View file

@ -1,14 +1,15 @@
/** /**
* Our main Javascript file. * Our main Javascript file.
*/ */
(function() {
var Diceware = {};
/** /**
* Return true if we have a function that returns cryptographically random * Return true if we have a function that returns cryptographically random
* values. False otherwise. * values. False otherwise.
*/ */
function i_can_has_good_crypto() { Diceware.i_can_has_good_crypto = function() {
if (window.crypto && window.crypto.getRandomValues) { if (window.crypto && window.crypto.getRandomValues) {
return(true); return(true);
@ -24,11 +25,11 @@ function i_can_has_good_crypto() {
* *
* @return integer A random number between 1 and 6, inclusive. * @return integer A random number between 1 and 6, inclusive.
*/ */
function die_roll() { Diceware.die_roll = function() {
var retval; var retval;
if (i_can_has_good_crypto()) { if (Diceware.i_can_has_good_crypto()) {
var a = new Uint32Array(1); var a = new Uint32Array(1);
window.crypto.getRandomValues(a); window.crypto.getRandomValues(a);
retval = (a[0] % 6) + 1; retval = (a[0] % 6) + 1;
@ -52,13 +53,13 @@ function die_roll() {
* *
* @return array an Array of 5 dice rolls * @return array an Array of 5 dice rolls
*/ */
function roll_dice() { Diceware.roll_dice = function() {
var retval = new Array(); var retval = new Array();
retval.push(die_roll()); retval.push(Diceware.die_roll());
retval.push(die_roll()); retval.push(Diceware.die_roll());
retval.push(die_roll()); retval.push(Diceware.die_roll());
retval.push(die_roll()); retval.push(Diceware.die_roll());
retval.push(die_roll()); retval.push(Diceware.die_roll());
return(retval); return(retval);
} }
@ -71,7 +72,7 @@ function roll_dice() {
* *
* @return string The word from the dicelist * @return string The word from the dicelist
*/ */
function get_word(wordlist, index) { Diceware.get_word = function(wordlist, index) {
var retval = wordlist[index]; var retval = wordlist[index];
if (retval) { if (retval) {
@ -83,19 +84,10 @@ function get_word(wordlist, index) {
} }
return(retval); return(retval);
} }
//
// Handler to mark the clicked number of dice button as active.
//
jQuery(".dice_button").on("click", function(e) {
jQuery(".dice_button").removeClass("active");
jQuery(e.target).addClass("active");
});
/** /**
* This function displays each dice roll. * This function displays each dice roll.
* *
@ -105,7 +97,7 @@ jQuery(".dice_button").on("click", function(e) {
* @param integer in_fadeout_delay How long before fading out the diceroll * @param integer in_fadeout_delay How long before fading out the diceroll
* *
*/ */
function display_row(rows, cb, in_fadein_duration, in_fadeout_delay) { Diceware.display_row = function(rows, cb, in_fadein_duration, in_fadeout_delay) {
var fadein_duration = in_fadein_duration || 250; var fadein_duration = in_fadein_duration || 250;
var fadeout_delay = in_fadeout_delay || 750; var fadeout_delay = in_fadeout_delay || 750;
@ -148,7 +140,7 @@ function display_row(rows, cb, in_fadein_duration, in_fadeout_delay) {
// //
jQuery(this).delay(fadeout_delay) jQuery(this).delay(fadeout_delay)
.fadeOut(fadeout_delay, function() { .fadeOut(fadeout_delay, function() {
display_row(rows, cb, fadein_duration, fadeout_delay); Diceware.display_row(rows, cb, fadein_duration, fadeout_delay);
}); });
}); });
@ -169,7 +161,7 @@ function display_row(rows, cb, in_fadein_duration, in_fadeout_delay) {
* *
* @param cb object Optional callback to fire when done * @param cb object Optional callback to fire when done
*/ */
function display_results(cb) { Diceware.display_results = function(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");
@ -204,7 +196,7 @@ function display_results(cb) {
/** /**
* Return the width of the browser window. * Return the width of the browser window.
*/ */
function get_width() { Diceware.get_width = function() {
return(jQuery(window).width()); return(jQuery(window).width());
} }
@ -212,9 +204,9 @@ function get_width() {
/** /**
* Return true if we are running on a mobile screen. * Return true if we are running on a mobile screen.
*/ */
function is_mobile() { Diceware.is_mobile = function() {
if (get_width() <= 480) { if (Diceware.get_width() <= 480) {
return(true); return(true);
} }
@ -223,6 +215,25 @@ function is_mobile() {
} // End of is_mobile() } // End of is_mobile()
/**
* Our main function when being used via the UI. We call this to set up our jQuery hooks.
*
* I should probably refactor this more in the future--this function came about
* when I changed the code from self-contained to contained in an external object
* in preparation fro Qunit testing...
*
*/
Diceware.go = function() {
//
// Handler to mark the clicked number of dice button as active.
//
jQuery(".dice_button").on("click", function(e) {
jQuery(".dice_button").removeClass("active");
jQuery(e.target).addClass("active");
});
// //
// Handler when the "Roll Dice" button is clicked. It gets the // Handler when the "Roll Dice" button is clicked. It gets the
// passphrase and updates the HTML with it. // passphrase and updates the HTML with it.
@ -235,7 +246,7 @@ jQuery("#roll_dice").on("click", function(e) {
// In the future, I should just use a media query in CSS // In the future, I should just use a media query in CSS
// //
var target_height = 300; var target_height = 300;
if (is_mobile()) { if (Diceware.is_mobile()) {
target_height = 400; target_height = 400;
} }
@ -245,7 +256,7 @@ jQuery("#roll_dice").on("click", function(e) {
// 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 (Diceware.is_mobile()) {
var aTag = $("a[name='roll_dice_button']"); var aTag = $("a[name='roll_dice_button']");
$("html,body").animate({scrollTop: aTag.offset().top}, "slow"); $("html,body").animate({scrollTop: aTag.offset().top}, "slow");
} }
@ -266,8 +277,8 @@ jQuery("#roll_dice").on("click", function(e) {
for (var i=0; i<num_dice; i++) { for (var i=0; i<num_dice; i++) {
var roll = {}; var roll = {};
roll.dice = roll_dice(); roll.dice = Diceware.roll_dice();
roll.word = get_word(wordlist, roll.dice.join("")); roll.word = Diceware.get_word(wordlist, roll.dice.join(""));
rolls.push(roll); rolls.push(roll);
passphrase.push(roll.word); passphrase.push(roll.word);
@ -315,12 +326,12 @@ jQuery("#roll_dice").on("click", function(e) {
// //
// Now display those rows. // Now display those rows.
// //
display_row(rows, function() { Diceware.display_row(rows, function() {
// //
// And then display the results // And then display the results
// //
display_results(function() { Diceware.display_results(function() {
// //
// Set the height of this back to auto so we don't have unused space. // Set the height of this back to auto so we don't have unused space.
@ -345,12 +356,12 @@ jQuery("#roll_dice").on("click", function(e) {
// //
// If we're not on a mobile, bring in the GitHub ribbon. // If we're not on a mobile, bring in the GitHub ribbon.
// //
if (!is_mobile()) { if (!Diceware.is_mobile()) {
jQuery("#github_ribbon").fadeIn(1000); jQuery("#github_ribbon").fadeIn(1000);
} }
if (!i_can_has_good_crypto()) { if (!Diceware.i_can_has_good_crypto()) {
jQuery(".source .bad_crypto").clone().hide().fadeIn(800).appendTo(".message"); jQuery(".source .bad_crypto").clone().hide().fadeIn(800).appendTo(".message");
} }
@ -376,6 +387,6 @@ jQuery.getScript("./wordlist/wordlist.js").done(
}); });
})(); } // End of go()