diff --git a/ionic/components/app/test/snapcat/index.js b/ionic/components/app/test/snapcat/index.js
new file mode 100644
index 0000000000..b2bb1e27f6
--- /dev/null
+++ b/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);
+}
diff --git a/ionic/components/app/test/snapcat/main.html b/ionic/components/app/test/snapcat/main.html
new file mode 100644
index 0000000000..199be4fcc4
--- /dev/null
+++ b/ionic/components/app/test/snapcat/main.html
@@ -0,0 +1,31 @@
+
+
+
+
+ secret
+
+
+ Page 1
+
+
+
+
+
+
+ feed
+
+
+ Page 2
+
+
+
+
+
+
diff --git a/ionic/components/slides/slides.js b/ionic/components/slides/slides.js
index 17dc33ffbf..4eba5f05af 100644
--- a/ionic/components/slides/slides.js
+++ b/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,24 +56,37 @@ 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.continuous = this.continuous && (this.slides.length > 1 ? true : false);
-
- // Grab the wrapper element that contains the slides
- this.wrapperElement = this.domElement.children[0];
-
- this.resize();
-
- if(this.slideDelay) {
- this.startShow();
- }
+ this.setup();
});
}
+ setup() {
+ this.continuous = this.continuous && (this.slides.length > 1 ? true : false);
+
+ // Grab the wrapper element that contains the slides
+ this.wrapperElement = this.domElement.children[0];
+
+ this.resize();
+
+ 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
diff --git a/ionic/components/slides/test/basic/index.js b/ionic/components/slides/test/basic/index.js
index 2e39651afa..fc10d9aa22 100644
--- a/ionic/components/slides/test/basic/index.js
+++ b/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() {
diff --git a/ionic/components/slides/test/basic/main.html b/ionic/components/slides/test/basic/main.html
index 4496608539..d6a0677152 100644
--- a/ionic/components/slides/test/basic/main.html
+++ b/ionic/components/slides/test/basic/main.html
@@ -1,4 +1,4 @@
-
+
Page 1
@@ -8,3 +8,8 @@
+
+
+
+
+
diff --git a/ionic/components/view/view.scss b/ionic/components/view/view.scss
index c443a8dd51..f4c46c5049 100644
--- a/ionic/components/view/view.scss
+++ b/ionic/components/view/view.scss
@@ -6,6 +6,7 @@ ion-view {
left: 0;
width: 100%;
height: 100%;
+ flex-direction: column;
background-color: white;
}