Supporting the tile view. about angular-vs-repeat

[kamilkp]

Tiles are not supported yet, and implementing that would require a lot of work imho. I initially thought that in order to support that the directive would have to do the following:

• calculate how many items would fit in a single row
• prepare an array (row) of arrays (row cells)
• vs-repeat over the outer array, and ng-repeat over the inner arrays
• recalculate on container resize (hard to do efficiently so maybe window.onresize for now)
• if after recalculation the number of elements in a row changes -> do everything all over again and rerender

If you want to implement it, please do.

[patwari-manish]

Hi,

I wanted to have the tile view similar to this "http://isotope.metafizzy.co/layout-modes/fitrows.html" with elements of same width.

I have modified your plugin for supporting this.

Thanks

[that1guy]

@manish0610 can you share your solution?

[stvhanna]

@manish0610 I would appreciate it if you can share you solution! :)

@that1guy I'm in the same boat, did you get something to work?

@kamilkp What's the quickest solution for getting a simple float:left as method for multi-column layout to work with the directive? I'm planning on using media queries so the column number will be known at different cut off points (viewport width). I don't need a variable height items in the grid (e.g. masonry layout).

[that1guy]

Yes, I built custom homebrew grid solution on top of vs-repeat. Not reusable code but this is how I did it.

HTML ANGULAR CODE

        <!--GRID VIEW-->
        <div vs-repeat class="inner-container" vs-excess="50" vs-size-property="rowHeight" vs-offset-before="77" vs-excess="5" on-vs-index-change="infiniteScroll(startIndex, endIndex)" ng-show="views.gridView">
            <div ng-repeat="row in results.gridRows" style="width: 100%;">
                <div ng-repeat="result in row.rowContents"
                     ng-click="openSplash(this)"
                     class="grid-item"
                     style="width: {{results.gridPercentageWidth}}%;"
                        >

                    //Add html here
                </div>
            </div>
        </div>

JS CODE TO CALCUALTE AND BUILD RESPONSIVE GRID

factory.generateRows = function (results, reason, views) {

        var numColumns;

        //If user has gridView enabled calculate columns, else build list view.
        if (views.gridView) {
            var dimensions = factory.getInnerContainerDimensions();
            var itemWidth = 290;
            //console.log('width: ' + dimensions.w + '/' + itemWidth + ' equals...');
            numColumns = Math.floor(dimensions.w / itemWidth);
            factory.results.gridPercentageWidth = 100 / numColumns;
            //console.log("Calculated " + numColumns + " columns at " + factory.results.gridPercentageWidth + "% width.");
        } else {
            numColumns = 1;
            //console.log("List View: " + numColumns + " columns!");
        }



        if (numColumns !== factory.cachedColumnCalculation || reason === 'filter' || reason === 'pagination') {

            factory.cachedColumnCalculation = numColumns;

            //TODO: Don't clear all items just clear necessary ones??
            factory.results.gridRows = [];

            //Calculate the number of results with images and add up scroll height. This is used for virtual scrolling
            for (var i = 0; i < results.length; i++) {

                var rowHeight;

                //If gridview is turned on they height is always 350
                if (views.gridView) {
                    rowHeight = 390;
                } else { //else the user is in list view.  Height depends on whether result contains 2 or more images.
                    if(results[i].images.length === 0) {
                        rowHeight = 179;
                    } else if (results[i].images.length === 1) {
                        rowHeight = 261;
                    } else {
                        rowHeight = 420;
                    }
                }


                if (i % numColumns === 0) {
                    var row = {
                        rowHeight: rowHeight,
                        rowContents: []
                    };

                    for (var j = 0; j < numColumns; j++) {

                        if (i + j < results.length) {
                            //console.log(i + j);


                            if (results[i + j].askingPrice.value) {
                                factory.updatePriceSlider(results[i + j].askingPrice.value);
                            }


                            row.rowContents.push(results[i + j]);
                        }
                    }

                    factory.results.gridRows.push(row);

                    i = i + j - 1;
                    //console.log('Finshed row! New index is: ' + i);
                }
            }

            console.log('Grid Rows: ', factory.results.gridRows);

        }

    };

[stvhanna]

@that1guy You're the man! Thanks for sharing! That's some good stuff, do you have a working demo online?

[that1guy]

Nope.. only running in my super secret laboratory. That should get you started though. Enjoy!

[stvhanna]

@that1guy no worries, thanks for your help! :)

[that1guy]

@stvhanna np.. write sexier code than mine and then send a pull request the authors way. :)

[patwari-manish]

@that1guy @kamilkp @stvhanna

Hi All, Sorry for the late reply. Below is the sample code with the list and grid.

Repo : https://github.com/manish0610/tileview-vs-repeat
Demo : http://manish0610.github.io/tileview-vs-repeat/

Thanks,
Manish

[stvhanna]

@manish0610 thank you so much! Very nice implementation. If I wanted to append to the array/object used to render the data via an infinite scroll mechanism, how would I adjust tileview-vs-repeat to include and incorporate the new additions without creating more element nodes in the DOM?

[patwari-manish]

tileview-vs-repeat uses a virtual DOM. So, it only create number of nodes which are visible to user. You can use your infinite scroll as usual and populate new data members to the array and tileview-vs-repeat will listen the data change and update the DOM accordingly.

[kamilkp]

@manish0610 can you create a PR for this feature to the original repo?

[stvhanna]

@manish0610 I was able to get it to work w/ infinite scroll, but ran into a problem is that when using window-based scroll (body scrollbar) instead of div-based scroll area, the refill element hides but doesn't show the elements when scrolling back up the body element. Any ideas of how to fix that?

[patwari-manish]

vs-repeat works with fixed height and width container. so, you have to give fixed height and width to your body element and position relative. It should work then. If you can send sample code than i can help more.

[widmoser]

I have created a library that is optimised for displaying tiles: https://github.com/tinydesk/angular-tileview

It automatically layouts the items in a grid. It is more restrictive than vs-repeat in that it requires all cells to have the same size. It uses this constraint to make more thorough optimisations (only one $compile call in total, only one call to the link function per rendered item), which is especially useful if the tiles are very complex.

[camara90100]

@widmoser @manish0610 THANKS GUYS! YOU ROCK!