Issue calling elfinder in JQuery dialog

[Yves-K]

Hello,

First thank you very much for this wonderfull tool...

We integrate elfinder in a jQuery dialog and it works like a charm... most of the times

Our intregration is in a Joomla! backoffice custom field
Current files are listed on a div,
By clicking on the div
=> opens a new ui.dialog with an empty div in
=> creates a elfinder instance ($div.elfinder(options))

elfinder is always loaded correctly but sometimes the root page displays just after !

any ideas ?

Best reagards

[applibs]

I can confirm another issue. After I close jQuery dialog and in
onclose event I destroy elfinder instance by elfinder.destroy(); elfinder instance still exists.
After I reopen / reinitialize elfinder I miss search box on top right place.
And more functionality is broken, now I see that no right scrollbal not visible, etc.

[nao-pon]

@standus "destroy()" will be elFinder DOM deletes and events unbinds. Destruction of instances are not.

@Yves-K , @standus Would you show us your HTML, JavaScript code?

[Yves-K]

Hello Nao Pon, of course, here it is
.elFinder is a class for the div in dialog.
$nj is an instance of jQuery (version : 1.12.3, UI version : 1.11.4)

$nj('.elFinder', container).each(function(){
        initFinder($nj(this));
})

function initFinder(object){

    var options     = {
        url :           '/index.php?option=com_abcvittonj&task=ajax&action=finder',
        height:         object.height(),
        container :     object,
        handlers : {
            select :    function(event, finderInstance) {
                        finderSelect(event, finderInstance, object);
                    }
        }
    };

    var instance = object.elfinder(options).elfinder('instance');
    object.data('njInstance', instance);
}

We attach the elFinder instance to object data to ensure unique relation in case we'd use many finders.
The problem does not change if we just
object.elfinder(options)

Please note that it works in certain forms but not in others.
We just can't find a reason :-(

Opening the dialog without invoking elfinder (put it in remarks ), the dialog stays empty...

Best regards

[nao-pon]

@Yves-K How many instance of elFinder? Is this is all at the same time of the instance is generated on loaded the page?

[Yves-K]

@nao-pon In this test we jus have one instance

Found a clue as mootols (yes there is still some mootols in J backOffice) is called as we create the elFinder instance

and this is the loaded page url !

This mootols is not called if we remark creating the elFinder instance

The full stack of calls is :

send    @   mootools-core.js:164
e.extend.$owner @   mootools-core.js:38
send    @   mootools-more.js:248
load    @   mootools-core.js:169
trigger @   jquery.min.js:3
a.event.trigger @   jquery-migrate.min.js:2
(anonymous function)    @   jquery.min.js:3
each    @   jquery.min.js:2
each    @   jquery.min.js:2
trigger @   jquery.min.js:3
f   @   elfinder.min.js:14
(anonymous function)    @   elfinder.min.js:14
each    @   jquery.min.js:2
each    @   jquery.min.js:2
e.fn.elfindertoolbar    @   elfinder.min.js:14
(anonymous function)    @   elfinder.min.js:9
each    @   jquery.min.js:2
window.elFinder @   elfinder.min.js:9
(anonymous function)    @   elfinder.min.js:11
each    @   jquery.min.js:2
each    @   jquery.min.js:2
e.fn.elfinder   @   elfinder.min.js:11
initFinder  @   vitto-nj.js:584   <========= (creating the elFinder instance)
(anonymous function)    @   vitto-nj.js:358
each    @   jquery.min.js:2
each    @   jquery.min.js:2
afterLoad   @   vitto-nj.js:357
open    @   vitto-nj-popup.js:64
_trigger    @   jquery-ui.min.js:6
open    @   jquery-ui.min.js:11
(anonymous function)    @   jquery-ui.min.js:6
_init   @   jquery-ui.min.js:10
(anonymous function)    @   jquery-ui.min.js:6
_createWidget   @   jquery-ui.min.js:6
e.(anonymous function).(anonymous function) @   jquery-ui.min.js:6
(anonymous function)    @   jquery-ui.min.js:6
each    @   jquery.min.js:2
each    @   jquery.min.js:2
e.fn.(anonymous function)   @   jquery-ui.min.js:6
vittoNJPopUp    @   vitto-nj-popup.js:32
(anonymous function)    @   vitto-nj.js:354
dispatch    @   jquery.min.js:3
r.handle    @   jquery.min.js:3

[Yves-K]

Just to confirm about Mootools and creating an instance of elFinder :

Mootools IS NOT loaded = works like a charm
Mootools IS loaded = loads this rootpath page after elFinder is initialized.

And, yes, mootools is loaded AFTER jQuery !!! (we will try to work on this)
But this is why we use a named instance of jQuery and not '$'...

[applibs]

My code is like this:

var wHeight = jQuery(window).height();
    var fmHeight = wHeight * 0.85;
    filemanagerDialog = jQuery('<div id="filemanagerDialog"\>').dialog({
        modal: true, 
        width: "85%",
        height: fmHeight,
        title: "", 
        zIndex: 99999,
        create: function (event, ui) {
            if(elfinder) {
                elfinder.destroy();
                elfinder = null;
            }
            elfinder = jQuery(this).elfinder(opts).elfinder('instance');
        },
        close: function(event, ui) { 
            if(elfinder) {
                elfinder.destroy();
                elfinder = null;
            }
            filemanagerDialog.dialog("close");
            filemanagerDialog.remove();
        } 
    });

[nao-pon]

@standus I found a bug in current nightly. That is enbug of @0360abe29d2e4dbbb7dbefaa370b3706ee522270. I'll fix it.

[nao-pon]

@Yves-K Are you using elfinder.full.js or elfinder.min.js? If not, please try it.

OR... How is it?

(function($) {
    var instance = object.elfinder(options).elfinder('instance');
})(jQuery);

[Yves-K]

@nao-pon
Going forward with these tests we commented lines 12064 and 12065
in file elfinder.full.js from Version 2.1.14 (2016-07-25)
declared in $.fn.elfindertoolbar = function(fm, opts)

An this solves the name conflict with Mootools => elFinder works then perfectly

How can we help any futher ?

Best regards

[nao-pon]

@Yves-K Did you get what is problem of these lines?

[nao-pon]

@standus I fixed enbug of @0360abe29d2e4dbbb7dbefaa370b3706ee522270. Would you try & check with latest nightly?

[applibs]

Looks that my bug is solved but another new bug starting.
I have
getFileCallback : function(file, fm) for copy / paste which we solved here #1608 .
Now stopped working. File is pasted from source but object file is undefined and cannot be processed in next steps.
Seems not well fixed this issue.

[nao-pon]

@standus Please see #1608 (comment).

[applibs]

Looks OK now. Thank you.

[Yves-K]

@nao-pon Hello,

In fact we just commented self.trigger('load');
That is calling any 'load' event binded by any library to any element of the DOM tree in current selector.

This caused the problem with Mootools.

on('load') seems only used in (12131)

fm.bind('load', function() {
    swipeHandle = $('<div class="elfinder-toolbar-swipe-handle"/>').appendTo(fm.getUI());
    if (swipeHandle.css('pointer-events') !== 'none') {
        swipeHandle.remove();
        swipeHandle = null;
    }
});

Perhaps a simple function could do the job ?

[nao-pon]

@Yves-K I replaced self.trigger('load') to fm.trigger('toolbatload'). Thanks! 👍