angular-timeline

WebJar for angular-timeline

License

License

MIT
Categories

Categories

Angular User Interface Web Frameworks
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

angular-timeline
Last Version

Last Version

1.7.0
Release Date

Release Date

Type

Type

jar
Description

Description

angular-timeline
WebJar for angular-timeline
Project URL

Project URL

https://www.webjars.org
Source Code Management

Source Code Management

https://github.com/rpocklin/angular-timeline

Download angular-timeline

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/angular-timeline/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>angular-timeline</artifactId>
    <version>1.7.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/angular-timeline/
implementation 'org.webjars.npm:angular-timeline:1.7.0'
// https://jarcasting.com/artifacts/org.webjars.npm/angular-timeline/
implementation ("org.webjars.npm:angular-timeline:1.7.0")
'org.webjars.npm:angular-timeline:jar:1.7.0'
<dependency org="org.webjars.npm" name="angular-timeline" rev="1.7.0">
  <artifact name="angular-timeline" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='angular-timeline', version='1.7.0')
)
libraryDependencies += "org.webjars.npm" % "angular-timeline" % "1.7.0"
[org.webjars.npm/angular-timeline "1.7.0"]

Dependencies

compile (1)

Group / Artifact Type Version
org.webjars.npm : angular jar [1.3.15,2)

Project Modules

There are no modules declared in this project.

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:

<link rel="stylesheet" href="bower_components/angular-timeline/dist/angular-timeline.css"/>

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

<script src="bower_components/angular-timeline/dist/angular-timeline.js"></script>

  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.'
  }];
  <!-- view -->
  <timeline>
    <timeline-event ng-repeat="event in events" side="right">
      <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>
  </timeline>

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 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:

  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
  <link rel="stylesheet" href="bower_components/angular-timeline/dist/angular-timeline-bootstrap.css" />
  <script src="bower_components/angular-timeline/dist/angular-timeline.js"></script>

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.

Versions

Version
1.7.0