UI Helper Functions

The following helper functions have been made available in the ui.js to make the input form easier to modify.

Set and Get Inputs#

note

Where possible, use the setInputValues over multiple setInputValue for better ui performance.

Function	Description
`SKYCIV_DESIGN.ui.helpers.setInputValue(key, value, highlight)`	Sets the value of a input, if highlight, turns the row green after updating.
`SKYCIV_DESIGN.ui.helpers.setInputValues(obj)`	Takes an object of key-values to set.
`SKYCIV_DESIGN.ui.helpers.getCurrentInputValue(key)`	Get the current input value.

Edit Input States#

Function	Description
`SKYCIV_DESIGN.ui.helpers.setInputDisabled(key)`	Sets an input to disabled.
`SKYCIV_DESIGN.ui.helpers.setInputEnabled(key)`	Enables a disabled input.
`SKYCIV_DESIGN.ui.helpers.setInputsDisabled(keys)`	Sets multiple inputs to disabled.
`SKYCIV_DESIGN.ui.helpers.setInputsEnabled(keys)`	Enables multiple disabled inputs.
`SKYCIV_DESIGN.ui.helpers.isInputDisabled(key)`	Check if an input is disabled.
`SKYCIV_DESIGN.ui.helpers.hideInput(key)`	Hides an input.
`SKYCIV_DESIGN.ui.helpers.showInput(key)`	Shows an input.
`SKYCIV_DESIGN.ui.helpers.hideInputs(keys)`	Hides inputs.
`SKYCIV_DESIGN.ui.helpers.showInputs(keys)`	Shows inputs.
`SKYCIV_DESIGN.ui.helpers.isInputVisible(key)`	Check if an input is hidden.
`SKYCIV_DESIGN.ui.helpers.isInputErrored(key)`	Check if an input is currently errored.

Dynamically Update Dropdowns#

Function	Description
`SKYCIV_DESIGN.ui.helpers.updateDropdownValues(key, new_values)`	Enables a disabled input.
`SKYCIV_DESIGN.ui.helpers.setDropdownValueDisabled(key, value)`	Disables a dropdown value.
`SKYCIV_DESIGN.ui.helpers.setDropdownValueEnabled(key, value)`	Enables a dropdown value.
`SKYCIV_DESIGN.ui.helpers.setDropdownValueHidden(key, value)`	Hides a dropdown value.
`SKYCIV_DESIGN.ui.helpers.setDropdownValueVisible(key, value)`	Shows a dropdown value.

Dynamically Update Min/Max/Step#

Function	Description
`SKYCIV_DESIGN.ui.helpers.updateStep(key, value)`	Update the step for the input.
`SKYCIV_DESIGN.ui.helpers.updateMin(key, value, update)`	Update the min for the input, if `update = true` makes sure the current value is at least the min.
`SKYCIV_DESIGN.ui.helpers.updateMax(key, value, update)`	Update the max for the input, if `update = true` makes sure the current value is at worst the max.

Dynamically Update Config Appearance#

Function	Description
`SKYCIV_DESIGN.ui.helpers.hideHeading(key)`	Hides a heading.
`SKYCIV_DESIGN.ui.helpers.showHeading(key)`	Shows a heading.
`SKYCIV_DESIGN.ui.helpers.updateLabel(key, label_text, preserve_popup)`	Updates a label in the ui only. `preserve_popup` is defulated to true.
`SKYCIV_DESIGN.ui.helpers.returnLabelToDefault(key)`	Returns label to the default in the config.json.
`SKYCIV_DESIGN.ui.helpers.updateImage(key, img_url)`	Updates and image so lonng as it is hosted in the images folder.

Tables#

Function	Description
`SKYCIV_DESIGN.ui.helpers.updateTableDropdown(table, dropdown, values)`	Updates the dropdown options in a table column. Values is array of `{ value: 'X', label: 'X' }`.
`SKYCIV_DESIGN.ui.helpers.addTableCellDisabled(table, row, col)`	Disable a table cell. `row` and `col` an integers indexed from 0.
`SKYCIV_DESIGN.ui.helpers.removeTableCellDisabled(table, row, col)`	Enable a table cell. `row` and `col` an integers indexed from 0.
`SKYCIV_DESIGN.ui.helpers.addTableColDisabled(table, col)`	Disable a table column. `col` is a integer indexed from 0.
`SKYCIV_DESIGN.ui.helpers.removeTableColDisabled(table, col)`	Enable a table column. `col` is a integer indexed from 0.
`SKYCIV_DESIGN.ui.helpers.clearAllTableCellDisabled(table)`	Enable all cells/cols in a table.

Import Data with Callbacks#

Function	Description
`SKYCIV_DESIGN.ui.helpers.requireJSON("filename.json", callback)`	Require a .json file from the `/json` directory. Callback is optional.
`SKYCIV_DESIGN.ui.helpers.getSection(selections, unit_system, callback)`	Get a sections data from the database.
`SKYCIV_DESIGN.ui.helpers.getMaterial(selections, callback)`	Get a materials data from the database.
`SKYCIV_DESIGN.ui.helpers.getSectionTree(filters, callback)`	Get the section tree from the database.
`SKYCIV_DESIGN.ui.helpers.getMaterialTree(filters, callback)`	Get the material tree from the database.

Other#

Function	Description
`SKYCIV_DESIGN.ui.helpers.getKeysChanged()`	Gets a list of keys changed since last ui update.
`SKYCIV_DESIGN.ui.helpers.wasInputChanged(key)`	Checks if an input keys was changed.
`SKYCIV_DESIGN.ui.helpers.callBackend(input_json, callback, error_callback)`	Call the backend of the current calcualtor.

Example getSectionTree and getMaterialTree#

// Full Material Tree
SKYCIV_DESIGN.ui.helpers.getMaterialTree({}, function(data) {
    console.log(data);
});

// Filtered Material Tree
SKYCIV_DESIGN.ui.helpers.getMaterialTree({ units: "Metric", material: "Aluminium" }, function(data) {
    console.log(data);
});

// Full Section Tree
SKYCIV_DESIGN.ui.helpers.getSectionTree({}, function(data) {
    console.log(data);
});

// Filtered Section Tree
SKYCIV_DESIGN.ui.helpers.getSectionTree({ country: "American", library: "ADM", shape: "Zees" }, function(data) {
    console.log(data);
});

Tips#

tip

You can set the window.SKIP_UI_UPDATE to true avoid the ui.js script running in a loop when you update a dropdown in the ui.js. ::