What do you think about this code to remove delete options in toolbar from children components embeed using data-sly-resource.
or you could remove this part of code : find('[data-type="Editable"]') and remove the delete option in the component
(function($) {
"use strict";
// title of parent component
var removeDeleteOptFromChildrensArr = ['TitleXXX', 'TitleYYY'];
$(window).on('load', function() {
if (Granite.author.ContentFrame) {
var removeDeleteOptionInToolbar = function () {
$.each(removeDeleteOptFromChildrensArr, function (i, value) {
$('[title="' + value + '"]').find('[data-type="Editable"]').off('click').on('click', function () {
var dataPath = $(this).attr('data-path');
setTimeout(function () {
$('button[title="Delete"][data-path="' + dataPath + '"]').hide();
}, dataPath);
});
});
};
var createMutationObserver = function () {
var targetNode = $('div.cq-Overlay--placeholder[data-type="Editable"][title="Layout Container [Root]"]');
var config = { attributes: true, childList: true, subtree: true };
var callback = function(mutationsList, observer) {
for (var mutation of mutationsList) {
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
removeDeleteOptionInToolbar();
}
}
};
var observer = new MutationObserver(callback);
observer.observe(targetNode.get(0), config);
}
Granite.author.loadPageInfo().then(function () {
setTimeout(function () {
createMutationObserver();
}, 500);
removeDeleteOptionInToolbar();
});
}
});
})($);
