fix(slides): integration with split-panel

ionic-team · Mar 3, 2017 · b435ad6 · b435ad6
1 parent f112711
commit b435ad6
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 11 deletions.
diff --git a/src/components/slides/slides.ts b/src/components/slides/slides.ts
@@ -890,7 +890,14 @@ export class Slides extends Ion {
 
 
 
-  constructor(config: Config, private _plt: Platform, zone: NgZone, @Optional() viewCtrl: ViewController, elementRef: ElementRef, renderer: Renderer) {
+  constructor(
+    config: Config,
+    private _plt: Platform,
+    zone: NgZone,
+    @Optional() viewCtrl: ViewController,
+    elementRef: ElementRef,
+    renderer: Renderer,
+  ) {
     super(config, elementRef, renderer, 'slides');
 
     this._zone = zone;

diff --git a/src/components/slides/swiper/swiper-events.ts b/src/components/slides/swiper/swiper-events.ts
@@ -85,7 +85,6 @@ export function initEvents(s: Slides, plt: Platform): Function {
 
   // onresize
   let resizeObs = plt.resize.subscribe(() => onResize(s, plt, false));
-
   // Next, Prev, Index
   if (s.nextButton) {
     plt.registerListener(s.nextButton, 'click', (ev) => {
@@ -817,7 +816,18 @@ function onTouchEnd(s: Slides, plt: Platform, ev: SlideUIEvent) {
 /*=========================
   Resize Handler
   ===========================*/
+let resizeId: number;
 function onResize(s: Slides, plt: Platform, forceUpdatePagination: boolean) {
+  // TODO: hacky, we should use Resize Observer in the future
+  if (resizeId) {
+    plt.cancelTimeout(resizeId);
+    resizeId = null;
+  }
+  resizeId = plt.timeout(() => doResize(s, plt, forceUpdatePagination), 200);
+}
+
+function doResize(s: Slides, plt: Platform, forceUpdatePagination: boolean) {
+  resizeId = null;
   // Disable locks on resize
   var allowSwipeToPrev = s._allowSwipeToPrev;
   var allowSwipeToNext = s._allowSwipeToNext;

diff --git a/src/components/split-pane/test/tabs/app.module.ts b/src/components/split-pane/test/tabs/app.module.ts
@@ -8,16 +8,23 @@ import { IonicApp, IonicModule, NavController, MenuController } from '../../../.
   <ion-navbar><ion-title>Navigation</ion-title></ion-navbar>
   </ion-header>
   <ion-content>
-  <ion-list>
-    <ion-item>Hola</ion-item>
-    <ion-item>Hola</ion-item>
-    <ion-item>Hola</ion-item>
-    <button ion-item (click)="push()">Push</button>
-    <ion-item>Hola</ion-item>
-    <ion-item>Hola</ion-item>
-    <ion-item>Hola</ion-item>
+    <ion-slides style="background: black"
+                pager="true"
+                effect="flip">
 
-  </ion-list>
+      <ion-slide style="background: red; color: white;">
+        <h1>Slide 1</h1>
+      </ion-slide>
+
+      <ion-slide style="background: white; color: blue;">
+        <h1>Slide 2</h1>
+      </ion-slide>
+
+      <ion-slide style="background: blue; color: white;">
+        <h1>Slide 3</h1>
+      </ion-slide>
+
+    </ion-slides>
   </ion-content>
   `
 })