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_tab.html 4.3KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <script type="text/javascript">
  2. // convert to i18 text
  3. function c_ui_tab(x) {
  4. return RED._("node-red-dashboard/ui_tab:ui_tab."+x);
  5. }
  6. RED.nodes.registerType('ui_tab',{
  7. category: 'config',
  8. defaults: {
  9. name: {value: c_ui_tab("label.home")},
  10. icon: {value: 'dashboard'},
  11. order: {value: 0},
  12. disabled: {value: false},
  13. hidden: {value: false}
  14. },
  15. paletteLabel: 'dashboard tab',
  16. label: function() { return this.name || c_ui_tab("label.tab"); },
  17. sort: function(A,B) {
  18. return A.order - B.order;
  19. },
  20. oneditprepare: function() {
  21. $("#node-config-input-disabled-btn").on("click", function(e) {
  22. var i = $(this).find("i");
  23. var active = i.hasClass("fa-toggle-on");
  24. var newCls = "fa fa-toggle-" + (active ? "off" : "on");
  25. i.attr("class", newCls);
  26. $("#node-config-input-disabled").prop('checked',active);
  27. var newTxt = c_ui_tab(active ? "label.disabled" : "label.enabled");
  28. $("#node-config-input-disabled-label").text(newTxt);
  29. var info = $("#node-config-input-disabled-info");
  30. var done = active ? info.show() : info.hide();
  31. });
  32. if (this.disabled) {
  33. $("#node-config-input-disabled-btn").click();
  34. }
  35. else {
  36. $("#node-config-input-disabled-label").text(c_ui_tab("label.enabled"));
  37. }
  38. $("#node-config-input-hidden-btn").on("click", function(e) {
  39. var i = $(this).find("i");
  40. var active = i.hasClass("fa-toggle-on");
  41. var newCls = "fa fa-toggle-" + (active ? "off" : "on");
  42. i.attr("class", newCls);
  43. $("#node-config-input-hidden").prop('checked',active);
  44. var newTxt = c_ui_tab(active ? "label.hidden" : "label.visible");
  45. $("#node-config-input-hidden-label").text(newTxt);
  46. var info = $("#node-config-input-hidden-info");
  47. var done = active ? info.show() : info.hide();
  48. });
  49. if (this.hidden) {
  50. $("#node-config-input-hidden-btn").click();
  51. }
  52. else {
  53. $("#node-config-input-hidden-label").text(c_ui_tab("label.visible"));
  54. }
  55. },
  56. oneditsave: function() {
  57. this.disabled = $("#node-config-input-disabled").prop("checked");
  58. this.hidden = $("#node-config-input-hidden").prop("checked");
  59. }
  60. });
  61. </script>
  62. <script type="text/html" data-template-name="ui_tab">
  63. <div class="form-row">
  64. <label for="node-config-input-name"><i class="fa fa-tag"></i> <span data-i18n="ui_tab.label.name"></span></label>
  65. <input type="text" id="node-config-input-name">
  66. </div>
  67. <div class="form-row">
  68. <label for="node-config-input-icon"><i class="fa fa-file-image-o"></i> <span data-i18n="ui_tab.label.icon"></span></label>
  69. <input type="text" id="node-config-input-icon">
  70. </div>
  71. <div class="form-row">
  72. <label for="node-config-input-disabled-btn"><i class="fa fa-ban"></i> <span data-i18n="ui_tab.label.state"></span></label>
  73. <button id="node-config-input-disabled-btn" class="editor-button" style="width:100px; margin-right:6px;"><i class="fa fa-toggle-on"></i> <span id="node-config-input-disabled-label"></span></button>
  74. <input type="checkbox" id="node-config-input-disabled" style="display:none;"/>
  75. <span id="node-config-input-disabled-info" data-i18n="[html]ui_tab.info.disabled" style="display:none;"></span>
  76. </div>
  77. <div class="form-row">
  78. <label for="node-config-input-hidden-btn"><i class="fa fa-eye-slash"></i> <span data-i18n="ui_tab.label.navmenu"></span></label>
  79. <button id="node-config-input-hidden-btn" class="editor-button" style="width:100px; margin-right:6px;"><i class="fa fa-toggle-on"></i> <span id="node-config-input-hidden-label"></span></button>
  80. <input type="checkbox" id="node-config-input-hidden" style="display:none;"/>
  81. <span id="node-config-input-hidden-info" data-i18n="[html]ui_tab.info.hidden" style="display:none;"></span>
  82. </div>
  83. <div class="form-tips" data-i18n="[html]ui_tab.tip"></div>
  84. </script>