Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Element type restriction and options with duplicate content #443

Open
Jsewill opened this issue Sep 2, 2022 · 1 comment
Open

Element type restriction and options with duplicate content #443

Jsewill opened this issue Sep 2, 2022 · 1 comment

Comments

@Jsewill
Copy link
Contributor

Jsewill commented Sep 2, 2022

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
Copy link

roele commented Dec 3, 2023

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants