From b435ad6230bff07b11357562b866eccce63f0df5 Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.valladolid@gmail.com>
Date: Fri, 3 Mar 2017 17:21:15 +0100
Subject: [PATCH] fix(slides): integration with split-panel

---
 src/components/slides/slides.ts               |  9 ++++++-
 src/components/slides/swiper/swiper-events.ts | 12 ++++++++-
 .../split-pane/test/tabs/app.module.ts        | 25 ++++++++++++-------
 3 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/components/slides/slides.ts b/src/components/slides/slides.ts
index 054fe5b5d52..2c1d318034d 100644
--- 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
index f8f20cf3a27..0dc1b8e73ec 100644
--- 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
index e62f0967e1c..c28f385002c 100644
--- 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>
   `
 })