Skip to content

Commit

Permalink
1.0.0 Initial release.
Browse files Browse the repository at this point in the history
  • Loading branch information
rpocklin committed Jan 15, 2015
0 parents commit fcd4fd2
Show file tree
Hide file tree
Showing 475 changed files with 154,123 additions and 0 deletions.
3 changes: 3 additions & 0 deletions .bowerrc
@@ -0,0 +1,3 @@
{
"directory" : "bower_components"
}
3 changes: 3 additions & 0 deletions .gitignore
@@ -0,0 +1,3 @@
coverage
node_modules
.idea
28 changes: 28 additions & 0 deletions .jshintrc
@@ -0,0 +1,28 @@
{
"globalstrict": true,
"debug": false,
"node": false,
"devel": true,
"boss": true,
"curly": false,
"eqeqeq": true,
"eqnull": true,
"expr": true,
"immed": true,
"loopfunc": true,
"noarg": true,
"onevar": false,
"quotmark": "single",
"smarttabs": true,
"trailing": true,
"undef": true,
"unused": false,
"globals": {
"angular": false,
"$": false,
"jQuery": false,
"Backbone": false,
"_": false,
"document": false
}
}
7 changes: 7 additions & 0 deletions .travis.yml
@@ -0,0 +1,7 @@
language: node_js
node_js:
- "0.10"
before_script:
- npm install -g bower
- bower install
script: "grunt"
124 changes: 124 additions & 0 deletions Gruntfile.js
@@ -0,0 +1,124 @@
'use strict';

