🛠 updateSelectedSlide

4 files changed, 45 insertions, 17 deletions

diff --git a/js/add-remove-cell.js b/js/add-remove-cell.js
index b82e008..a632084 100644
--- a/js/add-remove-cell.js
+++ b/js/add-remove-cell.js
@@ -153,6 +153,7 @@ Flickity.prototype.cellChange = function( changedCellIndex, isPositioningSlider
   var prevSlideableWidth = this.slideableWidth;
   this._positionCells( changedCellIndex );
   this._getWrapShiftCells();
+  this.updateSlides();
   this.setGallerySize();
   // position slider
   if ( this.options.freeScroll ) {
diff --git a/js/flickity.js b/js/flickity.js
index a920883..dcf3344 100644
--- a/js/flickity.js
+++ b/js/flickity.js
@@ -251,6 +251,7 @@ Flickity.prototype.positionCells = function() {
   this._sizeCells( this.cells );
   // position all cells
   this._positionCells( 0 );
+  this.updateSlides();
 };
 
 /**
@@ -279,7 +280,6 @@ Flickity.prototype._positionCells = function( index ) {
   this.slideableWidth = cellX;
   // contain cell target
   this._containCells();
-  this.updateSlides();
 };
 
 /**
@@ -495,7 +495,7 @@ Flickity.prototype.select = function( index, isWrap, isInstant ) {
     return;
   }
   this.selectedIndex = index;
-  // this.setSelectedCell();
+  this.updateSelectedSlide();
   if ( isInstant ) {
     this.positionSliderAtSelected();
   } else {
@@ -512,16 +512,23 @@ Flickity.prototype.next = function( isWrap ) {
   this.select( this.selectedIndex + 1, isWrap );
 };
 
-Flickity.prototype.setSelectedCell = function() {
-  this._removeSelectedCellClass();
-  this.selectedCell = this.cells[ this.selectedIndex ];
-  this.selectedElement = this.selectedCell.element;
-  this.selectedElement.classList.add('is-selected');
+Flickity.prototype.updateSelectedSlide = function() {
+  // unselect previous selected slide
+  this.unselectSelectedSlide();
+  // update new selected slide
+  var slide = this.selectedSlide = this.slides[ this.selectedIndex ];
+  slide.select();
+  this.selectedCells = slide.cells;
+  this.selectedElements = slide.getCellElements();
+  // HACK: selectedCell & selectedElement is first cell in slide, backwards compatibility
+  // Remove in v3?
+  this.selectedCell = slide.cells[0];
+  this.selectedElement = this.selectedElements[0];
 };
 
-Flickity.prototype._removeSelectedCellClass = function() {
-  if ( this.selectedCell ) {
-    this.selectedCell.element.classList.remove('is-selected');
+Flickity.prototype.unselectSelectedSlide = function() {
+  if ( this.selectedSlide ) {
+    this.selectedSlide.unselect();
   }
 };
 
@@ -703,7 +710,7 @@ Flickity.prototype.deactivate = function() {
     var cell = this.cells[i];
     cell.destroy();
   }
-  this._removeSelectedCellClass();
+  this.unselectSelectedSlide();
   this.element.removeChild( this.viewport );
   // move child elements back into element
   moveElements( this.slider.children, this.element );
diff --git a/js/slide.js b/js/slide.js
index befaa6d..ddf294d 100644
--- a/js/slide.js
+++ b/js/slide.js
@@ -24,6 +24,26 @@ Slide.prototype.updateTarget = function() {
   this.target = this.x + firstMargin + this.width * this.parent.cellAlign;
 };
 
+Slide.prototype.select = function() {
+  this.changeSelectedClass('add');
+};
+
+Slide.prototype.unselect = function() {
+  this.changeSelectedClass('remove');
+};
+
+Slide.prototype.changeSelectedClass = function( method ) {
+  this.cells.forEach( function( cell ) {
+    cell.element.classList[ method ]('is-selected');
+  });
+};
+
+Slide.prototype.getCellElements = function() {
+  return this.cells.map( function( cell ) {
+    return cell.element;
+  });
+};
+
 window.Slide = Slide;
 
 })();
diff --git a/sandbox/slides.html b/sandbox/slides.html
index 614f61e..f467e74 100644
--- a/sandbox/slides.html
+++ b/sandbox/slides.html
@@ -28,6 +28,10 @@
 
 .carousel__cell--width2 { width: 40%; }
 .carousel__cell--width3 { width: 80%; }
+
+.carousel__cell.is-selected {
+  background: #68F;
+}
 </style>
 
 </head>
@@ -49,13 +53,9 @@
   <div class="carousel__cell">10</div>
 </div>
 
-<script src="../bower_components/get-style-property/get-style-property.js"></script>
 <script src="../bower_components/get-size/get-size.js"></script>
-<script src="../bower_components/matches-selector/matches-selector.js"></script>
-<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
-<script src="../bower_components/eventie/eventie.js"></script>
-<script src="../bower_components/doc-ready/doc-ready.js"></script>
-<script src="../bower_components/classie/classie.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>