select Iframe html tag

[Aremu-damilare]

The current editor doesn't highlight or select and display iframe component properties, It does not seen to notice the <iframe> element.

[givanz]

Hi

This happens because browser security does not allow iframe mouse events to bubble up.

The easiest solution to avoid ugly hacks is to wrap the iframe and use the wrapper to select and control the element using the child property.

<div data-component-iframe>
	<iframe src="https://www.vvveb.com" width="320" height="240"></iframe>
</div>

Vvveb.Components.extend("_base", "html/iframe", {
    attributes: ["data-component-iframe"],
    name: "Iframe",
    image: "icons/file.svg",
    html: '<div data-component-iframe><iframe src="https://www.vvveb.com" width="320" height="240"></iframe></div>',
	properties: [{
        name: "Src",
        key: "src",
        htmlAttr: "src",
        child:"iframe",
        inputtype: TextInput
    }, {
        name: "Width",
        key: "width",
        htmlAttr: "width",
        child:"iframe",
        inputtype: TextInput
    }, {
        name: "Height",
        key: "height",
        htmlAttr: "height",
        child:"iframe",
        inputtype: TextInput
	}]	
});

I added a new iframe component using this approach in the last commit 56aea4f.

[Aremu-damilare]

Hi

This happens because browser security does not allow iframe mouse events to bubble up.

The easiest solution to avoid ugly hacks is to wrap the iframe and use the wrapper to select and control the element using the child property.

<div data-component-iframe>
	<iframe src="https://www.vvveb.com" width="320" height="240"></iframe>
</div>

Vvveb.Components.extend("_base", "html/iframe", {
    attributes: ["data-component-iframe"],
    name: "Iframe",
    image: "icons/file.svg",
    html: '<div data-component-iframe><iframe src="https://www.vvveb.com" width="320" height="240"></iframe></div>',
	properties: [{
        name: "Src",
        key: "src",
        htmlAttr: "src",
        child:"iframe",
        inputtype: TextInput
    }, {
        name: "Width",
        key: "width",
        htmlAttr: "width",
        child:"iframe",
        inputtype: TextInput
    }, {
        name: "Height",
        key: "height",
        htmlAttr: "height",
        child:"iframe",
        inputtype: TextInput
	}]	
});

I added a new iframe component using this approach in the last commit 56aea4f.

Thanks, I already did that.

I added nodes: ["iframe",] without this <div data-component-iframe></div> and NumberInput. I have also been studying the logics.

I am a web developer, I wish to add a countdown timer to vvvweb as a way of showing appreciation, I will take my time.

What do you think?

[givanz]

I am a web developer, I wish to add a countdown timer to vvvweb as a way of showing appreciation, I will take my time.

Sure, contributions are welcome.

Regarding the counter the only issue I see is the js dependency, currently the components don't have js dependency management, where is the case this is done manually like here https://github.com/givanz/VvvebJs/blob/master/libs/builder/components-widgets.js#L679-L690