🔔 enable initialIndex selector string #881, #818

add selectInitialIndex ✅ initialIndex tests
metafizzy · Jan 28, 2019 · 578f710 · 578f710
1 parent aa22639
commit 578f710
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 12 deletions.
diff --git a/js/flickity.js b/js/flickity.js
@@ -192,18 +192,7 @@ proto.activate = function() {
   }
 
   this.emitEvent('activate');
-
-  var index;
-  var initialIndex = this.options.initialIndex;
-  if ( this.isInitActivated ) {
-    index = this.selectedIndex;
-  } else if ( initialIndex !== undefined ) {
-    index = this.cells[ initialIndex ] ? initialIndex : 0;
-  } else {
-    index = 0;
-  }
-  // select instantly
-  this.select( index, false, true );
+  this.selectInitialIndex();
   // flag for initial activation, for using initialIndex
   this.isInitActivated = true;
   // ready event. #493
@@ -603,6 +592,31 @@ proto.unselectSelectedSlide = function() {
   }
 };
 
+proto.selectInitialIndex = function() {
+  var initialIndex = this.options.initialIndex;
+  // already activated, select previous selectedIndex
+  if ( this.isInitActivated ) {
+    this.select( this.selectedIndex, false, true );
+    return;
+  }
+  // select with selector string
+  if ( initialIndex && typeof initialIndex == 'string' ) {
+    var cell = this.queryCell( initialIndex );
+    if ( cell ) {
+      this.selectCell( initialIndex, false, true );
+      return;
+    }
+  }
+
+  var index = 0;
+  // select with number
+  if ( initialIndex && this.slides[ initialIndex ] ) {
+    index = initialIndex;
+  }
+  // select instantly
+  this.select( index, false, true );
+};
+
 /**
  * select slide from number or cell element
  * @param {Element or Number} elem

diff --git a/test/index.html b/test/index.html
@@ -59,6 +59,7 @@
   <script src="unit/adaptive-height.js"></script>
   <script src="unit/select-cell.js"></script>
   <script src="unit/change.js"></script>
+  <script src="unit/initial-index.js"></script>
 
 </head>
 <body>
@@ -297,5 +298,19 @@ <h2>change</h2>
     <div class="cell">4</div>
   </div>
 
+  <h2>initialIndex</h2>
+  <div id="initial-index" class="gallery variable-width">
+    <div class="cell">0</div>
+    <div class="cell">1</div>
+    <div class="cell">2</div>
+    <div class="cell">3</div>
+    <div class="cell cell--initial">4</div>
+    <div class="cell">5</div>
+    <div class="cell">6</div>
+    <div class="cell">7</div>
+    <div class="cell">8</div>
+    <div class="cell">9</div>
+  </div>
+
 </body>
 </html>
diff --git a/test/unit/initial-index.js b/test/unit/initial-index.js
@@ -0,0 +1,26 @@
+QUnit.test( 'initialIndex', function( assert ) {
+  'use strict';
+  // initialIndex number
+  var flkty = new Flickity( '#initial-index', {
+    initialIndex: 3,
+  });
+  assert.equal( flkty.selectedIndex, 3, 'initialIndex number' );
+  // selectedIndex remains same after reactivation
+  flkty.deactivate();
+  flkty.activate();
+  assert.equal( flkty.selectedIndex, 3, 'reactivated selectedIndex stays the same' );
+  flkty.destroy();
+  // initialIndex selector string
+  flkty = new Flickity( '#initial-index', {
+    initialIndex: '.cell--initial',
+  });
+  assert.equal( flkty.selectedIndex, 4, 'initialIndex selector string' );
+  flkty.destroy();
+  // initialIndex selector string with groupCells #881
+  flkty = new Flickity( '#initial-index', {
+    groupCells: 3,
+    initialIndex: '.cell--initial',
+  });
+  assert.equal( flkty.selectedIndex, 1, 'initialIndex selector string with groupCells' );
+
+});