angular-elastic-grid

Installation

install angular-elastic-grid by bower or npm running the following command

bower install angular-elastic-grid --save
or
npm install angular-elastic-grid --save

or download here then append angular-elastic-grid.min.js in to end of body, before your project, after the angular and the other libs.

<!--using bower-->
...
...
<script src="../bower_components/angular-elastic-grid/dist/angular-elastic-grid.min.js"></script>
...
...
</body>
</html>

<!--using npm-->
...
...
<script src="../node_modules/angular-elastic-grid/dist/angular-elastic-grid.min.js"></script>
...
...
</body>
</html>

add angular-elastic-grid as a module dependency for your app

angular.module('my.app', [
    'angular-elastic-grid'
])

Usage

There are eight filter options for elastic_grid.js

• popup
• none
• moveup
• scaleup
• fallperspective
• helix
• fly
• flip

items must be an array. filter uses the 'none' filter if no filter is defined.

Optionals: direction, speed, height, delay and inverse.

<div elastic-grid>
</div>
...
or
...
<elastic-grid></elastic-grid>
...
or
...
<elastic-grid items="[{
  title: 'Title 1',
  description: 'This is a description.',
  thumbnail: ['http://placehold.it/350x150'],
  large: ['http://placehold.it/450x350', 'http://placehold.it/450x350', 'http://placehold.it/450x350'],
  button_list: [
    { title: 'Demo', url: 'http://placehold.it/450x350'},
    { title: 'Download', url: 'http://placehold.it/450x350'}
  ],
  tags: ['Test']
}, {
  title: 'Title 2',
  description: 'This is a description.',
  thumbnail: ['http://placehold.it/350x150'],
  large: ['http://placehold.it/450x350', 'http://placehold.it/450x350', 'http://placehold.it/450x350'],
  button_list: [
    { title: 'Demo', url: 'http://placehold.it/450x350'},
    { title: 'Download', url: 'http://placehold.it/450x350'}
  ],
  tags: ['Test, Title2']
}, {
  title: 'Title 3',
  description: 'This is a description.',
  thumbnail: ['http://placehold.it/350x150'],
  large: ['http://placehold.it/450x350', 'http://placehold.it/450x350', 'http://placehold.it/450x350'],
  button_list: [
    { title: 'Demo', url: 'http://placehold.it/450x350'},
    { title: 'Download', url: 'http://placehold.it/450x350'}
  ],
  tags: ['Test, Title1']
}]" filter="popup"></elastic-grid>
...
or
...
<elastic-grid items="[{
  title: 'Title 1',
  description: 'This is a description.',
  thumbnail: ['http://placehold.it/350x150'],
  large: ['http://placehold.it/450x350', 'http://placehold.it/450x350', 'http://placehold.it/450x350'],
  button_list: [
    { title: 'Demo', url: 'http://placehold.it/450x350'},
    { title: 'Download', url: 'http://placehold.it/450x350'}
  ],
  tags: ['Test']
}, {
  title: 'Title 2',
  description: 'This is a description.',
  thumbnail: ['http://placehold.it/350x150'],
  large: ['http://placehold.it/450x350', 'http://placehold.it/450x350', 'http://placehold.it/450x350'],
  button_list: [
    { title: 'Demo', url: 'http://placehold.it/450x350'},
    { title: 'Download', url: 'http://placehold.it/450x350'}
  ],
  tags: ['Test, Title2']
}, {
  title: 'Title 3',
  description: 'This is a description.',
  thumbnail: ['http://placehold.it/350x150'],
  large: ['http://placehold.it/450x350', 'http://placehold.it/450x350', 'http://placehold.it/450x350'],
  button_list: [
    { title: 'Demo', url: 'http://placehold.it/450x350'},
    { title: 'Download', url: 'http://placehold.it/450x350'}
  ],
  tags: ['Test, Title1']
}]" filter="popup" direction=true speed=500 height=500 delay=0 inverse=false> </elastic-grid>
...
...

Development

• install node and bower on your environment

cd to your desired folder and clone angular-elastic-grid repository

git clone https://github.com/lbenie/angular-elastic-grid
cd angular-elastic-grid

install all project dependencies

npm install
bower install

serve automated test once

#unit test without live reload 
gulp test-src

serve automated tests and builds

#unit test with live reload + build 
gulp

build all to distribution

#this generates minified src at `dist/angular-elastic-grid.min.js` 
gulp build

---

Notes:

• To contribute with this awesome project, just open an issue, then fork the project and make a new branch to do your work.

• Run gulp build before making your PR.

• Changelog

Feel free to open issues if you run into a problem or if you just have suggestions. PR´s are always welcome.

---

License

angular-elastic-grid is open-sourced software licensed under MIT.