test layoutMode.getSegmentSize

12 years ago · fda4910b2f
4 changed files with 59 additions and 1 deletions
--- a/js/layout-mode.js
+++ b/js/layout-mode.js
@ -88,7 +88,7 @@ function layoutModeDefinition( getSize, Outlayer ) {
    }
    // fall back to item of first element
    var firstItemSize = this.getFirstItemSize();
-    this.rowHeight = firstItemSize && firstItemSize[ outerSize ] ||
+    this[ segmentName ] = firstItemSize && firstItemSize[ outerSize ] ||
      // or size of container
      this.isotope.size[ 'inner' + size ];
  };
--- a/test/get-segment-size.js
+++ b/test/get-segment-size.js
@ -0,0 +1,38 @@
+( function() {
+
+'use strict';
+
+test( 'LayoutMode.getSegmentSize', function() {
+
+  var iso = new Isotope( '#get-segment-size', {
+    layoutMode: 'cellsByRow',
+    itemSelector: '.item',
+    cellsByRow: {
+      columnWidth: 17,
+      rowHeight: 23
+    }
+  });
+
+  var cellsByRow = iso.modes.cellsByRow;
+  equal( cellsByRow.columnWidth, 17, 'explicit columnWidth option set' );
+  equal( cellsByRow.rowHeight, 23, 'explicit rowHeight option set' );
+
+  // set element sizing
+  iso.options.cellsByRow.columnWidth = '.grid-sizer';
+  iso.options.cellsByRow.rowHeight = '.grid-sizer';
+  cellsByRow.getColumnWidth();
+  cellsByRow.getRowHeight();
+  equal( cellsByRow.columnWidth, 57, 'element sizing columnWidth' );
+  equal( cellsByRow.rowHeight, 47, 'element sizing rowHeight' );
+
+  // default to first item
+  delete iso.options.cellsByRow.columnWidth;
+  delete iso.options.cellsByRow.rowHeight;
+  cellsByRow.getColumnWidth();
+  cellsByRow.getRowHeight();
+  equal( cellsByRow.columnWidth, 60, 'first item columnWidth' );
+  equal( cellsByRow.rowHeight, 30, 'first item rowHeight' );
+
+});
+
+})();
--- a/test/index.html
+++ b/test/index.html
@ -26,10 +26,12 @@
 <script src="../js/isotope.js"></script>
 <script src="../js/layout-modes/fit-rows.js"></script>
 <script src="../js/layout-modes/masonry.js"></script>
+<script src="../js/layout-modes/cells-by-row.js"></script>

 <script src="sorting.js"></script>
 <script src="get-sort-data.js"></script>
 <script src="layout-complete.js"></script>
+<script src="get-segment-size.js"></script>

 </head>
 <body>
@ -74,5 +76,12 @@
    <div class="item a3 b3">a3 b3</div>
  </div>

+  <h2>LayoutMode.getSegmentSize</h2>
+
+  <div id="get-segment-size" class="container">
+    <div class="grid-sizer"></div>
+    <div class="item"></div>
+  </div>
+
 </body>
 </html>
--- a/test/tests.css
+++ b/test/tests.css
@ -59,3 +59,14 @@ body {
  width: 200px;
  height: 20px;
 }
+
+/* ---- get segment size ---- */
+
+#get-segment-size .grid-sizer {
+  /* 57 outer width */
+  width: 52px;
+  margin-right: 5px;
+ /* 47 outer height */
+  height: 40px;
+  margin-bottom: 7px;
+}