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