From f508841fffe99320582f5976be8e39c066ebd68c Mon Sep 17 00:00:00 2001 From: Leshana Date: Fri, 27 Apr 2018 11:58:41 -0400 Subject: [PATCH] Refactor common template HTML for atmospheric scan into its own file. As a demonstration of the partials inclusion feature, the HTML for the atmospheric scan screen (which was nearly identical between PDAs and Communicators) was moved into a separate file and then transcluded into both pda.tmpl and communicator.tmpl Also added a README.dm with the very basics of nanoui and template transclusion, and fixed comments in nano_state.js --- code/game/objects/items/devices/PDA/PDA.dm | 3 +- .../objects/items/devices/communicator/UI.dm | 2 + nano/README.md | 39 +++++++++++++ nano/js/nano_state.js | 4 +- nano/templates/atmospheric_scan.tmpl | 57 ++++++++++++++++++ nano/templates/communicator.tmpl | 58 +------------------ nano/templates/pda.tmpl | 55 +----------------- 7 files changed, 104 insertions(+), 114 deletions(-) create mode 100644 nano/README.md create mode 100644 nano/templates/atmospheric_scan.tmpl diff --git a/code/game/objects/items/devices/PDA/PDA.dm b/code/game/objects/items/devices/PDA/PDA.dm index 78ee749ceb..7e7ec40ac6 100644 --- a/code/game/objects/items/devices/PDA/PDA.dm +++ b/code/game/objects/items/devices/PDA/PDA.dm @@ -653,8 +653,9 @@ var/global/list/obj/item/device/pda/PDAs = list() // 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, "pda.tmpl", title, 520, 400, state = inventory_state) + // add templates for screens in common with communicator. + ui.add_template("atmosphericScan", "atmospheric_scan.tmpl") // 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() diff --git a/code/game/objects/items/devices/communicator/UI.dm b/code/game/objects/items/devices/communicator/UI.dm index f2d3fd39b6..4d6ff75c50 100644 --- a/code/game/objects/items/devices/communicator/UI.dm +++ b/code/game/objects/items/devices/communicator/UI.dm @@ -118,6 +118,8 @@ // 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, "communicator.tmpl", "Communicator", 475, 700, state = key_state) + // add templates for screens in common with communicator. + ui.add_template("atmosphericScan", "atmospheric_scan.tmpl") // when the ui is first opened this is the data it will use ui.set_initial_data(data) // open the new ui window diff --git a/nano/README.md b/nano/README.md new file mode 100644 index 0000000000..5497050a2e --- /dev/null +++ b/nano/README.md @@ -0,0 +1,39 @@ +# NanoUI Templates + +NanoUI uses doT (https://olado.github.io/doT/index.html) as its templating engine. + +## Template Markup Tags + +Markup tags are used to add dynamic content to the template. +TODO - This documentation is incomplete. + +### Print Tag +- The print tag outputs variable as text to the UI. +`{{:data.variable}}` + +### If Tag +- The if tag displays content conditionally based on the provided expression being true. +- When combined with the else tag the if tag can also show content if the provided expression is false. +- The else tag can optionally have an expression provided (e.g. "`{{else expression2}}`"), giving it "elseif" functionality. + +`{{if expression}} {{/if}}` +`{{if expression}} {{else}} {{/if}}` +`{{if expression1}} {{else expression2}} {{/if}}` + +### For Tag +- Loop through entries in an array (an array is a list with a numeric index (it does not use strings as keys). +- Each time the `for` tag iterates though the array it sets a variable (default "value") to the data of the current entry (another variable, default "index", contains the index). An example of this is using the print tag to print the contents (e.g. `{{:value.key1}}` and `{{:value.key2}}`). +- If combined with an `empty` tag the for tag can display content when the array is empty. + +`{{for array}} {{/for}}` +`{{for array}} {{empty}} {{/for}}` + + +### Tansclusion Tag +- Include the contents of another template which has been added to the ui. +`{{#def.atmosphericScan}}` + +- You first must have added a template to the ui server side in your DM code: +`ui.add_template("atmosphericScan", "atmospheric_scan.tmpl")` + +- Then you can reference it in the main template. The tag will be replaced by the contents of the named template. All tags in the named template are evaluated as normal. diff --git a/nano/js/nano_state.js b/nano/js/nano_state.js index 3e9ef3ab1f..92965d1ab2 100644 --- a/nano/js/nano_state.js +++ b/nano/js/nano_state.js @@ -50,12 +50,12 @@ NanoStateClass.prototype.onUpdate = function (data) { { if (!this.layoutRendered || (data['config'].hasOwnProperty('autoUpdateLayout') && data['config']['autoUpdateLayout'])) { - $("#uiLayout").html(NanoTemplate.parse('layout', data)); // render the 'mail' template to the #mainTemplate div + $("#uiLayout").html(NanoTemplate.parse('layout', data)); // render the 'layout' template to the #uiLayout div this.layoutRendered = true; } if (!this.contentRendered || (data['config'].hasOwnProperty('autoUpdateContent') && data['config']['autoUpdateContent'])) { - $("#uiContent").html(NanoTemplate.parse('main', data)); // render the 'mail' template to the #mainTemplate div + $("#uiContent").html(NanoTemplate.parse('main', data)); // render the 'main' template to the #uiContent div this.contentRendered = true; } if (NanoTemplate.templateExists('mapContent')) diff --git a/nano/templates/atmospheric_scan.tmpl b/nano/templates/atmospheric_scan.tmpl new file mode 100644 index 0000000000..df1f6bf06a --- /dev/null +++ b/nano/templates/atmospheric_scan.tmpl @@ -0,0 +1,57 @@ +
+ {{if data.aircontents.reading == 1}} +
+ Pressure: +
+
+ {{:helper.string('{1} kPa', data.aircontents.pressure < 80 || data.aircontents.pressure > 120 ? 'bad' : data.aircontents.pressure < 95 || data.aircontents.pressure > 110 ? 'average' : 'good' , data.aircontents.pressure)}} +
+
+ Temperature: +
+
+ {{:helper.string('{1} °C', data.aircontents.temp < 5 || data.aircontents.temp > 35 ? 'bad' : data.aircontents.temp < 15 || data.aircontents.temp > 25 ? 'average' : 'good' , data.aircontents.temp)}} +
+
+
+ Oxygen: +
+
+ {{:helper.string('{1}%', data.aircontents.oxygen < 17 ? 'bad' : data.aircontents.oxygen < 19 ? 'average' : 'good' , data.aircontents.oxygen)}} +
+
+ Nitrogen: +
+
+ {{:helper.string('{1}%', data.aircontents.nitrogen > 82 ? 'bad' : data.aircontents.nitrogen > 80 ? 'average' : 'good' , data.aircontents.nitrogen)}} +
+ {{if data.aircontents.carbon_dioxide > 0}} +
+ Carbon Dioxide: +
+
+ {{:helper.string('{1}%', data.aircontents.carbon_dioxide > 5 ? 'bad' : 'good' , data.aircontents.carbon_dioxide)}} +
+ {{/if}} + {{if data.aircontents.phoron > 0}} +
+ Phoron: +
+
+ {{:helper.string('{1}%', data.aircontents.phoron > 0 ? 'bad' : 'good' , data.aircontents.phoron)}} +
+ {{/if}} + {{if data.aircontents.other > 0}} +
+ Unknown: +
+
+ {{:data.aircontents.other}}% +
+ {{/if}} + {{else}} +
+ Unable to get air reading +
+ {{/if}} +
\ No newline at end of file diff --git a/nano/templates/communicator.tmpl b/nano/templates/communicator.tmpl index 6ef7de1607..716034a7f4 100644 --- a/nano/templates/communicator.tmpl +++ b/nano/templates/communicator.tmpl @@ -243,63 +243,7 @@ Used In File(s): code\game\objects\items\devices\communicator\communicator.dm
{{:helper.link('Home', 'home', {'switch_tab' : 1})}}

