Crestron Components Lib - Showcase App

data-ch5-show, data-ch5-noshow-type

data-ch5-show

In the following example, multiple HTML elements are given the same signal on data-ch5-show and different data-ch5-no-show-type values.

When clicking the first button (Toggle the data-ch5-show-signal), the signal named trigger_data_ch5_show_1 will change and, according to the scenario JSON, it will also toggle the data_ch5_show_1 signal that controls the visibility of the elements

When the data-ch5-no-show-type is set to 'remove', the element is detached from DOM, but references to its parent and next sibling are kept. The element continues to listen to the signals (it is not unsubscribed) so that it can be attached again to the DOM in case the show signal changes to true.

<ch5-button sendEventOnClick="trigger_data_ch5_show_1" label="Toggle visibility of standard html elements"
						receiveStateSelected="data_ch5_show_1"></ch5-button>

<div class="type-section">DIV</div>
<p class="case-section">ch5-noshow-type="remove"</p>
<div data-ch5-show="data_ch5_show_1" data-ch5-noshow-type="remove">
		DIV: Testing data-ch5-show and noshow-type-visibility set to remove
</div>
<hr>
<p class="case-section">ch5-noshow-type="visibility"</p>
<div data-ch5-show="data_ch5_show_1" data-ch5-noshow-type="visibility">
		DIV: Testing data-ch5-show and noshow-type-visibility set to visibility
</div>
<hr>
<p class="case-section">ch5-noshow-type="display"</p>
<div data-ch5-show="data_ch5_show_1" data-ch5-noshow-type="display">
		DIV: Testing data-ch5-show and noshow-type-visibility set to display
</div>

<div class="type-section">P</div>

<p class="case-section">ch5-noshow-type="visibility"</p>
<p data-ch5-show="data_ch5_show_1" data-ch5-noshow-type="visibility">
		P: Testing data-ch5-show and noshow-type-visibility set to visibility
</p>
<hr>

<p class="case-section">ch5-noshow-type="display"</p>
<p data-ch5-show="data_ch5_show_1" data-ch5-noshow-type="display">
		P: Testing data-ch5-show and noshow-type-visibility set to display
</p>
<hr>

<p class="case-section">ch5-noshow-type="remove"</p>
<p data-ch5-show="data_ch5_show_1" data-ch5-noshow-type="remove">
		P: Testing data-ch5-show and noshow-type-visibility set to remove
</p>

<div class="type-section">H#</div>

<p class="case-section">ch5-noshow-type="remove"</p>
<h1 data-ch5-show="data_ch5_show_1" data-ch5-noshow-type="remove">
		H1: Testing data-ch5-show and noshow-type-visibility set to remove
</h1>
<hr>

<p class="case-section">ch5-noshow-type="visibility"</p>
<h2 data-ch5-show="data_ch5_show_1" data-ch5-noshow-type="visibility">
		H2: Testing data-ch5-show and noshow-type-visibility set to visibility
</h2>
<hr>

<p class="case-section">ch5-noshow-type="display"</p>
<h3 data-ch5-show="data_ch5_show_1" data-ch5-noshow-type="display">
		H3: Testing data-ch5-show and noshow-type-visibility set to display
</h3>
<hr>

<p class="case-section">ch5-noshow-type="remove"</p>
<h4 data-ch5-show="data_ch5_show_1" data-ch5-noshow-type="remove">
		H4: Testing data-ch5-show and noshow-type-visibility set to remove
</h4>
<hr>

<p class="case-section">ch5-noshow-type="remove"</p>
<h5 data-ch5-show="data_ch5_show_1" data-ch5-noshow-type="remove">
		H5: Testing data-ch5-show and noshow-type-visibility set to remove
</h5>
<hr>

<p class="case-section">ch5-noshow-type="remove"</p>
<h6 data-ch5-show="data_ch5_show_1" data-ch5-noshow-type="remove">
		H6: Testing data-ch5-show and noshow-type-visibility set to remove
</h6>

<div class="type-section">Misc</div>

<p class="case-section">ch5-noshow-type not defined</p>
<img data-ch5-show="data_ch5_show_1" src="http://via.placeholder.com/350x150">
DIV

ch5-noshow-type="remove"

DIV: Testing data-ch5-show and noshow-type-visibility set to remove

ch5-noshow-type="visibility"

DIV: Testing data-ch5-show and noshow-type-visibility set to visibility

ch5-noshow-type="display"

DIV: Testing data-ch5-show and noshow-type-visibility set to display
P

