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_toast.html 5.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <script type="text/javascript">
  2. RED.nodes.registerType('ui_toast', {
  3. category: RED._("node-red-dashboard/ui_base:ui_base.label.category"),
  4. color: 'rgb(119, 198, 204)',
  5. defaults: {
  6. position: {value: 'top right'},
  7. displayTime: {value: '3'},
  8. highlight: {value: ''},
  9. sendall: {value: true},
  10. outputs: {value: 0},
  11. ok: {value: 'OK', required: true},
  12. cancel: {value: ''},
  13. raw: {value: false},
  14. className: {value: ''},
  15. topic: {value: ''},
  16. name: {value: ''}
  17. },
  18. inputs:1,
  19. outputs:0,
  20. align: "right",
  21. icon: "ui_toast.png",
  22. paletteLabel: 'notification',
  23. label: function() { return this.name || (this.position==="prompt" ? "show dialog" : (this.position==="dialog" ? "show dialog" : "show notification")); },
  24. labelStyle: function() { return this.name?"node_label_italic":""; },
  25. oneditprepare: function() {
  26. $("#node-input-position").on("change", function() {
  27. if ($("#node-input-position option:selected").val() === 'dialog') {
  28. $("#node-toast-displaytime").hide();
  29. $("#node-toast-highlightcolor").hide();
  30. $("#node-toast-sendall").hide();
  31. $("#node-dialog-displayok").show();
  32. $("#node-dialog-displaycancel").show();
  33. $("#node-dialog-topic").show();
  34. }
  35. else if ($("#node-input-position option:selected").val() === 'prompt') {
  36. $("#node-toast-displaytime").hide();
  37. $("#node-toast-highlightcolor").hide();
  38. $("#node-toast-sendall").hide();
  39. $("#node-dialog-displayok").show();
  40. $("#node-dialog-displaycancel").show();
  41. $("#node-dialog-topic").show();
  42. if (typeof $("#node-input-cancel").val() !== "string" || $("#node-input-cancel").val() === "" ) {
  43. $("#node-input-cancel").val("Cancel");
  44. }
  45. }
  46. else {
  47. $("#node-toast-displaytime").show();
  48. $("#node-toast-highlightcolor").show();
  49. $("#node-toast-sendall").show();
  50. $("#node-dialog-displayok").hide();
  51. $("#node-dialog-displaycancel").hide();
  52. $("#node-dialog-topic").show();
  53. }
  54. });
  55. },
  56. oneditsave: function() {
  57. if ($("#node-input-position option:selected").val() === 'dialog') { this.outputs = 1; }
  58. else if ($("#node-input-position option:selected").val() === 'prompt') { this.outputs = 1; }
  59. else { this.outputs = 0; }
  60. }
  61. });
  62. </script>
  63. <script type="text/html" data-template-name="ui_toast">
  64. <div class="form-row">
  65. <label for="node-input-position"><i class="fa fa-th-large"></i> Layout</label>
  66. <select type="text" id="node-input-position" style="display:inline-block; width:70%; vertical-align:baseline;">
  67. <option value="top right">Top Right</option>
  68. <option value="bottom right">Bottom Right</option>
  69. <option value="top left">Top Left</option>
  70. <option value="bottom left">Bottom Left</option>
  71. <option value="dialog">OK / Cancel Dialog</option>
  72. <option value="prompt">OK / Cancel Dialog with Input</option>
  73. </select>
  74. </div>
  75. <div class="form-row" id="node-toast-displaytime">
  76. <label for="node-input-displayTime"><i class="fa fa-clock-o"></i> Timeout (S)</label>
  77. <input type="text" id="node-input-displayTime" placeholder="[msg.timeout]">
  78. </div>
  79. <div class="form-row" id="node-toast-highlightcolor">
  80. <label for="node-input-highlight"><i class="fa fa-square-o"></i> Border</label>
  81. <input type="text" id="node-input-highlight" placeholder="(optional) border highlight colour">
  82. </div>
  83. <div class="form-row" id="node-toast-sendtoall">
  84. <label style="width:auto" for="node-input-sendall"><i class="fa fa-arrow-right"></i> Send to all browser sessions. </label>
  85. <input type="checkbox" checked id="node-input-sendall" style="display:inline-block; width:auto; vertical-align:baseline;">
  86. </div>
  87. <div class="form-row" id="node-dialog-displayok">
  88. <label for="node-input-ok"><i class="fa fa-check"></i> Default action label</label>
  89. <input type="text" id="node-input-ok" placeholder="label for OK button">
  90. </div>
  91. <div class="form-row" id="node-dialog-displaycancel">
  92. <label for="node-input-cancel"><i class="fa fa-times"></i> Secondary action label</label>
  93. <input type="text" id="node-input-cancel" placeholder="(optional label for Cancel button)">
  94. </div>
  95. <div class="form-row" id="node-toast-raw">
  96. <label style="width:auto" for="node-input-raw"><i class="fa fa-exclamation-triangle"></i> Accept raw HTML/JavaScript input in msg.payload to format popup.</label>
  97. <input type="checkbox" id="node-input-raw" style="display:inline-block; width:auto; vertical-align:baseline;">
  98. </div>
  99. <div class="form-row" id="node-dialog-className">
  100. <label for="node-input-className"><i class="fa fa-code"></i> Class</label>
  101. <input type="text" id="node-input-className" placeholder="[msg.className]">
  102. </div>
  103. <div class="form-row" id="node-dialog-topic">
  104. <label for="node-input-topic"><i class="fa fa-tasks"></i> Topic</label>
  105. <input type="text" id="node-input-topic" placeholder="[msg.topic]">
  106. </div>
  107. <div class="form-row">
  108. <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
  109. <input type="text" id="node-input-name" placeholder="Name">
  110. </div>
  111. <div class="form-tips"><b>Note</b>: checking <i>Accept raw HTML/JavaScript</i> can allow injection of code.
  112. Ensure the input comes from trusted sources.</span></div>
  113. </script>