diff --git a/code/boot.js b/code/boot.js index 064241be..3ad6790d 100644 --- a/code/boot.js +++ b/code/boot.js @@ -339,27 +339,6 @@ window.setupTooltips = function(element) { } } -window.setupDialogs = function() { - window.dialogID = 0; - window.alert = function(text, isHTML, closeCallback) { - var id = 'dialog-' + window.dialogID++; - $('body').append('
'); - $('#' + id).dialog({ - autoOpen: false, - modal: false, - data: {closeCallback: closeCallback}, - buttons: { - 'OK': function() { - if($(this).data("closeCallback")) { - $(this).data("closeCallback")(); - } - $(this).dialog('close'); - } - } - }).html(isHTML ? text : window.convertTextToTableMagic(text)).dialog('open'); - } -} - window.setupTaphold = function() { @@INCLUDERAW:external/taphold.js@@ } diff --git a/code/dialog.js b/code/dialog.js new file mode 100644 index 00000000..5d53d0f0 --- /dev/null +++ b/code/dialog.js @@ -0,0 +1,77 @@ +// DIALOGS ///////////////////////////////////////////////////////// + +/* The ID of onscreen dialogs. + * Starts at 0. + */ +window.DIALOG_ID = 0; + +/* All onscreen dialogs, keyed by their ID. + */ +window.DIALOGS = {}; + +/* Creates a dialog and puts it onscreen. Takes one parameter: options. + * (text|html): The text or HTML to display in the dialog. Text is auto-converted to HTML. + * title: The dialog's title + */ +window.dialog = function(options) { + var id = 'dialog-' + window.DIALOG_ID++; + var jqID = '#' + id; + + var html = ''; + if(options.text) { + html = window.convertTextToTableMagic(options.text); + } else if(options.html) { + html = options.html; + } else { + console.log('window.dialog: warning: no text in dialog'); + html = window.convertTextToTableMagic(''); + } + + $('body').append('
'); + window.DIALOGS[id] = $(jqID).dialog($.extend(true, { + autoOpen: false, + modal: false, + title: '#', + buttons: { + 'OK': function() { + $(this).dialog('close'); + } + }, + close: function(event, ui) { + console.log('window.dialog: dialog ' + $(this).dialog('option', 'title') + ' closed.'); + if($(this).data('closeCallback')) { + $(this).data('closeCallback')(); + } + + $($(this).data('jqID')).remove(); + delete window.DIALOGS[$(this).data('id')]; + } + }, options)); + + $(jqID).html(html); + $(jqID).data('closeCallback', options.closeCallback); + $(jqID).data('id', id); + $(jqID).data('jqID', jqID); + + $(jqID).dialog('open'); +} + +/* Deprecated. Creates a dialog with default settings. + * Use window.dialog instead. + */ +window.alert = function(text, isHTML, closeCallback) { + var obj = {closeCallback: closeCallback}; + if(isHTML) { + obj.html = text; + } else { + obj.text = text; + } + console.log('window.alert: this function is deprecated, please use window.dialog instead'); + + window.dialog(obj); +} + +window.setupDialogs = function() { + window.DIALOG_ID = 0; + window.DIALOGS = {}; +} diff --git a/code/redeeming.js b/code/redeeming.js index 1c4931de..399b501f 100644 --- a/code/redeeming.js +++ b/code/redeeming.js @@ -1,4 +1,3 @@ - // REDEEMING ///////////////////////////////////////////////////////// /* Resource type names mapped to actual names and abbreviations. @@ -93,11 +92,12 @@ window.REDEEM_HINTS = { }; window.handleRedeemResponse = function(data, textStatus, jqXHR) { - var passcode = this.passcode, to_alert, to_log; + var passcode = this.passcode, to_dialog, to_log, buttons; if(data.error) { - to_alert = '' + data.error + '
' + (window.REDEEM_ERRORS[data.error] || 'There was a problem redeeming the passcode. Try again?'); - to_log = '[ERROR] ' + data.error; + to_dialog = '' + data.error + '
' + (window.REDEEM_ERRORS[data.error] || 'There was a problem redeeming the passcode. Try again?'); + to_log = '[ERROR] ' + data.error; + buttons = {}; } else if(data.result) { var encouragement = window.REDEEM_ENCOURAGEMENT[Math.floor(Math.random() * window.REDEEM_ENCOURAGEMENT.length)]; var payload = {}; @@ -190,7 +190,7 @@ window.handleRedeemResponse = function(data, textStatus, jqXHR) { // Let the user know if we had to guess if (inferred.length > 0) { - results.table.push('*Guessed (check console)'); + results.table.push('*Guessed (check console)'); $.each(inferred, function (idx, val) { console.log(passcode + ' => [INFERRED] ' + val.type + ':' + val.key + ' :: ' + @@ -198,17 +198,27 @@ window.handleRedeemResponse = function(data, textStatus, jqXHR) { }); } - // Add table footers - results.table.push('>' + encouragement + '
' + results.html.join('/') + '') + - '\', true);" style="font-family: monospace;">[plaintext]'); - // Display formatted versions in a table, plaintext, and the console log - to_alert = '' + results.table.map(function(a) {return '' + a + '';}).join("\n") + '
'; - to_log = '[SUCCESS] ' + results.plain.join('/'); + to_dialog = '' + + results.table.map(function(a) {return '' + a + '';}).join("\n") + + '
'; + to_log = '[SUCCESS] ' + results.plain.join('/'); + buttons = { + 'PLAINTEXT' : function() { + dialog({ + title: 'Passcode: ' + passcode, + html: '' + encouragement + '' + + '
' + results.html.join('/') + '' + }); + } + } } - alert(to_alert, true); + dialog({ + title: 'Passcode: ' + passcode, + html: to_dialog, + buttons: buttons + }); console.log(passcode + ' => ' + to_log); } @@ -225,7 +235,9 @@ window.setupRedeem = function() { } else { extra = 'No status code was returned.'; } - alert('The HTTP request failed. ' + extra); + dialog({ + html: 'The HTTP request failed. ' + extra + }); }); }); } diff --git a/main.js b/main.js index f74a5c2e..91218bf4 100644 --- a/main.js +++ b/main.js @@ -61,7 +61,8 @@ document.getElementsByTagName('head')[0].innerHTML = '' + '' + '' //note: smartphone.css injection moved into code/smartphone.js - + ''; + + '' + + ''; document.getElementsByTagName('body')[0].innerHTML = '' + '
Loading, please wait
' diff --git a/style.css b/style.css index 915baecc..c01f4147 100644 --- a/style.css +++ b/style.css @@ -708,7 +708,7 @@ h3 { background-color: rgba(8, 48, 78, 0.9); border: 1px solid #20A8B1; color: #eee; - font: 13px/15px "Helvetica Neue", Arial, Helvetica, sans-serif; + font: 13px/15px Roboto, Arial, Helvetica, sans-serif; padding: 2px 4px; } @@ -732,9 +732,22 @@ h3 { opacity: 0.6; } -/*.ui-dialog-titlebar { - display: none; -}*/ +.ui-dialog-titlebar { + text-align: center; + padding: 4px; + background-color: rgba(8, 60, 78, 0.9); +} + +.ui-dialog-title { + padding: 2px; + font-weight: bold; +} + +.ui-dialog-titlebar-close { + position: absolute; + right: .2em; + top: 0; +} .ui-dialog-content { padding: 12px; @@ -756,7 +769,7 @@ h3 { .ui-dialog-buttonset button, .ui-dialog-content button { padding: 2px; - min-width: 80px; + min-width: 40px; color: #FFCE00; border: 1px solid #FFCE00; background-color: rgba(8, 48, 78, 0.9); @@ -782,12 +795,12 @@ td + td { #qrcode > canvas { border: 8px solid white; -} +} /* redeem results *****************************************************/ .redeem-result { font-size: 14px; - font-family: arial,helvetica,sans-serif; + font-family: Roboto, Arial, Helvetica, sans-serif; table-layout: fixed; }