Crestron Components Lib - Showcase App

data-ch5-show, data-ch5-showpulse

data-ch5-showpulse

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

When clicking the first button (Trigger visibility of standard HTML elements), the signal named trigger_data_ch5_show_1 will change and it will toggle the data_ch5_show_1 signal that controls the visibility of the elements.

When clicking the second button (Trigger hide of standard HTML elements) the signal named trigger_data_ch5_hide_1 will change and it will 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 the DOM, but references to its parent and next sibling are kept.

DIV

ch5-noshow-type="remove"

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

ch5-noshow-type="visibility"

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

ch5-noshow-type="display"

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

ch5-noshow-type="visibility"

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


ch5-noshow-type="display"

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


ch5-noshow-type="remove"

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

H#

ch5-noshow-type="remove"

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


ch5-noshow-type="visibility"

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


ch5-noshow-type="display"

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


ch5-noshow-type="remove"

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


ch5-noshow-type="remove"

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

ch5-noshow-type="remove"

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

ch5-noshow-type not defined

<ch5-button sendEventOnClick="trigger_data_ch5_show_1"
            label="Trigger visibility of standard HTML elements"></ch5-button>
<ch5-button sendEventOnClick="trigger_data_ch5_hide_1" label="Trigger hide of standard HTML elements"></ch5-button>

<div class="type-section">DIV</div>
<p class="case-section">ch5-noshow-type="remove"</p>
<div data-ch5-showpulse="trigger_data_ch5_show_1" data-ch5-hidepulse="trigger_data_ch5_hide_1"
     data-ch5-noshow-type="remove">
    DIV: Testing data-ch5-showpulse and noshow-type-visibility set to remove
</div>
<hr>
<p class="case-section">ch5-noshow-type="visibility"</p>
<div data-ch5-showpulse="trigger_data_ch5_show_1" data-ch5-hidepulse="trigger_data_ch5_hide_1"
     data-ch5-noshow-type="visibility" debug>
    DIV: Testing data-ch5-showpulse and noshow-type-visibility set to visibility
</div>
<hr>
<p class="case-section">ch5-noshow-type="display"</p>
<div data-ch5-showpulse="trigger_data_ch5_show_1" data-ch5-hidepulse="trigger_data_ch5_hide_1"
     data-ch5-noshow-type="display">
    DIV: Testing data-ch5-showpulse 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-showpulse="trigger_data_ch5_show_1" data-ch5-hidepulse="trigger_data_ch5_hide_1"
   data-ch5-noshow-type="visibility">
    P: Testing data-ch5-showpulse and noshow-type-visibility set to visibility
</p>
<hr>

<p class="case-section">ch5-noshow-type="display"</p>
<p data-ch5-showpulse="trigger_data_ch5_show_1" data-ch5-hidepulse="trigger_data_ch5_hide_1"
   data-ch5-noshow-type="display">
    P: Testing data-ch5-showpulse and noshow-type-visibility set to display
</p>
<hr>

<p class="case-section">ch5-noshow-type="remove"</p>
<p data-ch5-showpulse="trigger_data_ch5_show_1" data-ch5-hidepulse="trigger_data_ch5_hide_1"
   data-ch5-noshow-type="remove">
    P: Testing data-ch5-showpulse 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-showpulse="trigger_data_ch5_show_1" data-ch5-hidepulse="trigger_data_ch5_hide_1"
    data-ch5-noshow-type="remove">
    H1: Testing data-ch5-showpulse and noshow-type-visibility set to remove
</h1>
<hr>

<p class="case-section">ch5-noshow-type="visibility"</p>
<h2 data-ch5-showpulse="trigger_data_ch5_show_1" data-ch5-hidepulse="trigger_data_ch5_hide_1"
    data-ch5-noshow-type="visibility">
    H2: Testing data-ch5-showpulse and noshow-type-visibility set to visibility
</h2>
<hr>

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

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

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

<p class="case-section">ch5-noshow-type="remove"</p>
<h6 data-ch5-showpulse="trigger_data_ch5_show_1" data-ch5-hidepulse="trigger_data_ch5_hide_1"
    data-ch5-noshow-type="remove">
    H6: Testing data-ch5-showpulse 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-showpulse="trigger_data_ch5_show_1" data-ch5-hidepulse="trigger_data_ch5_hide_1"
     src="http://via.placeholder.com/350x150">