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_text.html 17KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384
  1. <script type="text/javascript">
  2. (function () {
  3. const fonts = [
  4. {
  5. value: 'Arial,Arial,Helvetica,sans-serif',
  6. name: 'Arial'
  7. },
  8. {
  9. value: 'Arial Black,Arial Black,Gadget,sans-serif',
  10. name: 'Arial Black'
  11. },
  12. {
  13. value: 'Arial Narrow,Nimbus Sans L,sans-serif',
  14. name: 'Arial Narrow'
  15. },
  16. {
  17. value: 'Century Gothic,CenturyGothic,AppleGothic,sans-serif',
  18. name: 'Century Gothic'
  19. },
  20. {
  21. value: 'Copperplate,Copperplate Gothic Light,fantasy',
  22. name: 'Copperplate'
  23. },
  24. {
  25. value: 'Courier,monospace',
  26. name: 'Courier'
  27. },
  28. {
  29. value: 'Georgia,Georgia,serif',
  30. name: 'Georgia'
  31. },
  32. {
  33. value: 'Gill Sans,Geneva,sans-serif',
  34. name: 'Gill Sans'
  35. },
  36. {
  37. value: 'Helvetica, sans-serif',
  38. name: 'Helvetica'
  39. },
  40. {
  41. value: 'Impact,Impact,Charcoal,sans-serif',
  42. name: 'Impact'
  43. },
  44. {
  45. value: 'Lucida Sans Typewriter,Lucida Console,Monaco,monospace',
  46. name: 'Lucida Console'
  47. },
  48. {
  49. value: 'Lucida Sans Unicode,Lucida Grande,sans-serif',
  50. name: 'Lucida Sans'
  51. },
  52. {
  53. value: 'Palatino Linotype,Palatino,Book Antiqua,serif',
  54. name: 'Palatino Linotype'
  55. },
  56. {
  57. value: 'Tahoma,Geneva,sans-serif',
  58. name: 'Tahoma'
  59. },
  60. {
  61. value: 'Times New Roman,Times,serif',
  62. name: 'Times New Roman'
  63. },
  64. {
  65. value: 'Trebuchet MS,Helvetica,sans-serif',
  66. name: 'Trebuchet MS'
  67. },
  68. {
  69. value: 'Verdana,Verdana,Geneva,sans-serif',
  70. name: 'Verdana'
  71. }
  72. ]
  73. RED.nodes.registerType('ui-text', {
  74. category: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.label.category'),
  75. color: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.colors.medium'),
  76. defaults: {
  77. group: { type: 'ui-group', required: true },
  78. order: { value: 0 },
  79. width: {
  80. value: 0,
  81. validate: function (v) {
  82. const width = v || 0
  83. const currentGroup = $('#node-input-group').val() || this.group
  84. const groupNode = RED.nodes.node(currentGroup)
  85. const valid = !groupNode || +width <= +groupNode.width
  86. $('#node-input-size').toggleClass('input-error', !valid)
  87. return valid
  88. }
  89. },
  90. height: { value: 0 },
  91. name: { value: '' },
  92. label: { value: 'text' },
  93. format: { value: '{{msg.payload}}' },
  94. layout: { value: 'row-spread' },
  95. style: { value: false },
  96. font: { value: 'Helvetica' },
  97. fontSize: { value: 16 },
  98. color: { value: '#717171' },
  99. className: { value: '' }
  100. },
  101. inputs: 1,
  102. outputs: 0,
  103. align: 'right',
  104. icon: 'font-awesome/fa-font',
  105. paletteLabel: 'text',
  106. label: function () { return this.name || (~this.label.indexOf('{' + '{') ? null : this.label) || 'text' },
  107. labelStyle: function () { return this.name ? 'node_label_italic' : '' },
  108. oneditprepare: function () {
  109. // if this groups parent is a subflow template, set the node-config-input-width and node-config-input-height up
  110. // as typedInputs and hide the elementSizer (as it doesn't make sense for subflow templates)
  111. if (RED.nodes.subflow(this.z)) {
  112. // change inputs from hidden to text & display them
  113. $('#node-input-width').attr('type', 'text')
  114. $('#node-input-height').attr('type', 'text')
  115. $('div.form-row.nr-db-ui-element-sizer-row').hide()
  116. $('div.form-row.nr-db-ui-manual-size-row').show()
  117. } else {
  118. // not in a subflow, use the elementSizer
  119. $('div.form-row.nr-db-ui-element-sizer-row').show()
  120. $('div.form-row.nr-db-ui-manual-size-row').hide()
  121. $('#node-input-size').elementSizer({
  122. width: '#node-input-width',
  123. height: '#node-input-height',
  124. group: '#node-input-group'
  125. })
  126. }
  127. $('.nr-db-text-layout-' + (this.layout || 'row-spread')).addClass('selected');
  128. ['.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']
  129. .forEach(function (id) {
  130. $(id).click(function (e) {
  131. $('.nr-db-text-layout').removeClass('selected')
  132. $(this).addClass('selected')
  133. $('#node-input-layout').val(id.substring('.nr-db-text-layout-'.length))
  134. e.preventDefault()
  135. })
  136. })
  137. const select = $('#node-select-font')
  138. // add font options
  139. fonts.forEach((font) => {
  140. const name = font.name
  141. const val = font.value
  142. $('<option/>', {
  143. value: val
  144. }).text(name).appendTo(select)
  145. })
  146. // when a font is selected
  147. $(select).change(() => {
  148. const val = $('#node-select-font').val()
  149. // update hidden input
  150. $('#node-input-font').val(val)
  151. // update test text
  152. $('#node-test-text').css({
  153. 'font-family': val
  154. })
  155. })
  156. $(select).val(this.font)
  157. $(select).change()
  158. // make the fontsize a numeric spinner
  159. $('#node-input-fontSize').spinner({
  160. min: 1,
  161. max: 100,
  162. spin: () => {
  163. // update the test text when value is changed
  164. const val = $('#node-input-fontSize').val()
  165. $('#node-test-text').css({
  166. 'font-size': val + 'px'
  167. })
  168. }
  169. })
  170. // add change handler to color picker to update test text
  171. $('#node-input-color').change(() => {
  172. const val = $('#node-input-color').val()
  173. $('#node-test-text').css({
  174. color: val
  175. })
  176. })
  177. // add change handler to show/hide style config options
  178. $('#node-input-style').change(() => {
  179. const val = $('#node-input-style').prop('checked')
  180. if (val) {
  181. $('#node-styles').show()
  182. } else {
  183. $('#node-styles').hide()
  184. }
  185. })
  186. $('#node-input-style').change()
  187. // when opening the config, make sure the test text is updated
  188. if (this.fontSize) {
  189. $('#node-test-text').css({
  190. 'font-size': this.fontSize + 'px'
  191. })
  192. }
  193. if (this.color) {
  194. $('#node-test-text').css({
  195. color: this.color
  196. })
  197. }
  198. // use jQuery UI tooltip to convert the plain old title attribute to a nice tooltip
  199. $('.ui-node-popover-title').tooltip({
  200. show: {
  201. effect: 'slideDown',
  202. delay: 150
  203. }
  204. })
  205. }
  206. })
  207. })()
  208. </script>
  209. <script type="text/html" data-template-name="ui-text">
  210. <div class="form-row">
  211. <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></label>
  212. <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
  213. </div>
  214. <div class="form-row">
  215. <label for="node-input-group"><i class="fa fa-table"></i> <span data-i18n="ui-text.label.group"></label>
  216. <input type="text" id="node-input-group">
  217. </div>
  218. <div class="form-row nr-db-ui-element-sizer-row">
  219. <label><i class="fa fa-object-group"></i> <span data-i18n="ui-text.label.size"></label>
  220. <button class="editor-button" id="node-input-size"></button>
  221. </div>
  222. <div class="form-row nr-db-ui-manual-size-row">
  223. <label><i class="fa fa-arrows-h"></i> <span data-i18n="ui-text.label.width">Width</label>
  224. <input type="hidden" id="node-input-width">
  225. </div>
  226. <div class="form-row nr-db-ui-manual-size-row">
  227. <label><i class="fa fa-arrows-v"></i> <span data-i18n="ui-text.label.height">Height</label>
  228. <input type="hidden" id="node-input-height">
  229. </div>
  230. <div class="form-row">
  231. <label for="node-input-label"><i class="fa fa-i-cursor"></i> <span data-i18n="ui-text.label.label"></label>
  232. <input type="text" id="node-input-label">
  233. </div>
  234. <div class="form-row">
  235. <label for="node-input-className"><i class="fa fa-code"></i> <span data-i18n="ui-text.label.class"></label>
  236. <div style="display: inline;">
  237. <input style="width: 70%;" type="text" id="node-input-className" data-i18n="[placeholder]ui-text.label.optionalCssClassNames" style="flex-grow: 1;">
  238. <a
  239. data-html="true"
  240. 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."
  241. class="red-ui-button ui-node-popover-title"
  242. 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;">
  243. <i style="font-family: ui-serif;">fx</i>
  244. </a>
  245. </div>
  246. </div>
  247. <!--<div class="form-row">
  248. <label for="node-input-format"><i class="fa fa-i-cursor"></i> Value format</label>
  249. <input type="text" id="node-input-format" placeholder="{{msg.payload}}">
  250. </div>-->
  251. <div class="form-row">
  252. <label style="vertical-align: top"><i class="fa fa-th-large"></i> <span data-i18n="ui-text.label.layout"></label>
  253. <div style="display:inline-block">
  254. <input type="hidden" id="node-input-layout">
  255. <input type="hidden" id="node-input-layoutAlign" >
  256. <div>
  257. <a href="#" class="nr-db-text-layout nr-db-text-layout-row nr-db-text-layout-row-left">
  258. <span class="nr-db-text-layout-label" data-i18n="ui-text.label.label2"></span>
  259. <span class="nr-db-text-layout-value" data-i18n="ui-text.label.value"></span>
  260. <div class="nr-db-text-layout-checkbox"></div>
  261. </a>
  262. <a href="#" class="nr-db-text-layout nr-db-text-layout-row nr-db-text-layout-row-center">
  263. <span class="nr-db-text-layout-label" data-i18n="ui-text.label.label2"></span>
  264. <span class="nr-db-text-layout-value" data-i18n="ui-text.label.value"></span>
  265. <div class="nr-db-text-layout-checkbox"></div>
  266. </a>
  267. <a href="#" class="nr-db-text-layout nr-db-text-layout-row nr-db-text-layout-row-right">
  268. <span class="nr-db-text-layout-label" data-i18n="ui-text.label.label2"></span>
  269. <span class="nr-db-text-layout-value" data-i18n="ui-text.label.value"></span>
  270. <div class="nr-db-text-layout-checkbox"></div>
  271. </a>
  272. </div>
  273. <div>
  274. <a href="#" class="nr-db-text-layout nr-db-text-layout-row nr-db-text-layout-row-spread">
  275. <span class="nr-db-text-layout-label" data-i18n="ui-text.label.label2"></span>
  276. <span class="nr-db-text-layout-value" data-i18n="ui-text.label.value"></span>
  277. <div class="nr-db-text-layout-checkbox"></div>
  278. </a>
  279. <a href="#" class="nr-db-text-layout nr-db-text-layout-col nr-db-text-layout-col-center">
  280. <span class="nr-db-text-layout-label" data-i18n="ui-text.label.label2"></span>
  281. <span class="nr-db-text-layout-value" data-i18n="ui-text.label.value"></span>
  282. <div class="nr-db-text-layout-checkbox"></div>
  283. </a>
  284. </div>
  285. </div>
  286. </div>
  287. <div class="form-row">
  288. <label><i class="fa fa-cog"></i> <span data-i18n="ui-text.label.style"></label>
  289. <input type="checkbox" id="node-input-style" style="display: inline-block; width: auto; vertical-align: top; margin: 0 3px 0 0;"/>
  290. <label for="node-input-style" style="width: 70%;" data-i18n="ui-text.label.applyStyle"></label>
  291. </div>
  292. <div id="node-styles">
  293. <div class="form-row">
  294. <label for="node-input-font"><i class="fa fa-font"></i> <span data-i18n="ui-text.label.font"></label>
  295. <select id="node-select-font">
  296. </select>
  297. <input type="hidden" id="node-input-font"/>
  298. </div>
  299. <div class="form-row">
  300. <label for="node-input-fontSize"><i class="fa fa-text-height"></i> <span data-i18n="ui-text.label.textSize"></label>
  301. <input id="node-input-fontSize" value="16" style="width: 50px;"/>
  302. </div>
  303. <div class="form-row">
  304. <label for="node-input-color"><i class="fa fa-tint"></i> <span data-i18n="ui-text.label.textColor"></label>
  305. <input type="color" id="node-input-color" style="width: 50px;"/>
  306. </div>
  307. <div class="form-row">
  308. <label>&nbsp;</label>
  309. <input id="node-test-text" data-i18n="[value]ui-text.label.enterSampleHere" style="width: 280px;">
  310. </div>
  311. </div>
  312. </script>
  313. <style>
  314. .nr-db-text-layout {
  315. position:relative;
  316. display: inline-block;
  317. width: 90px;
  318. height: 60px;
  319. border-radius:3px;
  320. border:1px solid var(--red-ui-form-input-border-color, #bbb);
  321. cursor:pointer;
  322. color: #666;
  323. margin-right: 10px;
  324. margin-bottom: 10px;
  325. }
  326. .nr-db-text-layout.selected, .nr-db-text-layout:hover {
  327. border-color: var(--red-ui-form-input-border-selected-color, #333);
  328. color: var(--red-ui-secondary-text-color-selected, #333);
  329. }
  330. .nr-db-text-layout span {
  331. position: absolute;
  332. }
  333. .nr-db-text-layout-value {
  334. font-weight: bold;
  335. }
  336. .nr-db-text-layout-row span { top: 20px; }
  337. .nr-db-text-layout-row-left .nr-db-text-layout-label { left: 2px; }
  338. .nr-db-text-layout-row-left .nr-db-text-layout-value { left: 34px; }
  339. .nr-db-text-layout-row-spread .nr-db-text-layout-label { left: 2px; }
  340. .nr-db-text-layout-row-spread .nr-db-text-layout-value { right: 2px; }
  341. .nr-db-text-layout-row-center .nr-db-text-layout-label { left: 11px; }
  342. .nr-db-text-layout-row-center .nr-db-text-layout-value { right: 11px; }
  343. .nr-db-text-layout-row-right .nr-db-text-layout-label { right: 40px; }
  344. .nr-db-text-layout-row-right .nr-db-text-layout-value { right: 2px; }
  345. .nr-db-text-layout-col span { width: 90px; text-align: center; left: 0px;}
  346. .nr-db-text-layout-col-center .nr-db-text-layout-label { top: 12px; }
  347. .nr-db-text-layout-col-center .nr-db-text-layout-value { top: 26px; }
  348. .nr-db-text-layout-checkbox {
  349. display: none;
  350. width: 10px;
  351. height: 10px;
  352. border-radius: 10px;
  353. border: 1px solid var(--red-ui-primary-border-color, #bbb);
  354. position: absolute;
  355. right: -5px;
  356. top: -5px;
  357. background: var(--red-ui-secondary-background, #fff);
  358. }
  359. .nr-db-text-layout.selected .nr-db-text-layout-checkbox {
  360. display:inline-block;
  361. box-shadow: inset 0px 0px 0px 2px #fff;
  362. background: #333;
  363. border-color: #333;
  364. }
  365. .nr-db-ui-manual-size-row {
  366. display: none;
  367. }
  368. </style>