Slides

ionic/components/app/test/snapcat/index.js

@@ -0,0 +1,19 @@
+import {bootstrap} from 'angular2/angular2'
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
+
+import {Nav, Slides, Slide, Content, Button} from 'ionic/ionic';
+
+@Component({ selector: 'ion-app' })
+@View({
+  templateUrl: 'main.html',
+  directives: [Nav, Slides, Slide, Content, Button]
+})
+export class IonicApp {
+  constructor() {
+  }
+}
+
+export function main() {
+  bootstrap(IonicApp);
+}

ionic/components/app/test/snapcat/main.html

@@ -0,0 +1,31 @@
+<ion-slides>
+  <ion-slide>
+    <ion-view>
+      <ion-toolbar>
+        <ion-title>secret</ion-title>
+      </ion-toolbar>
+      <ion-content>
+        <h2>Page 1</h2>
+      </ion-content>
+    </ion-view>
+  </ion-slide>
+  <ion-slide>
+    <ion-view>
+      <ion-toolbar>
+        <ion-title>feed</ion-title>
+      </ion-toolbar>
+      <ion-content>
+        <h2>Page 2</h2>
+      </ion-content>
+    </ion-view>
+  </ion-slide>
+</ion-slides>
+
+<style>
+.navbar-container {
+  background-color: #ff6600 !important;
+}
+.nav-ios ion-title {
+  color: #fff !important;
+}
+</style>

ionic/components/slides/slides.js

@@ -47,7 +47,7 @@ export class Slides {
     this.currentIndex = 0;
     this.animateSpeed = 300;
     this.slideDelay = 0;//3000;
-    this.continuous = true;
+    this.continuous = false;
 
     // Initialize our slides gesture handler
     this.gesture = new SlidesGesture(this);
@@ -56,6 +56,11 @@ export class Slides {
     // Wait a cycle for the children to exist before computing sizes
     setTimeout(() => {
       // Continuous mode, but only if we have at least 2 slides
+      this.setup();
+    });
+  }
+
+  setup() {
     this.continuous = this.continuous && (this.slides.length > 1 ? true : false);
 
     // Grab the wrapper element that contains the slides
@@ -66,14 +71,22 @@ export class Slides {
     if(this.slideDelay) {
       this.startShow();
     }
-    });
+
+    //special case if two slides
+    /*
+    if (this.continuous && this.slides.length < 3) {
+      this.element.appendChild(this.slides[0].clone())//cloneNode(true));
+      element.appendChild(element.children[1].cloneNode(true));
+      slides = element.children;
+    }
+    */
   }
 
   /**
    * Start the slideshow.
    */
   startShow() {
-    this._showTimeout = setTimeout(this.slideRight.bind(this), this.slideDelay);
+    this._showTimeout = setTimeout(this.next.bind(this), this.slideDelay);
   }
 
   /**
@@ -211,15 +224,15 @@ export class Slides {
   /**
    * Slide left, possibly wrapping around in continuous mode.
    */
-  slideLeft() {
-    this.slide(this._circle(this.currentIndex - 1));
+  prev() {
+    this.slide(this.currentIndex - 1);
   }
 
   /**
    * Slide right, possibly wrapping around in continuous mode.
    */
-  slideRight() {
-    this.slide(this._circle(this.currentIndex + 1));
+  next() {
+    this.slide(this.currentIndex + 1);
   }
 
 
@@ -285,16 +298,100 @@ export class Slides {
   }
 
   _endDrag(event) {
+    //this._finish(event);
     let isRight = event.gesture.offsetDirection & Hammer.DIRECTION_RIGHT;
     console.log('Slides: ending drag', event, '\n\t', 'Right?', isRight);
 
     if(isRight) {
-      this.slideRight();
+      this.next();
     } else {
-      this.slideLeft();
+      this.prev();
     }
   }
 
+  _finish(event) {
+
+    // measure duration
+    var duration = +new Date - start.time;
+
+    // determine if slide attempt triggers next/prev slide
+    var isValidSlide =
+          Number(duration) < 250               // if slide duration is less than 250ms
+          && Math.abs(delta.x) > 20            // and if slide amt is greater than 20px
+          || Math.abs(delta.x) > width/2;      // or if slide amt is greater than half the width
+
+    // determine if slide attempt is past start and end
+    var isPastBounds =
+          !index && delta.x > 0                            // if first slide and slide amt is greater than 0
+          || index == slides.length - 1 && delta.x < 0;    // or if last slide and slide amt is less than 0
+
+    if (options.continuous) isPastBounds = false;
+
+    // determine direction of swipe (true:right, false:left)
+    var direction = delta.x < 0;
+
+    // if not scrolling vertically
+    if (!isScrolling) {
+
+      if (isValidSlide && !isPastBounds) {
+
+        if (direction) {
+
+          if (options.continuous) { // we need to get the next in this direction in place
+
+            move(circle(index-1), -width, 0);
+            move(circle(index+2), width, 0);
+
+          } else {
+            move(index-1, -width, 0);
+          }
+
+          move(index, slidePos[index]-width, speed);
+          move(circle(index+1), slidePos[circle(index+1)]-width, speed);
+          index = circle(index+1);
+
+        } else {
+          if (options.continuous) { // we need to get the next in this direction in place
+
+            move(circle(index+1), width, 0);
+            move(circle(index-2), -width, 0);
+
+          } else {
+            move(index+1, width, 0);
+          }
+
+          move(index, slidePos[index]+width, speed);
+          move(circle(index-1), slidePos[circle(index-1)]+width, speed);
+          index = circle(index-1);
+
+        }
+
+        options.callback && options.callback(index, slides[index]);
+
+      } else {
+
+        if (options.continuous) {
+
+          move(circle(index-1), -width, speed);
+          move(index, 0, speed);
+          move(circle(index+1), width, speed);
+
+        } else {
+
+          move(index-1, -width, speed);
+          move(index, 0, speed);
+          move(index+1, width, speed);
+        }
+
+      }
+
+    }
+
+    // kill touchmove and touchend event listeners until touchstart called again
+    element.removeEventListener('touchmove', events, false)
+    element.removeEventListener('touchend', events, false)
+  }
+
   _move(pos, translateX, speed) {
     console.log('MOVE', pos, translateX, speed ? speed : 0);
     // Should already be wrapped with circle

ionic/components/slides/test/basic/index.js

@@ -8,10 +8,16 @@ import {Slides, Slide, SlidePager, List, Item, Content, Button} from 'ionic/ioni
   selector: 'ion-app'
 })
 @View({
-  directives: [Slides, Slide, SlidePager, Content],
+  directives: [Slides, Slide, SlidePager, Content, Button],
   templateUrl: 'main.html'
 })
 class IonicApp {
+  next() {
+    console.log('Next');
+  }
+  prev() {
+    console.log('Prev');
+  }
 }
 
 export function main() {

ionic/components/slides/test/basic/main.html

@@ -1,4 +1,4 @@
-<ion-slides>
+<ion-slides #slides>
   <ion-slide style="background-color: blue">
     <h2>Page 1</h2>
   </ion-slide>
@@ -8,3 +8,8 @@
   <ion-pager>
   </ion-pager>
 </ion-slides>
+
+<div style="position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center">
+  <button (click)="slides.prev()" primary>Prev</button>
+  <button (click)="slides.next()" primary>Next</button>
+</div>

ionic/components/view/view.scss

@@ -6,6 +6,7 @@ ion-view {
   left: 0;
   width: 100%;
   height: 100%;
+  flex-direction: column;
 
   background-color: white;
 }