Remove resize delay on ion-slides

slow-resize-fix.ts

import { Directive, Host, Optional, Self } from '@angular/core';
import { Platform, Slides } from "ionic-angular";
import { slideTo, updateContainerSize, updateSlidesSize } from 'ionic-angular/components/slides/swiper/swiper';
import { updateClasses } from 'ionic-angular/components/slides/swiper/swiper-classes';
import { Subscription } from "rxjs/Subscription";
import { Observable } from "rxjs/Observable";
import "rxjs/add/observable/fromEvent";
import "rxjs/add/operator/debounceTime";

/**
 * This is a shorthand for subscribing to window events
 *
 * Now I don't have to import (and forget) all the rxjs operators every time...
 *
 *
 * Usage:
 *
 * new OnWindow("resize", 100).do(()=>{
 *     this.handleResizeEvent();
 * };
 *
 * @author Farbdose
 */
export class OnWindow {
    public do: Function;

    constructor(event: string, debounceTime?: number) {
        let obs = Observable.fromEvent(window, event);

        if (debounceTime) {
            obs.debounceTime(debounceTime);
        }

        this.do = obs.subscribe.bind(obs);
    }
}

/**
 * Fixes slow resizing behavior of ion-slides
 * Just add it to your ion-slides component and be happy
 *
 * @author Farbdose
 */
@Directive({
    selector: '[resize-fix]'
})
export class IonSlidesResizeFix {
    private listeners: Array<Subscription> = [];

    constructor(@Host() @Self() @Optional() public slides: Slides, platform: Platform) {
        this.listeners.push(new OnWindow("resize", 50).do(() => {
            this.manualResize(slides, platform);
        }));

        this.listeners.push(new OnWindow("orientationchange").do(() => {
            this.manualResize(slides, platform);
        }));
    }

    /**
     * based on https://github.com/ionic-team/ionic/blob/dd66f9a7a9478bf40907eb94515efc28d13371d4/src/components/slides/swiper/swiper-events.ts#L843
     * This is basically a copy of the ionic internal resize function for the slider
     * Changes are:
     *      call resize on the controlled sliders first as slideTo recreates _spline
     *
     * tl;tr Execute the resize action when the resize happens and not 200ms later like ionic does
     */
    manualResize(s: Slides, plt: Platform) {
        /*This is the function that determines how far the child should be moved when the controller is moved...
        Delete it to unlink them... ionic will create a new one with the new width and height... */
        if (s._spline) {
            s._spline = undefined;
        }

        // Update controlled slides first as slideTo recreates s._spline
        if (Array.isArray(s.control)) {
            (<Array<Slides>>s.control).forEach(child => this.manualResize(child, plt));
        } else if (s.control) {
            this.manualResize(<Slides>s.control, plt);
        }

        // backup current swipe locks
        let allowSwipeToPrev = s._allowSwipeToPrev;
        let allowSwipeToNext = s._allowSwipeToNext;

        // allow swiping in any direction
        s._allowSwipeToPrev = s._allowSwipeToNext = true;

        // do the actual resizing
        updateContainerSize(s, plt);
        updateSlidesSize(s, plt);
        updateClasses(s);

        // scroll to the correct position
        if ((s.slidesPerView === 'auto' || s.slidesPerView > 1) && s._isEnd && !s.centeredSlides) {
            slideTo(s, plt, s._slides.length - 1, 0, false, true);
        } else {
            slideTo(s, plt, s._activeIndex, 0, false, true);
        }

        // Return locks after resize
        s._allowSwipeToPrev = allowSwipeToPrev;
        s._allowSwipeToNext = allowSwipeToNext;
    }

    ngOnDestroy() {
        this.listeners.forEach(l => l.unsubscribe());
    }
}