angular-timeline

WebJar for angular-timeline

License	MIT
Categories	Angular User Interface Web Frameworks
GroupId	org.webjars.npm
ArtifactId	angular-timeline
Last Version	1.7.0
Release Date	Aug 31, 2020
Type	jar
Description	angular-timeline WebJar for angular-timeline
Project URL	https://www.webjars.org
Source Code Management	https://github.com/rpocklin/angular-timeline

Download angular-timeline

Filename	Size
angular-timeline-1.7.0.pom
angular-timeline-1.7.0.jar	313 KB
angular-timeline-1.7.0-sources.jar	22 bytes
angular-timeline-1.7.0-javadoc.jar	22 bytes

How to add to project

Apache Maven

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

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/angular-timeline/
implementation 'org.webjars.npm:angular-timeline:1.7.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/angular-timeline/
implementation ("org.webjars.npm:angular-timeline:1.7.0")

Apache Buildr

'org.webjars.npm:angular-timeline:jar:1.7.0'

Apache Ivy

<dependency org="org.webjars.npm" name="angular-timeline" rev="1.7.0">
  <artifact name="angular-timeline" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='angular-timeline', version='1.7.0')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "angular-timeline" % "1.7.0"

Leiningen

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

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 Aug 31, 2020