Buggy behavior with iframe parts

selbekk · February 26, 2016, 11:44pm

Enonic version: 6.4.1

We have a part that’s a full-screen iframe. When I drop it into my page, it leads to a few problems:

You can’t right click (probably because the click is captured by the iframe instead of the typescript application)
Dropping other parts in is hard, but not impossible. But I would hugely appreciate if you can make it work better.
You can’t delete the part

If it’s hard to make it work - consider disabling the iframe (not loading its content), and then add a “enable iframe” option to the right click menu to show it.

Here’s my part:

gist.github.com

https://gist.github.com/selbekk/f78608698c206d7437fd

gistfile1.txt

// ----------------
// iframe-flow.html
// ----------------

<div class="embed-responsive iframe-container mod-full-height">
    <iframe data-th-src="${url}"></iframe>
</div>

// --------------
// iframe-flow.js

This file has been truncated. show original

mla · February 27, 2016, 1:13am

You can always see and select a part with the Page Components (clipboard icon, top-right) while editing content. It opens a tree view of all components on a page. That way you can always delete a part or add another, even when you can’t click it or drop a component in the page editor.

selbekk · February 27, 2016, 1:22am

Unfortunately, that doesn’t work in my case. The page components menu starts hanging and everything goes fubar.

tsi · February 27, 2016, 1:32pm

Ok, a simple workaround is to render your part differently while in edit mode!

selbekk · February 29, 2016, 5:14pm

Definitely a possibility! I hate to add that kind of code though - so please consider looking into fixing this.

tsi · February 29, 2016, 5:33pm

Another tip! Simply return an empty body, and The page editor will display a placeholder, oneliner!

We’ll see if this can be fixed ofcourse!

selbekk · February 29, 2016, 6:27pm

How can I check if I’m in edit mode from my controller?

tsi · February 29, 2016, 6:50pm

Should be info about this in the request object…

selbekk · February 29, 2016, 6:51pm

Great, I’ll look into it then

bwe · February 29, 2016, 7:08pm

In object req the property mode is set to the string value live if we are a visitor outside admin. So just check if that is not true =)

if (req.mode != 'live')

Example use:

github.com

enonic/app-disqus/blob/master/src/main/resources/site/parts/disqus/disqus.js

var portal = require('/lib/xp/portal');
var thymeleaf = require('/lib/xp/thymeleaf');
//var util = require('utilities');

exports.get = handleGet;

function handleGet(req) {
    var me = this;

    function renderView() {
        var view = resolve('disqus.html');
        var model = createModel();
        return {
            body: thymeleaf.render(view, model)
        };
    }

    function createModel() {
        var content = portal.getContent();
        var component = portal.getComponent();

This file has been truncated. show original

tsi · February 29, 2016, 8:39pm

Hmm, what about preview? Wouldn’t it be better to test for mode != “edit” for standard rendering?

bwe · February 29, 2016, 9:56pm

True, preview is a mode too. Tired =p

myurchenko · April 12, 2021, 9:37am

Hi!
I have an iframe part and it is impossible to select it for edit. When using a component view, there is an error in a console:

Uncaught TypeError: s.hasDescriptor is not a function
    at https://www.website.com/admin/tool/com.enonic.app.contentstudio/main/_/asset/com.enonic.app.contentstudio:1615907211/js/bundle.js:2:1441861
    at Array.forEach (<anonymous>)
    at PageComponentsTreeGrid.fetchDescriptions (https://www.website.com/admin/tool/com.enonic.app.contentstudio/main/_/asset/com.enonic.app.contentstudio:1615907211/js/bundle.js:2:1441708)
    at PageComponentsTreeGrid.fetchChildren (https://www.website.com/admin/tool/com.enonic.app.contentstudio/main/_/asset/com.enonic.app.contentstudio:1615907211/js/bundle.js:2:1441540)
    at PageComponentsTreeGrid.TreeGrid.fetchData (https://www.website.com/admin/tool/com.enonic.app.contentstudio/main/_/asset/com.enonic.app.contentstudio:1615907211/admin/common/js/_all.js:1:646286)
    at PageComponentsTreeGrid.TreeGrid.reloadNode (https://www.website.com/admin/tool/com.enonic.app.contentstudio/main/_/asset/com.enonic.app.contentstudio:1615907211/admin/common/js/_all.js:1:650745)
    at https://www.website.com/admin/tool/com.enonic.app.contentstudio/main/_/asset/com.enonic.app.contentstudio:1615907211/admin/common/js/_all.js:1:651201
    at Array.forEach (<anonymous>)
    at https://www.website.com/admin/tool/com.enonic.app.contentstudio/main/_/asset/com.enonic.app.contentstudio:1615907211/admin/common/js/_all.js:1:650903
From previous event:
    at PageComponentsTreeGrid.TreeGrid.reloadNode (https://www.website.com/admin/tool/com.enonic.app.contentstudio/main/_/asset/com.enonic.app.contentstudio:1615907211/admin/common/js/_all.js:1:650767)
    at https://www.website.com/admin/tool/com.enonic.app.contentstudio/main/_/asset/com.enonic.app.contentstudio:1615907211/admin/common/js/_all.js:1:651201
    at Array.forEach (<anonymous>)
    at https://www.website.com/admin/tool/com.enonic.app.contentstudio/main/_/asset/com.enonic.app.contentstudio:1615907211/admin/common/js/_all.js:1:650903
(anonymous) @ bundle.js:2
PageComponentsTreeGrid.fetchDescriptions @ bundle.js:2
PageComponentsTreeGrid.fetchChildren @ bundle.js:2
TreeGrid.fetchData @ _all.js:1
TreeGrid.reloadNode @ _all.js:1
(anonymous) @ _all.js:1
(anonymous) @ _all.js:1
_fulfilled @ _all.js:21136
(anonymous) @ _all.js:21165
Promise.promise.promiseDispatch @ _all.js:21098
(anonymous) @ _all.js:20906
flush @ _all.js:20457
setTimeout (async)
flush @ _all.js:20480

tsi · April 12, 2021, 8:34pm

As mentioned above, for parts that are hard to make behave in the page editor, just implement a dummy version when “mode = edit” (you get this information in the request context.