DOM mutations example
<div class="alarm-system b-blue">
Security System mode:
<span class="alarm-status"
data-ch5-textcontent="security_system_mode_text"
data-ch5-appendclass="security_system_mode_class">
</span>
</div>
<p>
<ch5-button sendEventOnClick="trigger_1" label="Homeowner opens a door"></ch5-button>
<ch5-button sendEventOnClick="trigger_2" label="Homeowner enters the code"></ch5-button>
<ch5-button sendEventOnClick="trigger_6" label="Arm"></ch5-button>
</p>
<div id="mutations-parent" style="margin-top: 68px;">
<p><strong>DOM mutations example</strong></p>
<p>
<ch5-button id="add" label="Add new el with data-ch5-appendclass attr"></ch5-button>
</p>
<p>
<ch5-button id="update" label="Update data-ch5-appendclass attr"></ch5-button>
<span> Open console to see signal subscription updates (no arm, trigger, disarm data-ch5-appendclass signals set for this new value)</span>
</p>
<p>
<ch5-button id="remove" label="Remove el with data-ch5-appendclass attr"></ch5-button>
</p>
<p>
<ch5-button sendEventOnClick="trigger_3" label="Arm"></ch5-button>
<ch5-button sendEventOnClick="trigger_4" label="Homeowner opens a door"></ch5-button>
<ch5-button sendEventOnClick="trigger_5" label="Homeowner enters the code"></ch5-button>
</p>
</div>
(function($, CrComLib){
const mutationsParentEl = $('#mutations-parent')[0];
const addBtn = $('#add')[0];
const updateBtn = $('#update')[0];
const removeBtn = $('#remove')[0];
addBtn.addEventListener('click', () => {
const newEl = document.createElement('div');
newEl.classList.add('b-blue');
newEl.setAttribute('id', 'new-el');
newEl.classList.add('alarm-system')
newEl.innerHTML = 'Security System mode: ';
const alarmStatusEl = document.createElement('span');
alarmStatusEl.setAttribute('id', 'status-el');
alarmStatusEl.setAttribute('debug', '');
alarmStatusEl.setAttribute('data-ch5-textcontent', 'security_system_mode_text_2');
alarmStatusEl.setAttribute('data-ch5-appendclass', 'security_system_mode_class_2');
alarmStatusEl.classList.add('alarm-status');
newEl.appendChild(alarmStatusEl);
if (mutationsParentEl.querySelector('#new-el') === null) {
mutationsParentEl.appendChild(newEl);
}
});
updateBtn.addEventListener('click', () => {
const statusEl = $('#status-el')[0];
if (statusEl) {
statusEl.setAttribute('data-ch5-appendclass', 'security_system_mode_class_3');
}
});
removeBtn.addEventListener('click', () => {
const newEl = $('#new-el')[0];
if (newEl) {
mutationsParentEl.removeChild(newEl);
}
});
})(jQuery,CrComLib);
.b-blue {
border:3px solid blue;
}
.alarm-system {
margin-bottom: 24px;
padding: 16px;
}
.alarm-status {
font-weight: bold;
margin-left: 24px;
}
.blinking_red {
color: red;
animation: blinker 1s linear infinite;
}
.blinking_blue {
color: blue;
animation: blinker 1s linear infinite;
}
.disarmed {
color: green;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
.black {
color: black;
}