modxcms / fred

The friendly front-end editor for visual, drag-and-drop content building in MODX CMS
https://fred.modx.com
MIT License
57 stars 25 forks source link

Element type restriction and options with duplicate content #443

Open Jsewill opened 1 year ago

Jsewill commented 1 year ago

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"
}
roele commented 7 months ago

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>