Forums

Advanced Search

How to catch Javascript events?

Permalink
Hey there,

me again... so i'm building a block where the user will be able to select some files using the fileselector.

The fileselector gets created with
$al = Loader::helper('concrete/asset_library');


When opening the File Manager and picking a file multiple events get fired from concrete5. To see them one must type "Concrete.event.debug(true)" into the web console.

There are many events fired, but i'm interested in the one which returns a object with the fID from the file. Please see the attached screenshot. The event i'm interested in has the handle "FileManagerSelectFile".

I'm doing something similar with the sitemap pageselector, there i can catch the event without any problems. But the same method doesn't seem to work for the fileselector, or i'm misunderstanding something.

My code to catch the event:
Concrete.event.bind('FileManagerSelectFile', function(e,data) {
      alert('Event catched');
   });


This doesn't work, maybe it's a bug in 5.7?

1 Attachment

View Replies: View Best Answer
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
Hi s0krates,

'There are many events fired, but i'm interested in the one which returns a object with the fID from the file. Please see the attached screenshot. The event i'm interested in has the handle "FileManagerSelectFile".'

It is your lucky day. Andrew just posted new documentation on this topic.

Scroll down to this section - "Enabling Multiple File Selection and Custom Functionality":
https://www.concrete5.org/documentation/developers/5.7/working-with-...
WillemAnchor replied on at Permalink Reply
WillemAnchor
not only his luck,
I had the exact same problem 2 days ago :)
s0krates replied on at Permalink Reply
@WillemAnchor
Did you manage to get multiple selections working in the filemanager? I can't seem to have the possibility to select multiple files using the JS from the documentation.

If i don't use
print $service->file('file-manager', 'fID', 'Select file');


i get "ConcreteFileManager is not defined", because the javascript is missing i guess.
But when i use it, multiple selections is not possible, i can only select one file :(

EDIT:
oh god i didn't see the choose dropdown, was looking for a nice blue button. Now i'm getting an array with the fIDs. Will try to put that in a hidden input field and see how that works out saving to the database. Great!
WillemAnchor replied on at Permalink Reply
WillemAnchor
nice :D

(just for future references)
you might need to include:
$this->requireAsset('core/file-manager');

in your controller (at least, I did for a single page)
s0krates replied on at Permalink Reply
yep that did the trick. You two helped me a ton, thanks a lot
s0krates replied on at Permalink Reply
well thats great :) thanks for letting me know!
daenu replied on at Permalink Reply
daenu
Hi s0krates
thx for the tip with "Concrete.event.debug(true)". It helped me alot!

I managed to catch all events I wanted to.

Do you have any idea on how to catch the event when clicking "Clear" in the File-Selector menu?
I did try with 
a[data-file-manager-action=clear]
but no luck
s0krates replied on at Permalink Reply
Hi Daenu,

unfortunetly i didn't figure out how to catch that event.
daenu replied on at Permalink Reply
daenu
Hi s0krates

The goal was to catch the event, when a file is selected & the one when a file is cleared from the selector to show/hide things in the DOM:

When a file is selected:
window.Concrete.event.bind('FileManagerBeforeSelectFile', function (e, data) {
            window.console.log(e, data);
            if($('[name="file_input_name"]').val() === '0'){
                // show things
            }else {
                // hide things
            }
        });

When a file is cleared:
jQuery(document).on('focusout', 'a[data-file-manager-action]', function (e) {
            window.console.log(e);
            if($('.ccm-file-selector-choose-new').length > 0){
                // show things
            }else {
               // hide things
            }
        });

Hope that helps...
WillemAnchor replied on at Permalink Reply
WillemAnchor
Nice one :D

I wanted to propose an extra event on github for this, but I didn't find the time yet.