DOM mutations example
<p> <ch5-button sendEventOnClick="trigger_1" label="Update to style 1"></ch5-button> <ch5-button sendEventOnClick="trigger_2" label="Update to style 2"></ch5-button> </p> <div class="b-red" data-ch5-appendstyle="data_ch5_appendstyle_signal_1"> DIV: Testing data-ch5-appendstyle </div> <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-appendstyle attr"></ch5-button> <ch5-button sendEventOnClick="trigger_3" label="Update style"></ch5-button> </p> <p> <ch5-button id="update" label="Update data-ch5-appendstyle attr"></ch5-button> <ch5-button sendEventOnClick="trigger_4" label="Update style using new attr"></ch5-button> </p> <p> <ch5-button id="remove" label="Remove el with data-ch5-appendstyle attr"></ch5-button> </p> <p> <ch5-button sendEventOnClick="trigger_5" label="Reset styles"></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-red'); newEl.setAttribute('id', 'new-el'); newEl.setAttribute('debug', ''); newEl.textContent = "DIV: Testing data-ch5-appendstyle and DOM mutations"; const hasAttr = newEl.hasAttribute('data-ch5-appendstyle'); if (hasAttr !== 'data_ch5_appendstyle_signal_2') { newEl.setAttribute('data-ch5-appendstyle', 'data_ch5_appendstyle_signal_2'); CrComLib.publishEvent('s', 'data_ch5_appendstyle_signal_2', null); } if (mutationsParentEl.querySelector('#new-el') === null) { mutationsParentEl.appendChild(newEl); } }); updateBtn.addEventListener('click', () => { const newEl = $('#new-el')[0]; if (newEl) { const hasAttr = newEl.hasAttribute('data-ch5-appendstyle'); if (hasAttr !== 'data_ch5_appendstyle_signal_3') { newEl.setAttribute('data-ch5-appendstyle', 'data_ch5_appendstyle_signal_3'); CrComLib.publishEvent('s', 'data_ch5_appendstyle_signal_3', null); } } }); removeBtn.addEventListener('click', () => { const newEl = $('#new-el')[0]; if (newEl) { mutationsParentEl.removeChild(newEl); } }); })(jQuery,CrComLib);
.b-red{ border:3px solid red; }