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.