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?

Improve this question
4
  • 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, 2016 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, 2016 at 4:22
  • Are src/smallworld.jquery.js and src/jquery.js added to the page after jquery.js?
    – cilefen
    Mar 14, 2016 at 12:40
  • @cilefen - yes, checking the network pane in chrome debugger shows both files loaded after Drupal loads jquery.js
    – schnippy
    Mar 14, 2016 at 13:37

1 Answer 1

Reset to default
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) { ...
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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