Node-Red configuration
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

ui_button.html 9.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. <script type="text/javascript">
  2. (function () {
  3. function hasProperty (obj, prop) {
  4. return Object.prototype.hasOwnProperty.call(obj, prop)
  5. }
  6. RED.nodes.registerType('ui-button', {
  7. category: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.label.category'),
  8. color: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.colors.light'),
  9. defaults: {
  10. group: { type: 'ui-group', required: true },
  11. name: { value: '' },
  12. label: { value: RED._('@flowfuse/node-red-dashboard/ui-button:ui-button.label.button') },
  13. order: { value: 0 },
  14. width: {
  15. value: 0,
  16. validate: function (v) {
  17. const width = v || 0
  18. const currentGroup = $('#node-input-group').val() || this.group
  19. const groupNode = RED.nodes.node(currentGroup)
  20. const valid = !groupNode || +width <= +groupNode.width
  21. $('#node-input-size').toggleClass('input-error', !valid)
  22. return valid
  23. }
  24. },
  25. height: { value: 0 },
  26. emulateClick: { value: false },
  27. tooltip: { value: '' },
  28. color: { value: '' },
  29. bgcolor: { value: '' },
  30. className: { value: '' },
  31. icon: { value: '' },
  32. iconPosition: { value: 'left' },
  33. payload: { value: '', validate: (hasProperty(RED.validators, 'typedInput') ? RED.validators.typedInput('payloadType') : function (v) { return true }) },
  34. payloadType: { value: 'str' },
  35. topic: { value: 'topic', validate: (hasProperty(RED.validators, 'typedInput') ? RED.validators.typedInput('topicType') : function (v) { return true }) },
  36. topicType: { value: 'msg' },
  37. buttonColor: { value: '' },
  38. textColor: { value: '' },
  39. iconColor: { value: '' }
  40. },
  41. inputs: 1,
  42. outputs: 1,
  43. outputLabels: function () {
  44. if (this.payloadType === 'str') {
  45. return this.payload
  46. } else {
  47. return this.payloadType
  48. }
  49. },
  50. icon: 'font-awesome/fa-hand-pointer-o',
  51. paletteLabel: 'button',
  52. label: function () { return this.name || (~this.label.indexOf('{' + '{') ? null : this.label) || 'button' },
  53. labelStyle: function () { return this.name ? 'node_label_italic' : '' },
  54. oneditprepare: function () {
  55. // if this groups parent is a subflow template, set the node-config-input-width and node-config-input-height up
  56. // as typedInputs and hide the elementSizer (as it doesn't make sense for subflow templates)
  57. if (RED.nodes.subflow(this.z)) {
  58. // change inputs from hidden to text & display them
  59. $('#node-input-width').attr('type', 'text')
  60. $('#node-input-height').attr('type', 'text')
  61. $('div.form-row.nr-db-ui-element-sizer-row').hide()
  62. $('div.form-row.nr-db-ui-manual-size-row').show()
  63. } else {
  64. // not in a subflow, use the elementSizer
  65. $('div.form-row.nr-db-ui-element-sizer-row').show()
  66. $('div.form-row.nr-db-ui-manual-size-row').hide()
  67. $('#node-input-size').elementSizer({
  68. width: '#node-input-width',
  69. height: '#node-input-height',
  70. group: '#node-input-group'
  71. })
  72. }
  73. $('#node-input-payload').typedInput({
  74. default: 'str',
  75. typeField: $('#node-input-payloadType'),
  76. types: ['str', 'num', 'bool', 'json', 'bin', 'date', 'flow', 'global']
  77. })
  78. $('#node-input-topic').typedInput({
  79. default: 'str',
  80. typeField: $('#node-input-topicType'),
  81. types: ['str', 'msg', 'flow', 'global']
  82. })
  83. if (!this.iconPosition) {
  84. $('#node-input-iconPosition').val('left')
  85. }
  86. // use jQuery UI tooltip to convert the plain old title attribute to a nice tooltip
  87. $('.ui-node-popover-title').tooltip({
  88. show: {
  89. effect: 'slideDown',
  90. delay: 150
  91. }
  92. })
  93. }
  94. })
  95. })()
  96. </script>
  97. <script type="text/html" data-template-name="ui-button">
  98. <div class="form-row">
  99. <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></label>
  100. <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
  101. </div>
  102. <div class="form-row">
  103. <label for="node-input-group"><i class="fa fa-table"></i> <span data-i18n="ui-button.label.group"></label>
  104. <input type="text" id="node-input-group">
  105. </div>
  106. <div class="form-row nr-db-ui-element-sizer-row">
  107. <label><i class="fa fa-object-group"></i> <span data-i18n="ui-button.label.size"></label>
  108. <button class="editor-button" id="node-input-size"></button>
  109. </div>
  110. <div class="form-row nr-db-ui-manual-size-row">
  111. <label><i class="fa fa-arrows-h"></i> <span data-i18n="ui-button.label.width">Width</label>
  112. <input type="hidden" id="node-input-width">
  113. </div>
  114. <div class="form-row nr-db-ui-manual-size-row">
  115. <label><i class="fa fa-arrows-v"></i> <span data-i18n="ui-button.label.height">Height</label>
  116. <input type="hidden" id="node-input-height">
  117. </div>
  118. <div class="form-row form-row-flex">
  119. <label for="node-input-icon"><i class="fa fa-picture-o"></i> <span data-i18n="ui-button.label.icon"></label>
  120. <div style="display: flex; align-items: center; flex-grow: 1; padding-right: calc(30% - 104px); gap: 12px;">
  121. <input style="flex-grow: 1;" type="text" id="node-input-icon" data-i18n="[placeholder]ui-button.label.optionalIcon">
  122. <select id="node-input-iconPosition" style="width: 125px;">
  123. <option value="left" data-i18n="ui-button.label.left"></option>
  124. <option value="right" data-i18n="ui-button.label.right"></option>
  125. </select>
  126. </div>
  127. </div>
  128. <div class="form-row">
  129. <label for="node-input-label"><i class="fa fa-i-cursor"></i> <span data-i18n="ui-button.label.label"></label>
  130. <input type="text" id="node-input-label" data-i18n="[placeholder]ui-button.label.optionalLabel">
  131. </div>
  132. <div class="form-row">
  133. <label for="node-input-className"><i class="fa fa-code"></i> <span data-i18n="ui-button.label.className"></label>
  134. <div style="display: inline;">
  135. <input style="width: 70%;" type="text" id="node-input-className" data-i18n="[placeholder]ui-button.label.classNamePlaceholder" style="flex-grow: 1;">
  136. <a
  137. data-html="true"
  138. 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."
  139. class="red-ui-button ui-node-popover-title"
  140. 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;">
  141. <i style="font-family: ui-serif;">fx</i>
  142. </a>
  143. </div>
  144. </div>
  145. <!--<div class="form-row">
  146. <label for="node-input-tooltip"><i class="fa fa-info-circle"></i> <span data-i18n="ui-button.label.tooltip"></label>
  147. <input type="text" id="node-input-tooltip" data-i18n="[placeholder]ui-button.label.optionalTooltip">
  148. </div>-->
  149. <div class="form-row">
  150. <label style="width:auto" for="node-input-payload"><i class="fa fa-envelope-o"></i> <span data-i18n="ui-button.label.whenClicked"></label>
  151. </div>
  152. <div class="form-row">
  153. <label for="node-input-payload" style="padding-left: 25px; margin-right: -25px"><span data-i18n="ui-button.label.payload"></label>
  154. <input type="text" id="node-input-payload" style="width:70%">
  155. <input type="hidden" id="node-input-payloadType">
  156. </div>
  157. <div class="form-row">
  158. <label for="node-input-topic" style="padding-left: 25px; margin-right: -25px"><span data-i18n="ui-button.label.topic"></label>
  159. <input type="text" id="node-input-topic" style="width:70%">
  160. <input type="hidden" id="node-input-topicType">
  161. </div>
  162. <div class="form-row">
  163. <label style="width:auto" for="node-input-emulateClick"><i class="fa fa-arrow-right"></i> <span data-i18n="ui-button.label.emulateClick"></label>
  164. <input type="checkbox" id="node-input-emulateClick" style="display:inline-block; width:auto; vertical-align:top;">
  165. </div>
  166. <div class="form-row">
  167. <h4>Custom Styling</h4>
  168. </div>
  169. <div class="form-row">
  170. <label for="node-input-buttonColor"><i class="fa fa-tint"></i> <span data-i18n="ui-button.label.buttonColor"></label>
  171. <input type="text" id="node-input-buttonColor" data-i18n="[placeholder]ui-button.label.optionalButtonColor">
  172. </div>
  173. <div class="form-row">
  174. <label for="node-input-textColor"><i class="fa fa-tint"></i> <span data-i18n="ui-button.label.textColor"></label>
  175. <input type="text" id="node-input-textColor" data-i18n="[placeholder]ui-button.label.optionalTextColor">
  176. </div>
  177. <div class="form-row">
  178. <label for="node-input-iconColor"><i class="fa fa-tint"></i> <span data-i18n="ui-button.label.iconColor"></label>
  179. <input type="text" id="node-input-iconColor" data-i18n="[placeholder]ui-button.label.optionalIconColor">
  180. </div>
  181. </script>