Open Aremu-damilare opened 10 months ago
The current editor doesn't highlight or select and display iframe component properties, It does not seen to notice the element.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/givanz"><img src="https://avatars.githubusercontent.com/u/302738?v=4" />givanz</a> commented <strong> 10 months ago</strong> </div> <div class="markdown-body"> <p>Hi</p> <p>This happens because browser security does not allow iframe mouse events to bubble up.</p> <p>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.</p> <pre><code class="language-html"><div data-component-iframe> <iframe src="https://www.vvveb.com" width="320" height="240"></iframe> </div></code></pre> <pre><code class="language-js">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 }] });</code></pre> <p>I added a new iframe component using this approach in the last commit <a href="https://github.com/givanz/VvvebJs/commit/56aea4fafb593b27f11847abc73fc8d7665b7883">https://github.com/givanz/VvvebJs/commit/56aea4fafb593b27f11847abc73fc8d7665b7883</a>.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Aremu-damilare"><img src="https://avatars.githubusercontent.com/u/36973562?v=4" />Aremu-damilare</a> commented <strong> 10 months ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Hi</p> <p>This happens because browser security does not allow iframe mouse events to bubble up.</p> <p>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.</p> <pre><code><div data-component-iframe> <iframe src="https://www.vvveb.com" width="320" height="240"></iframe> </div></code></pre> <pre><code class="language-js">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 }] });</code></pre> <p>I added a new iframe component using this approach in the last commit <a href="https://github.com/givanz/VvvebJs/commit/56aea4fafb593b27f11847abc73fc8d7665b7883">56aea4f</a>.</p> </blockquote> <p>Thanks, I already did that.</p> <p>I added <code>nodes: ["iframe",]</code> without this <code><div data-component-iframe></div></code> and <code>NumberInput</code>. I have also been studying the logics.</p> <p>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.</p> <p>What do you think?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/givanz"><img src="https://avatars.githubusercontent.com/u/302738?v=4" />givanz</a> commented <strong> 10 months ago</strong> </div> <div class="markdown-body"> <blockquote> <p>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.</p> </blockquote> <p>Sure, contributions are welcome.</p> <p>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 <a href="https://github.com/givanz/VvvebJs/blob/master/libs/builder/components-widgets.js#L679-L690">https://github.com/givanz/VvvebJs/blob/master/libs/builder/components-widgets.js#L679-L690</a></p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>
The current editor doesn't highlight or select and display iframe component properties, It does not seen to notice the