0

I'm working on a Drupal 7 module to integrate an existing jQuery plugin (smallworld.js). I've added it successfully through the Libraries 2.x API in my module:

$libraries['smallworld.js'] = array(
    'name' => 'SmallWorld.js',
    'vendor url' => 'http://mikefowler.me/smallworld.js/',
    'download url' => 'https://github.com/mikefowler/smallworld.js',
    'version' => '1.0', //no version actually defined in code
    'files' => array(
      'js' => array('src/smallworld.js'),
      'js' => array('src/smallworld.jquery.js'),
    ),
  );

and have confirmed that the files are loading correctly. However, when I try and access the file in my Drupal jQuery, ex:

(function ($) {

  Drupal.behaviors.smallworld = {
    attach: function (context, settings) {
      $.getJSON('/sites/all/libraries/smallworld.js/dist/world.json', function (data) {
        $('.map').smallworld({
          geojson: data,
        });
      });
    }
  };
}(jQuery));

It doesn't trigger, giving me the console error message "Smallworld is not a constructer."

The two files it is loading are the Smallworld library and a smaller jquery wrapper that registers the library as a jquery plugin:

  $.extend($.fn, {
    smallworld: function (options) {
      var opts = $.extend({}, $.fn.smallworld.defaults, options);
      return this.each(function () {
        $(this).data('smallworld', new Smallworld(this, opts));
        return this;
      });
    }
  });

Does this wrapper also needed to be added to the same Drupal jquery namespace? If a jquery library is added through Libraries API, is there special namespacing to consider when accessing it?

  • You did not say what went wrong. It seemed like you were heading that way after the second code example. Did you load the library on the page to be output or attach it to a render array? Is there a browser console error? – cilefen Mar 14 '16 at 1:00
  • absolutely right @cilefen, I've updated it with the console error I am seeing and the code for the wrapper that I am guessing is the problem. – schnippy Mar 14 '16 at 4:22
  • Are src/smallworld.jquery.js and src/jquery.js added to the page after jquery.js? – cilefen Mar 14 '16 at 12:40
  • @cilefen - yes, checking the network pane in chrome debugger shows both files loaded after Drupal loads jquery.js – schnippy Mar 14 '16 at 13:37
1

Found the problem - this library comes with two separate files, one that is a straightup javascript library and another in jquery that registers the file as a plugin (smallworld.jquery.js)

  $.extend($.fn, {
    smallworld: function (options) {
      var opts = $.extend({}, $.fn.smallworld.defaults, options);
      return this.each(function () {

      $(this).data('smallworld', new Smallworld(this, opts));
      return this;
    });

To get this to work, I had to take the whole 'register' script and add it to the jquery file script I created for the module, ex:

(function ($) {

  Drupal.behaviors.smallworld = {
    attach: function (context, settings) { ... 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.