NanoUI Updates.

* Restructured HTML in an attempt to fix the "blank UI" issue.
* Added a crap ton of debugging messages.
* Added a loading message to the UI.
This commit is contained in:
Mark Aherne (Faerdan)
2014-01-08 02:30:33 +00:00
parent cdc8b8a40d
commit eef5013d79
4 changed files with 48 additions and 24 deletions

View File

@@ -92,8 +92,8 @@ nanoui is used to open and update nano browser uis
*/ */
/datum/nanoui/proc/add_common_assets() /datum/nanoui/proc/add_common_assets()
add_script("libraries.min.js") // The jQuery library add_script("libraries.min.js") // The jQuery library
add_script("nano_config.js") // The NanoConfig JS, this is used to store configuration values.
add_script("nano_update.js") // The NanoUpdate JS, this is used to receive updates and apply them. add_script("nano_update.js") // The NanoUpdate JS, this is used to receive updates and apply them.
add_script("nano_config.js") // The NanoUpdate JS, this is used to receive updates and apply them.
add_script("nano_base_helpers.js") // The NanoBaseHelpers JS, this is used to set up template helpers which are common to all templates add_script("nano_base_helpers.js") // The NanoBaseHelpers JS, this is used to set up template helpers which are common to all templates
add_stylesheet("shared.css") // this CSS sheet is common to all UIs add_stylesheet("shared.css") // this CSS sheet is common to all UIs
add_stylesheet("icons.css") // this CSS sheet is common to all UIs add_stylesheet("icons.css") // this CSS sheet is common to all UIs
@@ -258,8 +258,12 @@ nanoui is used to open and update nano browser uis
*/ */
/datum/nanoui/proc/get_header() /datum/nanoui/proc/get_header()
var/head_content = "" var/head_content = ""
for (var/filename in scripts)
head_content += "<script type='text/javascript' src='[filename]'></script> "
for (var/filename in stylesheets) for (var/filename in stylesheets)
head_content += "<link rel='stylesheet' type='text/css' href='[filename]'>" head_content += "<link rel='stylesheet' type='text/css' href='[filename]'> "
var/templatel_data[0] var/templatel_data[0]
for (var/key in templates) for (var/key in templates)
@@ -292,7 +296,7 @@ nanoui is used to open and update nano browser uis
} }
else else
{ {
alert('receiveUpdateData error: something is not defined!'); alert('receiveUpdateData ERROR: something is not defined!');
if (typeof NanoUpdate == 'undefined') if (typeof NanoUpdate == 'undefined')
{ {
alert('NanoUpdate not defined!'); alert('NanoUpdate not defined!');
@@ -308,7 +312,7 @@ nanoui is used to open and update nano browser uis
<div id='uiWrapper'> <div id='uiWrapper'>
[title ? "<div id='uiTitleWrapper'><div id='uiStatusIcon' class='icon24 uiStatusGood'></div><div id='uiTitle'>[title]</div><div id='uiTitleFluff'></div></div>" : ""] [title ? "<div id='uiTitleWrapper'><div id='uiStatusIcon' class='icon24 uiStatusGood'></div><div id='uiTitle'>[title]</div><div id='uiTitleFluff'></div></div>" : ""]
<div id='uiContent'> <div id='uiContent'>
<noscript><div id='uiNoJavaScript'>Your browser does not have JavaScript enabled. Please enable JavaScript restart SS13.</div></noscript> <div id='uiNoJavaScript'>Initiating...</div>
"} "}
/** /**
@@ -317,13 +321,8 @@ nanoui is used to open and update nano browser uis
* @return string HTML footer content * @return string HTML footer content
*/ */
/datum/nanoui/proc/get_footer() /datum/nanoui/proc/get_footer()
var/scriptsContent = ""
for (var/filename in scripts)
scriptsContent += "<script type='text/javascript' src='[filename]'></script>"
return {" return {"
[scriptsContent]
</div> </div>
</div> </div>
</body> </body>

View File

@@ -186,7 +186,7 @@ NanoBaseHelpers = function ()
return html; return html;
} }
}); });
} };
// generate a Byond href, combines _urlParameters with parameters // generate a Byond href, combines _urlParameters with parameters
var generateHref = function (parameters) var generateHref = function (parameters)
@@ -217,7 +217,7 @@ NanoBaseHelpers = function ()
} }
} }
return queryString; return queryString;
} };
return { return {
init: function () init: function ()

View File

@@ -4,7 +4,12 @@ var NanoConfig = function ()
return { return {
init: function () init: function ()
{ {
if (typeof jQuery == 'undefined') {
alert('ERROR: jQuery failed to load!');
}
if (typeof $.views == 'undefined') {
alert('ERROR: JSRender failed to load!');
}
} }
} }
} (); } ();
@@ -32,7 +37,7 @@ if (!Array.prototype.indexOf)
} }
return -1; return -1;
}; };
} };
if (!String.prototype.format) if (!String.prototype.format)
{ {
@@ -54,7 +59,7 @@ if (!String.prototype.format)
}); });
}; };
String.prototype.format.regex = new RegExp("{-?[0-9]+}", "g"); String.prototype.format.regex = new RegExp("{-?[0-9]+}", "g");
} };
Object.size = function(obj) { Object.size = function(obj) {
var size = 0, key; var size = 0, key;
@@ -70,7 +75,7 @@ if(!window.console) {
return false; return false;
} }
}; };
} };
String.prototype.toTitleCase = function () { String.prototype.toTitleCase = function () {
var smallWords = /^(a|an|and|as|at|but|by|en|for|if|in|of|on|or|the|to|vs?\.?|via)$/i; var smallWords = /^(a|an|and|as|at|but|by|en|for|if|in|of|on|or|the|to|vs?\.?|via)$/i;

View File

@@ -23,6 +23,8 @@ NanoUpdate = function ()
// this function sets up the templates and base functionality // this function sets up the templates and base functionality
var init = function () var init = function ()
{ {
$('#uiNoJavaScript').html('Loading...');
// this callback is triggered after new data is processed // this callback is triggered after new data is processed
// it updates the status/visibility icon and adds click event handling to buttons/links // it updates the status/visibility icon and adds click event handling to buttons/links
NanoUpdate.addAfterUpdateCallback(function (updateData) { NanoUpdate.addAfterUpdateCallback(function (updateData) {
@@ -73,7 +75,7 @@ NanoUpdate = function ()
var templateData = body.data('templateData'); var templateData = body.data('templateData');
var initialData = body.data('initialData'); var initialData = body.data('initialData');
if (!templateData || !initialData) if (templateData == null || !initialData == null)
{ {
alert('Error: Initial data did not load correctly.'); alert('Error: Initial data did not load correctly.');
} }
@@ -88,6 +90,11 @@ NanoUpdate = function ()
} }
} }
if (!templateCount)
{
alert('ERROR: No templates listed!');
}
// load markup for each template and register it // load markup for each template and register it
for (var key in templateData) for (var key in templateData)
{ {
@@ -121,15 +128,14 @@ NanoUpdate = function ()
renderTemplates(initialData); renderTemplates(initialData);
} }
_isInitialised = true; _isInitialised = true;
$('#uiNoJavaScript').hide();
} }
executeCallbacks(_afterUpdateCallbacks, _data); executeCallbacks(_afterUpdateCallbacks, _data);
//alert($("#mainTemplate").html());
} }
catch(error) catch(error)
{ {
alert('An error occurred while loading the UI: ' + error.message); alert('ERROR: An error occurred while loading the UI: ' + error.message);
return; return;
} }
}); });
@@ -165,15 +171,29 @@ NanoUpdate = function ()
{ {
_earlyUpdateData = updateData; // all templates have not been registered. We set _earlyUpdateData which will be applied after the template is loaded with the initial data _earlyUpdateData = updateData; // all templates have not been registered. We set _earlyUpdateData which will be applied after the template is loaded with the initial data
} }
} };
// This function renders the template with the latest data // This function renders the template with the latest data
// It has to be done recursively as each piece of data is observed individually and needs to be updated individually // It has to be done recursively as each piece of data is observed individually and needs to be updated individually
var renderTemplates = function (data) var renderTemplates = function (data)
{ {
_data = data; if (!_templates.hasOwnProperty("main"))
$("#mainTemplate").html(_templates["main"].render(_data)); {
} alert('Error: Main template not found.');
}
_data = data;
try
{
$("#mainTemplate").html(_templates["main"].render(_data));
}
catch(error)
{
alert('ERROR: An error occurred while rendering the UI: ' + error.message);
return;
}
};
// Execute all callbacks in the callbacks array/object provided, updateData is passed to them for processing // Execute all callbacks in the callbacks array/object provided, updateData is passed to them for processing
var executeCallbacks = function (callbacks, updateData) var executeCallbacks = function (callbacks, updateData)
@@ -184,7 +204,7 @@ NanoUpdate = function ()
} }
return updateData; return updateData;
} };
return { return {
init: function () init: function ()