angular-timeline

by rpocklin

rpocklin /angular-timeline

An Angular.JS directive that generates a responsive, data-driven vertical timeline to tell a story, ...

409 Stars 113 Forks Last release: Not found Other 50 Commits 11 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Angular 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.

Build Status

Demo

Demo

Demo without bootstrap

Original Implementation (HTML / Javascript)

NG Docs

link

Inspiration

1 2 3 4 5 6

Installation

  1. Install the plugin into your Angular.js project, manually or via

bower install angular-timeline --save
  1. Include
    angular-timeline.css
    in your app:



  1. Include
    angular-timeline.js
    in your app:



  1. Add
    angular-timeline
    as a new module dependency in your angular app.

var myapp = angular.module('myapp', ['angular-timeline']);
  1. 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.'
    }];
    
    
      
        
          
        
        
          
            

{{event.title}}

{{event.content}}

There is a bit of markup here but

 is optional.
 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 the
    ngSanitize
    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

    angular-timeline-bootstrap.[css|scss]}
    to re-adjust the offsets e.g:
  
  
  

Running Locally

  1. Checkout git repository locally:
    git clone [email protected]:rpocklin/angular-timeline.git
  2. npm install
  3. bower install
  4. grunt serve
  5. View
    http://localhost:9000/example/
    in your browser to see the example.

Contributing

  1. Fork it
  2. Create your feature branch (
    git checkout -b my-new-feature
    )
  3. Beautify (
    grunt beautify
    )
  4. Ensure it passes code-checks / tests (
    grunt
    )
  5. Commit your changes (
    git commit -am 'Added some feature'
    )
  6. Push to the branch (
    git push origin my-new-feature
    )
  7. Create a new Pull Request

History

  • 1.7.0 Changed CSS classes to fix animations in and out (in example).
  • 1.6.2 Fixed missing logic in passing
    side
    attribute declaration (was watching parent scope)
  • 1.6.1 Added attribute for
    side=left
    or
    side=right
    to force left or right-handed columns for timeline events.
  • 1.6.0 Changed
    hidden
    to
    timeline-hidden
    class in example an
    angular-timeline-animations.css
    .
  • 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
    to
    timeline-event
    . Removed
    replace = 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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.