mirror of
https://github.com/CHOMPStation2/CHOMPStation2.git
synced 2025-12-14 12:13:06 +00:00
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:
@@ -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>
|
||||||
|
|||||||
@@ -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 ()
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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 ()
|
||||||
|
|||||||
Reference in New Issue
Block a user