Search code examples
javascriptrequirejsamdtimeline.js

Using TimelineJS and AMD


I'm looking for a way to use TimelineJS with RequireJS's implementation of AMD. I can get things partially working, e.g.

define(["storyjs", "timelinejs", ...], function(storyjs, timelinejs, ...) {
    createStoryJS({
        type:       'timeline',
        width:      '800',
        height:     '600',
        source:     { ... }, // sample JSON
        embed_id:   'timeline-embed'
    });
});

The above produces a timeline, but storyjs (which exports VMM in my RequireJS config) always attempts to perform its own loading of the TimelineJS libraries, which invariably produces errors in the Firebug/developer tools console.

I'm either looking for a way to programmatically build the TimelineJS object (which I couldn't find any examples of), tell StoryJS to not bother loading libs using its mechanism (because I've already provided them) and in general integrate TimelineJS with an AMD solution.

Any suggestions?

UPDATE:

RequireJS configuration used, below. For my own personal use I have a tendency to rename JS libraries and append their version numbers.

var require = {
    waitSeconds: 5,
    paths: {
        "app": "../js/app"

        // ** Libraries
        ,"backbone": "../js/lib/backbone-1.1.0.min"
        ,"bootstrap": "../js/lib/bootstrap-3.0.2.min"
        ,"jquery": "../js/lib/jquery-1.10.2.min"
        ,"jquery-ui": "../js/lib/jquery-ui-1.10.3.min"
        ,"json2": "../js/lib/json2"
        ,"underscore": "../js/lib/underscore-1.5.2.min"

        // ** TimelineJS
        ,"storyjs": "../js/lib/storyjs-embed-2.0.3.min"
        ,"timelinejs": "../js/lib/timeline-2.26.3.min"

        // ** RequireJS Plugins
        ,"domready": "../js/lib/plugins/requirejs/requirejs-plugin-domready-2.0.1"
        ,"i18n": "../js/lib/plugins/requirejs/requirejs-plugin-i18n-2.0.4"
        ,"text": "../js/lib/plugins/requirejs/requirejs-plugin-text-2.0.10"
    },

    shim: {
        'backbone': { deps: ['underscore'], exports: 'Backbone' }
        ,'bootstrap': { deps: ['jquery'] }
        ,'jquery': { exports: '$' }
        ,'json2': { exports: 'JSON' }
        ,'storyjs': { exports: 'VMM' }
        ,'timelinejs': { deps: ['storyjs'] }
        ,'underscore': { exports: '_' }
    }
};

Solution

  • It took digging into the TimelineJS source a bit to see what exactly createStoryJS was actually doing and then looking at some of the other source code, but I finally answered my own question. In fact, it is relatively straightforward and very similar to my early attempts to make this work before posting my question above to StackOverflow.

    RequireJS Config:

    // RequireJS config
    var require = {
      waitSeconds: 5,
      paths: {
        ...
    
        // ** TimelineJS
        ,"storyjs": "../js/lib/plugins/jquery/storyjs-embed-2.0.3.min"
        ,"timelinejs": "../js/lib/plugins/jquery/timeline-2.26.3.min"
    
        ...
      },
      shim: {
        ...
        ,'storyjs': { deps: ['jquery'], exports: 'VMM' }
        ,'timelinejs': { deps: ['jquery', 'storyjs'] }
        ...
      }
    };
    

    Module instantiating TimelineJS object:

    define([ "json2", "timelinejs"], function(JSON, timelinejs) {
      var js_version = "2.24",
        config = {
          version: "2.24", // DEFAULT: 2.x
          debug:   true,
          type:    'timeline',
          source:  {...} // Sample JSON
      };
      var timeline = new VMM.Timeline("timeline-embed", 800, 600);
      timeline.init(config);
    });
    

    This is, at the very least, one example for handling the TimelineJS instantiation using RequireJS/AMD; it is also how I've decided to solve my original issue.