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