🔔 add adaptiveHeight option #11

author: David DeSandro <desandrocodes@gmail.com> 2016-06-16 11:14:06 -0400
committer: David DeSandro <desandrocodes@gmail.com> 2016-06-16 11:14:06 -0400
commit: 80d22fdf17d687df8fdca1d827c96db33ecc5946 (patch)
tree: 45b3ccfa8341c12ebfcbc3daaed2abc3defcfaa6
parent: 366fd9b8e4e211e6f472b8f40196c0cc71ae8fcb (diff)
download: flickity-80d22fdf17d687df8fdca1d827c96db33ecc5946.zip
flickity-80d22fdf17d687df8fdca1d827c96db33ecc5946.tar.gz
flickity-80d22fdf17d687df8fdca1d827c96db33ecc5946.tar.bz2
6 files changed, 166 insertions, 2 deletions
diff --git a/README.md b/README.md
index 52f1204..7f17f78 100644
--- a/README.md
+++ b/README.md
@@ -71,6 +71,9 @@ var flky = new Flickity( '.gallery', {
   accessibility: true,
   // enable keyboard navigation, pressing left & right keys
 
+  adaptiveHeight: false,
+  // set carousel height to the selected slide
+
   autoPlay: false,
   // advances to the next cell
   // if true, default is 3 seconds
diff --git a/js/flickity.js b/js/flickity.js
index 56c1f54..dc5f948 100644
--- a/js/flickity.js
+++ b/js/flickity.js
@@ -87,6 +87,7 @@ function Flickity( element, options ) {
 
 Flickity.defaults = {
   accessibility: true,
+  // adaptiveHeight: false,
   cellAlign: 'center',
   // cellSelector: undefined,
   // contain: false,
@@ -387,7 +388,9 @@ proto.setCellAlign = function() {
 
 proto.setGallerySize = function() {
   if ( this.options.setGallerySize ) {
-    this.viewport.style.height = this.maxCellHeight + 'px';
+    var height = this.options.adaptiveHeight && this.selectedSlide ?
+      this.selectedSlide.height : this.maxCellHeight;
+    this.viewport.style.height = height + 'px';
   }
 };
 
@@ -508,6 +511,10 @@ proto.select = function( index, isWrap, isInstant ) {
   } else {
     this.startAnimation();
   }
+  if ( this.options.adaptiveHeight ) {
+    this.setGallerySize();
+  }
+
   this.dispatchEvent('cellSelect');
 };
 
diff --git a/sandbox/adaptive-height.html b/sandbox/adaptive-height.html
new file mode 100644
index 0000000..167d3d3
--- /dev/null
+++ b/sandbox/adaptive-height.html
@@ -0,0 +1,92 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+
+  <title>slides</title>
+
+  <link rel="stylesheet" href="../css/flickity.css" />
+
+<style>
+* { box-sizing: border-box; }
+
+html { overflow-y: scroll; }
+
+.carousel {
+  border: 1px solid;
+  margin-bottom: 40px;
+}
+
+.flickity-viewport {
+  overflow: visible;
+  transition: height 0.2s;
+}
+
+.carousel__cell {
+  width: 32%;
+  height: 100px;
+  background: #BDF;
+  margin-left: 1%;
+  margin-right: 1%;
+  font-size: 40px;
+}
+
+.carousel__cell.is-selected {
+  background: #68F;
+}
+
+.carousel__cell--height2 { height: 200px; }
+.carousel__cell--height3 { height: 300px; }
+.carousel__cell--height4 { height: 400px; }
+
+</style>
+
+</head>
+<body>
+
+  <h1>slides</h1>
+
+<div class="carousel carousel1">
+  <div class="carousel__cell carousel__cell--height2">0</div>
+  <div class="carousel__cell">1</div>
+  <div class="carousel__cell">2</div>
+  <div class="carousel__cell carousel__cell--height2">3</div>
+  <div class="carousel__cell carousel__cell--height3">4</div>
+  <div class="carousel__cell">5</div>
+  <div class="carousel__cell carousel__cell--height4">6</div>
+  <div class="carousel__cell">7</div>
+  <div class="carousel__cell carousel__cell--height3">8</div>
+  <div class="carousel__cell">9</div>
+  <div class="carousel__cell">10</div>
+</div>
+
+<script src="../bower_components/get-size/get-size.js"></script>
+<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
+<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
+<script src="../bower_components/unipointer/unipointer.js"></script>
+<script src="../bower_components/unidragger/unidragger.js"></script>
+<script src="../bower_components/tap-listener/tap-listener.js"></script>
+<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
+
+<script src="../js/cell.js"></script>
+<script src="../js/slide.js"></script>
+<script src="../js/animate.js"></script>
+<script src="../js/flickity.js"></script>
+<script src="../js/drag.js"></script>
+<script src="../js/prev-next-button.js"></script>
+<script src="../js/page-dots.js"></script>
+<script src="../js/player.js"></script>
+<script src="../js/add-remove-cell.js"></script>
+<script src="../js/lazyload.js"></script>
+
+<script>
+var flkty = new Flickity( '.carousel1', {
+  adaptiveHeight: true,
+  // groupCells: true,
+  // wrapAround: true,
+});
+</script>
+
+</body>
+</html>
diff --git a/test/index.html b/test/index.html
index ae720ea..73fe5ff 100644
--- a/test/index.html
+++ b/test/index.html
@@ -56,6 +56,7 @@
   <script src="unit/destroy.js"></script>
   <script src="unit/lazyload.js"></script>
   <script src="unit/group-cells.js"></script>
+  <script src="unit/adaptive-height.js"></script>
 
 </head>
 <body>
@@ -238,5 +239,19 @@
     <div class="cell"></div>
   </div>
 
+  <h2>adaptiveHeight</h2>
+  <div id="adaptive-height" class="gallery">
+    <div class="cell cell--height2"></div>
+    <div class="cell"></div>
+    <div class="cell cell--height3"></div>
+
+    <div class="cell"></div>
+    <div class="cell cell--height4"></div>
+    <div class="cell cell--height2"></div>
+
+    <div class="cell"></div>
+    <div class="cell cell--height2"></div>
+  </div>
+
 </body>
 </html>
diff --git a/test/test.css b/test/test.css
index 5d26021..84c0f13 100644
--- a/test/test.css
+++ b/test/test.css
@@ -1,3 +1,5 @@
+/** { box-sizing: border-box; }*/
+
 body {
   font-family: sans-serif;
   color: #333;
@@ -38,7 +40,13 @@ body {
   max-height: 100px;
 }
 
-#group-cells .cell { width: 100px; }
+/* ---- group-cells ---- */
+
+#group-cells .cell {
+  width: 100px;
+/*  border: 1px solid;*/
+}
+
 #group-cells .cell--width2 { width: 200px; }
 #group-cells .cell--width3 { width: 300px; }
 #group-cells .cell--width4 { width: 400px; }
@@ -46,3 +54,13 @@ body {
 #group-cells.is-expanded { width: 600px; }
 
 #group-cells .cell:nth-child(2n) { background: #09F; }
+
+/* ---- adaptive-height ---- */
+
+#adaptive-height .cell { width: 33.33%; }
+
+#adaptive-height .cell--height2 { height: 200px; }
+#adaptive-height .cell--height3 { height: 300px; }
+#adaptive-height .cell--height4 { height: 400px; }
+
+#adaptive-height .cell:nth-child(2n) { background: #09F; }
diff --git a/test/unit/adaptive-height.js b/test/unit/adaptive-height.js
new file mode 100644
index 0000000..655ac4a
--- /dev/null
+++ b/test/unit/adaptive-height.js
@@ -0,0 +1,29 @@
+QUnit.test( 'adaptiveHeight', function( assert ) {
+  'use strict';
+
+  var flkty = new Flickity( '#adaptive-height', {
+    adaptiveHeight: true
+  });
+
+  // 2,1,3, 1,4,2, 1,2,1
+
+  function checkSelectHeight( index, height ) {
+    flkty.select( index, false, true );
+    assert.equal( flkty.viewport.style.height, height + 'px', 'slide ' + index );
+  }
+
+  checkSelectHeight( 0, 200 );
+  checkSelectHeight( 1, 100 );
+  checkSelectHeight( 2, 300 );
+  checkSelectHeight( 3, 100 );
+  checkSelectHeight( 4, 400 );
+  checkSelectHeight( 5, 200 );
+
+  flkty.options.groupCells = true;
+  flkty.resize();
+
+  checkSelectHeight( 0, 300 );
+  checkSelectHeight( 1, 400 );
+  checkSelectHeight( 2, 200 );
+
+});
author	David DeSandro <desandrocodes@gmail.com>	2016-06-16 11:14:06 -0400
committer	David DeSandro <desandrocodes@gmail.com>	2016-06-16 11:14:06 -0400
commit	80d22fdf17d687df8fdca1d827c96db33ecc5946 (patch)
tree	45b3ccfa8341c12ebfcbc3daaed2abc3defcfaa6
parent	366fd9b8e4e211e6f472b8f40196c0cc71ae8fcb (diff)
download	flickity-80d22fdf17d687df8fdca1d827c96db33ecc5946.zip flickity-80d22fdf17d687df8fdca1d827c96db33ecc5946.tar.gz flickity-80d22fdf17d687df8fdca1d827c96db33ecc5946.tar.bz2