faGridLayout doesn't $observe its attributes

[steveblue]

I'm running into an issue when I'd like to change gridLayout properties per responsive state in our web app. Basically, when I call these two functions, the properties mapped to the fa-modifier will change on an event (probably because the attributes of that directive are using the $observe method.) Can you please add this functionality to gridLayout so that when it's attributes are changed it forces the grid to relayout?

                        function mobileLayout(scope){
                                    scope.gridLayout = {
                                         dimensions: [2, 3],
                                         position: [0,40,0],
                                         size: [200,300],
                                         cellSize: [100,100]
                                        };
                        }

                        function desktopLayout(scope){
                                    scope.gridLayout = {
                                         dimensions: [6, 1],
                                         position: [0,40,0],
                                         size: [undefined,300],
                                         cellSize: [100,100]
                                        };
                        }       

And my source:

<fa-modifier fa-size="gridLayout.size" fa-translate="gridLayout.position">
        <fa-grid-layout fa-options="gridLayout">
            <fa-surface class="menu-{{ navItem.title | lowercase }}" ng-repeat="navItem in navItems" fa-index="$index">
                        <a ui-sref="{{ navItem.title | lowercase }}">{{ navItem.title }}</a>
            </fa-surface>
        </fa-grid-layout>
</fa-modifier>

[steveblue]

I was able to achieve the responsive layout I wanted by modifying each surface, but would really appreciate the convenience and fluidity available in fa-grid-view or fa-flexible-view. If I have time I may submit a pull request with this added functionality.

[zackbrown]

Hey @steveblue — thank you for mentioning this. I went ahead and threw in $watch support for fa-grid-layout's fa-options in 445707f so it should be dynamically+automatically updated now.

[steveblue]

I believe more needs to be done for the GridLayout to update on an event. The only way I could get the GridLayout to update with Vanilla Famo.us was to set the return of each surface render to Null, empty the array of surfaces enclosed in the GridLayout, and then repopulate them. This seems taxing however it was actually performant on my end. I think this may be the only way to reLayout the Grid.

Perhaps I'm missing something about famous-angular, is there a method I need to use to resequence the surfaces in a GridLayout?

                                    var newGrid = function(dimX,dimY){

                                    for(var i = 0; i < surfaces.length; i++){
                                        surfaces[i].render = function(){ return null; };
                                    }
                                    surfaces = [];

                                    grid = new GridLayout({
                                      dimensions: [dimX, dimY]
                                    });


                                    grid.sequenceFrom(surfaces);

                                    for(i = 0; i < (dimX*dimY); i++) {
                                      surfaces.push(new Surface({
                                        classes: ["card"],
                                        content: '<h1>Card</h1>',
                                        size: [undefined, undefined],
                                        properties: { 
                                          color: "#404040",
                                          lineHeight: '200px',
                                          textAlign: 'center'
                                        }
                                      }));
                                    }


                                    mainContext.add(grid);  

                                    };

[zackbrown]

GridLayout's setOptions function does the trick in vanilla Famo.us (https:/Famous/views/blob/master/GridLayout.js#L149)

That's what gets called in 445707f to update dimensions when fa-options changes.

This simple example works for me: https:/thomasstreet/famous-angular-examples/commit/33b495fe64dd04330dba7c1effdacbcd565dfb74

Two issues you could be running into are: 1. you'll need to pull down famous-angular#master instead of 0.0.17, and 2. you will need to call a manual $scope.$apply() if you update the options outside of Angular's digest cycle (e.g. if you use vanilla Famo.us event listeners like in the linked example.)

[steveblue]

Thanks Zack for the pointers, got it to work on my end.