cyberpresidentvanellope/Bubberstation
1
0
Fork 0
mirror of https://github.com/Bubberstation/Bubberstation.git synced 2026-08-28 15:47:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2293 from Faerdan/master

Browse Source 
NanoUI Update
This commit is contained in:
Rockdtben
2014-01-11 13:42:32 -08:00
parent d2a92b3063 fef1a108fb
commit d3f2befb54
19 changed files with 2121 additions and 4942 deletions
Download Patch File Download Diff File Expand all files Collapse all files
code/game/machinery/cryo.dm
+11 -11
View File
@@ -94,7 +94,7 @@
*
* @return nothing
*/
/obj/machinery/atmospherics/unary/cryo_cell/ui_interact(mob/user, ui_key = "main")
/obj/machinery/atmospherics/unary/cryo_cell/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null)
if(user == occupant || user.stat)
return
@@ -141,20 +141,20 @@
for(var/datum/reagent/R in beaker:reagents.reagent_list)
beakerContents.Add(list(list("name" = R.name, "volume" = R.volume))) // list in a list because Byond merges the first list...
data["beakerContents"] = beakerContents
var/datum/nanoui/ui = nanomanager.get_open_ui(user, src, ui_key)
// update the ui if it exists, returns null if no ui is passed/found
ui = nanomanager.try_update_ui(user, src, ui_key, ui, data)
if (!ui)
// the ui does not exist, so we'll create a new one
// the ui does not exist, so we'll create a new() one
// for a list of parameters and their descriptions see the code docs in \code\modules\nano\nanoui.dm
ui = new(user, src, ui_key, "cryo.tmpl", "Cryo Cell Control System", 520, 410)
// When the UI is first opened this is the data it will use
ui.set_initial_data(data)
// when the ui is first opened this is the data it will use
ui.set_initial_data(data)
// open the new ui window
ui.open()
// Auto update every Master Controller tick
// auto update every Master Controller tick
ui.set_auto_update(1)
else
// The UI is already open so push the new data to it
ui.push_data(data)
return
//user.set_machine(src)
/obj/machinery/atmospherics/unary/cryo_cell/Topic(href, href_list)
code/modules/nano/nanoexternal.dm
+3 -2
View File
@@ -31,11 +31,12 @@
* ui_interact is currently defined for /atom/movable
*
* @param user /mob The mob who is interacting with this ui
* @param ui_key string A string key to use for this ui. Allows for multiple unique uis on one obj/mob (defaut value "main")
* @param ui_key string A string key to use for this ui. Allows for multiple unique uis on one obj/mob (defaut value "main")
* @param ui /datum/nanoui This parameter is passed by the nanoui process() proc when updating an open ui
*
* @return nothing
*/
/atom/movable/proc/ui_interact(mob/user, ui_key = "main")
/atom/movable/proc/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null)
return
// Used by the Nano UI Manager (/datum/nanomanager) to track UIs opened by this mob
code/modules/nano/nanomanager.dm
+72 -9
View File
@@ -1,8 +1,9 @@
// This is the window/UI manager for Nano UI
// There should only ever be one (global) instance of nanomanger
/datum/nanomanager
// the list of current open /nanoui UIs
// a list of current open /nanoui UIs, grouped by src_object and ui_key
var/open_uis[0]
// a list of current open /nanoui UIs, not grouped, for use in processing
var/list/processing_uis = list()
/**
@@ -13,6 +14,29 @@
/datum/nanomanager/New()
return
/**
* Get an open /nanoui ui for the current user, src_object and ui_key and try to update it with data
*
* @param user /mob The mob who opened/owns the ui
* @param src_object /obj|/mob The obj or mob which the ui belongs to
* @param ui_key string A string key used for the ui
* @param ui /datum/nanoui An existing instance of the ui (can be null)
* @param data list The data to be passed to the ui, if it exists
*
* @return /nanoui Returns the found ui, for null if none exists
*/
/datum/nanomanager/proc/try_update_ui(var/mob/user, src_object, ui_key, var/datum/nanoui/ui, data)
if (isnull(ui)) // no ui has been passed, so we'll search for one
{
ui = get_open_ui(user, src_object, ui_key)
}
if (!isnull(ui))
// The UI is already open so push the data to it
ui.push_data(data)
return ui
return null
/**
* Get an open /nanoui ui for the current user, src_object and ui_key
*
@@ -20,7 +44,7 @@
* @param src_object /obj|/mob The obj or mob which the ui belongs to
* @param ui_key string A string key used for the ui
*
* @return /nanoui Returns the found ui, for null if none exists
* @return /nanoui Returns the found ui, or null if none exists
*/
/datum/nanomanager/proc/get_open_ui(var/mob/user, src_object, ui_key)
var/src_object_key = "\ref[src_object]"
@@ -38,7 +62,7 @@
/**
* Update all /nanoui uis attached to src_object
*
* @param src_object /obj|/mob The obj or mob which the uis belong to
* @param src_object /obj|/mob The obj or mob which the uis are attached to
*
* @return int The number of uis updated
*/
@@ -54,6 +78,48 @@
ui.process(1)
update_count++
return update_count
/**
* Update /nanoui uis belonging to user
*
* @param user /mob The mob who owns the uis
* @param src_object /obj|/mob If src_object is provided, only update uis which are attached to src_object (optional)
* @param ui_key string If ui_key is provided, only update uis with a matching ui_key (optional)
*
* @return int The number of uis updated
*/
/datum/nanomanager/proc/update_user_uis(var/mob/user, src_object = null, ui_key = null)
if (isnull(user.open_uis) || !istype(user.open_uis, /list) || open_uis.len == 0)
return 0 // has no open uis
var/update_count = 0
for (var/datum/nanoui/ui in user.open_uis)
if ((isnull(src_object) || !isnull(src_object) && ui.src_object == src_object) && (isnull(ui_key) || !isnull(ui_key) && ui.ui_key == ui_key))
ui.process(1)
update_count++
return update_count
/**
* Close /nanoui uis belonging to user
*
* @param user /mob The mob who owns the uis
* @param src_object /obj|/mob If src_object is provided, only close uis which are attached to src_object (optional)
* @param ui_key string If ui_key is provided, only close uis with a matching ui_key (optional)
*
* @return int The number of uis closed
*/
/datum/nanomanager/proc/close_user_uis(var/mob/user, src_object = null, ui_key = null)
if (isnull(user.open_uis) || !istype(user.open_uis, /list) || open_uis.len == 0)
return 0 // has no open uis
var/close_count = 0
for (var/datum/nanoui/ui in user.open_uis)
if ((isnull(src_object) || !isnull(src_object) && ui.src_object == src_object) && (isnull(ui_key) || !isnull(ui_key) && ui.ui_key == ui_key))
ui.close()
close_count++
return close_count
/**
* Add a /nanoui ui to the list of open uis
@@ -106,11 +172,7 @@
//
/datum/nanomanager/proc/user_logout(var/mob/user)
if (isnull(user.open_uis) || !istype(user.open_uis, /list) || open_uis.len == 0)
return 0 // has no open uis
for (var/datum/nanoui/ui in user.open_uis)
ui.close();
return close_user_uis(user)
/**
* This is called when a player transfers from one mob to another
@@ -133,5 +195,6 @@
newMob.open_uis.Add(ui)
oldMob.open_uis.Cut()
return 1 // success
code/modules/nano/nanoui.dm
+19 -26
View File
@@ -92,8 +92,8 @@ nanoui is used to open and update nano browser uis
*/
/datum/nanoui/proc/add_common_assets()
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_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_stylesheet("shared.css") // this CSS sheet is common to all UIs
add_stylesheet("icons.css") // this CSS sheet is common to all UIs
@@ -256,8 +256,12 @@ nanoui is used to open and update nano browser uis
*/
/datum/nanoui/proc/get_header()
var/head_content = ""
for (var/filename in scripts)
head_content += "<script type='text/javascript' src='[filename]'></script> "
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]
for (var/key in templates)
@@ -277,35 +281,24 @@ nanoui is used to open and update nano browser uis
<html>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<head>
[head_content]
</head>
<body scroll=auto data-url-parameters='[url_parameters_json]' data-template-data='[template_data_json]' data-initial-data='[initial_data_json]'>
<script type='text/javascript'>
function receiveUpdateData(jsonString)
{
// We need both jQuery and NanoUpdate to be able to recieve data
// We need both jQuery and NanoUpdate to be able to recieve data
// At the moment any data received before those libraries are loaded will be lost
if (typeof NanoUpdate != 'undefined' && typeof jQuery != 'undefined')
{
NanoUpdate.receiveUpdateData(jsonString);
}
else
{
alert('receiveUpdateData error: something is not defined!');
if (typeof NanoUpdate == 'undefined')
{
alert('NanoUpdate not defined!');
}
if (typeof jQuery == 'undefined')
{
alert('jQuery not defined!');
}
}
// At the moment any data received before those libraries are loaded will be lost
}
</script>
[head_content]
</head>
<body scroll=auto data-url-parameters='[url_parameters_json]' data-template-data='[template_data_json]' data-initial-data='[initial_data_json]'>
<div id='uiWrapper'>
[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='uiNoJavaScript'>Initiating...</div>
"}
/**
@@ -314,13 +307,8 @@ nanoui is used to open and update nano browser uis
* @return string HTML footer content
*/
/datum/nanoui/proc/get_footer()
var/scriptsContent = ""
for (var/filename in scripts)
scriptsContent += "<script type='text/javascript' src='[filename]'></script>"
return {"
[scriptsContent]
</div>
</div>
</body>
@@ -349,7 +337,7 @@ nanoui is used to open and update nano browser uis
window_size = "size=[width]x[height];"
update_status(0)
user << browse(get_html(), "window=[window_id];[window_size][window_options]")
winset(user, "mapwindow.map", "focus=true") // Return keyboard focus to map.
winset(user, "mapwindow.map", "focus=true") // return keyboard focus to map
on_close_winset()
//onclose(user, window_id)
nanomanager.ui_opened(src)
@@ -388,6 +376,7 @@ nanoui is used to open and update nano browser uis
return // Cannot update UI, no visibility
data = add_default_data(data)
//user << list2json(data) // used for debugging
user << output(list2params(list(list2json(data))),"[window_id].browser:receiveUpdateData")
/**
@@ -414,8 +403,12 @@ nanoui is used to open and update nano browser uis
* @return nothing
*/
/datum/nanoui/proc/process(update = 0)
if (!src_object || !user)
close()
return
if (status && (update || is_auto_updating))
src_object.ui_interact(user, ui_key) // Update the UI (update_status() is called whenever a UI is updated)
src_object.ui_interact(user, ui_key, src) // Update the UI (update_status() is called whenever a UI is updated)
else
update_status(1) // Not updating UI, so lets check here if status has changed
code/modules/power/apc.dm
+11 -12
View File
@@ -503,7 +503,7 @@
return 0 // 0 = User is not a Malf AI
/obj/machinery/power/apc/ui_interact(mob/user, ui_key = "main")
/obj/machinery/power/apc/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null)
if(!user)
return
@@ -552,20 +552,19 @@
)
)
)
var/datum/nanoui/ui = nanomanager.get_open_ui(user, src, ui_key)
// update the ui if it exists, returns null if no ui is passed/found
ui = nanomanager.try_update_ui(user, src, ui_key, ui, data)
if (!ui)
// the ui does not exist, so we'll create a new one
ui = new(user, src, ui_key, "apc.tmpl", "[area.name] - APC", 500, data["siliconUser"] ? 465 : 390)
// When the UI is first opened this is the data it will use
ui.set_initial_data(data)
// the ui does not exist, so we'll create a new() one
// for a list of parameters and their descriptions see the code docs in \code\modules\nano\nanoui.dm
ui = new(user, src, ui_key, "apc.tmpl", "[area.name] - APC", 520, data["siliconUser"] ? 465 : 420)
// when the ui is first opened this is the data it will use
ui.set_initial_data(data)
// open the new ui window
ui.open()
// Auto update every Master Controller tick
// auto update every Master Controller tick
ui.set_auto_update(1)
else
// The UI is already open so push the new data to it
ui.push_data(data)
return
/obj/machinery/power/apc/proc/report()
return "[area.name] : [equipment]/[lighting]/[environ] ([lastused_equip+lastused_light+lastused_environ]) : [cell? cell.percent() : "N/C"] ([charging])"
code/modules/reagents/Chemistry-Machinery.dm
+10 -11
View File
@@ -77,7 +77,7 @@
*
* @return nothing
*/
/obj/machinery/chem_dispenser/ui_interact(mob/user, ui_key = "main")
/obj/machinery/chem_dispenser/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null)
if(stat & (BROKEN)) return
if(user.stat || user.restrained()) return
@@ -109,18 +109,17 @@
if(temp)
chemicals.Add(list(list("title" = temp.name, "id" = temp.id, "commands" = list("dispense" = temp.id)))) // list in a list because Byond merges the first list...
data["chemicals"] = chemicals
var/datum/nanoui/ui = nanomanager.get_open_ui(user, src, ui_key)
// update the ui if it exists, returns null if no ui is passed/found
ui = nanomanager.try_update_ui(user, src, ui_key, ui, data)
if (!ui)
// the ui does not exist, so we'll create a new one
ui = new(user, src, ui_key, "chem_dispenser.tmpl", "Chem Dispenser 5000", 370, 590)
// When the UI is first opened this is the data it will use
ui.set_initial_data(data)
// the ui does not exist, so we'll create a new() one
// for a list of parameters and their descriptions see the code docs in \code\modules\nano\nanoui.dm
ui = new(user, src, ui_key, "chem_dispenser.tmpl", "Chem Dispenser 5000", 390, 610)
// when the ui is first opened this is the data it will use
ui.set_initial_data(data)
// open the new ui window
ui.open()
else
// The UI is already open so push the new data to it
ui.push_data(data)
return
/obj/machinery/chem_dispenser/Topic(href, href_list)
if(stat & (BROKEN))
nano/css/icons.css
+176 -175
View File
@@ -49,179 +49,180 @@
}
/* positioning */
.uiIcon16.blank { background-position: 16px 16px; }
.uiIcon16.carat-1-n { background-position: 0 0; }
.uiIcon16.carat-1-ne { background-position: -16px 0; }
.uiIcon16.carat-1-e { background-position: -32px 0; }
.uiIcon16.carat-1-se { background-position: -48px 0; }
.uiIcon16.carat-1-s { background-position: -64px 0; }
.uiIcon16.carat-1-sw { background-position: -80px 0; }
.uiIcon16.carat-1-w { background-position: -96px 0; }
.uiIcon16.carat-1-nw { background-position: -112px 0; }
.uiIcon16.carat-2-n-s { background-position: -128px 0; }
.uiIcon16.carat-2-e-w { background-position: -144px 0; }
.uiIcon16.triangle-1-n { background-position: 0 -16px; }
.uiIcon16.triangle-1-ne { background-position: -16px -16px; }
.uiIcon16.triangle-1-e { background-position: -32px -16px; }
.uiIcon16.triangle-1-se { background-position: -48px -16px; }
.uiIcon16.triangle-1-s { background-position: -64px -16px; }
.uiIcon16.triangle-1-sw { background-position: -80px -16px; }
.uiIcon16.triangle-1-w { background-position: -96px -16px; }
.uiIcon16.triangle-1-nw { background-position: -112px -16px; }
.uiIcon16.triangle-2-n-s { background-position: -128px -16px; }
.uiIcon16.triangle-2-e-w { background-position: -144px -16px; }
.uiIcon16.arrow-1-n { background-position: 0 -32px; }
.uiIcon16.arrow-1-ne { background-position: -16px -32px; }
.uiIcon16.arrow-1-e { background-position: -32px -32px; }
.uiIcon16.arrow-1-se { background-position: -48px -32px; }
.uiIcon16.arrow-1-s { background-position: -64px -32px; }
.uiIcon16.arrow-1-sw { background-position: -80px -32px; }
.uiIcon16.arrow-1-w { background-position: -96px -32px; }
.uiIcon16.arrow-1-nw { background-position: -112px -32px; }
.uiIcon16.arrow-2-n-s { background-position: -128px -32px; }
.uiIcon16.arrow-2-ne-sw { background-position: -144px -32px; }
.uiIcon16.arrow-2-e-w { background-position: -160px -32px; }
.uiIcon16.arrow-2-se-nw { background-position: -176px -32px; }
.uiIcon16.arrowstop-1-n { background-position: -192px -32px; }
.uiIcon16.arrowstop-1-e { background-position: -208px -32px; }
.uiIcon16.arrowstop-1-s { background-position: -224px -32px; }
.uiIcon16.arrowstop-1-w { background-position: -240px -32px; }
.uiIcon16.arrowthick-1-n { background-position: 0 -48px; }
.uiIcon16.arrowthick-1-ne { background-position: -16px -48px; }
.uiIcon16.arrowthick-1-e { background-position: -32px -48px; }
.uiIcon16.arrowthick-1-se { background-position: -48px -48px; }
.uiIcon16.arrowthick-1-s { background-position: -64px -48px; }
.uiIcon16.arrowthick-1-sw { background-position: -80px -48px; }
.uiIcon16.arrowthick-1-w { background-position: -96px -48px; }
.uiIcon16.arrowthick-1-nw { background-position: -112px -48px; }
.uiIcon16.arrowthick-2-n-s { background-position: -128px -48px; }
.uiIcon16.arrowthick-2-ne-sw { background-position: -144px -48px; }
.uiIcon16.arrowthick-2-e-w { background-position: -160px -48px; }
.uiIcon16.arrowthick-2-se-nw { background-position: -176px -48px; }
.uiIcon16.arrowthickstop-1-n { background-position: -192px -48px; }
.uiIcon16.arrowthickstop-1-e { background-position: -208px -48px; }
.uiIcon16.arrowthickstop-1-s { background-position: -224px -48px; }
.uiIcon16.arrowthickstop-1-w { background-position: -240px -48px; }
.uiIcon16.arrowreturnthick-1-w { background-position: 0 -64px; }
.uiIcon16.arrowreturnthick-1-n { background-position: -16px -64px; }
.uiIcon16.arrowreturnthick-1-e { background-position: -32px -64px; }
.uiIcon16.arrowreturnthick-1-s { background-position: -48px -64px; }
.uiIcon16.arrowreturn-1-w { background-position: -64px -64px; }
.uiIcon16.arrowreturn-1-n { background-position: -80px -64px; }
.uiIcon16.arrowreturn-1-e { background-position: -96px -64px; }
.uiIcon16.arrowreturn-1-s { background-position: -112px -64px; }
.uiIcon16.arrowrefresh-1-w { background-position: -128px -64px; }
.uiIcon16.arrowrefresh-1-n { background-position: -144px -64px; }
.uiIcon16.arrowrefresh-1-e { background-position: -160px -64px; }
.uiIcon16.arrowrefresh-1-s { background-position: -176px -64px; }
.uiIcon16.arrow-4 { background-position: 0 -80px; }
.uiIcon16.arrow-4-diag { background-position: -16px -80px; }
.uiIcon16.extlink { background-position: -32px -80px; }
.uiIcon16.newwin { background-position: -48px -80px; }
.uiIcon16.refresh { background-position: -64px -80px; }
.uiIcon16.shuffle { background-position: -80px -80px; }
.uiIcon16.transfer-e-w { background-position: -96px -80px; }
.uiIcon16.transferthick-e-w { background-position: -112px -80px; }
.uiIcon16.folder-collapsed { background-position: 0 -96px; }
.uiIcon16.folder-open { background-position: -16px -96px; }
.uiIcon16.document { background-position: -32px -96px; }
.uiIcon16.document-b { background-position: -48px -96px; }
.uiIcon16.note { background-position: -64px -96px; }
.uiIcon16.mail-closed { background-position: -80px -96px; }
.uiIcon16.mail-open { background-position: -96px -96px; }
.uiIcon16.suitcase { background-position: -112px -96px; }
.uiIcon16.comment { background-position: -128px -96px; }
.uiIcon16.person { background-position: -144px -96px; }
.uiIcon16.print { background-position: -160px -96px; }
.uiIcon16.trash { background-position: -176px -96px; }
.uiIcon16.locked { background-position: -192px -96px; }
.uiIcon16.unlocked { background-position: -208px -96px; }
.uiIcon16.bookmark { background-position: -224px -96px; }
.uiIcon16.tag { background-position: -240px -96px; }
.uiIcon16.home { background-position: 0 -112px; }
.uiIcon16.flag { background-position: -16px -112px; }
.uiIcon16.calendar { background-position: -32px -112px; }
.uiIcon16.cart { background-position: -48px -112px; }
.uiIcon16.pencil { background-position: -64px -112px; }
.uiIcon16.clock { background-position: -80px -112px; }
.uiIcon16.disk { background-position: -96px -112px; }
.uiIcon16.calculator { background-position: -112px -112px; }
.uiIcon16.zoomin { background-position: -128px -112px; }
.uiIcon16.zoomout { background-position: -144px -112px; }
.uiIcon16.search { background-position: -160px -112px; }
.uiIcon16.wrench { background-position: -176px -112px; }
.uiIcon16.gear { background-position: -192px -112px; }
.uiIcon16.heart { background-position: -208px -112px; }
.uiIcon16.star { background-position: -224px -112px; }
.uiIcon16.link { background-position: -240px -112px; }
.uiIcon16.cancel { background-position: 0 -128px; }
.uiIcon16.plus { background-position: -16px -128px; }
.uiIcon16.plusthick { background-position: -32px -128px; }
.uiIcon16.minus { background-position: -48px -128px; }
.uiIcon16.minusthick { background-position: -64px -128px; }
.uiIcon16.close { background-position: -80px -128px; }
.uiIcon16.closethick { background-position: -96px -128px; }
.uiIcon16.key { background-position: -112px -128px; }
.uiIcon16.lightbulb { background-position: -128px -128px; }
.uiIcon16.scissors { background-position: -144px -128px; }
.uiIcon16.clipboard { background-position: -160px -128px; }
.uiIcon16.copy { background-position: -176px -128px; }
.uiIcon16.contact { background-position: -192px -128px; }
.uiIcon16.image { background-position: -208px -128px; }
.uiIcon16.video { background-position: -224px -128px; }
.uiIcon16.script { background-position: -240px -128px; }
.uiIcon16.alert { background-position: 0 -144px; }
.uiIcon16.info { background-position: -16px -144px; }
.uiIcon16.notice { background-position: -32px -144px; }
.uiIcon16.help { background-position: -48px -144px; }
.uiIcon16.check { background-position: -64px -144px; }
.uiIcon16.bullet { background-position: -80px -144px; }
.uiIcon16.radio-on { background-position: -96px -144px; }
.uiIcon16.radio-off { background-position: -112px -144px; }
.uiIcon16.pin-w { background-position: -128px -144px; }
.uiIcon16.pin-s { background-position: -144px -144px; }
.uiIcon16.play { background-position: 0 -160px; }
.uiIcon16.pause { background-position: -16px -160px; }
.uiIcon16.seek-next { background-position: -32px -160px; }
.uiIcon16.seek-prev { background-position: -48px -160px; }
.uiIcon16.seek-end { background-position: -64px -160px; }
.uiIcon16.seek-start { background-position: -80px -160px; }
.uiIcon16.icon-blank { background-position: 16px 16px; }
.uiIcon16.icon-carat-1-n { background-position: 0 0; }
.uiIcon16.icon-carat-1-ne { background-position: -16px 0; }
.uiIcon16.icon-carat-1-e { background-position: -32px 0; }
.uiIcon16.icon-carat-1-se { background-position: -48px 0; }
.uiIcon16.icon-carat-1-s { background-position: -64px 0; }
.uiIcon16.icon-carat-1-sw { background-position: -80px 0; }
.uiIcon16.icon-carat-1-w { background-position: -96px 0; }
.uiIcon16.icon-carat-1-nw { background-position: -112px 0; }
.uiIcon16.icon-carat-2-n-s { background-position: -128px 0; }
.uiIcon16.icon-carat-2-e-w { background-position: -144px 0; }
.uiIcon16.icon-triangle-1-n { background-position: 0 -16px; }
.uiIcon16.icon-triangle-1-ne { background-position: -16px -16px; }
.uiIcon16.icon-triangle-1-e { background-position: -32px -16px; }
.uiIcon16.icon-triangle-1-se { background-position: -48px -16px; }
.uiIcon16.icon-triangle-1-s { background-position: -64px -16px; }
.uiIcon16.icon-triangle-1-sw { background-position: -80px -16px; }
.uiIcon16.icon-triangle-1-w { background-position: -96px -16px; }
.uiIcon16.icon-triangle-1-nw { background-position: -112px -16px; }
.uiIcon16.icon-triangle-2-n-s { background-position: -128px -16px; }
.uiIcon16.icon-triangle-2-e-w { background-position: -144px -16px; }
.uiIcon16.icon-arrow-1-n { background-position: 0 -32px; }
.uiIcon16.icon-arrow-1-ne { background-position: -16px -32px; }
.uiIcon16.icon-arrow-1-e { background-position: -32px -32px; }
.uiIcon16.icon-arrow-1-se { background-position: -48px -32px; }
.uiIcon16.icon-arrow-1-s { background-position: -64px -32px; }
.uiIcon16.icon-arrow-1-sw { background-position: -80px -32px; }
.uiIcon16.icon-arrow-1-w { background-position: -96px -32px; }
.uiIcon16.icon-arrow-1-nw { background-position: -112px -32px; }
.uiIcon16.icon-arrow-2-n-s { background-position: -128px -32px; }
.uiIcon16.icon-arrow-2-ne-sw { background-position: -144px -32px; }
.uiIcon16.icon-arrow-2-e-w { background-position: -160px -32px; }
.uiIcon16.icon-arrow-2-se-nw { background-position: -176px -32px; }
.uiIcon16.icon-arrowstop-1-n { background-position: -192px -32px; }
.uiIcon16.icon-arrowstop-1-e { background-position: -208px -32px; }
.uiIcon16.icon-arrowstop-1-s { background-position: -224px -32px; }
.uiIcon16.icon-arrowstop-1-w { background-position: -240px -32px; }
.uiIcon16.icon-arrowthick-1-n { background-position: 0 -48px; }
.uiIcon16.icon-arrowthick-1-ne { background-position: -16px -48px; }
.uiIcon16.icon-arrowthick-1-e { background-position: -32px -48px; }
.uiIcon16.icon-arrowthick-1-se { background-position: -48px -48px; }
.uiIcon16.icon-arrowthick-1-s { background-position: -64px -48px; }
.uiIcon16.icon-arrowthick-1-sw { background-position: -80px -48px; }
.uiIcon16.icon-arrowthick-1-w { background-position: -96px -48px; }
.uiIcon16.icon-arrowthick-1-nw { background-position: -112px -48px; }
.uiIcon16.icon-arrowthick-2-n-s { background-position: -128px -48px; }
.uiIcon16.icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.uiIcon16.icon-arrowthick-2-e-w { background-position: -160px -48px; }
.uiIcon16.icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.uiIcon16.icon-arrowthickstop-1-n { background-position: -192px -48px; }
.uiIcon16.icon-arrowthickstop-1-e { background-position: -208px -48px; }
.uiIcon16.icon-arrowthickstop-1-s { background-position: -224px -48px; }
.uiIcon16.icon-arrowthickstop-1-w { background-position: -240px -48px; }
.uiIcon16.icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.uiIcon16.icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.uiIcon16.icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.uiIcon16.icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.uiIcon16.icon-arrowreturn-1-w { background-position: -64px -64px; }
.uiIcon16.icon-arrowreturn-1-n { background-position: -80px -64px; }
.uiIcon16.icon-arrowreturn-1-e { background-position: -96px -64px; }
.uiIcon16.icon-arrowreturn-1-s { background-position: -112px -64px; }
.uiIcon16.icon-arrowrefresh-1-w { background-position: -128px -64px; }
.uiIcon16.icon-arrowrefresh-1-n { background-position: -144px -64px; }
.uiIcon16.icon-arrowrefresh-1-e { background-position: -160px -64px; }
.uiIcon16.icon-arrowrefresh-1-s { background-position: -176px -64px; }
.uiIcon16.icon-arrow-4 { background-position: 0 -80px; }
.uiIcon16.icon-arrow-4-diag { background-position: -16px -80px; }
.uiIcon16.icon-extlink { background-position: -32px -80px; }
.uiIcon16.icon-newwin { background-position: -48px -80px; }
.uiIcon16.icon-refresh { background-position: -64px -80px; }
.uiIcon16.icon-shuffle { background-position: -80px -80px; }
.uiIcon16.icon-transfer-e-w { background-position: -96px -80px; }
.uiIcon16.icon-transferthick-e-w { background-position: -112px -80px; }
.uiIcon16.icon-radiation { background-position: -128px -80px; }
.uiIcon16.icon-folder-collapsed { background-position: 0 -96px; }
.uiIcon16.icon-folder-open { background-position: -16px -96px; }
.uiIcon16.icon-document { background-position: -32px -96px; }
.uiIcon16.icon-document-b { background-position: -48px -96px; }
.uiIcon16.icon-note { background-position: -64px -96px; }
.uiIcon16.icon-mail-closed { background-position: -80px -96px; }
.uiIcon16.icon-mail-open { background-position: -96px -96px; }
.uiIcon16.icon-suitcase { background-position: -112px -96px; }
.uiIcon16.icon-comment { background-position: -128px -96px; }
.uiIcon16.icon-person { background-position: -144px -96px; }
.uiIcon16.icon-print { background-position: -160px -96px; }
.uiIcon16.icon-trash { background-position: -176px -96px; }
.uiIcon16.icon-locked { background-position: -192px -96px; }
.uiIcon16.icon-unlocked { background-position: -208px -96px; }
.uiIcon16.icon-bookmark { background-position: -224px -96px; }
.uiIcon16.icon-tag { background-position: -240px -96px; }
.uiIcon16.icon-home { background-position: 0 -112px; }
.uiIcon16.icon-flag { background-position: -16px -112px; }
.uiIcon16.icon-calendar { background-position: -32px -112px; }
.uiIcon16.icon-cart { background-position: -48px -112px; }
.uiIcon16.icon-pencil { background-position: -64px -112px; }
.uiIcon16.icon-clock { background-position: -80px -112px; }
.uiIcon16.icon-disk { background-position: -96px -112px; }
.uiIcon16.icon-calculator { background-position: -112px -112px; }
.uiIcon16.icon-zoomin { background-position: -128px -112px; }
.uiIcon16.icon-zoomout { background-position: -144px -112px; }
.uiIcon16.icon-search { background-position: -160px -112px; }
.uiIcon16.icon-wrench { background-position: -176px -112px; }
.uiIcon16.icon-gear { background-position: -192px -112px; }
.uiIcon16.icon-heart { background-position: -208px -112px; }
.uiIcon16.icon-star { background-position: -224px -112px; }
.uiIcon16.icon-link { background-position: -240px -112px; }
.uiIcon16.icon-cancel { background-position: 0 -128px; }
.uiIcon16.icon-plus { background-position: -16px -128px; }
.uiIcon16.icon-plusthick { background-position: -32px -128px; }
.uiIcon16.icon-minus { background-position: -48px -128px; }
.uiIcon16.icon-minusthick { background-position: -64px -128px; }
.uiIcon16.icon-close { background-position: -80px -128px; }
.uiIcon16.icon-closethick { background-position: -96px -128px; }
.uiIcon16.icon-key { background-position: -112px -128px; }
.uiIcon16.icon-lightbulb { background-position: -128px -128px; }
.uiIcon16.icon-scissors { background-position: -144px -128px; }
.uiIcon16.icon-clipboard { background-position: -160px -128px; }
.uiIcon16.icon-copy { background-position: -176px -128px; }
.uiIcon16.icon-contact { background-position: -192px -128px; }
.uiIcon16.icon-image { background-position: -208px -128px; }
.uiIcon16.icon-video { background-position: -224px -128px; }
.uiIcon16.icon-script { background-position: -240px -128px; }
.uiIcon16.icon-alert { background-position: 0 -144px; }
.uiIcon16.icon-info { background-position: -16px -144px; }
.uiIcon16.icon-notice { background-position: -32px -144px; }
.uiIcon16.icon-help { background-position: -48px -144px; }
.uiIcon16.icon-check { background-position: -64px -144px; }
.uiIcon16.icon-bullet { background-position: -80px -144px; }
.uiIcon16.icon-radio-on { background-position: -96px -144px; }
.uiIcon16.icon-radio-off { background-position: -112px -144px; }
.uiIcon16.icon-pin-w { background-position: -128px -144px; }
.uiIcon16.icon-pin-s { background-position: -144px -144px; }
.uiIcon16.icon-play { background-position: 0 -160px; }
.uiIcon16.icon-pause { background-position: -16px -160px; }
.uiIcon16.icon-seek-next { background-position: -32px -160px; }
.uiIcon16.icon-seek-prev { background-position: -48px -160px; }
.uiIcon16.icon-seek-end { background-position: -64px -160px; }
.uiIcon16.icon-seek-start { background-position: -80px -160px; }
/* uiIcon-seek-first is deprecated, use uiIcon-seek-start instead */
.uiIcon16.seek-first { background-position: -80px -160px; }
.uiIcon16.stop { background-position: -96px -160px; }
.uiIcon16.eject { background-position: -112px -160px; }
.uiIcon16.volume-off { background-position: -128px -160px; }
.uiIcon16.volume-on { background-position: -144px -160px; }
.uiIcon16.power { background-position: 0 -176px; }
.uiIcon16.signal-diag { background-position: -16px -176px; }
.uiIcon16.signal { background-position: -32px -176px; }
.uiIcon16.battery-0 { background-position: -48px -176px; }
.uiIcon16.battery-1 { background-position: -64px -176px; }
.uiIcon16.battery-2 { background-position: -80px -176px; }
.uiIcon16.battery-3 { background-position: -96px -176px; }
.uiIcon16.circle-plus { background-position: 0 -192px; }
.uiIcon16.circle-minus { background-position: -16px -192px; }
.uiIcon16.circle-close { background-position: -32px -192px; }
.uiIcon16.circle-triangle-e { background-position: -48px -192px; }
.uiIcon16.circle-triangle-s { background-position: -64px -192px; }
.uiIcon16.circle-triangle-w { background-position: -80px -192px; }
.uiIcon16.circle-triangle-n { background-position: -96px -192px; }
.uiIcon16.circle-arrow-e { background-position: -112px -192px; }
.uiIcon16.circle-arrow-s { background-position: -128px -192px; }
.uiIcon16.circle-arrow-w { background-position: -144px -192px; }
.uiIcon16.circle-arrow-n { background-position: -160px -192px; }
.uiIcon16.circle-zoomin { background-position: -176px -192px; }
.uiIcon16.circle-zoomout { background-position: -192px -192px; }
.uiIcon16.circle-check { background-position: -208px -192px; }
.uiIcon16.circlesmall-plus { background-position: 0 -208px; }
.uiIcon16.circlesmall-minus { background-position: -16px -208px; }
.uiIcon16.circlesmall-close { background-position: -32px -208px; }
.uiIcon16.squaresmall-plus { background-position: -48px -208px; }
.uiIcon16.squaresmall-minus { background-position: -64px -208px; }
.uiIcon16.squaresmall-close { background-position: -80px -208px; }
.uiIcon16.grip-dotted-vertical { background-position: 0 -224px; }
.uiIcon16.grip-dotted-horizontal { background-position: -16px -224px; }
.uiIcon16.grip-solid-vertical { background-position: -32px -224px; }
.uiIcon16.grip-solid-horizontal { background-position: -48px -224px; }
.uiIcon16.gripsmall-diagonal-se { background-position: -64px -224px; }
.uiIcon16.grip-diagonal-se { background-position: -80px -224px; }
.uiIcon16.icon-seek-first { background-position: -80px -160px; }
.uiIcon16.icon-stop { background-position: -96px -160px; }
.uiIcon16.icon-eject { background-position: -112px -160px; }
.uiIcon16.icon-volume-off { background-position: -128px -160px; }
.uiIcon16.icon-volume-on { background-position: -144px -160px; }
.uiIcon16.icon-power { background-position: 0 -176px; }
.uiIcon16.icon-signal-diag { background-position: -16px -176px; }
.uiIcon16.icon-signal { background-position: -32px -176px; }
.uiIcon16.icon-battery-0 { background-position: -48px -176px; }
.uiIcon16.icon-battery-1 { background-position: -64px -176px; }
.uiIcon16.icon-battery-2 { background-position: -80px -176px; }
.uiIcon16.icon-battery-3 { background-position: -96px -176px; }
.uiIcon16.icon-circle-plus { background-position: 0 -192px; }
.uiIcon16.icon-circle-minus { background-position: -16px -192px; }
.uiIcon16.icon-circle-close { background-position: -32px -192px; }
.uiIcon16.icon-circle-triangle-e { background-position: -48px -192px; }
.uiIcon16.icon-circle-triangle-s { background-position: -64px -192px; }
.uiIcon16.icon-circle-triangle-w { background-position: -80px -192px; }
.uiIcon16.icon-circle-triangle-n { background-position: -96px -192px; }
.uiIcon16.icon-circle-arrow-e { background-position: -112px -192px; }
.uiIcon16.icon-circle-arrow-s { background-position: -128px -192px; }
.uiIcon16.icon-circle-arrow-w { background-position: -144px -192px; }
.uiIcon16.icon-circle-arrow-n { background-position: -160px -192px; }
.uiIcon16.icon-circle-zoomin { background-position: -176px -192px; }
.uiIcon16.icon-circle-zoomout { background-position: -192px -192px; }
.uiIcon16.icon-circle-check { background-position: -208px -192px; }
.uiIcon16.icon-circlesmall-plus { background-position: 0 -208px; }
.uiIcon16.icon-circlesmall-minus { background-position: -16px -208px; }
.uiIcon16.icon-circlesmall-close { background-position: -32px -208px; }
.uiIcon16.icon-squaresmall-plus { background-position: -48px -208px; }
.uiIcon16.icon-squaresmall-minus { background-position: -64px -208px; }
.uiIcon16.icon-squaresmall-close { background-position: -80px -208px; }
.uiIcon16.icon-grip-dotted-vertical { background-position: 0 -224px; }
.uiIcon16.icon-grip-dotted-horizontal { background-position: -16px -224px; }
.uiIcon16.icon-grip-solid-vertical { background-position: -32px -224px; }
.uiIcon16.icon-grip-solid-horizontal { background-position: -48px -224px; }
.uiIcon16.icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.uiIcon16.icon-grip-diagonal-se { background-position: -80px -224px; }
nano/css/shared.css
+10
View File
@@ -189,6 +189,16 @@ h4
clear: both;
padding: 8px;
}
#uiNoJavaScript {
position: relative;
background: url(uiNoticeBackground.jpg) 50% 50%;
color: #000000;
font-size: 14px;
font-style: italic;
font-weight: bold;
padding: 3px 4px 3px 4px;
margin: 4px 0 4px 0;
}
.good
{
nano/js/libraries.min.js
Vendored
+1 -31
View File
File diff suppressed because one or more lines are too long
nano/js/libraries/2-jsrender.js
+1520
View File
File diff suppressed because it is too large Load Diff
nano/js/libraries/2-jsviews.js
-4298
View File
File diff suppressed because it is too large Load Diff
nano/js/nano_base_helpers.js
+63 -6
View File
@@ -14,14 +14,17 @@ NanoBaseHelpers = function ()
var initHelpers = function ()
{
$.views.helpers({
$.views.helpers({
// Generate a Byond link
link: function( text, icon, parameters, status, elementClass, elementId) {
var iconHtml = '';
var iconClass = 'noIcon';
if (typeof icon != 'undefined' && icon)
{
iconHtml = '<div class="uiLinkPendingIcon"></div><div class="uiIcon16 ' + icon + '"></div>';
iconHtml = '<div class="uiLinkPendingIcon"></div><div class="uiIcon16 icon-' + icon + '"></div>';
iconClass = 'hasIcon';
}
if (typeof elementClass == 'undefined' || !elementClass)
@@ -37,10 +40,10 @@ NanoBaseHelpers = function ()
if (typeof status != 'undefined' && status)
{
return '<div class="link ' + elementClass + ' ' + status + '" ' + elementIdHtml + '>' + iconHtml + text + '</div>';
return '<div unselectable="on" class="link ' + iconClass + ' ' + elementClass + ' ' + status + '" ' + elementIdHtml + '>' + iconHtml + text + '</div>';
}
return '<div class="link linkActive ' + elementClass + '" data-href="' + generateHref(parameters) + '" ' + elementIdHtml + '>' + iconHtml + text + '</div>';
return '<div unselectable="on" class="link linkActive ' + iconClass + ' ' + elementClass + '" data-href="' + generateHref(parameters) + '" ' + elementIdHtml + '>' + iconHtml + text + '</div>';
},
// Round a number to the nearest integer
round: function(number) {
@@ -114,9 +117,63 @@ NanoBaseHelpers = function ()
var percentage = Math.round((value - rangeMin) / (rangeMax - rangeMin) * 100);
return '<div class="displayBar ' + styleClass + '"><div class="displayBarFill ' + styleClass + '" style="width: ' + percentage + '%;"></div><div class="displayBarText ' + styleClass + '">' + showText + '</div></div>';
},
// Display DNA Blocks (for the DNA Modifier UI)
displayDNABlocks: function(dnaString, selectedBlock, selectedSubblock, blockSize, paramKey) {
if (!dnaString)
{
return '<div class="notice">Please place a valid subject into the DNA modifier.</div>';
}
var characters = dnaString.split('');
var html = '<div class="dnaBlock"><div class="link dnaBlockNumber">1</div>';
var block = 1;
var subblock = 1;
for (index in characters)
{
if (!characters.hasOwnProperty(index) || typeof characters[index] === 'object')
{
continue;
}
var parameters;
if (paramKey.toUpperCase() == 'UI')
{
parameters = { 'selectUIBlock' : block, 'selectUISubblock' : subblock };
}
else
{
parameters = { 'selectSEBlock' : block, 'selectSESubblock' : subblock };
}
var status = 'linkActive';
if (block == selectedBlock && subblock == selectedSubblock)
{
status = 'selected';
}
html += '<div class="link ' + status + ' dnaSubBlock" data-href="' + generateHref(parameters) + '" id="dnaBlock' + index + '">' + characters[index] + '</div>'
index++;
if (index % blockSize == 0 && index < characters.length)
{
block++;
subblock = 1;
html += '</div><div class="dnaBlock"><div class="link dnaBlockNumber">' + block + '</div>';
}
else
{
subblock++;
}
}
html += '</div>';
return html;
}
});
}
};
// generate a Byond href, combines _urlParameters with parameters
var generateHref = function (parameters)
@@ -147,7 +204,7 @@ NanoBaseHelpers = function ()
}
}
return queryString;
}
};
return {
init: function ()
nano/js/nano_config.js
+9 -4
View File
@@ -4,7 +4,12 @@ var NanoConfig = function ()
return {
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;
};
}
};
if (!String.prototype.format)
{
@@ -54,7 +59,7 @@ if (!String.prototype.format)
});
};
String.prototype.format.regex = new RegExp("{-?[0-9]+}", "g");
}
};
Object.size = function(obj) {
var size = 0, key;
@@ -70,7 +75,7 @@ if(!window.console) {
return false;
}
};
}
};
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;
nano/js/nano_update.js
+45 -42
View File
@@ -23,6 +23,8 @@ NanoUpdate = function ()
// this function sets up the templates and base functionality
var init = function ()
{
$('#uiNoJavaScript').html('Loading...');
// this callback is triggered after new data is processed
// it updates the status/visibility icon and adds click event handling to buttons/links
NanoUpdate.addAfterUpdateCallback(function (updateData) {
@@ -71,9 +73,9 @@ NanoUpdate = function ()
// We store initialData and templateData in the body tag, it's as good a place as any
var body = $('body');
var templateData = body.data('templateData');
_data = body.data('initialData');
var initialData = body.data('initialData');
if (!templateData || !_data)
if (templateData == null || !initialData == null)
{
alert('Error: Initial data did not load correctly.');
}
@@ -88,44 +90,52 @@ NanoUpdate = function ()
}
}
// load each template file and render it using _data
if (!templateCount)
{
alert('ERROR: No templates listed!');
}
// load markup for each template and register it
for (var key in templateData)
{
if (templateData.hasOwnProperty(key))
{
$.when($.get(templateData[key]))
.done(function(templateData) {
.done(function(templateMarkup) {
if (_templates == null)
{
_templates = {};
}
templateData += '<div class="clearBoth"></div>'
templateMarkup = templateMarkup.replace(/ +\) *\}\}/g, ')}}');
templateMarkup += '<div class="clearBoth"></div>'
try
{
_templates[key] = $.templates(templateData);
_templates[key].link( "#mainTemplate", _data ); // initial data gets applied first, before any updates
_templates[key] = $.templates(key, templateMarkup);
templateCount--;
if (templateCount <= 0)
{
if (_earlyUpdateData !== null) // Newer data has already arrived, so update
{
renderTemplates(_earlyUpdateData);
}
else
{
renderTemplates(initialData);
}
_isInitialised = true;
$('#uiNoJavaScript').hide();
}
if (_earlyUpdateData !== null) // Newer data has already arrived, so update
{
observedDataUpdateRecursive(_earlyUpdateData, _data);
}
executeCallbacks(_afterUpdateCallbacks, _data);
//alert($("#mainTemplate").html());
}
catch(error)
{
alert('An error occurred while loading the UI: ' + error.message);
alert('ERROR: An error occurred while loading the UI: ' + error.message);
return;
}
});
@@ -149,50 +159,43 @@ NanoUpdate = function ()
}
if (_isInitialised) // templates have been loaded and are observing the data. We need to update it recursively
if (_isInitialised) // all templates have been registered, so render them
{
executeCallbacks(_beforeUpdateCallbacks, updateData);
observedDataUpdateRecursive(updateData, _data);
renderTemplates(updateData);
executeCallbacks(_afterUpdateCallbacks, updateData);
}
else
{
_earlyUpdateData = updateData; // templates have not been loaded, therefor they are not observing the data. 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 updates the observed data recursively
// 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
var observedDataUpdateRecursive = function (updateData, data, path)
var renderTemplates = function (data)
{
if (path === null || typeof path === 'undefined')
if (!_templates.hasOwnProperty("main"))
{
path = '';
alert('Error: Main template not found.');
}
else
_data = data;
try
{
path += '.';
$("#mainTemplate").html(_templates["main"].render(_data));
}
for (var key in updateData)
catch(error)
{
if (updateData.hasOwnProperty(key))
{
var currentPath = path + key;
if (updateData[key] != null && typeof updateData[key] === 'object' && !$.isArray(updateData[key]))
{
observedDataUpdateRecursive(updateData[key], data, currentPath)
}
else
{
$.observable(data).setProperty(currentPath, updateData[key]);
}
}
}
}
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)
{
for (var index in callbacks)
@@ -201,7 +204,7 @@ NanoUpdate = function ()
}
return updateData;
}
};
return {
init: function ()
nano/templates/TemplatesGuide.txt
+1 -4
View File
@@ -7,7 +7,4 @@ to easily add conditionals (if statements), loops (for loops) and custom formatt
Templates are stored in the /nano/templates folder and the file extension is .tmpl.
This guide is a work in progress. However the templating system is "JSRender", and documentation for it's
markup syntax can be found here: http://www.jsviews.com/#jsrtags
This guide is being replaced with a wiki entry, found here: http://baystation12.net/wiki/index.php?title=NanoUI
nano/templates/apc.tmpl
+134 -134
View File
@@ -1,14 +1,14 @@
<div class='notice'>
{^{if siliconUser}}
{{if siliconUser}}
<div class="itemContentSmall">
Interface Lock:
</div>
<div class="itemContentFull">
{^{:~link('Engaged', 'locked', {'toggleaccess' : 1}, locked ? 'selected' : null)}}{^{:~link('Disengaged', 'unlocked', {'toggleaccess' : 1}, malfStatus >= 2 ? 'linkOff' : (locked ? null : 'selected'))}}
{{:~link('Engaged', 'locked', {'toggleaccess' : 1}, locked ? 'selected' : null)}}{{:~link('Disengaged', 'unlocked', {'toggleaccess' : 1}, malfStatus >= 2 ? 'linkOff' : (locked ? null : 'selected'))}}
</div>
<div class="clearBoth"></div>
{{else}}
{^{if locked}}
{{if locked}}
Swipe an ID card to unlock this interface.
{{else}}
Swipe an ID card to lock this interface.
@@ -18,162 +18,162 @@
<div style="min-width: 480px">
<h3>Power Status</h3>
<h3>Power Status</h3>
<div class="item">
<div class="itemLabel">
Main Breaker:
</div>
<div class="itemContent">
{^{if locked && !siliconUser}}
{^{if isOperating}}
<span class='good'>On</span>
{{else}}
<span class='bad'>Off</span>
{{/if}}
{{else}}
{^{:~link('On', 'power', {'breaker' : 1}, isOperating ? 'selected' : null)}}{^{:~link('Off', 'close', {'breaker' : 1}, isOperating ? null : 'selected')}}
{{/if}}
</div>
</div>
<div class="item">
<div class="itemLabel">
External Power:
</div>
<div class="itemContent">
{^{if externalPower == 2}}
<span class='good'>Good</span>
{{else externalPower == 1}}
<span class='average'>Low</span>
{{else}}
<span class='bad'>None</span>
{{/if}}
</div>
</div>
<div class="item">
<div class="itemLabel">
Power Cell:
</div>
{^{if powerCellStatus == null}}
<div class="itemContent bad">
Power cell removed.
</div>
{{else}}
<div class="itemContent" style="width: 60px">
{^{:~round(powerCellStatus*10)/10}}%
</div>
{^{:~displayBar(powerCellStatus, 0, 100, powerCellStatus >= 50 ? 'good' : powerCellStatus >= 25 ? 'average' : 'bad')}}
{{/if}}
</div>
{^{if powerCellStatus != null}}
<div class="item">
<div class="itemLabel">
Charge Mode:
Main Breaker:
</div>
<div class="itemContent">
{^{if locked && !siliconUser}}
{^{if chargeMode}}
<span class='good'>Auto</span>
{{if locked && !siliconUser}}
{{if isOperating}}
<span class='good'>On</span>
{{else}}
<span class='bad'>Off</span>
{{/if}}
{{/if}}
{{else}}
{^{:~link('Auto', 'refresh', {'cmode' : 1}, chargeMode ? 'selected' : null)}}{^{:~link('Off', 'close', {'cmode' : 1}, chargeMode ? null : 'selected')}}
{{/if}}
&nbsp;
{^{if chargingStatus > 1}}
[<span class='good'>Fully Charged</span>]
{{else chargingStatus == 1}}
[<span class='average'>Charging</span>]
{{else}}
[<span class='bad'>Not Charging</span>]
{{:~link('On', 'power', {'breaker' : 1}, isOperating ? 'selected' : null)}}{{:~link('Off', 'close', {'breaker' : 1}, isOperating ? null : 'selected')}}
{{/if}}
</div>
</div>
{{/if}}
<h3>Power Channels</h3>
{^{for powerChannels}}
<div class="item">
<div class="itemLabel">
{^{:title}}:
External Power:
</div>
<div class="itemContent">
{{if externalPower == 2}}
<span class='good'>Good</span>
{{else externalPower == 1}}
<span class='average'>Low</span>
{{else}}
<span class='bad'>None</span>
{{/if}}
</div>
</div>
<div class="item">
<div class="itemLabel">
Power Cell:
</div>
{{if powerCellStatus == null}}
<div class="itemContent bad">
Power cell removed.
</div>
{{else}}
<div class="itemContent" style="width: 60px">
{{:~round(powerCellStatus*10)/10}}%
</div>
{{:~displayBar(powerCellStatus, 0, 100, powerCellStatus >= 50 ? 'good' : powerCellStatus >= 25 ? 'average' : 'bad')}}
{{/if}}
</div>
{{if powerCellStatus != null}}
<div class="item">
<div class="itemLabel">
Charge Mode:
</div>
<div class="itemContent">
{{if locked && !siliconUser}}
{{if chargeMode}}
<span class='good'>Auto</span>
{{else}}
<span class='bad'>Off</span>
{{/if}}
{{else}}
{{:~link('Auto', 'refresh', {'cmode' : 1}, chargeMode ? 'selected' : null)}}{{:~link('Off', 'close', {'cmode' : 1}, chargeMode ? null : 'selected')}}
{{/if}}
&nbsp;
{{if chargingStatus > 1}}
[<span class='good'>Fully Charged</span>]
{{else chargingStatus == 1}}
[<span class='average'>Charging</span>]
{{else}}
[<span class='bad'>Not Charging</span>]
{{/if}}
</div>
</div>
{{/if}}
<h3>Power Channels</h3>
{{for powerChannels}}
<div class="item">
<div class="itemLabel">
{{:title}}:
</div>
<div class="itemContent" style="width: 70px; text-align: right">
{{:powerLoad}} W
</div>
<div class="itemContent" style="width: 105px">
&nbsp;&nbsp;
{{if status <= 1}}
<span class='bad'>Off</span>
{{else status >= 2}}
<span class='good'>On</span>
{{/if}}
{{if status == 1 || status == 3}}
[Auto]
{{else}}
[Manual]
{{/if}}
</div>
{{if !~root.locked || ~root.siliconUser}}
<div class="itemContentFull">
{{:~link('Auto', 'refresh', topicParams.auto, (status == 1 || status == 3) ? 'selected' : null)}}
{{:~link('On', 'power', topicParams.on, (status == 2) ? 'selected' : null)}}
{{:~link('Off', 'close', topicParams.off, (status == 0) ? 'selected' : null)}}
</div>
{{/if}}
</div>
{{/for}}
<div class="item" style="font-weight: bold">
<div class="itemLabel">
Total Load:
</div>
<div class="itemContent" style="width: 70px; text-align: right">
{^{:powerLoad}} W
{{:totalLoad}} W
</div>
<div class="itemContent" style="width: 105px">
&nbsp;&nbsp;
{^{if status <= 1}}
<span class='bad'>Off</span>
{{else status >= 2}}
<span class='good'>On</span>
{{/if}}
{^{if status == 1 || status == 3}}
[Auto]
{{else}}
[Manual]
{{/if}}
</div>
<div class="item">&nbsp;</div>
<div class="item">
<div class="itemLabel">
Cover Lock:
</div>
{^{if !~root.locked || ~root.siliconUser}}
<div class="itemContentFull">
{^{:~link('Auto', 'refresh', topicParams.auto, (status == 1 || status == 3) ? 'selected' : null)}}
{^{:~link('On', 'power', topicParams.on, (status == 2) ? 'selected' : null)}}
{^{:~link('Off', 'close', topicParams.off, (status == 0) ? 'selected' : null)}}
</div>
{{/if}}
</div>
{{/for}}
<div class="item" style="font-weight: bold">
<div class="itemLabel">
Total Load:
</div>
<div class="itemContent" style="width: 70px; text-align: right">
{^{:totalLoad}} W
</div>
</div>
<div class="item">&nbsp;</div>
<div class="item">
<div class="itemLabel">
Cover Lock:
</div>
<div class="itemContent">
{^{if locked && !siliconUser}}
{^{if coverLocked}}
<span class='good'>Engaged</span>
<div class="itemContent">
{{if locked && !siliconUser}}
{{if coverLocked}}
<span class='good'>Engaged</span>
{{else}}
<span class='bad'>Disengaged</span>
{{/if}}
{{else}}
<span class='bad'>Disengaged</span>
{{:~link('Engaged', 'locked', {'lock' : 1}, coverLocked ? 'selected' : null)}}{{:~link('Disengaged', 'unlocked', {'lock' : 1}, coverLocked ? null : 'selected')}}
{{/if}}
{{else}}
{^{:~link('Engaged', 'locked', {'lock' : 1}, coverLocked ? 'selected' : null)}}{^{:~link('Disengaged', 'unlocked', {'lock' : 1}, coverLocked ? null : 'selected')}}
{{/if}}
</div>
</div>
</div>
{^{if siliconUser}}
<h3>System Overrides</h3>
{{if siliconUser}}
<h3>System Overrides</h3>
<div class="item">
{^{:~link('Overload Lighting Circuit', 'lightbulb', {'overload' : 1})}}
{^{if malfStatus == 1}}
{^{:~link('Override Programming', 'script', {'malfhack' : 1})}}
{{else malfStatus == 2}}
{^{:~link('Shunt Core Processes', 'arrowreturn-1-s', {'occupyapc' : 1})}}
{{else malfStatus == 3}}
{^{:~link('Return to Main Core', 'arrowreturn-1-w', {'deoccupyapc' : 1})}}
{{else malfStatus == 4}}
{^{:~link('Shunt Core Processes', 'arrowreturn-1-s', {'occupyapc' : 1}, 'linkOff')}}
<div class="item">
{{:~link('Overload Lighting Circuit', 'lightbulb', {'overload' : 1})}}
{{if malfStatus == 1}}
{{:~link('Override Programming', 'script', {'malfhack' : 1})}}
{{else malfStatus == 2}}
{{:~link('Shunt Core Processes', 'arrowreturn-1-s', {'occupyapc' : 1})}}
{{else malfStatus == 3}}
{{:~link('Return to Main Core', 'arrowreturn-1-w', {'deoccupyapc' : 1})}}
{{else malfStatus == 4}}
{{:~link('Shunt Core Processes', 'arrowreturn-1-s', {'occupyapc' : 1}, 'linkOff')}}
{{/if}}
</div>
{{/if}}
</div>
{{/if}}
</div>
nano/templates/chem_dispenser.tmpl
+13 -13
View File
@@ -7,7 +7,7 @@ Used In File(s): \code\modules\reagents\Chemistry-Machinery.dm
Energy:
</div>
<div class="itemContent">
{^{:~displayBar(energy, 0, maxEnergy, 'good', energy + ' Units')}}
{{:~displayBar(energy, 0, maxEnergy, 'good', energy + ' Units')}}
</div>
</div>
@@ -16,11 +16,11 @@ Used In File(s): \code\modules\reagents\Chemistry-Machinery.dm
Dispense:
</div>
<div class="itemContent">
{^{:~link('5', 'gear', {'amount' : 5}, (amount == 5) ? 'selected' : null)}}
{^{:~link('10', 'gear', {'amount' : 10}, (amount == 10) ? 'selected' : null)}}
{^{:~link('20', 'gear', {'amount' : 20}, (amount == 20) ? 'selected' : null)}}
{^{:~link('30', 'gear', {'amount' : 30}, (amount == 30) ? 'selected' : null)}}
{^{:~link('50', 'gear', {'amount' : 50}, (amount == 50) ? 'selected' : null)}}
{{:~link('5', 'gear', {'amount' : 5}, (amount == 5) ? 'selected' : null)}}
{{:~link('10', 'gear', {'amount' : 10}, (amount == 10) ? 'selected' : null)}}
{{:~link('20', 'gear', {'amount' : 20}, (amount == 20) ? 'selected' : null)}}
{{:~link('30', 'gear', {'amount' : 30}, (amount == 30) ? 'selected' : null)}}
{{:~link('50', 'gear', {'amount' : 50}, (amount == 50) ? 'selected' : null)}}
</div>
</div>
<div class="item">&nbsp;</div>
@@ -31,8 +31,8 @@ Used In File(s): \code\modules\reagents\Chemistry-Machinery.dm
</div>
<div class="item">
<div class="itemContent" style="width: 100%;">
{^{for chemicals}}
{^{:~link(title, 'circle-arrow-s', commands, null, 'fixedLeft')}}
{{for chemicals}}
{{:~link(title, 'circle-arrow-s', commands, null, 'fixedLeft')}}
{{/for}}
</div>
</div>
@@ -42,16 +42,16 @@ Used In File(s): \code\modules\reagents\Chemistry-Machinery.dm
Beaker Contents
</div>
<div class="itemContent">
{^{:~link('Eject Beaker', 'eject', {'ejectBeaker' : 1}, isBeakerLoaded ? null : 'disabled', 'floatRight')}}
{{:~link('Eject Beaker', 'eject', {'ejectBeaker' : 1}, isBeakerLoaded ? null : 'disabled', 'floatRight')}}
</div>
</div>
<div class="statusDisplay" style="height: 225px; overflow: auto;">
<div class="item">
<div class="itemContent" style="width: 100%;">
{^{if isBeakerLoaded}}
<b>Volume:&nbsp;{^{:beakerCurrentVolume}}&nbsp;/&nbsp;{^{:beakerMaxVolume}}</b><br>
{^{for beakerContents}}
<span class="highlight">{^{:volume}} units of {^{:name}}</span><br>
{{if isBeakerLoaded}}
<b>Volume:&nbsp;{{:beakerCurrentVolume}}&nbsp;/&nbsp;{{:beakerMaxVolume}}</b><br>
{{for beakerContents}}
<span class="highlight">{{:volume}} units of {{:name}}</span><br>
{{else}}
<span class="bad">Beaker is empty</span>
{{/for}}
nano/templates/cryo.tmpl
+23 -23
View File
@@ -5,12 +5,12 @@ Used In File(s): \code\game\machinery\cryo.dm
<h3>Cryo Cell Status</h3>
<div class="statusDisplay">
{^{if !hasOccupant}}
{{if !hasOccupant}}
<div class="line">Cell Unoccupied</div>
{{else}}
<div class="line">
{^{:occupant.name}}&nbsp;=>&nbsp;
{^{if occupant.stat == 0}}
{{:occupant.name}}&nbsp;=>&nbsp;
{{if occupant.stat == 0}}
<span class="good">Conscious</span>
{{else occupant.stat == 1}}
<span class="average">Unconscious</span>
@@ -19,45 +19,45 @@ Used In File(s): \code\game\machinery\cryo.dm
{{/if}}
</div>
{^{if occupant.stat < 2}}
{{if occupant.stat < 2}}
<div class="line">
<div class="statusLabel">Health:</div>
{^{if occupant.health >= 0}}
{^{:~displayBar(occupant.health, 0, occupant.maxHealth, 'good')}}
{{if occupant.health >= 0}}
{{:~displayBar(occupant.health, 0, occupant.maxHealth, 'good')}}
{{else}}
{^{:~displayBar(occupant.health, 0, occupant.minHealth, 'average alignRight')}}
{{:~displayBar(occupant.health, 0, occupant.minHealth, 'average alignRight')}}
{{/if}}
<div class="statusValue">{^{:~round(occupant.health)}}</div>
<div class="statusValue">{{:~round(occupant.health)}}</div>
</div>
<div class="line">
<div class="statusLabel">=&gt; Brute Damage:</div>
{^{:~displayBar(occupant.bruteLoss, 0, occupant.maxHealth, 'bad')}}
<div class="statusValue">{^{:~round(occupant.bruteLoss)}}</div>
{{:~displayBar(occupant.bruteLoss, 0, occupant.maxHealth, 'bad')}}
<div class="statusValue">{{:~round(occupant.bruteLoss)}}</div>
</div>
<div class="line">
<div class="statusLabel">=&gt; Resp. Damage:</div>
{^{:~displayBar(occupant.oxyLoss, 0, occupant.maxHealth, 'bad')}}
<div class="statusValue">{^{:~round(occupant.oxyLoss)}}</div>
{{:~displayBar(occupant.oxyLoss, 0, occupant.maxHealth, 'bad')}}
<div class="statusValue">{{:~round(occupant.oxyLoss)}}</div>
</div>
<div class="line">
<div class="statusLabel">=&gt; Toxin Damage:</div>
{^{:~displayBar(occupant.toxLoss, 0, occupant.maxHealth, 'bad')}}
<div class="statusValue">{^{:~round(occupant.toxLoss)}}</div>
{{:~displayBar(occupant.toxLoss, 0, occupant.maxHealth, 'bad')}}
<div class="statusValue">{{:~round(occupant.toxLoss)}}</div>
</div>
<div class="line">
<div class="statusLabel">=&gt; Burn Severity:</div>
{^{:~displayBar(occupant.fireLoss, 0, occupant.maxHealth, 'bad')}}
<div class="statusValue">{^{:~round(occupant.fireLoss)}}</div>
{{:~displayBar(occupant.fireLoss, 0, occupant.maxHealth, 'bad')}}
<div class="statusValue">{{:~round(occupant.fireLoss)}}</div>
</div>
{{/if}}
{{/if}}
<hr>
<div class="line"><div class="statusLabel">Cell Temperature:</div><div class="statusValue">
{^{:~string('<span class="{0}">{1} K</span>', cellTemperatureStatus, cellTemperature)}}
{{:~string('<span class="{0}">{1} K</span>', cellTemperatureStatus, cellTemperature)}}
</div></div>
</div>
@@ -67,10 +67,10 @@ Used In File(s): \code\game\machinery\cryo.dm
Cryo Cell Status:
</div>
<div class="itemContent" style="width: 40%;">
{^{:~link('On', 'power', {'switchOn' : 1}, isOperating ? 'selected' : null)}}{^{:~link('Off', 'close', {'switchOff' : 1}, isOperating ? null : 'selected')}}
{{:~link('On', 'power', {'switchOn' : 1}, isOperating ? 'selected' : null)}}{{:~link('Off', 'close', {'switchOff' : 1}, isOperating ? null : 'selected')}}
</div>
<div class="itemContent" style="width: 26%;">
{^{:~link('Eject Occupant', 'arrowreturnthick-1-s', {'ejectOccupant' : 1}, hasOccupant ? null : 'disabled')}}
{{:~link('Eject Occupant', 'arrowreturnthick-1-s', {'ejectOccupant' : 1}, hasOccupant ? null : 'disabled')}}
</div>
</div>
<div class="item">&nbsp;</div>
@@ -79,9 +79,9 @@ Used In File(s): \code\game\machinery\cryo.dm
Beaker:
</div>
<div class="itemContent" style="width: 40%;">
{^{if isBeakerLoaded}}
{^{for beakerContents}}
<span class="highlight">{^{:volume}} units of {^{:name}}</span><br>
{{if isBeakerLoaded}}
{{for beakerContents}}
<span class="highlight">{{:volume}} units of {{:name}}</span><br>
{{else}}
<span class="bad">Beaker is empty</span>
{{/for}}
@@ -90,6 +90,6 @@ Used In File(s): \code\game\machinery\cryo.dm
{{/if}}
</div>
<div class="itemContent" style="width: 26%;">
{^{:~link('Eject Beaker', 'eject', {'ejectBeaker' : 1}, isBeakerLoaded ? null : 'disabled')}}
{{:~link('Eject Beaker', 'eject', {'ejectBeaker' : 1}, isBeakerLoaded ? null : 'disabled')}}
</div>
</div>
nano/templates/wip/apc.tmpl
-141
View File
@@ -1,141 +0,0 @@
<div class='notice'>
{^{if locked}}
Swipe ID card to unlock interface
{{else}}
Swipe ID card to lock interface
{{/if}}
</div>
<h3>Status</h3>
<div class="item">
<div class="itemLabel">
Main Breaker:
</div>
<div class="itemContent">
{^{if locked}}
{^{if isOperating}}
<span class='good'>On</span>
{{else}}
<span class='bad'>Off</span>
{{/if}}
{{else}}
{^{:~link('On', {'breaker' : 1}, isOperating ? 'selected' : null)}}{^{:~link('Off', {'breaker' : 1}, isOperating ? null : 'selected')}}
{{/if}}
</div>
</div>
<div class="item">
<div class="itemLabel">
External Power:
</div>
<div class="itemContent">
{^{if externalPower == 2}}
<span class='good'>Good</span>
{{else externalPower == 1}}
<span class='average'>Low</span>
{{else}}
<span class='bad'>None</span>
{{/if}}
</div>
</div>
<div class="item">
<div class="itemLabel">
Power Cell:
</div>
<div class="itemContent">
{^{if powerCellStatus == null}}
<span class='bad'>Not connected.</span>
{{else}}
{^{:powerCellStatus}}%
{{/if}}
</div>
</div>
{^{if powerCellStatus != null}}
<div class="item">
<div class="itemLabel">
Charge Mode:
</div>
<div class="itemContent">
{^{if locked}}
{^{if chargeMode}}
<span class='good'>Auto</span>
{{else}}
<span class='bad'>Off</span>
{{/if}}
{{else}}
{^{:~link('Auto', {'cmode' : 1}, chargeMode ? 'selected' : null)}}{^{:~link('Off', {'cmode' : 1}, chargeMode ? null : 'selected')}}
{{/if}}
&nbsp;
{^{if chargingStatus > 1}}
(<span class='good'>Fully Charged</span>)
{{else chargingStatus == 1}}
(<span class='average'>Charging</span>)
{{else}}
(<span class='bad'>Not Charging</span>)
{{/if}}
</div>
</div>
{{/if}}
<h3>Power Channels</h3>
{^{for powerChannels}}
<div class="item">
<div class="itemLabel">
{^{:title}}
</div>
<div class="itemContentSmall" style="width: 26%;">
{^{:powerLoad}} W
</div>
<div class="itemContentSmall" style="width: 40%;">
{^{if !~root.locked}}
{^{:~link('Auto', topicParams.auto, (status == 1 || status == 3) ? 'selected' : null)}}
{^{:~link('On', topicParams.on, (status == 2) ? 'selected' : null)}}
{^{:~link('Off', topicParams.off, (status == 0) ? 'selected' : null)}}
{{/if}}
{^{if status <= 1}}
<span class='bad'>Off</span>
{{else status >= 2}}
<span class='good'>On</span>
{{/if}}
{^{if ~root.locked}}
{^{if status == 1 || status == 3}}
(Auto)
{{else}}
(Manual)
{{/if}}
{{/if}}
</div>
</div>
{{/for}}
<div class="item">&nbsp;</div>
<div class="item">
<div class="itemLabel">
Total Load:
</div>
<div class="itemContent">
{{:totalLoad}} W
</div>
</div>
<div class="item">
<div class="itemLabel">
Cover Lock:
</div>
<div class="itemContent">
{^{if locked}}
{^{if coverLocked}}
<span class='good'>Engaged</span>
{{else}}
<span class='bad'>Disengaged</span>
{{/if}}
{{else}}
{^{:~link('Engaged', {'lock' : 1}, coverLocked ? 'selected' : null)}}{^{:~link('Disengaged', {'lock' : 1}, coverLocked ? null : 'selected')}}
{{/if}}
</div>
</div>