select Iframe html tag about vvvebjs HOT 3 OPEN

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.

from vvvebjs.

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?

from vvvebjs.

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

from vvvebjs.