Element type restriction and options with duplicate content
Is it possible to restrict an element's/dropzone's children to an element of a certain name/type?
i.e.,
<accordion data-fred-name="accordion" data-fred-restrict="accordion_item">
{# only accordion items are allowed here #}
</accordion>
Along with that, is there a way to either, include another element inside the markup of an element, or have FRED recognize markup within an element as a particular element?
Also, is there a way to import an option in an incomplete option set multiple times with unique names, instead of having to create many options with the same settings? Even just a chunk of sorts would be helpful.
i.e.,
{
"name": "colors"
"type": "select"
"label": "Colors"
"options": {
"blue":"Blue",
"green":"Green",
"red":"Red"
}
}
imported as
{
"name": "background_color"
"type": "select"
"label": "Background Color"
"import": "colors"
},
{
"name": "overlay_color"
"type": "select"
"label": "Overlay Color"
"import": "colors"
},
{
"name": "text_color"
"type": "select"
"label": "Text Color"
"import": "colors"
},
{
"name": "button_color"
"type": "select"
"label": "Button Color"
"import": "colors"
}
The same question popped up for me when i was playing around with nested drop zones.
One idea that came to mind was to use a data-fred-dropitems attribute with the JS events to fiddle with the content but somehow this messes up the saved content (maybe has internal state?)
<script>
document.body.addEventListener("FredElementDrop", function(evt){
const fredEl = evt.detail.fredEl;
console.log('FredElementDrop received', fredEl);
let allowedDropItems = fredEl.dropzone.el.dataset.fredDropitems;
if (allowedDropItems) {
console.log('Allowed DropItems', allowedDropItems);
allowedDropItems = allowedDropItems.split(',');
if (allowedDropItems.length > 0 && !allowedDropItems.includes(fredEl.title)) {
console.log(`Element [${fredEl.title}] not allowed in this dropzone`, fredEl);
fredEl.wrapper.remove();
}
}
});
</script>