defining a filepicker in an AMD module

defining a filepicker in an AMD module

by olivier Dechepy -
Number of replies: 6
    

Hello, 

i'm developping a plugin that uses  filepickers.

As i understood from the Moodle js doc the good practice of js coding in Moodle is loading my js files through AMD module.

So i simply want to load my filepicker, with my options.

I tried in my php file :

$PAGE->requires->js_call_amd('local_indexation/filepicker', 'init', [$myoptions]);

And the filepicker.js, created in amd/src and transformed in amd/build is 

define(['jquery', 'core_filepicker'],
    function ($, filepicker) {

        function initManage(myoptions) {
            var options = {
                crexternallink: true,
                return_types: 14
            };
            $.extend(options, myoptions);

            $("#id_choose_thumbnail").on("click", function () {
                options.accepted_types = [".thumbnail"];
                options.formcallback = function (data) {
                $("input[name=\'thumbnailid\']").val(data.url);
            };
            filepicker.show(Y, options);
        });
    }
    return {
        init: function (myoptions) {
            initManage(myoptions);
        }
   };
});

I've obviously set $CFG->cachejs = false;

But i always have the error :

No define call for core_filepicker

(or No define call for core/filepicker if i change the require to core/filepicker)

So, what is the right way to load this code using AMD ?

Thank you

Average of ratings: -
In reply to olivier Dechepy

Re: defining a filepicker in an AMD module

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

The Moodle filepicker element has not been rewritten to use an AMD module, it is still a YUI module.

The PHP code for loading the filepicker javascript can be found here: https://github.com/moodle/moodle/blob/master/lib/form/filepicker.php#L168

        $module = array('name'=>'form_filepicker', 'fullpath'=>'/lib/form/filepicker.js', 'requires'=>array('core_filepicker', 'node', 'node-event-simulate', 'core_dndupload'));
        $PAGE->requires->js_init_call('M.form_filepicker.init', array($fp->options), true, $module);

I'm not sure there is an easy way to load this as part of an AMD module.

Average of ratings: Useful (1)
In reply to Davo Smith

Re: defining a filepicker in an AMD module

by olivier Dechepy -
OK, thank you for the sad confirmation.
I'll try this then.
Thanks again for the quick reply.
Average of ratings: -
In reply to Davo Smith

Re: defining a filepicker in an AMD module

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
You can call YUI code from an AMD module (and also the other way around).

Now, for this to be a helpful post, I need to remember where there is an example, so you can copy it ...

YUI calling AMD: https://github.com/moodleou/moodle-atto_embedquestion/blob/master/yui/src/button/js/button.js#L82

AMD calling YUI: https://github.com/moodleou/moodle-filter_embedquestion/blob/master/amd/src/question.js#L63
Average of ratings: Useful (2)
In reply to Tim Hunt

Re: defining a filepicker in an AMD module

by olivier Dechepy -

It's so very kind of you to provide examples for this.

I just need to make it click in my predicament.


I have a form, where i need to add 2 filepickers (thumbnail_chooser and video_choser). which have each a button where i want a click event to show the filepicker.

As i stated before, i tried to use the "Moodle prefered way" of coding : with an AMD call.

I will try to understand in your example (AMD calling YUI) to make my code work. It's not clear for me yet.
moreover, when i manually set my filepicker options, i don't have the expected data set. This is another problem on top of the call/init.

Having several layers of complexity (js, js in php, php), plus an obsolete and not well documented framework (YUI) makes it hard to progress in some rather classic task (here having filepickers with some specific options in a form).
I also didn't find, other than the core filepicker code, any plugin having this kind of setup to study from.

Anyways, thanks again a lot for the quick response and if i find a solution, i will be happy to share it here.

Average of ratings: -
In reply to olivier Dechepy

Re: defining a filepicker in an AMD module

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Wouldn't it simply be easier to have a standard Moodle form, with a standard filepicker element, but just wrap it in a div (using the form 'html' elements) which hides it until you click on the button?

That way, you can leave the standard code to initialise the filepicker and just handle the show/hide yourself.

Note also that in almost every case (and this doesn't sound like an exception), you want a filemanager element, not a filepicker elements. Filepickers are for the cases when you want to upload a file, process it, then discard it (e.g. uploading a CSV file and then creating users/courses from it). Filemanagers are for use whenever the uploaded file(s) are expected to hang around and (possibly) be updated later (uploading thumbnails / videos sounds very much like this case).
Average of ratings: -
In reply to olivier Dechepy

Re: defining a filepicker in an AMD module

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
An example that is a bit like what you are trying to do is the form for editing drag-drop markers, or drag-drop onto image questions. They uses a standard file-picker, but then, once an image has been uploaded, they start showing a preview using JavaScript.
Average of ratings: -