Question about usage of elgg-lightbox, asynchronous script loading and CDN usage

Example use case: Tidypics registers a button to the title sections in some resource views for an album selection popup to open is a lightbox with

elgg_register_menu_item('title', array(
    'name' => 'addphotos',
    'href' => "ajax/view/photos/selectalbum/?owner_guid=" . $logged_in_user->getGUID(),
    'text' => elgg_echo("photos:addphotos"),
    'link_class' => 'elgg-button elgg-button-action elgg-lightbox'
));

I never had any issues with that myself so far. But now I got some feedback that clicking on the button too early (button already visible but whole page not yet fully loaded) results in the error message "You can't access Ajax view directly". Page loading time might be higher due to usage of Cloudflare as CDN for the site (instead of lower loading time). But even without CDN the time until the page is fully loaded could be high on slow connections with the button already showing (and clickable).

Is this issue something that would have to be dealt with and fixed in Elgg core (whenever elgg-lightbox is used) or is something wrong or maybe missing in the code of Tidypics that makes use of elgg-lightbox?

  • I think that is an issue witn CDN bcz on localhost \ or on my own server I haven't these issues. But when I returned to CDN providers I got  my errors again related to Elgg loading and it's pages

  • I've seen it even on localhost (on a slow loading site on a slow vagrant box).  The issue is the elements are loaded and clickable before the AMD script has been required so the js events are not bound to the element yet.  The element href is set, so the browser does what it's supposed to an follows the link.

  • There is a workaround example in the embed plugin I believe. If I remeber correctly the lightbox module supports data-href.
    This is one of the reasons I hardly ever use ajax views - IMO any URL should point to a fully qualified resource that is drawn regardless of how it's accessed.

  • @Michele, could you try a change in mod/tidypics/views/default/resources/tidypics/lists/siteimagesall.php to see if this helps? Change the lines

    if (tidypics_can_add_new_photos(null, $logged_in_user)) {
        elgg_register_menu_item('title', array(
            'name' => 'addphotos',
            'href' => "ajax/view/photos/selectalbum/?owner_guid=" . $logged_in_user->getGUID(),
            'text' => elgg_echo("photos:addphotos"),
            'link_class' => 'elgg-button elgg-button-action elgg-lightbox'
        ));
    }

    into

    if (tidypics_can_add_new_photos(null, $logged_in_user)) {
        $url = elgg_get_site_url() . "ajax/view/photos/selectalbum/?owner_guid=" . $logged_in_user->getGUID();
        $url = elgg_format_url($url);
        elgg_register_menu_item('title', array(
            'name' => 'addphotos',
            'href' => 'javascript:',
            'data-colorbox-opts' => json_encode([
                'href' => $url,
            ]),
            'text' => elgg_echo("photos:addphotos"),
            'link_class' => 'elgg-button elgg-button-action elgg-lightbox',
        ));
    }

    This should result in clicking on the "Upload photos" button not working before the lightbox JS code is loaded. With the change in this file it will only be different on the "All photos" page for now. If you could verify that it works for you, I can make the fix in all necessary files in Tidypics and include it in the next release.

  • The proper solution is to use absolute URLs which can be viewed even without JS bindings.
    Also I suggest to install Steve's combiner plugin which can be used to batch scripts and with cloudflare that should be quite fast.

  • I'm not really happy about either of the options. Either you have a button that shows no reaction when clicked before the lightbox code is loaded. Or you have a button where a click results in some kind of randomness regarding how the content corresponding to the click shows up (either in a lightbox if the JS code is already loaded or not if you clicked too early). In Elgg core both ways are used: embed plugin uses the first way and the reportedcontent plugin the latter. I would say the latter option wouldn't even work in case of the embed link as you would leave the page where you write your posting and then also any content you have already written.

     

  • I put forth an idea to allow capturing "too early" clicks: https://github.com/Elgg/Elgg/issues/10489