tristanguigue / angular-dynamic-layout Goto Github PK
View Code? Open in Web Editor NEWA lightweight AngularJS dynamic grid layout
Home Page: http://tristanguigue.github.io/angular-dynamic-layout/
A lightweight AngularJS dynamic grid layout
Home Page: http://tristanguigue.github.io/angular-dynamic-layout/
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.
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;
}
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:
Do you think this is interesting?
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
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
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.
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.
Without explicit license your code can't be used in a proprietary software, please consider using Apache/MIT license.
Thank you.
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.
How can I set the margin in the layout?
Array.push() doesn't do anything when I am wanting to implement an infinite scroll. Is there a better way to add elements?
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
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.
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?
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.
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
hi, good job
you can update to version 1.5.0 of the angular,because version 1.3.5 is very old.
thanks.
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
?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/
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.
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
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 ๐
The main:[] is missing in bower.json can you add this?
More about main files array
https://github.com/bower/bower.json-spec#main
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?
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
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.
hi,
On https://www.npmjs.com/package/angular-dynamic-layout, 0.1.0 is the latest release.
Can you update npm package please?
Thanks
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
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
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 ?
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.
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.