251 lines
14 KiB
HTML
251 lines
14 KiB
HTML
<script type="text/javascript">
|
|
(function () {
|
|
function hasProperty (obj, prop) {
|
|
return Object.prototype.hasOwnProperty.call(obj, prop)
|
|
}
|
|
RED.nodes.registerType('ui-dropdown', {
|
|
category: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.label.category'),
|
|
color: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.colors.light'),
|
|
defaults: {
|
|
group: { type: 'ui-group', required: true },
|
|
name: { value: '' },
|
|
label: { value: 'Select Option:' },
|
|
tooltip: { value: '' },
|
|
order: { value: 0 },
|
|
width: {
|
|
value: 0,
|
|
validate: function (v) {
|
|
const width = v || 0
|
|
const currentGroup = $('#node-input-group').val() || this.group
|
|
const groupNode = RED.nodes.node(currentGroup)
|
|
const valid = !groupNode || +width <= +groupNode.width
|
|
$('#node-input-size').toggleClass('input-error', !valid)
|
|
return valid
|
|
}
|
|
},
|
|
height: { value: 0 },
|
|
passthru: { value: false },
|
|
multiple: { value: false },
|
|
chips: { value: false },
|
|
clearable: { value: false },
|
|
options: {
|
|
value: [{ value: '', label: '' }],
|
|
validate: function (v) {
|
|
const unique = new Set(v.map(function (o) { return o.value }))
|
|
return v.length === unique.size
|
|
}
|
|
},
|
|
payload: { value: '' },
|
|
topic: { value: 'topic', validate: (hasProperty(RED.validators, 'typedInput') ? RED.validators.typedInput('topicType') : function (v) { return true }) },
|
|
topicType: { value: 'msg' },
|
|
className: { value: '' },
|
|
// This field controls if the used component is going to be a `v-combox` or a `v-select`, `v-combox` allows typing and filtering possible values
|
|
typeIsComboBox: { value: true }
|
|
},
|
|
inputs: 1,
|
|
outputs: 1,
|
|
icon: 'font-awesome/fa-bars',
|
|
paletteLabel: 'dropdown',
|
|
label: function () { return this.name || (~this.label.indexOf('{' + '{') ? null : this.label) || 'dropdown' },
|
|
labelStyle: function () { return this.name ? 'node_label_italic' : '' },
|
|
oneditprepare: function () {
|
|
if (this.multiple === undefined) {
|
|
$('#node-input-multiple').prop('checked', false)
|
|
}
|
|
if (this.chips === undefined) {
|
|
$('#node-input-chips').prop('checked', false)
|
|
}
|
|
if (this.clearable === undefined) {
|
|
$('#node-input-clearable').prop('checked', false)
|
|
}
|
|
if (this.typeIsComboBox === undefined) {
|
|
$('#node-input-typeIsComboBox').prop('checked', true)
|
|
}
|
|
// if this groups parent is a subflow template, set the node-config-input-width and node-config-input-height up
|
|
// as typedInputs and hide the elementSizer (as it doesn't make sense for subflow templates)
|
|
if (RED.nodes.subflow(this.z)) {
|
|
// change inputs from hidden to text & display them
|
|
$('#node-input-width').attr('type', 'text')
|
|
$('#node-input-height').attr('type', 'text')
|
|
$('div.form-row.nr-db-ui-element-sizer-row').hide()
|
|
$('div.form-row.nr-db-ui-manual-size-row').show()
|
|
} else {
|
|
// not in a subflow, use the elementSizer
|
|
$('div.form-row.nr-db-ui-element-sizer-row').show()
|
|
$('div.form-row.nr-db-ui-manual-size-row').hide()
|
|
$('#node-input-size').elementSizer({
|
|
width: '#node-input-width',
|
|
height: '#node-input-height',
|
|
group: '#node-input-group'
|
|
})
|
|
}
|
|
const un = new Set(this.options.map(function (o) { return o.value }))
|
|
if (this.options.length === un.size) { $('#valWarning').hide() } else { $('#valWarning').show() }
|
|
|
|
function generateOption (i, option) {
|
|
const container = $('<li/>', { style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px; border-bottom: 1px solid var(--red-ui-form-input-border-color, #ccc);' })
|
|
const row = $('<div/>').appendTo(container)
|
|
$('<div/>', { style: 'padding-top:5px; padding-left:175px;' }).appendTo(container)
|
|
$('<div/>', { style: 'padding-top:5px; padding-left:120px;' }).appendTo(container)
|
|
|
|
$('<i style="color: var(--red-ui-form-text-color, #eee); cursor:move; margin-left:3px;" class="node-input-option-handle fa fa-bars"></i>').appendTo(row)
|
|
|
|
$('<input/>', { class: 'node-input-option-value', type: 'text', style: 'margin-left:7px; width:calc(50% - 32px);', placeholder: 'Value', value: option.value }).appendTo(row).typedInput({ default: option.type || 'str', types: ['str', 'num', 'bool'] })
|
|
$('<input/>', { class: 'node-input-option-label', type: 'text', style: 'margin-left:7px; width:calc(50% - 32px);', placeholder: 'Label', value: option.label }).appendTo(row)
|
|
|
|
const finalSpan = $('<span/>', { style: 'float:right; margin-right:8px;' }).appendTo(row)
|
|
const deleteButton = $('<a/>', { href: '#', class: 'editor-button editor-button-small', style: 'margin-top:7px; margin-left:5px;' }).appendTo(finalSpan)
|
|
$('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton)
|
|
|
|
deleteButton.click(function () {
|
|
container.css({ background: 'var(--red-ui-secondary-background-inactive, #fee)' })
|
|
container.fadeOut(300, function () {
|
|
$(this).remove()
|
|
})
|
|
})
|
|
|
|
$('#node-input-option-container').append(container)
|
|
}
|
|
|
|
$('#node-input-add-option').click(function () {
|
|
generateOption($('#node-input-option-container').children().length + 1, {})
|
|
$('#node-input-option-container-div').scrollTop($('#node-input-option-container-div').get(0).scrollHeight)
|
|
})
|
|
|
|
for (let i = 0; i < this.options.length; i++) {
|
|
const option = this.options[i]
|
|
generateOption(i + 1, option)
|
|
}
|
|
|
|
$('#node-input-option-container').sortable({
|
|
axis: 'y',
|
|
handle: '.node-input-option-handle',
|
|
cursor: 'move'
|
|
})
|
|
|
|
$('#node-input-topic').typedInput({
|
|
default: 'str',
|
|
typeField: $('#node-input-topicType'),
|
|
types: ['str', 'msg', 'flow', 'global']
|
|
})
|
|
|
|
// use jQuery UI tooltip to convert the plain old title attribute to a nice tooltip
|
|
$('.ui-node-popover-title').tooltip({
|
|
show: {
|
|
effect: 'slideDown',
|
|
delay: 150
|
|
}
|
|
})
|
|
},
|
|
oneditsave: function () {
|
|
const options = $('#node-input-option-container').children()
|
|
const node = this
|
|
node.options = []
|
|
options.each(function (i) {
|
|
const option = $(this)
|
|
const o = {
|
|
label: option.find('.node-input-option-label').val(),
|
|
value: option.find('.node-input-option-value').typedInput('value'),
|
|
type: option.find('.node-input-option-value').typedInput('type')
|
|
}
|
|
if (option.find('.node-input-option-value').typedInput('type') === 'num') {
|
|
o.value = Number(o.value)
|
|
}
|
|
if (option.find('.node-input-option-value').typedInput('type') === 'bool') {
|
|
o.value = (o.value === 'true')
|
|
}
|
|
node.options.push(o)
|
|
})
|
|
},
|
|
oneditresize: function () {
|
|
}
|
|
})
|
|
})()
|
|
</script>
|
|
|
|
<script type="text/html" data-template-name="ui-dropdown">
|
|
<div class="form-row">
|
|
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
|
|
<input type="text" id="node-input-name">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-group"><i class="fa fa-table"></i> Group</label>
|
|
<input type="text" id="node-input-group">
|
|
</div>
|
|
<div class="form-row nr-db-ui-element-sizer-row">
|
|
<label><i class="fa fa-object-group"></i> <span data-i18n="ui-dropdown.label.size">Size</label>
|
|
<button class="editor-button" id="node-input-size"></button>
|
|
</div>
|
|
<div class="form-row nr-db-ui-manual-size-row">
|
|
<label><i class="fa fa-arrows-h"></i> <span data-i18n="ui-dropdown.label.width">Width</label>
|
|
<input type="hidden" id="node-input-width">
|
|
</div>
|
|
<div class="form-row nr-db-ui-manual-size-row">
|
|
<label><i class="fa fa-arrows-v"></i> <span data-i18n="ui-dropdown.label.height">Height</label>
|
|
<input type="hidden" id="node-input-height">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-label"><i class="fa fa-tag"></i> Label</label>
|
|
<input type="text" id="node-input-label" placeholder="optional label">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-className"><i class="fa fa-code"></i> Class</label>
|
|
<div style="display: inline;">
|
|
<input style="width: 70%;" type="text" id="node-input-className" placeholder="Optional CSS class name(s)" style="flex-grow: 1;">
|
|
<a
|
|
data-html="true"
|
|
title="Dynamic Property: Send msg.class to append new classes to this widget. NOTE: classes set at runtime will be applied in addition to any class(es) set in the nodes class field."
|
|
class="red-ui-button ui-node-popover-title"
|
|
style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
|
|
<i style="font-family: ui-serif;">fx</i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!--<div class="form-row">
|
|
<label for="node-input-tooltip"><i class="fa fa-info-circle"></i> Tooltip</label>
|
|
<input type="text" id="node-input-tooltip" placeholder="optional tooltip">
|
|
</div>-->
|
|
<div class="form-row form-row-flex node-input-option-container-row" style="margin-bottom: 0px;width: 100%">
|
|
<label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Options</label>
|
|
<div id="node-input-option-container-div" style="box-sizing:border-box; border-radius:5px; height:257px; padding:5px; border:1px solid var(--red-ui-form-input-border-color, #ccc); overflow-y:scroll; display:inline-block; width: 70%;">
|
|
<span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b>All Values must be unique.</b></span>
|
|
<ol id="node-input-option-container" style="list-style-type:none; margin:0;"></ol>
|
|
</div>
|
|
<a
|
|
data-html="true"
|
|
title="Dynamic Property: Send 'msg.options' in order to override this property."
|
|
class="red-ui-button ui-node-popover-title"
|
|
style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
|
|
<i style="font-family: ui-serif;">fx</i>
|
|
</a>
|
|
</div>
|
|
<div class="form-row">
|
|
<a href="#" class="editor-button editor-button-small" id="node-input-add-option" style="margin-top:4px; margin-left:103px;"><i class="fa fa-plus"></i> <span>option</span></a>
|
|
</div>
|
|
<div class="form-row">
|
|
<label style="width:auto" for="node-input-multiple"><i class="fa fa-th-list"></i> Allow multiple selections from list: </label>
|
|
<input type="checkbox" checked id="node-input-multiple" style="display: inline-block; width: auto; margin: 0px 0px 0px 4px;">
|
|
</div>
|
|
<div class="form-row">
|
|
<label style="width:auto" for="node-input-chips"><i class="fa fa-circle-o"></i> Show selected elements in chips </label>
|
|
<input type="checkbox" checked id="node-input-chips" style="display: inline-block; width: auto; margin: 0px 0px 0px 4px;">
|
|
</div>
|
|
<div class="form-row">
|
|
<label style="width:auto" for="node-input-clearable"><i class="fa fa-times"></i> Clear selection with button </label>
|
|
<input type="checkbox" checked id="node-input-clearable" style="display: inline-block; width: auto; margin: 0px 0px 0px 4px;">
|
|
</div>
|
|
<div class="form-row">
|
|
<label style="width:auto" for="node-input-typeIsComboBox"><i class="fa fa-pencil-square"></i> Allow Search </label>
|
|
<input type="checkbox" checked id="node-input-typeIsComboBox" style="display: inline-block; width: auto; margin: 0px 0px 0px 4px;">
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<label style="width:auto" for="node-input-passthru"><i class="fa fa-arrow-right"></i> If <code>msg</code> arrives on input, pass through to output: </label>
|
|
<input type="checkbox" checked id="node-input-passthru" style="display:inline-block; width:auto; vertical-align:top;">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-topic"><i class="fa fa-tasks"></i> Topic</label>
|
|
<input type="text" id="node-input-topic" style="width:70%" placeholder="optional msg.topic">
|
|
<input type="hidden" id="node-input-topicType">
|
|
</div>
|
|
</script> |