module.exports = function(grunt) {

// Load grunt tasks automatically
require('load-grunt-tasks')(grunt);

// Define the configuration for all the tasks
grunt.initConfig({

connect: {
server: {
options: {
port: 9000
}
}
},

watch: {
scripts: {
files: ['src/**/*'],
tasks: ['build'],
options: {
spawn: false
}
}

},

clean: ['src/angular-timeline.js'],

concat: {
dist: {
// Replace all 'use strict' statements in the code with a single one at the top
options: {

banner: "'use strict';\nangular.module('angular-timeline', []);",
process: function(src, filepath) {
return '// Source: ' + filepath + '\n' +
src.replace(/(^|\n)[ \t]*('use strict'|"use strict");?\s*/g, '$1');
}
},
src: ['src/*.js'],
dest: 'src/angular-timeline.js'
},
},

sass: {
dist: {
files: {
'src/angular-timeline.css':'src/angular-timeline.scss',
'src/angular-timeline-bootstrap.css':'src/angular-timeline-bootstrap.scss'
}
}
},

// verifies we have formatted our js and HTML according to our style conventions
jsbeautifier: {
files: ['!Gruntfile.js', '!npm-shrinkwrap.json', 'src/**/*.{html,js}', '!app/bower_components/**/*'],
options: {
mode: 'VERIFY_ONLY',
js: {
'indent_size': 2,
'indent_char': ' ',
'indent_level': 0,
'indent_with_tabs': false,
'preserve_newlines': true,
'max_preserve_newlines': 2,
'jslint_happy': false,
'brace_style': 'end-expand',
'indent_scripts': 'keep',
'keep_array_indentation': true,
'keep_function_indentation': false,
'space_before_conditional': true,
'break_chained_methods': false,
'eval_code': false,
'unescape_strings': false,
'wrap_line_length': 0
}
}
},

// Make sure code styles are up to par and there are no obvious mistakes
jshint: {
options: {
jshintrc: '.jshintrc',
reporter: require('jshint-stylish')
},
src: ['src/!(*spec).js']
},

// Test settings
karma: {
unit: {
options: {
logLevel: 'DEBUG'
},
browsers: ['PhantomJS'],
configFile: 'karma.conf.js',
singleRun: true,
autoWatch: false
}
},
coveralls: {
options: {
coverage_dir:'coverage',
directory:'coverage/PhantomJS 1.9.7 (Mac OS X)/lcov.info',
debug: true,
dryRun: false,
recursive: false
}
}
});

grunt.registerTask('serve', ['build','connect', 'watch']);

grunt.registerTask('build', [
'clean', 'sass', 'jsbeautifier', 'jshint', 'concat', //'karma'
]);

grunt.registerTask('default', [
'build', 'coveralls'
]);
};
21 changes: 21 additions & 0 deletions LICENSE
@@ -0,0 +1,21 @@
Copyright 2014 Robert Pocklington
http://github.com/rpocklin/angular-timeline

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
132 changes: 132 additions & 0 deletions README.md
@@ -0,0 +1,132 @@
# 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](https://secure.travis-ci.org/rpocklin/angular-timeline.svg)](http:/travis-ci.org/rpocklin/angular-timeline)
[![Coverage Status](https://coveralls.io/repos/rpocklin/angular-timeline/badge.png)](https://coveralls.io/r/rpocklin/angular-timeline)

[Original Implementation (HTML / Javascript)](http://bootsnipp.com/snippets/featured/timeline-responsive)

[Demo](http://rpocklin.github.io/angular-timeline/example/index.html)
[Demo without bootstrap](http://rpocklin.github.io/angular-timeline/example/index-no-bootstrap.html)

# Inspiration
[1](http://bootsnipp.com/snippets/featured/two-column-timeline-not-responsive)
[2](http://bootsnipp.com/snippets/featured/timeline-single-column)
[3](http://bootsnipp.com/snippets/featured/single-column-timeline)
[4](http://bootsnipp.com/snippets/featured/timeline-with-images-and-tooltip)
[5](http://bootsnipp.com/snippets/featured/timeline-dotted)

## 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/angular-timeline.css" />`

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

`<script src="bower_components/angular-timeline/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):

```
<timeline>
<timeline-node side="left">
<timeline-badge class="info"><i class="glyphicon glyphicon-check"></i>
</timeline-badge>
<timeline-panel>
<timeline-heading>
<timeline-title>Some twitter post</timeline-title>
<p>
<small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small>
</p>
</timeline-heading>
<timeline-content>
<p>Twitter post goes here</p>
</timeline-content>
</timeline-panel>
</timeline-node>
<timeline-node side="right">
<timeline-badge class="warning"><i class="glyphicon glyphicon-credit-card"></i>
</timeline-badge>
<timeline-panel>
<timeline-heading>
<timeline-title>Another twitter post</timeline-title>
<p>
<small class="text-muted">12 hours ago via Twitter</small>
</p>
</timeline-heading>
<timeline-content>
<p>Another twitter post goes here</p>
</timeline-content>
</timeline-panel>
</timeline-node>
</timeline>
```

Yes, there is a bit of markup here, but `<timeline-content>` and `<timeline-heading>` are optional.

`timeline-badge` is for the centre line between the two sides, and should represent the event type that occured.

I had also added an optional `<timeline-footer>` to go after `<timeline-content>` for links and other info.


## Notes

- You can use the `side=left` or `side=right` attribute on the `<timeline-node>` element to float the timeline panels left or right accordingly. (when < 768px in width it will push all `<timeline-node>` elements to the right).

- You can use either the SASS styles directly file under `/src` 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:

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


## Running Locally

1. Checkout git repository locally: `git clone git@github.com:rpocklin/angular-timeline.git`
1. `npm install`
1. `bower install`
1. `grunt serve`
1. 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. Make your changes, run `grunt karma` to ensure all tests pass. (Ideally add more tests!)
3. Commit your changes (`git commit -am 'Added some feature'`)
4. Push to the branch (`git push origin my-new-feature`)
5. Create a new Pull Request


## History

1.0.0 Initial release


## TODO

- Add some tests
- Add some examples with ng-repeat based on JSON datasets.

## Thanks
luisrudge for the original vanilla JS implementation on [Bootsnipp](http://bootsnipp.com/snippets/featured/timeline-responsive)


## License

Released under the MIT License. See the [LICENSE][license] file for further details.

[license]: https://github.com/rpocklin/angular-timeline/blob/master/LICENSE
35 changes: 35 additions & 0 deletions bower.json
@@ -0,0 +1,35 @@
{
"name": "angular-timeline",
"version": "0.0.7",
"license": "MIT",
"main": "src/angular-timeline.js",
"keywords": [
"angular, timeline, history, list, bootstrap"
],
"ignore": [
"**/.*",
"*.yml",
".jshintrc",
"node_modules",
"bower_components",
"example",
"Gruntfile.js",
"package.json",
"component.json",
"bower.json",
"karma.conf.js"
],
"dependencies": {
"angular": "^1.2.26",
"angular-bootstrap": "^0.11.2",
"angular-ui-router": "^0.2.11"
},
"devDependencies": {
"angular-mocks": "^1.2.26",
"sinon": "1.9.0",
"jasmine-sinon": "0.3.1",
"underscore": "~1.7.0",
"jquery": "~2.1.1",
"bootstrap": "~3.2.0"
}
}
23 changes: 23 additions & 0 deletions bower_components/angular-bootstrap/.bower.json
@@ -0,0 +1,23 @@
{
"author": {
"name": "https://github.com/angular-ui/bootstrap/graphs/contributors"
},
"name": "angular-bootstrap",
"version": "0.11.2",
"main": [
"./ui-bootstrap-tpls.js"
],
"dependencies": {
"angular": ">=1"
},
"homepage": "https://github.com/angular-ui/bootstrap-bower",
"_release": "0.11.2",
"_resolution": {
"type": "version",
"tag": "0.11.2",
"commit": "49aa07315b44783d22270a39bfa13e9f5abcab3b"
},
"_source": "git://github.com/angular-ui/bootstrap-bower.git",
"_target": "^0.11.2",
"_originalSource": "angular-bootstrap"
}
11 changes: 11 additions & 0 deletions bower_components/angular-bootstrap/bower.json
@@ -0,0 +1,11 @@
{
"author": {
"name": "https://github.com/angular-ui/bootstrap/graphs/contributors"
},
"name": "angular-bootstrap",
"version": "0.11.2",
"main": ["./ui-bootstrap-tpls.js"],
"dependencies": {
"angular": ">=1"
}
}

0 comments on commit fcd4fd2

Please sign in to comment.