s-yadav / angulargrid Goto Github PK
View Code? Open in Web Editor NEWPinterest like responsive masonry grid system for angular
License: MIT License
Pinterest like responsive masonry grid system for angular
License: MIT License
If I refresh the grid page several times, I notice that the height applied to the grid container is calculated to be larger that than it should be on some occasions.
I put some logic in the attribute and it is not adjusting after first render. I would like the gutter size to update when the attribute value changes.
Can you update angulargrid @0.5.1 in releases
I would like to add a class to the element once it's top, left, and width attributes have been calculated and applied. I almost always see a flash of stacked elements. I would like to set their opacity to 0 while this is being calculated and 1 once it is complete. I am fully aware of the image-loaded class. In my case I am not dealing with images in the elements in my grid.
Hi,
Your plugin looks cool. But is there a way to use it with twitter bootstrap? Something like:
<div class="masonry-grid row dynamic-grid" angular-grid="posts" >
<div class=" grid masonry-grid-item col-sm-6 " ng-repeat='post in posts'>
<htmlcontenthere class="clearfix blogpost">
..............
</htmlcontenthere>
</div>
</div>
This one works on desktop and iphone 6, not on iphone 4-5 , some other small devices...
I haven't made it work in hidden divs. Is there a any way to make it work ?
For some reason, when the width of the window is very small, like on any mobile device (iOS and Android), I often get a huge vertical scroll length when refreshing or entering the page. In other words, I can scroll far past the last brick. This is messing up my infinite scroll.
Still looking for a solution.
EDIT:
Turns out that you only see the problem on mobile but it also occurs on desktop (you just can't see it for some reason). This is because the problem has to do with improperly (at random) calculated number of list elements (i.e. double the number of list elements in the list elements array).
I'd like to have a directive attribute which I can bind with my controller in order to dinamically change the number of columns.
I've tried an approach by changing the attribute grid-width so that I can calculate the minimum width for a specific number of columns but I think that with your current code the attribute grid-width it's only read once, with controller's initialization.
Is there another way to do this?
I get a flash of un-styled cards in the short amount of time angulargrid is calculating all of the top and left values and the height of the container element. I would like to set a variable on my scope to true whenever it is done rendering. A render-complete attribute would be helpful where you would pass in a variable to change to true when it is complete. This way I can set the opacity to 0 when that variable is false so the user does not see hundreds of cards stacked on top of each other.
I think I have a problem with how I've integrated your controller (index.js) into my framework - I'll paste the code below. The error I'm receiving is:
Error: [$injector:unpr] Unknown provider: ngMaterialProvider <- ngMaterial <- MainCtrl
http://errors.angularjs.org/1.5.3/$injector/unpr?p0=ngMaterialProvider%20%3C-%20ngMaterial%20%3C-%20MainCtrl
at http://localhost:3000/lib/angular/angular.js:68:12
at http://localhost:3000/lib/angular/angular.js:4418:19
at Object.getService as get
at http://localhost:3000/lib/angular/angular.js:4423:45
at getService (http://localhost:3000/lib/angular/angular.js:4571:39)
at injectionArgs (http://localhost:3000/lib/angular/angular.js:4595:58)
at Object.instantiate (http://localhost:3000/lib/angular/angular.js:4637:18)
at $controller (http://localhost:3000/lib/angular/angular.js:10042:28)
at http://localhost:3000/lib/angular-ui-router/release/angular-ui-router.js:4081:28
at invokeLinkFn (http://localhost:3000/lib/angular/angular.js:9623:9)
Here's the index.js file:
(function() {
'use strict';
angular.module('app.core').controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope', '$http', '$q','ngMaterial','angularGrid'];
function MainCtrl($scope, $http, $q,ngMaterial,angularGrid) {
var vm = this;
activate();
////////////////
function activate() {
//var vm = this;
$scope.card = {};
$scope.card.title = 'test';
vm.page = 0;
vm.shots = [];
vm.loadingMore = false;
vm.loadMoreShots = function() {
if(vm.loadingMore) return;
vm.page++;
// var deferred = $q.defer();
vm.loadingMore = true;
var promise = $http.get('https://api.dribbble.com/v1/shots/?per_page=24&page='+vm.page+'&access_token=3df6bcfc60b54b131ac04f132af615e60b0bd0b1cadca89a4761cd5d125d608f');
promise.then(function(data) {
var shotsTmp = angular.copy(vm.shots);
shotsTmp = shotsTmp.concat(data.data);
vm.shots = shotsTmp;
vm.loadingMore = false;
}, function() {
vm.loadingMore = false;
});
return promise;
};
vm.loadMoreShots();
};
};
//MainCtrl.filter('unsafe', function($sce) { return $sce.trustAsHtml; });
})();
Hi Yadav,
I have about 20 images to load for each page. After I setup your module I noticed that even for a single scroll a AJAX call was being made. (At least for me, or my page setup).
After looking around your code at
https://github.com/s-yadav/angulargrid/blob/master/angulargrid.js#L289
I altered it to
compareHeight = Math.abs( (scrollHeight - contHeight * (1 + options.infiniteScrollDistance / 100)) );
if (scrollTop >= compareHeight) { ... }
The reason it was not working as expected for me is because compareHeight was always negative, so after I applied Math.abs() it worked as expected.
Not sure if this is a bug/issue. Just wanted to point it out.
Regards,
Shashidhar.G
Your package is working perfectly and its aweome :D
And i think this is the intended behavior (to centralize the items) but i was wondering if it was possible to align all items to the left so the grid doesn't get like this:
HTML:
<ul class="dynamic-grid" direction="rtol" angular-grid="vm.shows" grid-width="200" gutter-size="10" angular-grid-id="gallery" refresh-on-img-load="false" >
<li data-ng-repeat="show in vm.shows" class="grid">
<img ng-src="{{show.images.poster.thumb}}" data-actual-width="200px" data-actual-height="250px" class="grid-img" />
<div class="img-desc-wrap">
<div class="title ng-binding">
{{show.title}}
</div>
</div>
</li>
</ul>
Thanks :)
If an image is loaded, i need to change src attribute. Help please, or until image is not loaded, i need to show other image (loading process gif).
Hi
Thanks for this awesome package, I wanna set margin-left
, margin-right
to whole grid container, how can I do this?
I love your Grid so far, but now I need to implement multiple sortBy Filters which happen on select:
<md-input-container>
<label>Order by...</label>
<md-select ng-model="sortBy">
<md-option ng-repeat="option in options" value="{{option}}">
{{option}}
</md-option>
</md-select>
</md-input-container>
in the controller i just have:
$scope.options = ['product', 'condition', '-created_at']; //all sortBy options
$scope.sortBy = '-created_at'; //default sortBy Value
the selected option updates the sortBy model and should then automatically update the grid:
<ul hide-sm class="dynamic-grid" angular-grid="images" grid-width="200" gutter-size="10" angular-grid-id="image-feed" refresh-on-img-load="true">
<li ng-repeat="image in images | orderBy:sortBy" class="grid">
{{image.product}} - {{image.condition}} - {{image.created_at}}
</li>
</ul>
It works perfectly if i put angular-grid="sortBy"
. is there a simple way to use angular-grid=""
to listen to multiple models?
I don't understand how to implement the manual refresh stated in the documentation, could you please provide an example for a "select" scenario?
Thank you.
I am interested in switching of the brick resizing effect when the page first loads. Would be create if there was an event I could listen to, and show a spinner until it fired. Any thoughts?
I want to use this library not for images. I have two ng-repeats with variable length its posibble this?
My angulargrid setup always misses 1 item.
For example if I have 5 items in the "shots" array angulargrid displays only 4. But when I do {{shots.length}} outside of the angulargrid div, I get 5, so they are deffinitely all there. I am using angulargrid on multiple sub-pages - its everywhere the same, always 1 item missing.
I am using the ag-infinite-scroll functionality, and I load in the first page by resolve function of ui-router.
Second page upwards gets loaded by ag-infinite-scroll="vm.loadMoreShots()"
EDIT: This happens only with ag-performant-scroll="true"
I did tried the solution metioned in the doc, but it still doesn't work, even when i try to do like in your example.
If i refresh the page, it doesn't work.
Here is what i did:
html:
<div class="col-lg-12" my-portfolio >
<ul class="dynamic-grid" angular-grid="pics" grid-width="300" gutter-size="10" angular-grid-id="gallery" refresh-on-img-load="false" >
<li data-ng-repeat="port in pagedPortfolio.data" class="grid">
<img src="{{port.img[0]}}" class="grid-img" />
<p>{{port.title}}</p>
</li>
</ul>
</div>
app.js
.controller('PortfolioCtrl', ['$scope','angularGridInstance', function ($scope,angularGridInstance){
$scope.pagename = "Portfolio";
$scope.refresh = function(){
angularGridInstance.gallery.refresh();
}
}])
Can you provide a better example? Or a way to fix it?
_Edit_: Btw, I'm loading my data with a directive/factory
but even using the refresh there, it doesn't work. Like so:
.directive('myPortfolio', ['mainFactory','angularGridInstance', function (mainFactory,angularGridInstance) {
return {
restrict: "A",
link: function($scope) {
mainFactory.getPortfolio().then(function(data) {
$scope.pagedPortfolio = data;
angularGridInstance.gallery.refresh();
})
}
}
}])
Hi
How can I use this package in RTL mode?
I mean, tiles start placing in page from right to left
Really thanks
I'm looking for a way to "reflow" a grid before it's actually going to reflow. What i mean is, i'd like to add an animation which cause a change in height of an element and wait with animation to this element, before the grid(reflow) will make a space for my element.
@s-yadav do you have any sugestion how to make this and sync the animation?
Hi i like your plugin very much, but it has a odd filter behavior that causes animation to fail for some case (and drive me nuts ;) ).
I want the position animation on every change of a filter (not only if i change from "no filter" to "a filter").
I think the problem is because of the elements that will be filtered out are not longer existent. After they reappear they have instantly a position (so the CSS has no value to animate from).
Do you have an idea how to fix?
Hi, I have an unusual problem with the items shown with the library:
I have a list of items (not too large, less than 20) and at first, when it has just renderized, everything is OK.
Then, whithout interact whith the page, the scroll starts to grow infinately showing invisible divs under my initial ones. I ask with the console how mane childs have the directive DOM element and it reaches values as high as 16000 childs. At this moment mu chrome tab is already dead.
Maybe I am using the library in the wrong way:
dashboard.gridOptions = { gridNo : 3, refresgOnImgLoad : false, }
Is there any way I could avoid this issue?
Hi.. I love the grid, it's the best by far, thanks for building it!
I have a rightbar with a show/hide toggle. I'm trying to use the .refresh() function to reflow to consume the extra space and it doesn't seem to be working. The data doesn't change, just more/less space available as the rightbar is toggled.
From looking at your code, it looks like you do different things on a manual refresh vs. resize. The resize recalculates width, but the refresh only takes the (previous) width and reflows.
I've worked around this issue by creating a window resize event on user action
window.dispatchEvent(new Event('resize'));
It seems like 'resize' and .refresh() should use the same logic to calculate width.
Is there anyway to trigger a refresh after executing a search filter (ng-repeat="image in images | filter:searchText") on an input box?
The filter works; however, when I clear the input box, all of the elements of the grid return stacked on one another (upon inspection, I see they no longer have a class of "img-loaded", and have lost their "top", "left", and "width" style attributes)
Thank you!
Hi,
how can i remove grid space,
Is it possible to add a virtual scroll mechanism to this so when a user scrolls it removes items from the DOM so that it runs much smoother?
Hi
I want to remove exist tile, how can I do this? after removing object from angular model, empty tile is still exist
I would like to animate elements once the user scrolls so new elements in my grid are in view. Adding a class once the user scrolls so that they are in view would satisfy this need. I could always do this myself but it might be a little more efficient if it were handled in angulargrid itself.
I am using this module and implementing filters with ng-hide.
Each grid-item has an attribute "hidden" that is being changed by the filters functions.
The problem is that the items in the grid aren't organized after the attribute has been changed to "true" or "false", and the grid-items are floating on each other.
before filter func, grid-items are organized:
after filter func - not organized:
Thanks for the support!
Please add bower
Hi i am implementing a method which supports reorder the card in the grad view. I'd like to use angular-ui/ui-sortable to support drag and drop sorting. But it seems angulargrid conflicts with that library. Any alternative way to do?
Hi,
Firstly, thanks for creating this - it's great and a lot better than a home grown solution I was using ๐
I'm using the grid within an Ionic (Cordova) app but I'm having a few issues with performant scroll.
If I load the page with the angulargrid but then rapidly switch to another page (which I believe in Ionic detaches any listeners) before returning to the page with the angulargrid I get a blank page.
All the items in the grid appear to have been detached due to the performant scroll. However, scrolling up or down doesn't trigger them to reappear. Nor does calling refresh
on the angulargrid instance or by manually calling handleScroll
The only way I can fix it is by inserting more items into the model (which angulargrid is watching) - which I presume triggers ng-repeat
to update the DOM.
I've had a play about with the source to try and fix the issue but haven't had much luck.
I hope my rambling above makes sense but if you need any clarification just shout. Fingers crossed someone knows whats going on :)
Thanks a lot,
Tom
I have some customers who upload images of boards (surf boards, snowboards) standing on end. The images are very tall and thin. This makes grids look pretty hideous.
A way to remedy the situation is to allow a max-height property for ag-grid, with modifications to the size detection algorithm to take this into account and limit height (and thus width) and centre the image within the grid element accordingly.
angularGridInstance.gallery.refresh()
didnt work when there are more than 1 gridInstance.
Hi there.
First of all, great plugin, thanks a lot!
There seems to be a small issue when the window gets resized. The images in the grid get squished.
I have noticed this happens when opening the javascript console in the browser and then resizing the window.
So to replicate the issue:
Hi,
I'm working with angulargrid perfectly. It's works like a charm!
I'm dealing with the possibility of having two kind of items. With this I mean that all items are always the with the same aspect and now I need to be able to add a new item with it's own aspect.
Let's suppose I have a list of Houses and I display a list of 20 items in the page. What I need is just to be able to include among the other main 20 items, one new item that show an Offer, promotion or something similar. As you can see, this new item has it's own size, different than the other 20 items.
Is it possible? if yes, how can I accomplish this?
We use jshint as part of our grunt build process to verify best practices in coding. Your angulargrid generates 17 errors. Do you have a version that will pass jshint?
Any chance of including a package.json. This would help git url dependance on npm.
question about the logic here: https://github.com/s-yadav/angulargrid/blob/master/angulargrid.js#L330
1 column has no gutter, 2 columns has 1 gutter (between the columns), 3 columns has 2 gutters, etc. There should be n-1 gutters.
The math for calculating cols (for auto gridNo) uses colWidth + options.gutterSize
as if every column has a gutter. I've had to use smaller values for gridWidth in order to get the size I want. I think this calculation would work nicely if we added gutterSize to the colWidth to account for that extra gutter (which won't actually be used, it's just for the math)
cols = options.gridNo == 'auto' ? Math.floor((contWidth + options.gutterSize) / (colWidth + options.gutterSize)) : options.gridNo,
thoughts?
Hi!
I would like to use this plugin, because this very good :)
i have two state, list/detail. In the list view are example 10 pictures. When i upload one picture to the gallery, the list view updated, last uploaded picture the first, but the last picture in the list disappear. If i click the first picture, then go to detail view, and this picture is not this picture what i clicked.
If i refresh the browser everything work.
Do you have idea?
Thanks!
On version 0.5 there is a bug where in firefox only the tiles. They look like a deck of cards stacked on top of each other. The tiles being rendered are individual directives.
This issue been seperated out from #14 . As we were trying to solve two different problem there.
I'm getting very odd behavior in iOS Safari browser. Doesn't layout properly at all. Have you tested this or is it just me? Works fine on all other browsers and devices.
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.