ovh-angular-timeline
v1.5.2
Published
FORK - An Angular.js directive that generates a responsive, data-driven vertical timeline to tell a story, show history or describe a sequence of events.
Downloads
11
Readme
Angular Timeline
This is a fork of the original component from version 1.5.0
This forked version add options to the directive to manage the layout of the timeline
An Angular.js directive that generates a responsive, data-driven vertical timeline to tell a story, show history or describe a sequence of events.
Demo
Original Implementation (HTML / Javascript)
Inspiration
Installation
- Install the plugin into your Angular.js project, manually or via
bower install ovh-angular-timeline --save
- Include
ovh-angular-timeline.css
in your app:
<link rel="stylesheet" href="bower_components/ovh-angular-timeline/dist/ovh-angular-timeline.css"/>
- Include
ovh-angular-timeline.js
in your app:
<script src="bower_components/ovh-angular-timeline/dist/ovh-angular-timeline.js"></script>
- Add
ovh-angular-timeline
as a new module dependency in your angular app.
var myapp = angular.module('myapp', ['ovh-angular-timeline']);
- To define a timeline, do the following (either manually or using ng-repeat on a dataset):
// in controller
$scope.events = [{
badgeClass: 'info',
badgeIconClass: 'glyphicon-check',
title: 'First heading',
content: 'Some awesome content.'
}, {
badgeClass: 'warning',
badgeIconClass: 'glyphicon-credit-card',
title: 'Second heading',
content: 'More awesome content.'
}];
<!-- view -->
<timeline-event ng-repeat="event in events">
<timeline-badge class="{{event.badgeClass}}">
<i class="glyphicon {{event.badgeIconClass}}"></i>
</timeline-badge>
<timeline-panel class="{{event.badgeClass}}">
<timeline-heading>
<h4>{{event.title}}</h4>
</timeline-heading>
<p>{{event.content}}</p>
</timeline-panel>
</timeline-event>
There is a bit of markup here but <timeline-heading>
is optional.
<timeline-badge>
is for the centre line between the two sides, and should represent the event type that occured.
Notes
The demo uses angular-scroll-animate to trigger CSS animations when timeline events scroll into view. It's totally optional to include this or not and is just there for effect.
Panels are now designed to float left, then right, side to side. Float right is forced on smaller (eg. mobile) devices.
If you define the events in an array and have HTML content to output, use
ng-bind-html={{event.attribute}}
and require thengSanitize
module.You can use either the SASS styles directly file under
/dist
or the compiled CSS files, up to you :)If you are using Bootstrap 3 it affects the timeline CSS, so include
ovh-angular-timeline-bootstrap.[css|scss]}
to re-adjust the offsets e.g:
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/ovh-angular-timeline/dist/ovh-angular-timeline-bootstrap.css" />
<script src="bower_components/ovh-angular-timeline/dist/ovh-angular-timeline.js"></script>
Running Locally
- Checkout git repository locally:
git clone ovh-angular-timeline.git
npm install
bower install
grunt serve
- View
http://localhost:9000/example/
in your browser to see the example.
Contributing
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Beautify (
grunt beautify
) - Ensure it passes code-checks / tests (
grunt
) - Commit your changes (
git commit -am 'Added some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create a new Pull Request
History
- 1.5.2 Updated dependency used in example
angular-scroll-animate
from 0.8.0 to 0.9.1. - 1.5.0 Updated dependencies, simplified nested components and improved example. Changed
timeline-node
totimeline-event
. Removedreplace = true
in directives. - 1.2.1 Cleaned up dependencies and build steps.
- 1.2.0 Updated example and styling to be more responsive.
- 1.0.0 Initial release
TODO
- Add some tests
Thanks
luisrudge for the original vanilla JS implementation on Bootsnipp
License
Released under the MIT License. See the LICENSE file for further details.