Fix horizontal layout

tinydesk · Jun 16, 2016 · a054a68 · a054a68
1 parent 91eb6c7
commit a054a68
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -83,6 +83,7 @@
           }
 
           $scope.$watch('numItems', function(numItems) {
+            $scope.data = [];
             $scope.data = createData(numItems);
           });
           $scope.numItems = 1000;

diff --git a/dist/tileview.js b/dist/tileview.js
@@ -183,14 +183,21 @@
                         }
                     }
                     function updateRow(el, rowIndex, digest) {
-                        for (var i = 0; i < el.children().length; ++i) {
-                            updateItem(el.children().eq(i), rowIndex * itemsPerRow + i, digest);
+                        var ch = el.children();
+                        for (var i = 0; i < ch.length; ++i) {
+                            updateItem(ch.eq(i), rowIndex * itemsPerRow + i, digest);
+                        }
+                        var translate = Math.max(rowIndex * scope.options.tileSize[sizeDimension], 0);
+                        //el.css('transform', `${translate}(${Math.max(rowIndex * scope.options.tileSize[sizeDimension], 0)}px), translateZ(${rowIndex})`);
+                        if (scope.options.alignHorizontal) {
+                            el.css('transform', "translate3d(" + translate + "px, 0px, 0)");
+                        }
+                        else {
+                            el.css('transform', "translate3d(0px, " + translate + "px, 0)");
                         }
-                        var translate = scope.options.alignHorizontal ? 'translateX' : 'translateY';
-                        el.css('transform', translate + '(' + Math.max(rowIndex * scope.options.tileSize[sizeDimension], 0) + 'px)');
                     }
                     function addRow() {
-                        var row = angular.element('<div></div>');
+                        var row = angular.element('<div class="td-row"></div>');
                         row.css('position', 'absolute');
                         itemContainer.append(row);
                         return row;
@@ -330,7 +337,7 @@
                                 // scrolling ends:
                                 scrollEndTimeout = undefined;
                                 scope.$parent.$broadcast('td.tileview.scrollEnd');
-                            }, scope.options.afterScrollDelay, true);
+                            }, scope.options.afterScrollDelay, false);
                         }
                     }
                     var debounceTimeout, scrollEndTimeout;

diff --git a/src/tileview.ts b/src/tileview.ts
@@ -213,15 +213,21 @@ declare const angular: any;
         }
 
         function updateRow(el, rowIndex, digest) {
-          for (let i = 0; i < el.children().length; ++i) {
-            updateItem(el.children().eq(i), rowIndex * itemsPerRow + i, digest);
+          const ch = el.children();
+          for (let i = 0; i < ch.length; ++i) {
+            updateItem(ch.eq(i), rowIndex * itemsPerRow + i, digest);
+          }
+          const translate = Math.max(rowIndex * scope.options.tileSize[sizeDimension], 0);
+          //el.css('transform', `${translate}(${Math.max(rowIndex * scope.options.tileSize[sizeDimension], 0)}px), translateZ(${rowIndex})`);
+          if (scope.options.alignHorizontal) {
+            el.css('transform', `translate3d(${translate}px, 0px, 0)`);
+          } else {
+            el.css('transform', `translate3d(0px, ${translate}px, 0)`);
           }
-          const translate = scope.options.alignHorizontal ? 'translateX' : 'translateY';
-          el.css('transform', translate + '(' + Math.max(rowIndex * scope.options.tileSize[sizeDimension], 0) + 'px)')
         }
 
         function addRow() {
-          const row = angular.element('<div></div>');
+          const row = angular.element('<div class="td-row"></div>');
           row.css('position', 'absolute');
           itemContainer.append(row);
           return row;
@@ -376,7 +382,7 @@ declare const angular: any;
               // scrolling ends:
               scrollEndTimeout = undefined;
               scope.$parent.$broadcast('td.tileview.scrollEnd');
-            }, scope.options.afterScrollDelay, true);
+            }, scope.options.afterScrollDelay, false);
           }
         }