2

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: '_' }
    }
};
Sean Quinn
  • 2,131
  • 1
  • 18
  • 48
  • Could you include this RequireJS config you're mentioning? Since the call to `createStoryJS` is not qualified it looks like you're using browser's globals, not the AMD-loaded dependencies. – kryger Nov 21 '13 at 14:50
  • @kryger Updated the question with the RequireJS config. Even if I used the AMD-loaded dependencies to call `createStoryJS` (e.g. `VMM.createStoryJS(...)`, and I'm not sure that this even works) would the issue still be that StoryJS is attempting to load libraries using its own mechanism? Thanks! – Sean Quinn Nov 21 '13 at 15:47
  • I may have figured out how to get this working without running through the `createStoryJS()` method. Once I'm confident I'll refine the code and post as an answer. – Sean Quinn Nov 21 '13 at 18:45

1 Answers1

5

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.

Sean Quinn
  • 2,131
  • 1
  • 18
  • 48