250 lines
12 KiB
HTML
250 lines
12 KiB
HTML
<script type="text/javascript">
|
|
(function () {
|
|
function hasProperty (obj, prop) {
|
|
return Object.prototype.hasOwnProperty.call(obj, prop)
|
|
}
|
|
RED.nodes.registerType('ui-slider', {
|
|
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: 'slider' },
|
|
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 },
|
|
outs: { value: 'all' },
|
|
topic: { value: 'topic', validate: (hasProperty(RED.validators, 'typedInput') ? RED.validators.typedInput('topicType') : function (v) { return true }) },
|
|
topicType: { value: 'msg' },
|
|
thumbLabel: { value: true },
|
|
showTicks: { value: 'always' },
|
|
min: { value: 0, required: true, validate: RED.validators.number() },
|
|
max: { value: 10, required: true, validate: RED.validators.number() },
|
|
step: { value: 1 },
|
|
className: { value: '' },
|
|
iconPrepend: { value: '' },
|
|
iconAppend: { value: '' },
|
|
color: { value: '' },
|
|
colorTrack: { value: '' },
|
|
colorThumb: { value: '' }
|
|
},
|
|
inputs: 1,
|
|
outputs: 1,
|
|
outputLabels: function () { return this.min + ' - ' + this.max },
|
|
icon: 'font-awesome/fa-sliders',
|
|
paletteLabel: 'slider',
|
|
label: function () { return this.name || (~this.label.indexOf('{' + '{') ? null : this.label) || 'slider' },
|
|
labelStyle: function () { return this.name ? 'node_label_italic' : '' },
|
|
oneditprepare: function () {
|
|
// 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'
|
|
})
|
|
}
|
|
$('#node-input-topic').typedInput({
|
|
default: 'str',
|
|
typeField: $('#node-input-topicType'),
|
|
types: ['str', 'msg', 'flow', 'global']
|
|
})
|
|
// if (!$("#node-input-outs").val()) { $("#node-input-outs").val("all") }
|
|
|
|
// handle older iteration of thumbLabel
|
|
// otherwise, the value will match up to a valid selection
|
|
if (this.thumbLabel === false) {
|
|
$('#node-input-thumbLabel').val('false')
|
|
} else if (this.thumbLabel === true) {
|
|
$('#node-input-thumbLabel').val('true')
|
|
}
|
|
|
|
// handle no value for showTicks (from sliders created before this was a value)
|
|
if (!this.showTicks) {
|
|
$('#node-input-showTicks').val('false')
|
|
}
|
|
|
|
// 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 () {
|
|
// make sure our boolean options are actually booleans
|
|
const thumbLabel = $('#node-input-thumbLabel').find(':selected').val()
|
|
if (thumbLabel === 'false') {
|
|
this.thumbLabel = false
|
|
} else if (thumbLabel === 'true') {
|
|
this.thumbLabel = true
|
|
}
|
|
}
|
|
})
|
|
})()
|
|
</script>
|
|
|
|
<script type="text/html" data-template-name="ui-slider">
|
|
<div class="form-row">
|
|
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
|
|
<input type="text" id="node-input-name">
|
|
<input type="hidden" id="node-input-topicType">
|
|
</div>
|
|
<div class="ui-slider">
|
|
<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-slider.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-slider.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-slider.label.height">Height</label>
|
|
<input type="hidden" id="node-input-height">
|
|
</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-label"><i class="fa fa-i-cursor"></i> Label</label>
|
|
<input type="text" id="node-input-label">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-thumbLabel"><i class="fa fa-i-cursor"></i> Thumb</label>
|
|
<select id="node-input-thumbLabel">
|
|
<option value="false">Never</option>
|
|
<option value="true">On Drag</option>
|
|
<option value="always">Always</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-showTicks"><i class="fa fa-i-cursor"></i> Ticks</label>
|
|
<select id="node-input-showTicks">
|
|
<option value="false">Never</option>
|
|
<option value="true">On Drag</option>
|
|
<option value="always">Always</option>
|
|
</select>
|
|
</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">
|
|
<label for="node-input-min"><i class="fa fa-arrows-h"></i> Range</label>
|
|
<div style="display: grid; grid-template-columns: repeat(3, 1fr); width: 70%">
|
|
<div>
|
|
<span for="node-input-min">min</span>
|
|
<input type="text" id="node-input-min" style="width:60px">
|
|
</div>
|
|
<div>
|
|
<span for="not-input-step">step</span>
|
|
<input type="text" id="node-input-step" style="width:60px">
|
|
</div>
|
|
<div>
|
|
<span for="not-input-max">max</span>
|
|
<input type="text" id="node-input-max" style="width:60px">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-iconPrepend"><i class="fa fa-picture-o"></i> Icons</label>
|
|
<div style="display: grid; grid-template-columns: repeat(3, 1fr); width: 70%">
|
|
<div>
|
|
<span for="node-input-iconPrepend">before</span>
|
|
<input type="text" id="node-input-iconPrepend" placeholder="minus" style="width:60px">
|
|
</div>
|
|
<div>
|
|
<span for="node-input-iconAppend">after</span>
|
|
<input type="text" id="node-input-iconAppend" placeholder="plus" style="width:60px">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-color"><i class="fa fa-adjust"></i> Color</label>
|
|
<div style="display: grid; grid-template-columns: repeat(3, 1fr); width: 70%">
|
|
<div>
|
|
<span for="node-input-color">slider</span>
|
|
<input type="text" id="node-input-color" placeholder="red" style="width:60px">
|
|
</div>
|
|
<div>
|
|
<span for="not-input-colorTrack">track</span>
|
|
<input type="text" id="node-input-colorTrack" placeholder="green" style="width:60px">
|
|
</div>
|
|
<div>
|
|
<span for="not-input-colorThumb">thumb</span>
|
|
<input type="text" id="node-input-colorThumb" placeholder="#a5a5a5" style="width:60px">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-outs"><i class="fa fa-sign-out"></i> Output</label>
|
|
<select id="node-input-outs" style="width:204px">
|
|
<option value="all">continuously while sliding</option>
|
|
<option value="end">only on release</option>
|
|
</select>
|
|
</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 style="width:auto" for="node-input-payload"><i class="fa fa-envelope-o"></i> When changed, send:</label>
|
|
</div>
|
|
<!-- <div class="form-row">
|
|
<label style="padding-left:25px; margin-right:-25px">Payload</label>
|
|
<label style="width:auto">Current value</label>
|
|
</div> -->
|
|
<div class="form-row">
|
|
<label for="node-input-topic" style="padding-left:25px; margin-right:-25px">Topic</label>
|
|
<input type="text" id="node-input-topic">
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<style id="nr-db2-ui-slider-styles">
|
|
.red-ui-editor div.ui-slider .form-row {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.red-ui-editor div.ui-slider .form-row label {
|
|
margin-bottom: 0;
|
|
}
|
|
</style> |