tristanguigue/angular-dynamic-layout

A lightweight AngularJS dynamic grid layout

angular-dynamic-layout's Issues

npm support [enhancement]

Hi,
i really like to use angular-dynamic-layout. Tanks for that.

One thing i would like to see is a npm package support.
Is it possible that you publish the package there?

element[0].offsetWidth == 0 in the layout function

This may or may not be your issue since I am using your wonderful control in the pageslide (https://github.com/dpiccone/ng-pageslide) control but when I add items to the array and then slide the page out, the items are drawn vertically till I remove one. The reason is that in the layout function, element[0].offsetWidth returns 0.

If I remove an item, it will re-render correctly, I would think because the pageslide is showing and the browser has calculated the offsetWidth.

So I think it is initially 0 because it wasn't rendered. Can I force that via css or something?

I'd could make a jsFiddler but was hoping you may know why this would be before I create that sample.

Thanks
Ralph

Images directive is leaky

The image directive should only be applied on images within IsoGrid's container

See: https://github.com/tristanguigue/IsoGrid/blob/master/src/isogrid.js#L42

How to add elements?

Array.push() doesn't do anything when I am wanting to implement an infinite scroll. Is there a better way to add elements?

Add drag and drop support

This would require having a whole different mode since drag and drop and responsiveness are incompatible.

This would use gridster's behavior: http://gridster.net/

IE handling of getBoundingClientRect() is unpredictable

Was just noticing even the latest IEs have some strange values calculated for var rect = elements[i].children[0].getBoundingClientRect(); (L51)

Basically with all equal-percentage-width items, I was getting a range of 346.6299743652344 - 346.6300048828125 after the the layout had been changed once with a dynamicLayout.layout event.

This then went on cause some havoc with items[i].columnSpan = Math.ceil(items[i].width / colSize); L308

In my testing, getting the width number down to 3 decimal places (x.toFixed(3)) was the magic number for allowing IE to function and other browsers to fit items into the container width.

Another option would be to rethink the Math.ceil call mentioned above.

Unsafe minification using ng-min or ng-annotate

Good plugin. I am trying to use it in one of my projects.

Need to make the code minifier friendly. Now when i minify it it throws an error. To make minifier friendly. To make it minifier friendly code like

module.directive('directive1', directive1)
function directive1($scope){
}

Must be converted into

module.directive('directive1', function($scope){}).

Do you have any plan for this. Any way i need this. Please comment so that i will submit a pull request.

Thanks

When throwing errors Error object should be used

When throwing errors I think the Error object should be used instead of just throwing a message string:

Instead of this:
position.service.js
....
if (item.columnSpan > colHeights.length) {
throw 'Item too large';
}
...

an Error object should be thrown:
...
if (item.columnSpan > colHeights.length) {
throw new Error('Item too large');
}
...

When throwing just string any code that handles exception will receive a string and not as expected an Error object.

Getting dynamic height of the dynamic-layout div

Great directive, but I can't seem to get the height of the container, 'dynamic-layout' which contains all of the cards. I see on your example, there is the same issue.

http://tristanguigue.github.io/angular-dynamic-layout/

I see you've mentioned something about a timeout, but that doesn't seem to work for me. Any ideas?

how to inject dynamicLayout?

Hi
First, i would like to say this is not an issue, it is a question. I have spent many hours to inject dynamicLayout to my app. Even Demo app stopped displaying grid after I inject my custom controller as following:
var movieApp = angular.module('movieApp', ['dynamicLayout', 'common.controllers'])
Could you tell me how to inject dyamicLayout to my app.

Thanks in advance.

NPM package is not being updated.

hi,
On https://www.npmjs.com/package/angular-dynamic-layout, 0.1.0 is the latest release.
Can you update npm package please?
Thanks

when do you upgrade angular version 1.5.0???

hi, good job

you can update to version 1.5.0 of the angular,because version 1.3.5 is very old.

thanks.

Can you please add license to your project?

Without explicit license your code can't be used in a proprietary software, please consider using Apache/MIT license.
Thank you.

order of build in dist file not correct

Causing the following error when including the js file:
Uncaught Error: [$injector:nomod] Module 'dynamicLayout' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.17/$injector/nomod?p0=dynamicLayout
REGEX_STRING_REGEXP @ angular.js:63
(anonymous function) @ angular.js:1778ensure @ angular.js:1702module @ angular.js:1776
(anonymous function) @ angular-dynamic-layout.js:5
(anonymous function) @ angular-dynamic-layout.js:18

The module('dynamicLayout'... in line 382 should be defined prior of filters and directives.
I think in the Gruntfile shoulb be specified the order for the concat operation.

How can I set the margin in the layout?

How can I set the margin in the layout?

Question about width calculation

In position.service in getItemsDimensionFromDOM function, to calculate the width in this line, the marginRight is not being taken in account.

Is this a bug? there any reason for this?
I tried to changed it to sum the marginRight in my code and is working better, I think.
Previously I noticed that was always a space not being filled in the right but with the change that space is filled

Proposing new feature: a way to have an item always centered horizontaly

I'm working on a project where this need is being presenting.

I look at the code and a way to do it could be:

• to have an attribute, 'centerH-parent' in the first children (as is the first child that is used to calc the width)
• have a new property in each object in items to reflect that attr:
  item: { height:..., width:..., centerH: true|false }
• pass in to setItemsPosition call the containerWidth parameter line 167
• and in setItemsPosition function test the value in item.centerH and do the calc

Do you think this is interesting?

Layout after loading images should happen as soon as we get the height

Right now it happens on the load event, however the height of the image is available before that. One solution is presented here: http://stackoverflow.com/questions/6575159/get-image-dimensions-with-javascript-before-image-has-fully-loaded

Proposing new feature: a way to have an item to have the full width of the container

As in #27 ...

An attribute named 'dynamic-layout-fullWidth' in the first child of each item/card to indicate that the item should have its width equal to container width.

Using dynamic layout with directive

Hi there,

If I use a directive as my card, why do I need to specify a template? The template is already decided upon on the directive itself.

Thanks

dynamic-layout div has undefined height

The dynamic-layout div should have a dynamic height so that the layout does not collapse.

Example:
[dynamic-layout] {
float: left;
position: relative;
background-color: orange;
height: 1145px;
}

Using flex or an existing framework's grid to size cards

1. Is it possible to use flex to size the width of my cards or must call cards be given a fixed width?
2. If I would like to use an existing framework's grid (e.g. Bootstrap) to size the width my cards, I would have to add a class or classes to div.dynamic-layout-item-parent. Is this possible and if so what's the best way to accomplish adding classes to div.dynamic-layout-item-parent?

Angular module not found

Hello,

Thanks for the repo :)

Please fix the code in such a way that the module will be declared at the beginning of the script.
Until then, it's unusable.

Thanks 👍

Filters and Rankers - needed?

Just trying to understand some of the code to fix a few of the issues and have figured I don't think this project should cover custom filters and rankers.

When I think of dynamic layout, I'm passing it a list of items of which I want to be arranged, I can do the filtering and ranking myself.

Item too large error

Hey I didn't see any mention of this in current issues but anytime layout is triggered or perhaps before when the actual partial template is loaded i'm receiving an angular error Item too large

I haven't been able to make much sense of it yet.. will keep digging.

I'm using angular ver 1.4

Oh and FWIW this was not happening before I used the plugin. If i remove the plugin and still make use of the partial I don't receive this issue.

overlap dynamic-layout

I'm using the plugin, but the div "dynamic-layout" overlaps over other divs.

Example:

<div dynamic-layout items="cards" filters="filters" rankers="rankers"></div> <footer style="background:rgba(0,0,0,.2);padding:2%;"></footer>

How can i fix it?

Add main files array to bower.json

The main:[] is missing in bower.json can you add this?
More about main files array
https://github.com/bower/bower.json-spec#main

State of the project

Hi,

Your readme states: BETA, not production ready.
I'm just wondering, what specially is missing / needs to be done to get this project production ready?

Thanks

Center the grid and spread elements

Hello!

Thank you for continuing to develop and support your grid module!

I wonder if there's any way to center the grid on the screen? I want my grid to fill the entire window, but dynamic-layout seems to align elements to the left and leaves unused space to the right.

Exanding card doesn't get the height right after $timeout

A single $timeout should be enough for the scope to digest the changes and the templates to be updated.

See https://github.com/tristanguigue/IsoGrid/blob/gh-pages/app/app.js

The demo does not work with the Angular 1.4.4 release

The angular-dynamic-layout demo @ http://tristanguigue.github.io/angular-dynamic-layout/ does not work with the latest Angular release. So is angular-dynamic-layout not compatible with Angular 1.4.4 ?

layout container height and clearfix

Hi I am new to angular-dynamic-layout and I have a issue with the layout.

I have just a normal bootstrap template with a footer after the content container.
Now when I display the dynamic layout items within the content container, the footer container is behind the dynamic layout items.
Somehow I am no able to manage to show a footer or any other content after the items.
The dynamic-layout div seams not to have any height.

Is there any basic trick to show content after the dynamic layout content?

I tried also to show a footer in the dynamic layout sample app. Same issue there.

Thanks for any help.