How to catch Javascript events?
Permalinkme 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?
I had the exact same problem 2 days ago :)
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!
(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)
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]
unfortunetly i didn't figure out how to catch that event.
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...
I wanted to propose an extra event on github for this, but I didn't find the time yet.
'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-...