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);