diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/toggleButton.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/toggleButton.js index 398d35c85..05ed8eb65 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/toggleButton.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/toggleButton.js @@ -37,8 +37,8 @@ invertState = this.options.invertState; } var baseClass = this.options.baseClass || "red-ui-button"; - var enabledIcon = this.options.enabledIcon || "fa-check-square-o"; - var disabledIcon = this.options.disabledIcon || "fa-square-o"; + var enabledIcon = this.options.hasOwnProperty('enabledIcon')?this.options.enabledIcon : "fa-check-square-o"; + var disabledIcon = this.options.hasOwnProperty('disabledIcon')?this.options.disabledIcon : "fa-square-o"; var enabledLabel = this.options.hasOwnProperty('enabledLabel') ? this.options.enabledLabel : RED._("editor:workspace.enabled"); var disabledLabel = this.options.hasOwnProperty('disabledLabel') ? this.options.disabledLabel : RED._("editor:workspace.disabled"); @@ -46,25 +46,35 @@ this.element.on("focus", function() { that.button.focus(); }); - this.button = $(''); + this.button = $(''); + this.buttonLabel = $("").appendTo(this.button); + if (this.options.class) { this.button.addClass(this.options.class) } this.element.after(this.button); - this.buttonIcon = this.button.find("i"); - this.buttonLabel = this.button.find("span"); + + if (enabledIcon && disabledIcon) { + this.buttonIcon = $('').prependTo(this.button); + } // Quick hack to find the maximum width of the button this.button.addClass("selected"); - this.buttonIcon.addClass(enabledIcon); + if (this.buttonIcon) { + this.buttonIcon.addClass(enabledIcon); + } this.buttonLabel.text(enabledLabel); var width = this.button.width(); this.button.removeClass("selected"); - this.buttonIcon.removeClass(enabledIcon); - that.buttonIcon.addClass(disabledIcon); + if (this.buttonIcon) { + this.buttonIcon.removeClass(enabledIcon); + that.buttonIcon.addClass(disabledIcon); + } that.buttonLabel.text(disabledLabel); width = Math.max(width,this.button.width()); - this.buttonIcon.removeClass(disabledIcon); + if (this.buttonIcon) { + this.buttonIcon.removeClass(disabledIcon); + } // Fix the width of the button so it doesn't jump around when toggled if (width > 0) { @@ -73,7 +83,7 @@ this.button.on("click",function(e) { e.stopPropagation(); - if (that.buttonIcon.hasClass(disabledIcon)) { + if (!that.state) { that.element.prop("checked",!invertState); } else { that.element.prop("checked",invertState); @@ -84,13 +94,19 @@ this.element.on("change", function(e) { if ($(this).prop("checked") !== invertState) { that.button.addClass("selected"); - that.buttonIcon.addClass(enabledIcon); - that.buttonIcon.removeClass(disabledIcon); + that.state = true; + if (that.buttonIcon) { + that.buttonIcon.addClass(enabledIcon); + that.buttonIcon.removeClass(disabledIcon); + } that.buttonLabel.text(enabledLabel); } else { that.button.removeClass("selected"); - that.buttonIcon.addClass(disabledIcon); - that.buttonIcon.removeClass(enabledIcon); + that.state = false; + if (that.buttonIcon) { + that.buttonIcon.addClass(disabledIcon); + that.buttonIcon.removeClass(enabledIcon); + } that.buttonLabel.text(disabledLabel); } })