ch5-noshow-type="remove"
ch5-noshow-type="visibility"
ch5-noshow-type="display"
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
ch5-noshow-type="remove"
ch5-noshow-type="visibility"
ch5-noshow-type="display"
ch5-noshow-type="remove"
ch5-noshow-type="remove"
ch5-noshow-type="remove"
ch5-noshow-type not defined
<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">
.type-section{ border: 2px solid green; margin: 24px 0; } .case-section{ border: 1px dotted green; }
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 singal changes. In this case it unsubscribes from the signal.
<div class=""> <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 singal 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>
(function($, crLib){ $('#change-to-ch5-show-3').on('click', () => { $('.custom-dom-changes').each((i, e) => { e.setAttribute('data-ch5-show', 'data_ch5_show_2_2'); }); }); $('#remove-ch5-show').on('click', () => { $('.custom-dom-changes').each((i, e) => { e.removeAttribute('data-ch5-show'); }); }); $('#add-ch5-show').on('click', () => { $('.custom-dom-changes').each((i, e) => { e.setAttribute('data-ch5-show', 'data_ch5_show_2_1'); }); }); $('#rem-ch5-show-el').on('click', () => { $('.custom-dom-changes').each((i, e) => { e.remove(); }); }); })(jQuery,CrComLib);