Ui_template mvc and scope of context/flow/global stores

Dashboard
101

Although to you that may be simple (switching in/out spans or divs) I do not know enough to design new code using such techniques.
I follow:

 $icon.removeClass(oldIcon).addClass(newIcon);  // fontawesome

but hesitate with more complex logic.

Maybe just write the code so that spans are always there and icons are optional.

That way the text of the span would be an empty string if not required.

102

I understand your point that the controller can manipulate the elements in place of the css.

Better performance would come from a pure css solution in my opinion.

103

If you have thousands of such elements then may be you feel any performance difference.
But of course. If your button type is 'checkbox' and if you don't make any function to manipulate that type of button, all can be done at CSS. If you preferred to do that and it works for you, it's all OK.

104

Its only OK if I can get this structure to work with your controller.

Just to reiterate how I came across the structure which works for divs or spans. This structure was the only one out of dozens that I tried over the course of last week.

<md-button class="md-button ck-button on off small"
        data-payload="1"
        data-state="1"
        data-buttontype='checkbox'
        data-radiogroup='group1'
        data-topic="11">
        <label class="ck-switch">
            <input type="checkbox" unchecked>
            <span style="background-color:#097479);" class="on">radio<br>group1<br><br>btn 11<br>with a lot more text fun<br>on</span>
            <span style="background-color:#003333;" class="off">radio<br>group1<br><br>btn 11<br>off</span>
        </label>
</md-button>

To control the rendering all I need to do is set the checkbox value to true or false (which I know how to do from within setButtonState()).

I can successfully change the values in this template using:

    function processCommand($btn, payload){
        //first check payload is correct format...
        //{"selector":".remote-button3x-on","command":"setContent","value":"HELLO"}
        if(!payload || !payload.command || !payload.value){
            console.log("Cannot process command. Expected a payload object with .command and .value. ")
        }
        var cmd = payload.command.trim();
        switch(cmd){
            case "addClass":
                $btn.addClass(payload.value); //this calls the jquery function by name (specified in .command) on the $btn and passes in .value
                break;
            case "toggleClass":
                $btn.toggleClass(payload.value); //this calls the jquery function by name (specified in .command) on the $btn and passes in .value
                break;
             case "setColour":
                var spanSelector = payload.selector.trim();
                var $span = $btn.find(spanSelector);//get the span
                console.log("$spanBefore=" + $span.text() + " $spanBefore=" + payload.value);

                $span.css({"background-color": payload.value});
                
//$btn.text("Hello world!");
              //  $btn.toggleClass(payload.value); //this calls the jquery function by name (specified in .command) on the $btn and passes in .value
                break;
             case "setContent":
                var spanSelector = payload.selector.trim();
                var $span = $btn.find(spanSelector);//get the span
                console.log("$spanBefore=" + $span.text() + " $spanBefore=" + payload.value);

                $span.text(payload.value);
                
//$btn.text("Hello world!");
              //  $btn.toggleClass(payload.value); //this calls the jquery function by name (specified in .command) on the $btn and passes in .value
                break;
            case "removeClass":
                $btn.removeClass(payload.value); //this calls the jquery function by name (specified in .command) on the $btn and passes in .value
                break;
            default:
                console.log("command '" + payload.command + "' is not supported")
        }
    }

What more is missing ?

105

I accept that data-state is probably not required but it is not a big cause for concern.

106

What should happen if checkbox state is toggled?

107

At the moment if checked the span/div with class off is hidden and the span/div with class on is visible.

When unchecked the reverse is true.

108

Although I have a jsfiddle using a single span with no input checkbox or additional wrappers. The text renders perfect but not when it is nested in md. The extra wrappers seem necessary in order to insulate the css.
http://jsfiddle.net/c2e8rykt/2/

Here is the fiddle for the pure css toggle (ck-button is equivolent to remote-button):
http://jsfiddle.net/c2e8rykt/4/

109

So make your button without wrapping it into md-button. You need probably deal with pointer-events and cursor ant may be some visual properties for the div. And you will lose the ripple animations from md-button.

110

I did not know that was possible and so definately do not know how to do it !

Were the fiddle examples any good ?

111

Almost everything you can fiddle is valid for node red template.
If it is what you are after, go and implement.

112

Sorry but I do not have a clue how to start. I can understand the fiddle css.

I just do not have a clue how to create a button the way you suggest ?

This where the big picture is missing for me. I just cannot put the js code into a ui_template and control it with another ui_template.

Nothing I try seems to work.

How do you make a button out of this CSS:

.remote-button.onoff {
  height: 100%;
  opacity: 1;
  color: white;
}

.remote-button {
  border-radius: 10px;
  height: 100%;
  overflow: hidden;
}

.remote-button:hover {
  border-radius: 10px;
  border: 1px solid red;
}

.remote-button span {
  border-radius: 10px;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  display: flex;
  align-items: center;
  justify-content: center;
}

and this html:

<div style="height: 200px; width: 100px;" class="remote-button">
        <span style="color: white; background-color: #009900;" class="onoff">Node red line that may overflow the 1234 width of the button<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off</span>
</div>

It should look like:
image

How simple is that ?

113

Start with getting rid of md-button. You will lose all what was given by md-button class. So you'll need to make css for ck-button to make it look like button first. That will be quite of styling. As you still can have data parameters, you can control it with same functionality but of course, some additions needed to make proper decisions about internal elements of your new button.

<div class="ck-button on off small"
        data-payload="1"
        data-state="1"
        data-buttontype='checkbox'
        data-radiogroup='group1'
        data-topic="11">
        <label class="ck-switch">
            <input type="checkbox" unchecked>
            <span style="background-color:#097479);" class="on">radio<br>group1<br><br>btn 11<br>with a lot more text fun<br>on</span>
            <span style="background-color:#003333;" class="off">radio<br>group1<br><br>btn 11<br>off</span>
        </label>
</div>

[/quote]

114

My current css styles ck-button and remote-button the same.

I am all for bear metal when it comes to css but you are telling me to start again from scratch after a week in control hell folowed by a week in css hell.

I am unable to do what you suggest. It is too complicated when one cannot see the big picture.

Can you show an example of a non md button using the css and html above ?

If it is not trivial to you it will be impossible to me.

115

By the way will a non md button still play nice within the dashboard ?

If not then it is a non starter.

116

I'd like to have some other suggestions with no work needed to be done but sadly there isn't any. If you need to have certain structure, you'll need to create it. That's why hand made things cost much more than fabricated stuff.

117

By that do you mean that the task is not trivial to you ?

118

I make custom things as my daily job.

119

I appreciate your help but you did not answer my question.

It this simple example trivial to you or not ?

120

Well I don't think so. I can't have such attitude.