tristanguigue / angular-dynamic-layout

A lightweight AngularJS dynamic grid layout
http://tristanguigue.github.io/angular-dynamic-layout/
78 stars 35 forks source link

[WIP] Refactored dynamic-layout to be more angular and easier to implement #23

Open intellix opened 9 years ago

intellix commented 9 years ago

Work in Progress (I'd just like comments/thoughts on the implementation) I've started a refactor of the angular-dynamic-layout to use more of angular. I've removed the filters/rankers and template functionality. You can check index.html for the implementation example:

<div dynamic-layout>
  <div dynamic-layout-item ng-repeat="card in grid.cards | contains:'tabs':grid.contains" ng-include="card.template"></div>
</div>

ng was upped to 1.4 to fix the $animate.cancel(promise) errors you were experiencing. I was wondering if we need them at all really, we could just use CSS transition and change top/left. Not sure yet.

You apply the filters/ordering through ng-repeat pipes and just ng-include if you have additional templates.

The idea is that is a parent containing an array of subscribed . Upon adding/removing there's another layout (which is debounced for performance).

The documentation and tests are largely missing as I've pretty much only just got it working. I did a bit of renaming/removing as I went through and tried to understand the logic. There should be less global state within the position.service.js now.

Gotta run, just wanted this to exist somewhere so I can continue on the weekend :)

tristanguigue commented 9 years ago

That's a large refactoring, glad to see the effort you put in this but it's difficult to see the differences with the existing codebase right now because the files have been deleted and added again. Could you use git mv to avoid this?

About the removal of filters and rankers I don't think the ng-repeat pipe can achieve the same behavior that is currently in the demo and that reproduces the the jQuery isotope library behavior.

intellix commented 9 years ago

Will try git mv. From looking at isotope again, I'm not sure why we can't use filters and orderBy within an ng-repeat.

intellix commented 9 years ago

Fixed the PR using git mv. I've also got ordering working again (I never finished that). I'm $watching the $index of each item and triggering a layout() to detect if the ordering changed. The items are now sorted before a layout.

tristanguigue commented 9 years ago

So it still hasn't been moved properly, see the diff and two copies are now present in the folder: here and there. Also since this is a purely JS library I don't think we need to have a src/js folder.

If you could have a separate repo/branch where to store the updated demo that would be great, you can even use a github page to have it live.

intellix commented 9 years ago

Just realised that whilst attempting to git mv I had left files in /js, I've removed them. To be honest I think having a gh-page branch right now would be a nightmare. I'd like to serve the content whilst developing it so have it within /src.

I typically have a gulp serve task which serves the demo and watches for changes and recompiles the /src to /dist

Since you're not using gulp and I can't copy across my dev process, I'm just using live-server for now

intellix commented 9 years ago

Added ngAnnotate as an alternative to manually injecting as per JohnPapa styleguide: https://github.com/johnpapa/angular-styleguide#style-y100

Also replaced jshint with eslint with eslint-plugin-angular during build

Tests still don't run, didn't look at those.