92 lines
4.3 KiB
HTML
92 lines
4.3 KiB
HTML
|
<script type="text/javascript">
|
||
|
|
// convert to i18 text
|
||
|
|
function c_ui_tab(x) {
|
||
|
|
return RED._("node-red-dashboard/ui_tab:ui_tab."+x);
|
||
|
|
}
|
||
|
|
|
||
|
|
RED.nodes.registerType('ui_tab',{
|
||
|
|
category: 'config',
|
||
|
|
defaults: {
|
||
|
|
name: {value: c_ui_tab("label.home")},
|
||
|
|
icon: {value: 'dashboard'},
|
||
|
|
order: {value: 0},
|
||
|
|
disabled: {value: false},
|
||
|
|
hidden: {value: false}
|
||
|
|
},
|
||
|
|
paletteLabel: 'dashboard tab',
|
||
|
|
label: function() { return this.name || c_ui_tab("label.tab"); },
|
||
|
|
sort: function(A,B) {
|
||
|
|
return A.order - B.order;
|
||
|
|
},
|
||
|
|
oneditprepare: function() {
|
||
|
|
$("#node-config-input-disabled-btn").on("click", function(e) {
|
||
|
|
var i = $(this).find("i");
|
||
|
|
var active = i.hasClass("fa-toggle-on");
|
||
|
|
var newCls = "fa fa-toggle-" + (active ? "off" : "on");
|
||
|
|
i.attr("class", newCls);
|
||
|
|
$("#node-config-input-disabled").prop('checked',active);
|
||
|
|
|
||
|
|
var newTxt = c_ui_tab(active ? "label.disabled" : "label.enabled");
|
||
|
|
$("#node-config-input-disabled-label").text(newTxt);
|
||
|
|
|
||
|
|
var info = $("#node-config-input-disabled-info");
|
||
|
|
var done = active ? info.show() : info.hide();
|
||
|
|
});
|
||
|
|
if (this.disabled) {
|
||
|
|
$("#node-config-input-disabled-btn").click();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$("#node-config-input-disabled-label").text(c_ui_tab("label.enabled"));
|
||
|
|
}
|
||
|
|
|
||
|
|
$("#node-config-input-hidden-btn").on("click", function(e) {
|
||
|
|
var i = $(this).find("i");
|
||
|
|
var active = i.hasClass("fa-toggle-on");
|
||
|
|
var newCls = "fa fa-toggle-" + (active ? "off" : "on");
|
||
|
|
i.attr("class", newCls);
|
||
|
|
$("#node-config-input-hidden").prop('checked',active);
|
||
|
|
|
||
|
|
var newTxt = c_ui_tab(active ? "label.hidden" : "label.visible");
|
||
|
|
$("#node-config-input-hidden-label").text(newTxt);
|
||
|
|
|
||
|
|
var info = $("#node-config-input-hidden-info");
|
||
|
|
var done = active ? info.show() : info.hide();
|
||
|
|
});
|
||
|
|
if (this.hidden) {
|
||
|
|
$("#node-config-input-hidden-btn").click();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$("#node-config-input-hidden-label").text(c_ui_tab("label.visible"));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
oneditsave: function() {
|
||
|
|
this.disabled = $("#node-config-input-disabled").prop("checked");
|
||
|
|
this.hidden = $("#node-config-input-hidden").prop("checked");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script type="text/html" data-template-name="ui_tab">
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="node-config-input-name"><i class="fa fa-tag"></i> <span data-i18n="ui_tab.label.name"></span></label>
|
||
|
|
<input type="text" id="node-config-input-name">
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="node-config-input-icon"><i class="fa fa-file-image-o"></i> <span data-i18n="ui_tab.label.icon"></span></label>
|
||
|
|
<input type="text" id="node-config-input-icon">
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="node-config-input-disabled-btn"><i class="fa fa-ban"></i> <span data-i18n="ui_tab.label.state"></span></label>
|
||
|
|
<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>
|
||
|
|
<input type="checkbox" id="node-config-input-disabled" style="display:none;"/>
|
||
|
|
<span id="node-config-input-disabled-info" data-i18n="[html]ui_tab.info.disabled" style="display:none;"></span>
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="node-config-input-hidden-btn"><i class="fa fa-eye-slash"></i> <span data-i18n="ui_tab.label.navmenu"></span></label>
|
||
|
|
<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>
|
||
|
|
<input type="checkbox" id="node-config-input-hidden" style="display:none;"/>
|
||
|
|
<span id="node-config-input-hidden-info" data-i18n="[html]ui_tab.info.hidden" style="display:none;"></span>
|
||
|
|
</div>
|
||
|
|
<div class="form-tips" data-i18n="[html]ui_tab.tip"></div>
|
||
|
|
</script>
|