ch5-noshow-type="visibility"

P: Testing data-ch5-show and noshow-type-visibility set to visibility


ch5-noshow-type="display"

P: Testing data-ch5-show and noshow-type-visibility set to display


ch5-noshow-type="remove"

P: Testing data-ch5-show and noshow-type-visibility set to remove

H#

ch5-noshow-type="remove"

H1: Testing data-ch5-show and noshow-type-visibility set to remove


ch5-noshow-type="visibility"

H2: Testing data-ch5-show and noshow-type-visibility set to visibility


ch5-noshow-type="display"

H3: Testing data-ch5-show and noshow-type-visibility set to display


ch5-noshow-type="remove"

H4: Testing data-ch5-show and noshow-type-visibility set to remove


ch5-noshow-type="remove"

H5: Testing data-ch5-show and noshow-type-visibility set to remove

ch5-noshow-type="remove"

H6: Testing data-ch5-show and noshow-type-visibility set to remove
Misc

ch5-noshow-type not defined

Direct DOM changes to elements with data-ch5-show attribute

<div>
		<p>Actions that affect the red bordered div</p>
		<p>
				Clicking this will toggle the value of both data_ch5_show_2_1 and data_ch5_show_2_2. See the
				Scenario JSON
				<ch5-button sendEventOnClick="trigger_data_ch5_show_2" label="Toggle data-ch5-show"></ch5-button>
		</p>
		<p>
				Clicking this will toggle the value of data_ch5_show_2_1. See the Scenario JSON
				<ch5-button sendEventOnClick="trigger_data_ch5_show_2a" label="Toggle data-ch5-show"></ch5-button>
		</p>
		<p>
				Clicking this will toggle the value of data_ch5_show_2_2. See the Scenario JSON
				<ch5-button sendEventOnClick="trigger_data_ch5_show_2b" label="Toggle data-ch5-show"></ch5-button>
		</p>

		<p> Clicking this will change the value of the data-ch5-show attribute ( It will change the name of the signal)
				to <b>data_ch5_show_2_2</b>
				<button id="change-to-ch5-show-3"
						class="button is-info"
						type="button">Button1</button>
		</p>
		<p>
				Clicking this will remove the data-ch5-show attribute
				<button id="remove-ch5-show"
						class="button is-info"
						type="button">Button2
				</button>
		</p>
		<p>Clicking this will add/change the data-ch5-show attribute to <b>data_ch5_show_2_1</b>
				<button id="add-ch5-show"
						class="button is-info"
						type="button">Button3
				</button>
		</p>
		<p>Clicking this will remove the element from the DOM. Since the removal is not a consequence of a "show signal" change,
				the element will no longer listen for signal changes. In this case it unsubscribes from the signal.
				<button id="rem-ch5-show-el"
							class="button is-info"
							type="button">Remove elems with data-ch5-show attribute
				</button>
		</p>

</div>
<hr>
<div style="border-top:2px dotted green; margin: 24px 0;"></div>

<div class="custom-dom-changes" data-ch5-show="data_ch5_show_2_1" style="border:1px solid red" data-ch5-noshow-type="remove">
		data_ch5_show_2_1: DIV: Testing data-ch5-show and noshow-type-visibility set to remove
</div>
<div class="custom-dom-changes" data-ch5-show="data_ch5_show_2_2" style="border:1px solid blue" data-ch5-noshow-type="remove">
		data_ch5_show_2_2: DIV: Testing data-ch5-show and noshow-type-visibility set to remove
</div>

Actions that affect the red bordered div

Clicking this will toggle the value of both data_ch5_show_2_1 and data_ch5_show_2_2. See the Scenario JSON

Clicking this will toggle the value of data_ch5_show_2_1. See the Scenario JSON

Clicking this will toggle the value of data_ch5_show_2_2. See the Scenario JSON

Clicking this will change the value of the data-ch5-show attribute ( It will change the name of the signal) to data_ch5_show_2_2

Clicking this will remove the data-ch5-show attribute

Clicking this will add/change the data-ch5-show attribute to data_ch5_show_2_1

Clicking this will remove the element from the DOM. Since the removal is not a consequence of a "show signal" change, the element will no longer listen for signal changes. In this case it unsubscribes from the signal.


data_ch5_show_2_1: DIV: Testing data-ch5-show and noshow-type-visibility set to remove
data_ch5_show_2_2: DIV: Testing data-ch5-show and noshow-type-visibility set to remove