384 lines
17 KiB
HTML
384 lines
17 KiB
HTML
<script type="text/javascript">
|
|
(function () {
|
|
const fonts = [
|
|
{
|
|
value: 'Arial,Arial,Helvetica,sans-serif',
|
|
name: 'Arial'
|
|
},
|
|
{
|
|
value: 'Arial Black,Arial Black,Gadget,sans-serif',
|
|
name: 'Arial Black'
|
|
},
|
|
{
|
|
value: 'Arial Narrow,Nimbus Sans L,sans-serif',
|
|
name: 'Arial Narrow'
|
|
},
|
|
{
|
|
value: 'Century Gothic,CenturyGothic,AppleGothic,sans-serif',
|
|
name: 'Century Gothic'
|
|
},
|
|
{
|
|
value: 'Copperplate,Copperplate Gothic Light,fantasy',
|
|
name: 'Copperplate'
|
|
},
|
|
{
|
|
value: 'Courier,monospace',
|
|
name: 'Courier'
|
|
},
|
|
{
|
|
value: 'Georgia,Georgia,serif',
|
|
name: 'Georgia'
|
|
},
|
|
{
|
|
value: 'Gill Sans,Geneva,sans-serif',
|
|
name: 'Gill Sans'
|
|
},
|
|
{
|
|
value: 'Helvetica, sans-serif',
|
|
name: 'Helvetica'
|
|
},
|
|
{
|
|
value: 'Impact,Impact,Charcoal,sans-serif',
|
|
name: 'Impact'
|
|
},
|
|
{
|
|
value: 'Lucida Sans Typewriter,Lucida Console,Monaco,monospace',
|
|
name: 'Lucida Console'
|
|
},
|
|
{
|
|
value: 'Lucida Sans Unicode,Lucida Grande,sans-serif',
|
|
name: 'Lucida Sans'
|
|
},
|
|
{
|
|
value: 'Palatino Linotype,Palatino,Book Antiqua,serif',
|
|
name: 'Palatino Linotype'
|
|
},
|
|
{
|
|
value: 'Tahoma,Geneva,sans-serif',
|
|
name: 'Tahoma'
|
|
},
|
|
{
|
|
value: 'Times New Roman,Times,serif',
|
|
name: 'Times New Roman'
|
|
},
|
|
{
|
|
value: 'Trebuchet MS,Helvetica,sans-serif',
|
|
name: 'Trebuchet MS'
|
|
},
|
|
{
|
|
value: 'Verdana,Verdana,Geneva,sans-serif',
|
|
name: 'Verdana'
|
|
}
|
|
]
|
|
|
|
RED.nodes.registerType('ui-text', {
|
|
category: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.label.category'),
|
|
color: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.colors.medium'),
|
|
defaults: {
|
|
group: { type: 'ui-group', required: true },
|
|
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 },
|
|
name: { value: '' },
|
|
label: { value: 'text' },
|
|
format: { value: '{{msg.payload}}' },
|
|
layout: { value: 'row-spread' },
|
|
style: { value: false },
|
|
font: { value: 'Helvetica' },
|
|
fontSize: { value: 16 },
|
|
color: { value: '#717171' },
|
|
className: { value: '' }
|
|
},
|
|
inputs: 1,
|
|
outputs: 0,
|
|
align: 'right',
|
|
icon: 'font-awesome/fa-font',
|
|
paletteLabel: 'text',
|
|
label: function () { return this.name || (~this.label.indexOf('{' + '{') ? null : this.label) || 'text' },
|
|
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'
|
|
})
|
|
}
|
|
|
|
$('.nr-db-text-layout-' + (this.layout || 'row-spread')).addClass('selected');
|
|
['.nr-db-text-layout-row-left', '.nr-db-text-layout-row-center', '.nr-db-text-layout-row-right', '.nr-db-text-layout-row-spread', '.nr-db-text-layout-col-center']
|
|
.forEach(function (id) {
|
|
$(id).click(function (e) {
|
|
$('.nr-db-text-layout').removeClass('selected')
|
|
$(this).addClass('selected')
|
|
$('#node-input-layout').val(id.substring('.nr-db-text-layout-'.length))
|
|
e.preventDefault()
|
|
})
|
|
})
|
|
|
|
const select = $('#node-select-font')
|
|
|
|
// add font options
|
|
fonts.forEach((font) => {
|
|
const name = font.name
|
|
const val = font.value
|
|
$('<option/>', {
|
|
value: val
|
|
}).text(name).appendTo(select)
|
|
})
|
|
|
|
// when a font is selected
|
|
$(select).change(() => {
|
|
const val = $('#node-select-font').val()
|
|
// update hidden input
|
|
$('#node-input-font').val(val)
|
|
// update test text
|
|
$('#node-test-text').css({
|
|
'font-family': val
|
|
})
|
|
})
|
|
$(select).val(this.font)
|
|
$(select).change()
|
|
|
|
// make the fontsize a numeric spinner
|
|
$('#node-input-fontSize').spinner({
|
|
min: 1,
|
|
max: 100,
|
|
spin: () => {
|
|
// update the test text when value is changed
|
|
const val = $('#node-input-fontSize').val()
|
|
$('#node-test-text').css({
|
|
'font-size': val + 'px'
|
|
})
|
|
}
|
|
})
|
|
|
|
// add change handler to color picker to update test text
|
|
$('#node-input-color').change(() => {
|
|
const val = $('#node-input-color').val()
|
|
$('#node-test-text').css({
|
|
color: val
|
|
})
|
|
})
|
|
|
|
// add change handler to show/hide style config options
|
|
$('#node-input-style').change(() => {
|
|
const val = $('#node-input-style').prop('checked')
|
|
if (val) {
|
|
$('#node-styles').show()
|
|
} else {
|
|
$('#node-styles').hide()
|
|
}
|
|
})
|
|
$('#node-input-style').change()
|
|
|
|
// when opening the config, make sure the test text is updated
|
|
if (this.fontSize) {
|
|
$('#node-test-text').css({
|
|
'font-size': this.fontSize + 'px'
|
|
})
|
|
}
|
|
if (this.color) {
|
|
$('#node-test-text').css({
|
|
color: this.color
|
|
})
|
|
}
|
|
|
|
// 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
|
|
}
|
|
})
|
|
}
|
|
})
|
|
})()
|
|
</script>
|
|
|
|
<script type="text/html" data-template-name="ui-text">
|
|
<div class="form-row">
|
|
<label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></label>
|
|
<input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-group"><i class="fa fa-table"></i> <span data-i18n="ui-text.label.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-text.label.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-text.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-text.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-i-cursor"></i> <span data-i18n="ui-text.label.label"></label>
|
|
<input type="text" id="node-input-label">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-className"><i class="fa fa-code"></i> <span data-i18n="ui-text.label.class"></label>
|
|
<div style="display: inline;">
|
|
<input style="width: 70%;" type="text" id="node-input-className" data-i18n="[placeholder]ui-text.label.optionalCssClassNames" 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-format"><i class="fa fa-i-cursor"></i> Value format</label>
|
|
<input type="text" id="node-input-format" placeholder="{{msg.payload}}">
|
|
</div>-->
|
|
<div class="form-row">
|
|
<label style="vertical-align: top"><i class="fa fa-th-large"></i> <span data-i18n="ui-text.label.layout"></label>
|
|
<div style="display:inline-block">
|
|
<input type="hidden" id="node-input-layout">
|
|
<input type="hidden" id="node-input-layoutAlign" >
|
|
<div>
|
|
<a href="#" class="nr-db-text-layout nr-db-text-layout-row nr-db-text-layout-row-left">
|
|
<span class="nr-db-text-layout-label" data-i18n="ui-text.label.label2"></span>
|
|
<span class="nr-db-text-layout-value" data-i18n="ui-text.label.value"></span>
|
|
<div class="nr-db-text-layout-checkbox"></div>
|
|
</a>
|
|
<a href="#" class="nr-db-text-layout nr-db-text-layout-row nr-db-text-layout-row-center">
|
|
<span class="nr-db-text-layout-label" data-i18n="ui-text.label.label2"></span>
|
|
<span class="nr-db-text-layout-value" data-i18n="ui-text.label.value"></span>
|
|
<div class="nr-db-text-layout-checkbox"></div>
|
|
</a>
|
|
<a href="#" class="nr-db-text-layout nr-db-text-layout-row nr-db-text-layout-row-right">
|
|
<span class="nr-db-text-layout-label" data-i18n="ui-text.label.label2"></span>
|
|
<span class="nr-db-text-layout-value" data-i18n="ui-text.label.value"></span>
|
|
<div class="nr-db-text-layout-checkbox"></div>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a href="#" class="nr-db-text-layout nr-db-text-layout-row nr-db-text-layout-row-spread">
|
|
<span class="nr-db-text-layout-label" data-i18n="ui-text.label.label2"></span>
|
|
<span class="nr-db-text-layout-value" data-i18n="ui-text.label.value"></span>
|
|
<div class="nr-db-text-layout-checkbox"></div>
|
|
</a>
|
|
<a href="#" class="nr-db-text-layout nr-db-text-layout-col nr-db-text-layout-col-center">
|
|
<span class="nr-db-text-layout-label" data-i18n="ui-text.label.label2"></span>
|
|
<span class="nr-db-text-layout-value" data-i18n="ui-text.label.value"></span>
|
|
<div class="nr-db-text-layout-checkbox"></div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<label><i class="fa fa-cog"></i> <span data-i18n="ui-text.label.style"></label>
|
|
<input type="checkbox" id="node-input-style" style="display: inline-block; width: auto; vertical-align: top; margin: 0 3px 0 0;"/>
|
|
<label for="node-input-style" style="width: 70%;" data-i18n="ui-text.label.applyStyle"></label>
|
|
</div>
|
|
|
|
<div id="node-styles">
|
|
<div class="form-row">
|
|
<label for="node-input-font"><i class="fa fa-font"></i> <span data-i18n="ui-text.label.font"></label>
|
|
<select id="node-select-font">
|
|
</select>
|
|
<input type="hidden" id="node-input-font"/>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-fontSize"><i class="fa fa-text-height"></i> <span data-i18n="ui-text.label.textSize"></label>
|
|
<input id="node-input-fontSize" value="16" style="width: 50px;"/>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-color"><i class="fa fa-tint"></i> <span data-i18n="ui-text.label.textColor"></label>
|
|
<input type="color" id="node-input-color" style="width: 50px;"/>
|
|
</div>
|
|
<div class="form-row">
|
|
<label> </label>
|
|
<input id="node-test-text" data-i18n="[value]ui-text.label.enterSampleHere" style="width: 280px;">
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<style>
|
|
.nr-db-text-layout {
|
|
position:relative;
|
|
display: inline-block;
|
|
width: 90px;
|
|
height: 60px;
|
|
border-radius:3px;
|
|
border:1px solid var(--red-ui-form-input-border-color, #bbb);
|
|
cursor:pointer;
|
|
color: #666;
|
|
margin-right: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.nr-db-text-layout.selected, .nr-db-text-layout:hover {
|
|
border-color: var(--red-ui-form-input-border-selected-color, #333);
|
|
color: var(--red-ui-secondary-text-color-selected, #333);
|
|
}
|
|
.nr-db-text-layout span {
|
|
position: absolute;
|
|
}
|
|
.nr-db-text-layout-value {
|
|
font-weight: bold;
|
|
}
|
|
.nr-db-text-layout-row span { top: 20px; }
|
|
.nr-db-text-layout-row-left .nr-db-text-layout-label { left: 2px; }
|
|
.nr-db-text-layout-row-left .nr-db-text-layout-value { left: 34px; }
|
|
.nr-db-text-layout-row-spread .nr-db-text-layout-label { left: 2px; }
|
|
.nr-db-text-layout-row-spread .nr-db-text-layout-value { right: 2px; }
|
|
.nr-db-text-layout-row-center .nr-db-text-layout-label { left: 11px; }
|
|
.nr-db-text-layout-row-center .nr-db-text-layout-value { right: 11px; }
|
|
.nr-db-text-layout-row-right .nr-db-text-layout-label { right: 40px; }
|
|
.nr-db-text-layout-row-right .nr-db-text-layout-value { right: 2px; }
|
|
|
|
.nr-db-text-layout-col span { width: 90px; text-align: center; left: 0px;}
|
|
.nr-db-text-layout-col-center .nr-db-text-layout-label { top: 12px; }
|
|
.nr-db-text-layout-col-center .nr-db-text-layout-value { top: 26px; }
|
|
.nr-db-text-layout-checkbox {
|
|
display: none;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--red-ui-primary-border-color, #bbb);
|
|
position: absolute;
|
|
right: -5px;
|
|
top: -5px;
|
|
background: var(--red-ui-secondary-background, #fff);
|
|
}
|
|
.nr-db-text-layout.selected .nr-db-text-layout-checkbox {
|
|
display:inline-block;
|
|
box-shadow: inset 0px 0px 0px 2px #fff;
|
|
background: #333;
|
|
border-color: #333;
|
|
}
|
|
.nr-db-ui-manual-size-row {
|
|
display: none;
|
|
}
|
|
|
|
</style> |