How to hide your UI mods in spectator mode

For quite many UI mods it doesn't make sense for them to be visible when the user is spectating (i.e. he was originally a spectator or has died). Such mods should then hide themselves.

One way to do it is to wrap the mod's HTML into Knockout's if/ifnot bindings on the model.isSpectator observable:

HTML:

<!-- ko ifnot: model.isSpectator -->
put your mod's html here
<!-- /ko -->

This method is used in live_game.html for the div_player_list_panel. The visible binding also does the job.

If you also want to hide your mod before the game has started, add a check for model.showLanding like this:

HTML:

<!-- ko if: !model.isSpectator() && !model.showLanding() -->
put your mod's html here
<!-- /ko -->

With the Floating Framework it's advisable to toggle visibility at the level of the root DIV, or else there will be an invisible DIV that can be dragged around and which will prevent your clicks from working. Here is how to do it:

Code:

createFloatingFrame('my_frame', 100, 100, {'offset': 'leftCenter', 'left': 0});
$('#my_frame').attr('data-bind', 'visible: !model.isSpectator() && !model.showLanding()');
$('#my_frame_content').append(loadHtml('coui://ui/mods/MyMod/template.html'));

(The above code conflicts with Floating Framework's frame settings until this issue is fixed.)

Nice post. And thanks for your pull request, it made it a little simpler.

I noticed that the Floating Framework requires some special handling. Currently there are lots of mods which hide themselves so that they leave invisible draggable frames lying around and preventing your clicks from working. I updated the OP.