Current Conditions:

-
- {{if data.aircontents.reading == 1}} -
- Pressure: -
-
- {{:helper.string('{1} kPa', data.aircontents.pressure < 80 || data.aircontents.pressure > 120 ? 'bad' : data.aircontents.pressure < 95 || data.aircontents.pressure > 110 ? 'average' : 'good' , data.aircontents.pressure)}} -
-
- Temperature: -
-
- {{:helper.string('{1} °C', data.aircontents.temp < 5 || data.aircontents.temp > 35 ? 'bad' : data.aircontents.temp < 15 || data.aircontents.temp > 25 ? 'average' : 'good' , data.aircontents.temp)}} -
-
-
- Oxygen: -
-
- {{:helper.string('{1}%', data.aircontents.oxygen < 17 ? 'bad' : data.aircontents.oxygen < 19 ? 'average' : 'good' , data.aircontents.oxygen)}} -
-
- Nitrogen: -
-
- {{:helper.string('{1}%', data.aircontents.nitrogen > 82 ? 'bad' : data.aircontents.nitrogen > 80 ? 'average' : 'good' , data.aircontents.nitrogen)}} -
- {{if data.aircontents.carbon_dioxide > 0}} -
- Carbon Dioxide: -
-
- {{:helper.string('{1}%', data.aircontents.carbon_dioxide > 5 ? 'bad' : 'good' , data.aircontents.carbon_dioxide)}} -
- {{/if}} - {{if data.aircontents.phoron > 0}} -
- Phoron: -
-
- {{:helper.string('{1}%', data.aircontents.phoron > 0 ? 'bad' : 'good' , data.aircontents.phoron)}} -
- {{/if}} - {{if data.aircontents.other > 0}} -
- Unknown: -
-
- {{:data.aircontents.other}}% -
- {{/if}} - {{else}} -
- Unable to get air reading -
- {{/if}} -
+ {{#def.atmosphericScan}}

Weather Reports:

{{for data.weather}} diff --git a/nano/templates/pda.tmpl b/nano/templates/pda.tmpl index 1e6a5f2d82..04ee2abfd9 100644 --- a/nano/templates/pda.tmpl +++ b/nano/templates/pda.tmpl @@ -318,60 +318,7 @@ Used In File(s): \code\game\objects\items\devices\PDA\PDA.dm {{else data.mode == 3}}

Atmospheric Scan

-
- {{if data.aircontents.reading == 1}} -
- Pressure: -
-
- {{:helper.string('{1} kPa', data.aircontents.pressure < 80 || data.aircontents.pressure > 120 ? 'bad' : data.aircontents.pressure < 95 || data.aircontents.pressure > 110 ? 'average' : 'good' , data.aircontents.pressure)}} -
-
- Temperature: -
-
- {{:helper.string('{1} °C', data.aircontents.temp < 5 || data.aircontents.temp > 35 ? 'bad' : data.aircontents.temp < 15 || data.aircontents.temp > 25 ? 'average' : 'good' , data.aircontents.temp)}} -
-
-
- Oxygen: -
-
- {{:helper.string('{1}%', data.aircontents.oxygen < 17 ? 'bad' : data.aircontents.oxygen < 19 ? 'average' : 'good' , data.aircontents.oxygen)}} -
-
- Nitrogen: -
-
- {{:helper.string('{1}%', data.aircontents.nitrogen > 82 ? 'bad' : data.aircontents.nitrogen > 80 ? 'average' : 'good' , data.aircontents.nitrogen)}} -
-
- Carbon Dioxide: -
-
- {{:helper.string('{1}%', data.aircontents.carbon_dioxide > 5 ? 'bad' : 'good' , data.aircontents.carbon_dioxide)}} -
-
- Phoron: -
-
- {{:helper.string('{1}%', data.aircontents.phoron > 0 ? 'bad' : 'good' , data.aircontents.phoron)}} - -
- {{if data.aircontents.other > 0}} -
- Unknown: -
-
- {{:data.aircontents.other}}% -
- {{/if}} - {{else}} -
- Unable to get air reading -
- {{/if}} -
+ {{#def.atmosphericScan}}