1

I am able to add timelineJs library using :

bower install timeline

and in my Brocfile.js, I have

app.import("bower_components/timeline/js/timeline-min.js");
app.import("bower_components/timeline/js/storyjs-embed.js");
app.import("bower_components/timeline/css/timeline.css");

in my component where I initialize the timeline, I have :

import Ember from "ember";

export
default Ember.Component.extend({

    layout: Ember.Handlebars.compile('<div id="timeline-overview"></div>'),

    didInsertElement: function() {

        var sourceData = {
            "timeline": {
                "headline": "The Main Timeline Headline Goes here",
                "type": "default",
                "text": "<p>Intro body text goes here, some HTML is ok</p>",
                "asset": {
                    "media": "http://yourdomain_or_socialmedialink_goes_here.jpg",
                    "credit": "Credit Name Goes Here",
                    "caption": "Caption text goes here"
                },
                "date": [{
                    "startDate": "2011,12,10",
                    "endDate": "2011,12,11",
                    "headline": "Headline Goes Here",
                    "text": "<p>Body text goes here, some HTML is OK</p>",
                    "tag": "This is Optional",
                    "classname": "optionaluniqueclassnamecanbeaddedhere",
                    "asset": {
                        "media": "http://twitter.com/ArjunaSoriano/status/164181156147900416",
                        "thumbnail": "optional-32x32px.jpg",
                        "credit": "Credit Name Goes Here",
                        "caption": "Caption text goes here"
                    }
                }],
                "era": [{
                        "startDate": "2011,12,10",
                        "endDate": "2011,12,11",
                        "headline": "Headline Goes Here",
                        "text": "<p>Body text goes here, some HTML is OK</p>",
                        "tag": "This is Optional"
                    }

                ]
            }
        };

        createStoryJS({
            type: 'timeline',
            width: '800',
            height: '600',
            source: sourceData,
            embed_id: 'timeline-overview'
        });     
    }
});

I am getting bunch of js issues like these:

"NetworkError: 404 Not Found - http://localhost:4200/css/timeline.css?2.24"
"NetworkError: 404 Not Found - http://localhost:4200/js/timeline-min.js?2.24"
"NetworkError: 404 Not Found - http://localhost:4200/assets/loading.gif?v3.4"

I am not sure what I should do to resolve these issues. It seems like timeline is trying to inject some javascript when it runs, and it expects the files to be in some specific folder. I am pretty new to bower configuration and ember cli, so any pointers will be highly valuable. Thanks.

UPDATE: I was able to solve my problem by adding the library in the public folder and then adding them manually in the index.html page.

Deewendra Shrestha
  • 2,313
  • 1
  • 23
  • 53
  • I'm getting the same issue with vis.js I can get the brocfile.js to pull in the css properly, but I can't seem to get at the js file. – Eric D. Johnson Feb 20 '15 at 02:50
  • Eventually I got this to work. First I got it working putting the vis.js and vis.css into `public/assets` as you did. But it still wasn't working for me. So I had to `/* global vis:true */` on the top of the route I was the global vis to use in `vis.Network` – Eric D. Johnson Feb 20 '15 at 03:31

0 Answers0