Merge pull request #38 from ionic-team/master

pull `master`

angular/test/test-app/e2e/src/slides.e2e-spec.ts

@@ -11,6 +11,10 @@ describe('slides', () => {
   });
 
   it('should change index on slide change', async () => {
+    expect(await element.all(by.css('ion-slide')).count()).toEqual(0);
+    await addSlides();
+    expect(await element.all(by.css('ion-slide')).count()).toEqual(3);
+
     await checkIndex('0');
 
     await nextSlide();
@@ -29,6 +33,12 @@ async function checkIndex(index: string) {
   expect(await element(by.css('#slide-index-2')).getText()).toEqual(index);
 }
 
+async function addSlides() {
+  await element(by.css('#add-slides')).click();
+  await waitTime(800);
+}
+
+
 async function nextSlide() {
   await element(by.css('#btn-next')).click();
   await waitTime(800);
@@ -37,4 +47,4 @@ async function nextSlide() {
 async function prevSlide() {
   await element(by.css('#btn-prev')).click();
   await waitTime(800);
-}
+}

angular/test/test-app/src/app/slides/slides.component.html

@@ -8,24 +8,20 @@
 <ion-content>
   <ion-slides pager="true" (ionSlideDidChange)="checkIndex()">
 
-    <ion-slide>
-      <h1>Slide 1</h1>
+    <ion-slide *ngFor="let text of slidesData">
+      <h1>{{text}}</h1>
     </ion-slide>
 
-    <ion-slide>
-      <h1>Slide 2</h1>
-    </ion-slide>
-
-    <ion-slide>
-      <h1>Slide 3</h1>
-    </ion-slide>
   </ion-slides>
 
   <p>
     index: <span id="slide-index">{{slideIndex}}</span>
     index2: <span id="slide-index-2">{{slideIndex2}}</span>
   </p>
 
+  <ion-button id="add-slides" (click)="addSlides()">
+    Add Slides
+  </ion-button>
   <ion-button id="btn-prev" (click)="prevSlide()">
     Prev Slide
   </ion-button>

angular/test/test-app/src/app/slides/slides.component.ts

@@ -10,6 +10,7 @@ export class SlidesComponent implements AfterViewInit {
 
   slideIndex = 0;
   slideIndex2 = 0;
+  slidesData = [];
 
   constructor() { }
 
@@ -19,6 +20,11 @@ export class SlidesComponent implements AfterViewInit {
     });
   }
 
+  addSlides() {
+    const start = this.slidesData.length + 1;
+    this.slidesData.push(`Slide ${start}`, `Slide ${start + 1}`, `Slide ${start + 2}`);
+  }
+
   prevSlide() {
     this.slides.slidePrev();
   }

core/src/components/content/content.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, QueueApi } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, QueueApi } from '@stencil/core';
 
 import { Color, Config, Mode, ScrollBaseDetail, ScrollDetail } from '../../interface';
 import { isPlatform } from '../../utils/platform';
@@ -113,8 +113,14 @@ export class Content implements ComponentInterface {
   }
 
   componentDidUnload() {
-    if (this.watchDog) {
-      clearInterval(this.watchDog);
+    this.onScrollEnd();
+  }
+
+  @Listen('click', { capture: true })
+  onClick(ev: Event) {
+    if (this.isScrolling) {
+      ev.preventDefault();
+      ev.stopPropagation();
     }
   }
 
@@ -269,13 +275,14 @@ export class Content implements ComponentInterface {
   }
 
   private onScrollEnd() {
-
     clearInterval(this.watchDog);
     this.watchDog = null;
-    this.isScrolling = false;
-    this.ionScrollEnd.emit({
-      isScrolling: false
-    });
+    if (this.isScrolling) {
+      this.isScrolling = false;
+      this.ionScrollEnd.emit({
+        isScrolling: false
+      });
+    }
   }
 
   hostData() {

core/src/components/nav/test/basic/index.html

@@ -37,6 +37,12 @@
   --ion-background-color-rgb: 0,0,0;
   --ion-text-color-rgb: 255,255,255;
 }
+
+[f] {
+  background: green;
+  width: 100px;
+  height: 100px;
+}
 </style>
   <script>
     class PageOne extends HTMLElement {
@@ -74,6 +80,15 @@ <h1>Page Two</h1>
                 <ion-button class="next">Go to Page Three</ion-button>
               </ion-nav-push>
             </div>
+            <div f></div>
+            <div f></div>
+            <div f></div>
+            <div f></div>
+            <div f></div>
+            <div f></div>
+            <div f></div>
+            <div f></div>
+
           </ion-content>
         `;
       }

core/src/utils/tap-click.ts

@@ -6,7 +6,7 @@ export function startTapClick(doc: Document, config: Config) {
   let lastTouch = -MOUSE_WAIT * 10;
   let lastActivated = 0;
   let cancelled = false;
-  let scrolling = false;
+  let scrollingEl: HTMLElement | undefined;
 
   let activatableEle: HTMLElement | undefined;
   let activeRipple: Promise<() => void> | undefined;
@@ -15,12 +15,8 @@ export function startTapClick(doc: Document, config: Config) {
   const useRippleEffect = config.getBoolean('animated', true) && config.getBoolean('rippleEffect', true);
   const clearDefers = new WeakMap<HTMLElement, any>();
 
-  function onBodyClick(ev: Event) {
-    if (cancelled || scrolling) {
-      ev.preventDefault();
-      ev.stopPropagation();
-      cancelled = false;
-    }
+  function isScrolling() {
+    return scrollingEl !== undefined && scrollingEl.parentElement !== null;
   }
 
   // Touch Events
@@ -59,15 +55,16 @@ export function startTapClick(doc: Document, config: Config) {
   }
 
   function pointerDown(ev: any) {
-    if (activatableEle || scrolling) {
+    cancelled = false;
+    if (activatableEle || isScrolling()) {
       return;
     }
-    cancelled = false;
+    scrollingEl = undefined;
     setActivatedElement(getActivatableTarget(ev), ev);
   }
 
   function pointerUp(ev: UIEvent) {
-    if (scrolling) {
+    if (isScrolling()) {
       return;
     }
     setActivatedElement(undefined, ev);
@@ -145,13 +142,12 @@ export function startTapClick(doc: Document, config: Config) {
     }
   }
 
-  doc.addEventListener('click', onBodyClick, true);
-  doc.addEventListener('ionScrollStart', () => {
-    scrolling = true;
+  doc.addEventListener('ionScrollStart', ev => {
+    scrollingEl = ev.target as HTMLElement;
     cancelActive();
   });
   doc.addEventListener('ionScrollEnd', () => {
-    scrolling = false;
+    scrollingEl = undefined;
   });
   doc.addEventListener('ionGestureCaptured', cancelActive);