mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
chore(build): rename ionic directory to src and update all references in the build process.
This commit is contained in:
Josh Thomas
925
src/components/slides/slides.ts
Normal file
925
src/components/slides/slides.ts
Normal file
@ -0,0 +1,925 @@
|
||||
import {Directive, Component, ElementRef, Renderer, Host, EventEmitter, Input, Output, ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
|
||||
import {NgClass} from '@angular/common';
|
||||
|
||||
import {Ion} from '../ion';
|
||||
import {Animation} from '../../animations/animation';
|
||||
import {Gesture} from '../../gestures/gesture';
|
||||
import {DragGesture} from '../../gestures/drag-gesture';
|
||||
import {dom} from '../../util';
|
||||
import {CSS} from '../../util/dom';
|
||||
import {debounce, isTrueProperty, isPresent, defaults} from '../../util/util';
|
||||
|
||||
import {Swiper} from './swiper-widget';
|
||||
import {Scroll} from '../scroll/scroll';
|
||||
|
||||
|
||||
/**
|
||||
* @name Slides
|
||||
* @description
|
||||
* The Slides component is a multi-section container. Each section can be swiped
|
||||
* or dragged between. It contains any number of [Slide](../Slide) components.
|
||||
*
|
||||
*
|
||||
* ### Creating
|
||||
* You should use a template to create slides and listen to slide events. The template
|
||||
* should contain the slide container, an `<ion-slides>` element, and any number of
|
||||
* [Slide](../Slide) components, written as `<ion-slide>`. Any configuration of the
|
||||
* slides should be passed in the `options` property of the `<ion-slides>` element.
|
||||
* You can listen to events such as the slide changing by placing the event on the
|
||||
* `<ion-slides>` element. See [Usage](#usage) below for more information on
|
||||
* creating slides.
|
||||
*
|
||||
*
|
||||
* ### Configuring
|
||||
* There are several configuration options that can be passed to Slides. These should
|
||||
* be passed in the `options` property of the `<ion-slides>` element upon creation.
|
||||
* You can allow the slides to loop around from the last to the first, set autoplay
|
||||
* on the slides so it will automatically switch between them, and more.
|
||||
*
|
||||
* Properties to pass in options:
|
||||
*
|
||||
* | Property | Type | Default | Description |
|
||||
* |-----------------------|-----------|----------------|--------------------------------------------------------------------------------------------|
|
||||
* | autoplay | `number` | - | Delay between transitions (in ms). If this parameter is not passed, autoplay is disabled. |
|
||||
* | direction | `string` | 'horizontal' | Swipe direction: 'horizontal' or 'vertical'. |
|
||||
* | initialSlide | `number` | 0 | Index number of initial slide |
|
||||
* | loop | `boolean` | false | Whether to continuously loop from the last slide to the first slide. |
|
||||
* | pager | `boolean` | false | Show the pagination bullets. |
|
||||
* | speed | `number` | 300 | Duration of transition between slides (in ms). |
|
||||
*
|
||||
* See [Usage](#usage) below for more information on configuring slides.
|
||||
*
|
||||
*
|
||||
* ### Navigating
|
||||
* After creating and configuring the slides, you can navigate between them
|
||||
* by swiping or calling methods on the `Slides` instance. You can call `slideTo()` to
|
||||
* navigate to a specific slide, or `slideNext()` to change to the slide that follows
|
||||
* the active slide. All of the [methods](#instance-members) provided by the `Slides`
|
||||
* instance are listed below. See [Usage](#usage) below for more information on
|
||||
* navigating between slides.
|
||||
*
|
||||
*
|
||||
* ### Limitations
|
||||
* The Slides component wraps the [Swiper](http://www.idangero.us/swiper/) component
|
||||
* built by iDangero.us. This means that all of the Swiper API isn't exposed on the
|
||||
* Slides component. See the [`getSlider()`](#getSlider) method for information on
|
||||
* getting the `Swiper` instance and using its methods directly.
|
||||
*
|
||||
*
|
||||
* @usage
|
||||
*
|
||||
* You can add slides to a `@Page` using the following template:
|
||||
*
|
||||
* ```html
|
||||
* <ion-slides>
|
||||
* <ion-slide>
|
||||
* <h1>Slide 1</h1>
|
||||
* </ion-slide>
|
||||
* <ion-slide>
|
||||
* <h1>Slide 2</h1>
|
||||
* </ion-slide>
|
||||
* <ion-slide>
|
||||
* <h1>Slide 3</h1>
|
||||
* </ion-slide>
|
||||
* </ion-slides>
|
||||
* ```
|
||||
*
|
||||
* To add [options](#configuring), we will define them in `mySlideOptions` in our class `MyPage`:
|
||||
*
|
||||
* ```ts
|
||||
* import {Page, Slides} from 'ionic-angular';
|
||||
*
|
||||
* @Page({
|
||||
* templateUrl: 'my-page.html'
|
||||
* })
|
||||
* class MyPage {
|
||||
* mySlideOptions = {
|
||||
* initialSlide: 1,
|
||||
* loop: true
|
||||
* };
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* This is setting the second slide as the initial slide on load, since
|
||||
* the `initialSlide` begins at `0`. We are also setting `loop` to true which
|
||||
* allows us to swipe from the last slide to the first continuously. Then,
|
||||
* we will pass `mySlideOptions` in the `options` property of the `<ion-slides>`
|
||||
* element. We are using [property binding](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#property-binding)
|
||||
* on `options` because `mySlideOptions` is an expression:
|
||||
*
|
||||
* ```html
|
||||
* <ion-slides [options]="mySlideOptions">
|
||||
* ```
|
||||
*
|
||||
* To grab a reference to the Slides, we will add a [local template variable](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#local-vars)
|
||||
* to `<ion-slides>` called `mySlider`:
|
||||
*
|
||||
* ```html
|
||||
* <ion-slides #mySlider [options]="mySlideOptions">
|
||||
* ```
|
||||
*
|
||||
* Next, we can use `ViewChild` to assign the Slides instance to `slider`:
|
||||
*
|
||||
* ```ts
|
||||
* import {ViewChild} from '@angular/core';
|
||||
*
|
||||
* class MyPage {
|
||||
* @ViewChild('mySlider') slider: Slides;
|
||||
*
|
||||
* ...
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* Now we can call any of the `Slider` [methods]((#instance-members)),
|
||||
* for example we can use the Slider's `slideTo()` method in order to
|
||||
* navigate to a specific slide on a button click. Below we call the
|
||||
* `goToSlide()` method and it navigates to the 3rd slide:
|
||||
*
|
||||
* ```ts
|
||||
* class MyPage {
|
||||
* ...
|
||||
*
|
||||
* goToSlide() {
|
||||
* this.slider.slideTo(2, 500);
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* We can also add events to listen to on the `<ion-slides>` element.
|
||||
* Let's add the `didChange` event and call a method when the slide changes:
|
||||
*
|
||||
* ```html
|
||||
* <ion-slides #mySlider (didChange)="onSlideChanged()" [options]="mySlideOptions">
|
||||
* ```
|
||||
*
|
||||
* In our class, we add the `onSlideChanged()` method which gets the active
|
||||
* index and prints it:
|
||||
*
|
||||
* ```ts
|
||||
* class MyPage {
|
||||
* ...
|
||||
*
|
||||
* onSlideChanged() {
|
||||
* let currentIndex = this.slider.getActiveIndex();
|
||||
* console.log("Current index is", currentIndex);
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* For all of the methods you can call on the `Slider` instance, see the
|
||||
* [Instance Members](#instance-members).
|
||||
*
|
||||
* @demo /docs/v2/demos/slides/
|
||||
* @see {@link /docs/v2/components#slides Slides Component Docs}
|
||||
*
|
||||
* Swiper.js:
|
||||
* The most modern mobile touch slider and framework with hardware accelerated transitions
|
||||
*
|
||||
* http://www.idangero.us/swiper/
|
||||
*
|
||||
* Copyright 2015, Vladimir Kharlampidi
|
||||
* The iDangero.us
|
||||
* http://www.idangero.us/
|
||||
*
|
||||
* Licensed under MIT
|
||||
*/
|
||||
@Component({
|
||||
selector: 'ion-slides',
|
||||
template:
|
||||
'<div class="swiper-container">' +
|
||||
'<div class="swiper-wrapper">' +
|
||||
'<ng-content></ng-content>' +
|
||||
'</div>' +
|
||||
'<div [class.hide]="!showPager" class="swiper-pagination"></div>' +
|
||||
'</div>',
|
||||
directives: [NgClass],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class Slides extends Ion {
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
public rapidUpdate: Function;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
private id: number;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
private slideId: string;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
private showPager: boolean;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
private slider: Swiper;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
private maxScale: number;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
private zoomElement: HTMLElement;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
private zoomGesture: Gesture;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
private scale: number;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
private zoomLastPosX: number;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
private zoomLastPosY: number;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
private viewportWidth: number;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
private viewportHeight: number;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
private enableZoom: boolean;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
private touch: {
|
||||
x: number,
|
||||
y: number,
|
||||
startX: number,
|
||||
startY: number,
|
||||
deltaX: number,
|
||||
deltaY: number,
|
||||
lastX: number,
|
||||
lastY: number,
|
||||
target: HTMLElement,
|
||||
zoomable: HTMLElement,
|
||||
zoomableWidth: number,
|
||||
zoomableHeight: number
|
||||
};
|
||||
|
||||
/**
|
||||
* @input {Object} Any configuration for the slides
|
||||
*/
|
||||
@Input() options: any;
|
||||
|
||||
/**
|
||||
* @private Deprecated
|
||||
*/
|
||||
@Input() pager: any;
|
||||
|
||||
/**
|
||||
* @private Deprecated
|
||||
*/
|
||||
@Input() zoom: any;
|
||||
|
||||
/**
|
||||
* @private Deprecated
|
||||
*/
|
||||
@Input() zoomDuration: any;
|
||||
|
||||
/**
|
||||
* @private Deprecated
|
||||
*/
|
||||
@Input() zoomMax: any;
|
||||
|
||||
/**
|
||||
* @private Deprecated
|
||||
*/
|
||||
@Output() slideChangeStart: EventEmitter<any> = new EventEmitter();
|
||||
|
||||
/**
|
||||
* @private Deprecated
|
||||
*/
|
||||
@Output() change: EventEmitter<any> = new EventEmitter();
|
||||
|
||||
/**
|
||||
* @output {any} Expression to evaluate when a slide change starts.
|
||||
*/
|
||||
@Output() willChange: EventEmitter<any> = new EventEmitter();
|
||||
|
||||
/**
|
||||
* @output {any} Expression to evaluate when a slide change ends.
|
||||
*/
|
||||
@Output() didChange: EventEmitter<any> = new EventEmitter();
|
||||
|
||||
/**
|
||||
* @output {any} Expression to evaluate when a slide moves.
|
||||
*/
|
||||
@Output() move: EventEmitter<any> = new EventEmitter();
|
||||
|
||||
|
||||
constructor(elementRef: ElementRef, renderer: Renderer) {
|
||||
super(elementRef);
|
||||
this.rapidUpdate = debounce(() => {
|
||||
this.update();
|
||||
}, 10);
|
||||
|
||||
this.id = ++slidesId;
|
||||
this.slideId = 'slides-' + this.id;
|
||||
|
||||
renderer.setElementClass(elementRef.nativeElement, this.slideId, true);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ngOnInit() {
|
||||
if (!this.options) {
|
||||
this.options = {};
|
||||
}
|
||||
|
||||
if (isPresent(this.pager)) {
|
||||
// beta.5 2016-04-18 deprecated warning
|
||||
// Pager should be passed as an option
|
||||
console.warn('The "pager" attribute has been deprecated. Please pass it in options.');
|
||||
// Remove this with the deprecation warning
|
||||
this.showPager = isTrueProperty(this.pager);
|
||||
}
|
||||
|
||||
if (isPresent(this.zoom)) {
|
||||
// beta.5 2016-04-18 deprecated warning
|
||||
// Zoom should be passed as an option
|
||||
console.warn('The "zoom" attribute has been deprecated. Please pass it in options.');
|
||||
}
|
||||
|
||||
// Deprecated 04-18 beta.5
|
||||
console.warn('The "slideChangeStart" event has been deprecated. Please use "willChange" instead. Ignore this if you aren\'t using it.');
|
||||
console.warn('The "change" event has been deprecated. Please use "didChange" instead. Ignore this if you aren\'t using it.');
|
||||
|
||||
if (isPresent(this.options.pager)) {
|
||||
this.showPager = isTrueProperty(this.options.pager);
|
||||
}
|
||||
|
||||
let paginationId = '.' + this.slideId + ' .swiper-pagination';
|
||||
|
||||
var options = defaults({
|
||||
pagination: paginationId
|
||||
}, this.options);
|
||||
|
||||
options.onTap = (swiper, e) => {
|
||||
this.onTap(swiper, e);
|
||||
return this.options.onTap && this.options.onTap(swiper, e);
|
||||
};
|
||||
options.onClick = (swiper, e) => {
|
||||
this.onClick(swiper, e);
|
||||
return this.options.onClick && this.options.onClick(swiper, e);
|
||||
};
|
||||
options.onDoubleTap = (swiper, e) => {
|
||||
this.onDoubleTap(swiper, e);
|
||||
return this.options.onDoubleTap && this.options.onDoubleTap(swiper, e);
|
||||
};
|
||||
options.onTransitionStart = (swiper, e) => {
|
||||
this.onTransitionStart(swiper, e);
|
||||
return this.options.onTransitionStart && this.options.onTransitionStart(swiper, e);
|
||||
};
|
||||
options.onTransitionEnd = (swiper, e) => {
|
||||
this.onTransitionEnd(swiper, e);
|
||||
return this.options.onTransitionEnd && this.options.onTransitionEnd(swiper, e);
|
||||
};
|
||||
options.onSlideChangeStart = (swiper) => {
|
||||
// TODO deprecated 2016-04-18
|
||||
this.slideChangeStart.emit(swiper);
|
||||
|
||||
this.willChange.emit(swiper);
|
||||
return this.options.onSlideChangeStart && this.options.onSlideChangeStart(swiper);
|
||||
};
|
||||
options.onSlideChangeEnd = (swiper) => {
|
||||
// TODO deprecated 2016-04-18
|
||||
this.change.emit(swiper);
|
||||
|
||||
this.didChange.emit(swiper);
|
||||
return this.options.onSlideChangeEnd && this.options.onSlideChangeEnd(swiper);
|
||||
};
|
||||
options.onLazyImageLoad = (swiper, slide, img) => {
|
||||
return this.options.onLazyImageLoad && this.options.onLazyImageLoad(swiper, slide, img);
|
||||
};
|
||||
options.onLazyImageReady = (swiper, slide, img) => {
|
||||
return this.options.onLazyImageReady && this.options.onLazyImageReady(swiper, slide, img);
|
||||
};
|
||||
options.onSliderMove = (swiper, e) => {
|
||||
this.move.emit(swiper);
|
||||
return this.options.onSliderMove && this.options.onSliderMove(swiper, e);
|
||||
};
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
var swiper = new Swiper(this.getNativeElement().children[0], options);
|
||||
this.slider = swiper;
|
||||
});
|
||||
|
||||
/*
|
||||
* TODO: Finish this
|
||||
if (isTrueProperty(this.zoom)) {
|
||||
this.enableZoom = true;
|
||||
setTimeout(() => {
|
||||
this.initZoom();
|
||||
})
|
||||
}
|
||||
*/
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onTap(swiper, e) {
|
||||
}
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onClick(swiper, e) {
|
||||
}
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onDoubleTap(swiper, e) {
|
||||
this.toggleZoom(swiper, e);
|
||||
}
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onLazyImageLoad(swiper, slide, img) {
|
||||
}
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onLazyImageReady(swiper, slide, img) {
|
||||
}
|
||||
|
||||
/*
|
||||
nextButton(swiper, e) {
|
||||
}
|
||||
prevButton() {
|
||||
}
|
||||
indexButton() {
|
||||
}
|
||||
*/
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
initZoom() {
|
||||
this.zoomDuration = this.zoomDuration || 230;
|
||||
this.maxScale = this.zoomMax || 3;
|
||||
|
||||
this.zoomElement = this.getNativeElement().children[0].children[0];
|
||||
|
||||
this.zoomElement && this.zoomElement.classList.add('ion-scroll-zoom');
|
||||
|
||||
this.zoomGesture = new Gesture(this.zoomElement);
|
||||
this.zoomGesture.listen();
|
||||
|
||||
this.scale = 1;
|
||||
|
||||
this.zoomLastPosX = 0;
|
||||
this.zoomLastPosY = 0;
|
||||
|
||||
|
||||
let last_scale, startX, startY, posX = 0, posY = 0, zoomRect;
|
||||
|
||||
this.viewportWidth = this.getNativeElement().offsetWidth;
|
||||
this.viewportHeight = this.getNativeElement().offsetHeight;
|
||||
|
||||
this.zoomElement.addEventListener('touchstart', (e) => {
|
||||
this.onTouchStart(e);
|
||||
});
|
||||
|
||||
this.zoomElement.addEventListener('touchmove', (e) => {
|
||||
this.onTouchMove(e);
|
||||
});
|
||||
|
||||
this.zoomElement.addEventListener('touchend', (e) => {
|
||||
this.onTouchEnd(e);
|
||||
});
|
||||
|
||||
this.zoomGesture.on('pinchstart', (e) => {
|
||||
last_scale = this.scale;
|
||||
console.debug('Last scale', e.scale);
|
||||
});
|
||||
|
||||
this.zoomGesture.on('pinch', (e) => {
|
||||
this.scale = Math.max(1, Math.min(last_scale * e.scale, 10));
|
||||
console.debug('Scaling', this.scale);
|
||||
this.zoomElement.style[CSS.transform] = 'scale(' + this.scale + ')';
|
||||
|
||||
zoomRect = this.zoomElement.getBoundingClientRect();
|
||||
});
|
||||
|
||||
this.zoomGesture.on('pinchend', () => {
|
||||
// last_scale = Math.max(1, Math.min(last_scale * e.scale, 10));
|
||||
if (this.scale > this.maxScale) {
|
||||
let za = new Animation(this.zoomElement)
|
||||
.duration(this.zoomDuration)
|
||||
.easing('linear')
|
||||
.from('scale', this.scale)
|
||||
.to('scale', this.maxScale);
|
||||
za.play();
|
||||
|
||||
this.scale = this.maxScale;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
resetZoom() {
|
||||
|
||||
if (this.zoomElement) {
|
||||
|
||||
this.zoomElement.parentElement.style[CSS.transform] = '';
|
||||
this.zoomElement.style[CSS.transform] = 'scale(1)';
|
||||
}
|
||||
|
||||
this.scale = 1;
|
||||
this.zoomLastPosX = 0;
|
||||
this.zoomLastPosY = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
toggleZoom(swiper, e) {
|
||||
console.debug('Try toggle zoom');
|
||||
if (!this.enableZoom) { return; }
|
||||
|
||||
console.debug('Toggling zoom', e);
|
||||
|
||||
/*
|
||||
let x = e.pointers[0].clientX;
|
||||
let y = e.pointers[0].clientY;
|
||||
|
||||
let mx = this.viewportWidth / 2;
|
||||
let my = this.viewportHeight / 2;
|
||||
|
||||
let tx, ty;
|
||||
|
||||
if (x > mx) {
|
||||
// Greater than half
|
||||
tx = -x;
|
||||
} else {
|
||||
// Less than or equal to half
|
||||
tx = (this.viewportWidth - x);
|
||||
}
|
||||
if (y > my) {
|
||||
ty = -y;
|
||||
} else {
|
||||
ty = y-my;
|
||||
}
|
||||
|
||||
console.debug(y);
|
||||
*/
|
||||
|
||||
let zi = new Animation(this.touch.target.children[0])
|
||||
.duration(this.zoomDuration)
|
||||
.easing('linear');
|
||||
|
||||
let zw = new Animation(this.touch.target.children[0])
|
||||
.duration(this.zoomDuration)
|
||||
.easing('linear');
|
||||
|
||||
let za = new Animation();
|
||||
za.add(zi);
|
||||
|
||||
if (this.scale > 1) {
|
||||
// zoom out
|
||||
|
||||
// zw.fromTo('translateX', posX + 'px', '0px');
|
||||
// zw.fromTo('translateY', posY + 'px', '0px');
|
||||
|
||||
zi.from('scale', this.scale);
|
||||
zi.to('scale', 1);
|
||||
za.play();
|
||||
|
||||
// posX = 0;
|
||||
// posY = 0;
|
||||
|
||||
this.scale = 1;
|
||||
} else {
|
||||
// zoom in
|
||||
|
||||
// zw.fromTo('translateX', posX + 'px', tx + 'px');
|
||||
// zw.fromTo('translateY', posY + 'px', ty + 'px');
|
||||
|
||||
zi.from('scale', this.scale);
|
||||
zi.to('scale', this.maxScale);
|
||||
za.play();
|
||||
|
||||
// posX = tx;
|
||||
// posY = ty;
|
||||
|
||||
this.scale = this.maxScale;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onTransitionStart(swiper, e) {
|
||||
}
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onTransitionEnd(swiper, e) {
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onTouchStart(e) {
|
||||
console.debug('Touch start', e);
|
||||
|
||||
// TODO: Support mice as well
|
||||
|
||||
let target = ((dom.closest(e.target, '.slide').children[0] as HTMLElement).children[0] as HTMLElement);
|
||||
|
||||
this.touch = {
|
||||
x: null,
|
||||
y: null,
|
||||
startX: e.touches[0].clientX,
|
||||
startY: e.touches[0].clientY,
|
||||
deltaX: 0,
|
||||
deltaY: 0,
|
||||
lastX: 0,
|
||||
lastY: 0,
|
||||
target: target.parentElement,
|
||||
zoomable: target,
|
||||
zoomableWidth: target.offsetWidth,
|
||||
zoomableHeight: target.offsetHeight
|
||||
};
|
||||
console.debug('Target', this.touch.target);
|
||||
|
||||
// TODO: android prevent default
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onTouchMove(e) {
|
||||
this.touch.deltaX = e.touches[0].clientX - this.touch.startX;
|
||||
this.touch.deltaY = e.touches[0].clientY - this.touch.startY;
|
||||
|
||||
// TODO: Make sure we need to transform (image is bigger than viewport)
|
||||
|
||||
let zoomableScaledWidth = this.touch.zoomableWidth * this.scale;
|
||||
let zoomableScaledHeight = this.touch.zoomableHeight * this.scale;
|
||||
|
||||
let x1 = Math.min((this.viewportWidth / 2) - zoomableScaledWidth / 2, 0);
|
||||
let x2 = -x1;
|
||||
let y1 = Math.min((this.viewportHeight / 2) - zoomableScaledHeight / 2, 0);
|
||||
let y2 = -y1;
|
||||
|
||||
console.debug('BOUNDS', x1, x2, y1, y2);
|
||||
|
||||
if (this.scale <= 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.debug('PAN', e);
|
||||
|
||||
// move image
|
||||
this.touch.x = this.touch.deltaX + this.touch.lastX;
|
||||
this.touch.y = this.touch.deltaY + this.touch.lastY;
|
||||
|
||||
if (this.touch.x < x1) {
|
||||
console.debug('OUT ON LEFT');
|
||||
}
|
||||
if (this.touch.x > x2 ) {
|
||||
console.debug('OUT ON RIGHT');
|
||||
}
|
||||
|
||||
if (this.touch.x > this.viewportWidth) {
|
||||
// too far on the left side, let the event bubble up (to enable slider on edges, for example)
|
||||
} else if (-this.touch.x > this.viewportWidth) {
|
||||
// too far on the right side, let the event bubble up (to enable slider on edges, for example)
|
||||
} else {
|
||||
console.debug('TRANSFORM', this.touch.x, this.touch.y, this.touch.target);
|
||||
// this.touch.target.style[CSS.transform] = 'translateX(' + this.touch.x + 'px) translateY(' + this.touch.y + 'px)';
|
||||
this.touch.target.style[CSS.transform] = 'translateX(' + this.touch.x + 'px) translateY(' + this.touch.y + 'px)';
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
return false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onTouchEnd(e) {
|
||||
console.debug('PANEND', e);
|
||||
|
||||
if (this.scale > 1) {
|
||||
|
||||
if (Math.abs(this.touch.x) > this.viewportWidth) {
|
||||
// TODO what is posX?
|
||||
var posX = posX > 0 ? this.viewportWidth - 1 : -(this.viewportWidth - 1);
|
||||
console.debug('Setting on posx', this.touch.x);
|
||||
}
|
||||
|
||||
/*
|
||||
if (posY > this.viewportHeight/2) {
|
||||
let z = new Animation(this.zoomElement.parentElement);
|
||||
z.fromTo('translateY', posY + 'px', Math.min(this.viewportHeight/2 + 30, posY));
|
||||
z.play();
|
||||
} else {
|
||||
let z = new Animation(this.zoomElement.parentElement);
|
||||
z.fromTo('translateY', posY + 'px', Math.max(this.viewportHeight/2 - 30, posY));
|
||||
z.play();
|
||||
}
|
||||
*/
|
||||
|
||||
this.touch.lastX = this.touch.x;
|
||||
this.touch.lastY = this.touch.y;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Update the underlying slider implementation. Call this if you've added or removed
|
||||
* child slides.
|
||||
*/
|
||||
update() {
|
||||
setTimeout(() => {
|
||||
this.slider.update();
|
||||
|
||||
// Don't allow pager to show with > 10 slides
|
||||
if (this.length() > 10) {
|
||||
this.showPager = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Transition to the specified slide.
|
||||
*
|
||||
* @param {number} index The index number of the slide.
|
||||
* @param {number} speed Transition duration (in ms). Optional.
|
||||
* @param {boolean} runCallbacks Whether or not to emit the `willChange`/`didChange` events. Optional. Default true.
|
||||
*/
|
||||
slideTo(index: number, speed?: number, runCallbacks?: boolean) {
|
||||
this.slider.slideTo(index, speed, runCallbacks);
|
||||
}
|
||||
|
||||
/**
|
||||
* Transition to the next slide.
|
||||
*
|
||||
* @param {number} speed Transition duration (in ms). Optional.
|
||||
* @param {boolean} runCallbacks Whether or not to emit the `willChange`/`didChange` events. Optional. Default true.
|
||||
*/
|
||||
slideNext(speed?: number, runCallbacks?: boolean) {
|
||||
this.slider.slideNext(runCallbacks, speed);
|
||||
}
|
||||
|
||||
/**
|
||||
* Transition to the previous slide.
|
||||
*
|
||||
* @param {number} speed Transition duration (in ms). Optional.
|
||||
* @param {boolean} runCallbacks Whether or not to emit the `willChange`/`didChange` events. Optional. Default true.
|
||||
*/
|
||||
slidePrev(speed?: number, runCallbacks?: boolean) {
|
||||
this.slider.slidePrev(runCallbacks, speed);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the index of the active slide.
|
||||
*
|
||||
* @returns {number} The index number of the current slide.
|
||||
*/
|
||||
getActiveIndex(): number {
|
||||
return this.slider.activeIndex;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the index of the previous slide.
|
||||
*
|
||||
* @returns {number} The index number of the previous slide.
|
||||
*/
|
||||
getPreviousIndex(): number {
|
||||
return this.slider.previousIndex;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the total number of slides.
|
||||
*
|
||||
* @returns {number} The total number of slides.
|
||||
*/
|
||||
length(): number {
|
||||
return this.slider.slides.length;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get whether or not the current slide is the last slide.
|
||||
*
|
||||
* @returns {boolean} If the slide is the last slide or not.
|
||||
*/
|
||||
isEnd(): boolean {
|
||||
return this.slider.isEnd;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get whether or not the current slide is the first slide.
|
||||
*
|
||||
* @returns {boolean} If the slide is the first slide or not.
|
||||
*/
|
||||
isBeginning(): boolean {
|
||||
return this.slider.isBeginning;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the `Swiper` instance.
|
||||
*
|
||||
* The Slides component wraps the `Swiper` component built by iDangero.us. See the
|
||||
* [Swiper API Docs](http://idangero.us/swiper/api/) for information on using
|
||||
* the `Swiper` instance directly.
|
||||
*
|
||||
* @returns {Swiper}
|
||||
*/
|
||||
getSlider() {
|
||||
return this.slider;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @name Slide
|
||||
* @description
|
||||
* The Slide component is a child component of [Slides](../Slides). The template
|
||||
* should be written as `ion-slide`. Any slide content should be written
|
||||
* in this component and it should be used in conjunction with [Slides](../Slides).
|
||||
*
|
||||
* See the [Slides API Docs](../Slides) for more usage information.
|
||||
*
|
||||
* @demo /docs/v2/demos/slides/
|
||||
* @see {@link /docs/v2/api/components/slides/Slides/ Slides API Docs}
|
||||
*/
|
||||
@Component({
|
||||
selector: 'ion-slide',
|
||||
template: '<div class="slide-zoom"><ng-content></ng-content></div>',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class Slide {
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
private ele: HTMLElement;
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
@Input() zoom;
|
||||
|
||||
constructor(
|
||||
elementRef: ElementRef,
|
||||
@Host() slides: Slides
|
||||
) {
|
||||
this.ele = elementRef.nativeElement;
|
||||
this.ele.classList.add('swiper-slide');
|
||||
|
||||
slides.rapidUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
@Directive({
|
||||
selector: 'slide-lazy',
|
||||
host: {
|
||||
'class': 'swiper-lazy'
|
||||
}
|
||||
})
|
||||
export class SlideLazy {}
|
||||
|
||||
let slidesId = -1;
|
||||
Reference in New Issue
Block a user