Utilisation de fonctions de bibliothèques JavaScript externes dans les plugins Moodle

Question

Je crée un plugin Moodle et je souhaite utiliser bowser pour détecter le navigateur Web de l'utilisateur. J'ai mentionné le fichier en mettant

$PAGE->requires->js(new moodle_url($CFG->wwwroot.MOODLE_TINYMCE_RECORDRTC_ROOT.'tinymce/js/bowser.js')); 

dans le fichier plugintype_pluginname.php du plug-in (espaces réservés bien sûr), et j'appelle la fonction bowser du fichier module.js du plug-in.

Lorsque je charge le plugin (il apparaît comme un bouton dans TinyMCE), la console lance ReferenceError: bowser not defined, donc je suppose que cela signifie que Moodle ne rend pas les fonctions de Bowser globalement disponibles. Je lis beaucoup dans beaucoup d'endroits que j'ai besoin d'emballer mon code dans un AMD, ou quelque chose à cet effet, mais après beaucoup de lecture cela me dépasse toujours. Y at-il un moyen de rendre les fonctions de Bowser disponibles pour le module plugin principal?

Answer 1

Note: Cela fonctionne pour moi dans Moodle 3.3.2, ymmv.

Mettez bowser.js dans my_plugin_folder/amd/src/.

Lors de l'utilisation de l'original bowser.js j'ai obtenu Uncaught TypeError: bowser._detect is not a function. Je ne comprends pas exactement pourquoi je reçois cette erreur, mais voici une façon de le réparer: Remplacer le bloc de code supérieur dans bowser.js avec this one de umdjs/umd.

Votre fichier doit maintenant ressembler à ceci:

(function (root, factory) { 
    if (typeof define === 'function' && define.amd) { 
     // AMD. Register as an anonymous module. 
     define([], factory); 
    } else if (typeof module === 'object' && module.exports) { 
     // Node. Does not work with strict CommonJS, but 
     // only CommonJS-like environments that support module.exports, 
     // like Node. 
     module.exports = factory(); 
    } else { 
     // Browser globals (root is window) 
     root.returnExports = factory(); 
    } 
}(typeof self !== 'undefined' ? self : this, function() { 

    // module definition here 

    return bowser 
})); 

Moodle tous JavaScript modules regroupe ensemble afin que les clients ne ont pas besoin d'effectuer une requête HTTP distincte pour obtenir chacun. Ce lot est appelé first.js. Il contient tous les modules qui ne sont pas paresseux. Si vous chargez une page Moodle maintenant, elle devrait contenir le contenu de bowser.js avec certaines valeurs remplacées par Moodle.

Si vous ne voulez pas que le chargeur soit chargé sur chaque page, vous pouvez simplement le renommer bowser-lazy.js. Ensuite, il ne doit être chargé que lorsque vous l'utilisez.

---

Vous pouvez tester si cela a fonctionné en appelant:

require(['plugintype_pluginname/bowser'], function(bowser) { 
    var ua = bowser._detect(navigator.userAgent); 
    console.log(ua); 
}); 

On dirait que vous avez besoin de changer le require appel à utiliser bowser-lazy au lieu de bowser lorsque vous souhaitez utiliser de chargement paresseux.