A lightweight masonry-like grid for AngularJS.
bower install --save angular-deckgrid
Include angular-deckgrid in your HTML.
<script src="https://github.com/akoenig/angular-deckgrid/raw/master/<your-bower-components>/angular-deckgrid/angular-deckgrid.js"></script>Inject the angular-deckgrid module in your application.
angular.module('your.module', [
'akoenig.deckgrid'
]);The directive does not depend on the visual representation. All the responsiveness and beauty comes from your CSS file. But wait a second. Let's take a look how the directive will be integrated. An example:
<div deckgrid source="photos" cardTemplate="templates/deckgrid-card.html" class="deckgrid"></div>Okay, we assume that you have a collection of photos and you want to display these in a deckgrid, where every photo provides a name and a source URL. The internal structure of this collection is completely up to you. You can use any collection structure you want. No restrictions at all.
source: The collection of objects that should be passed into your deckgrid (by reference. Object change will be reflected in the grid).cardTemplate: The URL to the template which represents one single card in the deckgrid.cardTemplateString attribute: You can provide this attribute instead of the cardTemplate attribute to use the attribute value directly as the template. Example:
<div deckgrid class="deckgrid" source="photos" cardTemplateString="<p>{{card.title}}</p>"></div>No template attribute: if you omit a template attribute (cardTemplate and cardTemplateString), the inner HTML of the directive will be used as the template, like in:
<div deckgrid class="deckgrid" source="photos">
<div class="a-card">
<h1>{{card.title}}</h1>
<img src="https://github.com/akoenig/angular-deckgrid/raw/master/" data-ng-src="https://github.com/akoenig/angular-deckgrid/raw/master/{{card.src}}">
</div>
</div>Note: if you use one of these alternative ways to provide the card template, you don't have to use an external template file. However, using such a file is recommended, esp. for more complex templates.
Okay, you have your controller ready and your template is fine so far. The only thing what is missing is a flexible grid. Let's start!
Your possible data structure
$scope.photos = [
{id: 'p1', 'title': 'A nice day!', src: "http://lorempixel.com/300/400/"},
{id: 'p2', 'title': 'Puh!', src: "http://lorempixel.com/300/400/sports"},
{id: 'p3', 'title': 'What a club!', src: "http://lorempixel.com/300/400/nightlife"}
];Your possible card template (it is completely up to you)
<div class="a-card">
<h1>{{card.title}}</h1>
<img src="https://github.com/akoenig/angular-deckgrid/raw/master/" data-ng-src="https://github.com/akoenig/angular-deckgrid/raw/master/{{card.src}}">
</div>Accessing the card's index
In order to use the index of the current card from within the card's template, use the $index property of the card object, like:
<span>{{card.$index}}</span>This index reflects the index of the corresponding object in the source collection.
That's all! Ehm, no. If you run your application now, you will notice that there is only one column. What is missing? Well, we have to define the configuration for the visual representation. And what is the best place for something like this? Yes, for sure! Your CSS file(s).
The grid items will be distributed by your configured CSS selectors. An example:
.deckgrid[deckgrid]::before {
/* Specifies that the grid should have a maximum of 4 columns. Each column will have the classes 'column' and 'column-1-4' */
content: '4 .column.column-1-4';
font-size: 0; /* See https://github.com/akoenig/angular-deckgrid/issues/14#issuecomment-35728861 */
visibility: hidden;
}
.deckgrid .column {
float: left;
}
.deckgrid .column-1-4 {
width: 25%;
}In order to support different grid representations for different screen sizes, you can define the respective media queries like:
.deckgrid .column-1-1 {
width: 100%;
}
@media screen and (max-width: 480px){
.deckgrid[deckgrid]::before {
content: '1 .column.column-1-1';
}
}
...This will define that for a device with a maximum screen width of 480px, only one column should be used. As I mentioned before. It is completely up to you how to define the column sizes. Go crazy. Although this example represents an adaptive kind of layout you are able to realize a responsive layout as well. The module is for the segmentation part, you have the full control over your layout.
You may wonder why it is not possible to access your scope in the card template. The angular-deckgrid uses directives of AngularJS internally which creates new scopes. To avoid the "anti-pattern" of using "$parent.$parent.$parent.yourFunction()" in the card template, the angular-deckgrid provides a shortcut mother.* which points to your scope. An example:
<button data-ng-click="mother.doSomething()">Click me!</button>A click on this button would execute the doSomething() function in your scope.
Do you use the angular-deckgrid and would like to be featured here? Just send me an email and I will add you and your application to this list.
innerHTML templates (e.g. ngIf not working) #44bower.json (v1.3.0).$watch to $watchCollection to gain a bit more performance (see #56).undefined checks to AngularJS standard functions.rule.cssRules is undefined, the style investigation should always exit.selectorText of the css rules is undefined.angular-deckgrid, which creates new scopes. In order to access the parent scope which is responsible for embedding the angular-deckgrid directive, this release contains a shortcut for accessing your scope ({{mother.*}}).angular-deckgrid so far.Copyright 2013 - 2014, André König (andre.koenig@posteo.de)