A lightweight masonry-like grid for AngularJS.
Home Page: http://akoenig.github.io/angular-deckgrid
License: MIT License
I'm getting this error when trying to use this grid with ExpressJS/Jade. Occurs at line 182:
var column = (index % self.$$scope.layout.columns) | 0;
HTML setup for Jade:
div(deckgrid, source="posts", cardTemplate="templates/grid-template.html", class="deckgrid")
Gets rendered as:
<div deckgrid="deckgrid" source="posts" cardtemplate="templates/grid-template.html" class="deckgrid ng-isolate-scope ng-scope">
<!-- ngRepeat: column in columns -->
</div>
As you can see there's nothing being output in the columns. I've tried setting the template to a full URL and doesn't work. Perhaps it's an issue with my data structure? Here's one object within the $scope.posts array
{
_id: "528dbf28957ba0311a002208"
backupLink: "http://www.urbanoutfitters.com/urban/catalog/productdetail.jsp?id=28502466"
category: Array[3]
currency: "USD"
date: "2013-11-21T07:23:38.413Z"
dateUpdated: "2013-11-21T22:30:47.168Z"
description: ""
designer: "Urban Outfitters"
gender: "unisex"
imageurl: "http://images.urbanoutfitters.com/is/image/UrbanOutfitters/28502466_000_b?$detailmain$"
imgs: Array[4]
impressionURL: "http://www.awltovhc.com/image-7227532-11292048"
infoLink: "http://www.kqzyfj.com/click-7227532-11292048?url=http%3A%2F%2Fwww.urbanoutfitters. om%2Furban%2Fcatalog%2Fproductdetail.jsp%3Fid%3D28502466"
liked: "http://i.imgur.com/tEf77In.png"
likes: Array[0]
name: "My Bloody Valentine - MBV LP+CD"
nameTags: Array[10]
price: "46.98"
ships_to: "worldwide"
store: "Urban Outfitters"
systemName: "urban_outfitters_my_bloody_valentine_-_mbv_lp+cd"
}
There's about 30 of them in $scope.posts and they print just fine when I put them in a {{posts}} within my template.
Any ideas on a remedy?
Hi. I have been having problems with deckgrid since yesterday. Since nailing down the version of angular in my bower.json to "v1.2.0-rc.2" which I have to do because of some compatibility issues with other plugins, I'm getting some deckgrid related errors in the Firefox's Firebug console. Namely:
Error: rule.cssRules[i].selectorText is undefined
hasDeckgridStyles@http://localhost:9001/bower_components/angular-deckgrid/angular-deckgrid.js:211
inRuleIteration@http://localhost:9001/bower_components/angular-deckgrid/angular-deckgrid.js:223...
Error: this.$$deckgrid is null $$destroy@http://localhost:9001/bower_components/angular-deckgrid/angular-deckgrid.js:81 Scope.prototype.$broadcast@http://localhost:9001/bower_components/angular/angular.js:10301
Error: rule.cssRules[i].selectorText is undefined
hasDeckgridStyles@http://localhost:9001/bower_components/angular-deckgrid/angular-deckgrid.js:211
inRuleIteration@http://localhost:9001/bower_components/angular-deckgrid/angular-deckgrid.js:223
forEach@http://localhost:9001/bower_components/angular/angular.js:227
Is there a known incompatibility between this version and deckgrid, or do you think something else might be the cause. I am using "v0.2.1" of "angular-deckgrid".
<div deckgrid class="deckgrid" source="photos">
<div class="a-card">
<h1>{{card.title}}</h1>
<img src="" data-ng-src="{{card.src}}">
<h2 ng-if="!card.me" >Its you!</h2>
</div>
</div>In render
<img src="" data-ng-src="http:....">
<!-- ng:If !card.me -->I'm stucked with this problem.. Don't know why but these css configurations for deckgrid work only after page reload and not on window resize (as it works on examples)..
@media screen and (max-width: 1280px) {
.feed.dashboard,
.feed.top-bar {
width: 1020px;
}
.deckgrid[deckgrid]:before {
content: '4 .column.size-1-4' !important;
}
}
@media screen and (max-width: 1020px) {
.feed.dashboard,
.feed.top-bar {
width: 760px;
}
.deckgrid[deckgrid]:before {
content: '3 .column.size-1-3' !important;
}
}
Did somebody had this issue? Please help!
Is there a way to pass the template as a string instead of a url?
Basically, how routeProvider works (template vs templateUrl):
http://docs.angularjs.org/api/ngRoute.$routeProvider
Thanks!
Hi Andre,
Do you by chance have an index.html of the example that could be included with the module for a quick start?
This way it would not be necessary for you to troubleshoot different environments.
Thanks!
Nash
The build process has to be refactored. It should test, build and integrate the angular-deckgrid into the demo application at gh-pages.
Maybe we could port it from Grunt to gulp.js as well.
Here's a plunker with a test: http://plnkr.co/edit/DWj896iIY1TGW5XAqfnW?p=preview
As you can see, calling ng-click on an element inside of a template doesn't work correctly. In the example above, nothing is written to console nor is printed in $scope.message.
I checked out: #27 where I found
.deckgrid[deckgrid]::before {
content: '5 .column.size-1-5';
visibility: hidden;
font-size: 0;
}
and firebean3's comment:
I added an element before the deckgrid inside the tab with the attribute ng-init="initialised=true;"
I added to the deckgrid the attribute ng-if="initialised"
which fixed my initial issue in Chrome. However, with IOS 8 simulator I am getting the same No CSS grid configuration bug with these fixes.
Has anyone found a workaround for this issue?
i think we should add lodash to validate the following code from
Deckgrid.prototype.$$onModelChange = function $$onModelChange (newModel, oldModel) {
var self = this;
newModel = newModel || [];
oldModel = oldModel || [];
//Does not work if the newModel and oldModel have the same item count
if (oldModel.length !== newModel.length) {
self.$$createColumns();
}
};
to
Deckgrid.prototype.$$onModelChange = function $$onModelChange (newModel, oldModel) {
var self = this;
newModel = newModel || [];
oldModel = oldModel || [];
if (oldModel.length !== newModel.length || !_.isEqual(newModel, oldModel)) {
self.$$createColumns();
}
};
Since this is a column oriented directive, wouldn't it be reasonable to rely on Bootstrap for that sort of thing? Or maybe you're leaving that out on purpose and if I want to use Bootstrap, I should wire that in on my own?
If in one page under one controller, I have two card templates inside my html files, I did not use two separate template files. The directive always cache my second template and apply it to the first template as well.
I was just wondering if you have a method to bring more data in to the scope. On the off chance I tried it with ngInfiniteScroll which works well with Masonry and stand alone though with Deckgrid I get a "Multiple Directive Resource Contention" as an error.
Are there any solutions out there at the moment to implement this kind of feature?
It seems the example here goes to 5 col max
http://akoenig.github.io/angular-deckgrid/#/
Is there a way to make the number of columns to increase on larger screen base on the width? Right now it can shrink to fewer columns but not go beyond 5.
http://plnkr.co/edit/SPdgpMOZzwYbDcBqN8pn?p=preview
<div deckgrid source="[1,2,3]" cardTemplateString="aaa" class="deckgrid"></div>
<hr>
<div deckgrid source="[1,2,3,4]" cardTemplateString="bbb" class="deckgrid"></div>
<hr>
<div deckgrid source="[1,2,3,4,5,6,7]" cardTemplateString="ccc" class="deckgrid"></div>
<hr>
<div deckgrid source="[1,2,3,4,5,6,7,8]" cardTemplate="tpl1.html" class="deckgrid"></div>
<hr>
<div deckgrid source="[1,2,3,4,5,6,7,8]" cardTemplate="tpl2.html" class="deckgrid"></div>
<hr>
<div deckgrid source="[1,2,3,4,5,6,7]" cardTemplateString="ddd" class="deckgrid"></div>Expected: templates aaa, bbb and ccc also displayed.
Actual result: all templates are ddd
I have integrated deckgrid in my app & it's working properly. After initial load & display of photo grid, app keeps making some ajax calls & retrieves new pictures from back end periodically. Requirement is to display the new pictures in grid, along with older one. However, when I push new picture entries into model (aka "$scope.photos"), new pictures doesn't get loaded/reflected in grid.
On line 228 in the deckgrid.js [1], the order of parameters should be newModel, oldModel. See [2] for details.
[1] https://github.com/akoenig/angular-deckgrid/blob/master/src/deckgrid.js#L228
[2] http://docs.angularjs.org/api/ng/type/$rootScope.Scope#methods_$watch
I have a custom directive that requires an ngModel, which I set myself within deckgrid card template like so:
<div deckgrid class="deckgrid" source="entries">
<journal-entry ng-model="card" tag-search="mother.searchTags></journal-entry>
</div>
However, when the controller in my custom directive runs, the scope variable set as entry: '=ngModel' is undefined since it seems to not have been binded yet ($scope.entry is undefined). This use to work perfectly well until I integrated it with deckgrid. Since the template I use for my directive is all binded, it does show the appropriate data when the model becomes available within the scope, but it's a problem when I have to set certain defaults in my controller.
I would like to be able to filter the deckgrid much like we can do with the ngrepeat. Have you thought about how this could be made possible?
Haven't found a solution to make the following code compatible with IE8
Array.prototype.slice.call(document.querySelectorAll('style[type=\'text/css\']'))
Could maybe be as easy as changing the version in bower.json:
"dependencies": {
"angular": "~1.2.0"
},
Put example here with all files http://akoenig.github.io/angular-deckgrid/#/ in an /example folder
I think the way deckgrid works now is to render each photo per column, then move on to the next column.
How do I make sure it goes horizontal instead? The reason is that if you got too many photos and top 10 are important, they only stay in the first column and you see only the first 3-4 photos.
Thanks.
I am getting this issue on Chrome (not on Firefox) even you demo site is not working. A few days ago it use to work.
Chrome Version 34.0.1797.2 dev-m
i'm trying to find a grid system for my metro ui
i wonder if it's straight forward (and possible at all) to have some tiles to build a complex metro layout (like this)
i need some advanced examples to demonstrate these.
FYI: i'm coming from gridster, i love masonary's responsiveness
Hi,
I tried this directive and it looks good. I'm just wondering if it is possible to use Angular Deckgrid with variable width items? Something like:
http://thereason.us/
On my testing the elements were cut at the column size.
Thanks
Column layout works just fine when using a static amount of items on the page, but if you're using this for a big search page which has a "get more posts" style infinite-scroll call then it breaks the grid.
For instance, in my app the page works like this:
$scope.posts. These load fine in the grid.$scope.posts, now with 60 items inside.deckgrid. Instead they all just load into one column.A fix for this in the next update would be great,
Hi.
Is there a way to get index of card, inside card template?
e.g if I have 3 cards in the first row, and I click on second one, I want to be able to pass index = 1 to my controller.
Thanks!
I've seen the other issues about this, but I'm still having the error:
angular-deckgrid: No CSS configuration found
Chrome version: 33.0.1750.117
My css configuration:
.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: '3 .column.column-1-3';
font-size: 0; / See #14 (comment) */
visibility: hidden;
}
.deckgrid .column {
float: left;
}
.deckgrid .column-1-3 {
width: 25%;
}
I am new to angular js and was impressed by deckgrid and wanted to implement same so I followed the steps which are mentioned @ https://github.com/akoenig/angular-deckgrid to implement but all my effort went in vain because it did give me expected results .
Below is code which i used :
<script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js">
<script src="../../Scripts/angular.min.js"></script>
<script src="../../Scripts/angular-deckgrid.js"></script>
<div data-ng-app="myCoolApp">
<div ng-controller="myCntrl">
<div deckgrid source="photos">
<div class="a-card">
<h1>{{card.title}}</h1>
<img src="" data-ng-src="{{card.src}}">
</div>
</div>
</div>
</div>
<script>
var app = angular.module('myCoolApp', ['akoenig.deckgrid']);
app.controller('myCntrl', function ($scope) {
$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" }
];
});
</script>
<styles >
-- same as its mentioned in github
</styles>
I am getting the following error in browser when i debug with firebug :
Do correct me with right way of initializing the same or atleast a working prototype example for Angular-Deckgrid .
I have put css as documentation but still get css error
angular-deckgrid: No CSS configuration found
Hi,
Where do I configure the number of columns that I would like to display. Like in my case - I need to display the items in just 3 columns.
Just curious --- once an image has been loaded into the DOM, is there an implimentation reason for having the spinner reappear on every subsequent media query event?
Firefox will initially render the page with the correct grid setup, however upon resizing, it does not respond at all to changing the columns. It just starts squeezing them.
Confirmed on 27 and above but I believe I saw it on 25/26 before it auto-updated.
ng-if inside card doesn't work.. module version is 0.4.1.
I see this issue closed - #37 but the bug is present.
Why is it not possible to use ng-repeat inside a deckgrid while ng-repeat can be used recursively ?
Demonstration of both non-working (deckgrid) and working (ng-repeat) behaviour here : (http://codepen.io/anon/pen/nfzHk/)
I'm trying to get responsive column counts to work using version 0.2.2. The css below works correctly when refreshing the page at different widths, but when resizing the page, the column counts aren't responsively updating. Can you tell me what you think is wrong? I appreciate it!
.deckgrid[deckgrid]::before {
font-size:0;
visibility:hidden;
}
.deckgrid .column {
float: left;
}
@media screen and (max-width: 480px){
.deckgrid[deckgrid]::before {
content: '1 .column.column-1-1';
}
.deckgrid .column-1-1 {
width: 100%;
}
}
@media screen and (min-width: 481px) and (max-width:960px) {
.deckgrid[deckgrid]::before {
content: '2 .column.column-1-2';
}
.deckgrid .column-1-2 {
width: 50%;
}
}
@media screen and (min-width: 961px){
.deckgrid[deckgrid]::before {
content: '4 .column.column-1-4';
}
.deckgrid .column-1-4 {
width: 25%;
}
}
Is there a way to use various angular filters with the source object? OrderBy , etc?
How to set order of items or add new to beginning?
I am Using angular-deckgrid to create pinterest like view
Here is the Code I have written
<div deckgrid source="items" class="deckgrid">
<span data-ng-repeat='i in card'>{{ i }}</span>
</div>
I am expecting the value of i in the ng-repeat, but that seems to be not going in the loop.
Can any one please suggest me the solution.
http://plnkr.co/edit/Nl1B4MdeCc2pZajuIVkJ?p=preview
<div ng-init="variable = 'example'"></div>
<div deckgrid source="[{a:1},{a:2}]" cardTemplateString="a: {{card.a}} | '{{variable}}' != 'example'." class="deckgrid"></div>Expected: show variable's content as well.
Result: variable is empty.
Trying to set an order for ng-repeat in the template, but can't make the custom sort function work.
Trying to add
| orderBy:sortFunction
after "card in column" in
'<div data-ng-repeat="card in column" data-ng-include="cardTemplate"></div>'
but can't execute my $scope.sortFunction() by this.
Even
| orderBy:mother.sortFunction
doesn't work! Please, help me find a way.
So I tried to use Deckgrid for my website and it works when I load the homepage for the first time. Everything looks perfect. But when I click on a article and go back to the homepage it seems like deckgrid doen't execute again. Is there a way to execute deckgrid each time not only once?
Our website works in Firefox and previous versions of Chrome Chrome updated and now deckgrid is broken
Steps to reproduce it.
Result expected: nothing shoud happen.
Result gotten: $$onMediaQueryChange is being called, resulting in an error cause there are no columns defined.
If I have a fix for this, will ask for a pull request.
NOTE that this was tested on chrome canary.
ngIf would appear to always return false. Am I missing something or is it not supported? Cheers,
Sam.
Hi i followed your instructions but I am simply unable to make it work. This is what my console says. Any ideas please ? Thanks for response.
I have css in my styles.css, also exactly same template just my data object is loaded via $http({method: ...
angular-deckgrid: No CSS configuration found (see https://github.com/akoenig/angular-deckgrid#the-grid-configuration) angular.js:9101
TypeError: Cannot call method 'match' of undefined
at c (http://something/js/vendor/angular-deckgrid.min.js:2:1566)
at http://something/js/vendor/angular-deckgrid.min.js:2:1906
at Object.p as forEach
at http://something/js/vendor/angular-deckgrid.min.js:2:1884
at Array.forEach (native)
at Object.p as forEach
at c.$$getMediaQueries (http://something/js/vendor/angular-deckgrid.min.js:2:1843)
at new c (http://something/js/vendor/angular-deckgrid.min.js:2:1181)
at Object.create (http://something/js/vendor/angular-deckgrid.min.js:2:3021)
at b.$$link (http://something/js/vendor/angular-deckgrid.min.js:2:758)
Hi, if I have the website open, also in background, it's always eating 8% CPU (MacBookPro 2013 - dual core).
Please take a look in performance in $digests, loops, whatever. I'm expecting nearly 0% cpu processing there. There's some tasks always running in background?
Thanks!
My data source comes from a service, on a callback. Until the callback it's not available.
TypeError: Cannot read property 'length' of undefined
at Deckgrid.$$onModelChange (http://localhost/assets/angular-deckgrid/angular-deckgrid.js?body=1:153:19)
If I have it as an empty array, $scope.data = [] before the service, it does work. My guess is that the code should also check if there's something in the model before accessing its .length.
Hi,
first of all, thx for the nice plugin :)
I'm trying to get deckgrid to work nicely with ngInfiniteScroll, but it looks like the columns are redrawn for every new item added to the collection, is that correct ? I've seen a closed ticket where it's supposed to work.. I just can't see how.
My items are images, every time I add some new images, it triggers a complete redraw of the layout (including the new items, which is correct). All images are re-loaded, etc... which makes for a rather bad user experience...
Can you please let me know if there's a way to add new items to the source model without triggering a complete redraw ?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.