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#

FunctionDescription
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#

FunctionDescription
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.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.isInputVisible(key)Check if an input is hidden.
SKYCIV_DESIGN.ui.helpers.isInputErrored(key)Check if an input is currently errored.

Dynamically Update Dropdowns#

FunctionDescription
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#

FunctionDescription
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#

FunctionDescription
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#

FunctionDescription
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#

FunctionDescription
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#

FunctionDescription
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.

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. ::