diff --git a/package.json b/package.json index b3042d6db5..7e14dc124a 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "@types/run-sequence": "0.0.28", "@types/semver": "5.3.30", "@types/serve-static": "1.7.31", + "@types/swiper": "^3.4.2", "@types/systemjs": "^0.19.33", "@types/through2": "2.0.29", "babel-plugin-transform-es2015-modules-systemjs": "6.14.0", @@ -125,6 +126,7 @@ "serve-static": "1.11.1", "strip-function": "0.0.3", "sw-toolbox": "3.4.0", + "swiper": "^3.4.2", "systemjs": "0.19.38", "through2": "2.0.1", "ts-node": "1.3.0", @@ -144,4 +146,4 @@ "pre-push#master": [ "test" ] -} \ No newline at end of file +} diff --git a/src/components/button/button.ios.scss b/src/components/button/button.ios.scss index 5b07c8923b..9c0d5ac72b 100644 --- a/src/components/button/button.ios.scss +++ b/src/components/button/button.ios.scss @@ -1,4 +1,5 @@ @import "../../themes/ionic.globals.ios"; +@import "./button"; // iOS Button // -------------------------------------------------- diff --git a/src/components/button/button.md.scss b/src/components/button/button.md.scss index e7a6f46801..2075666909 100644 --- a/src/components/button/button.md.scss +++ b/src/components/button/button.md.scss @@ -1,4 +1,5 @@ @import "../../themes/ionic.globals.md"; +@import "./button"; // Material Design Button // -------------------------------------------------- diff --git a/src/components/button/button.scss b/src/components/button/button.scss index b02013b5e2..1ddac2820c 100644 --- a/src/components/button/button.scss +++ b/src/components/button/button.scss @@ -9,6 +9,10 @@ $button-round-padding: 0 2.6rem !default; /// @prop - Border radius of the round button $button-round-border-radius: 64px !default; +:host { + visibility: inherit !important; +} + .button { @include appearance(none); diff --git a/src/components/button/button.ts b/src/components/button/button.ts index 115919432c..7209436ea6 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -1,9 +1,5 @@ -import { Attribute, ChangeDetectionStrategy, Component, ElementRef, Input, Renderer, ViewEncapsulation } from '@angular/core'; - -import { Config } from '../../config/config'; -import { Ion } from '../ion'; -import { isTrueProperty } from '../../util/util'; - +import { Component, h, Ionic, Prop } from '../index'; +type CssClassObject = { [className: string]: boolean }; /** * @name Button @@ -64,301 +60,194 @@ import { isTrueProperty } from '../../util/util'; * * ``` * - * @advanced - * - * ```html - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * ``` - * - * ```ts - * @Component({ - * templateUrl: 'main.html' - * }) - * class E2EPage { - * isDanger: boolean = true; - * isSecondary: boolean = false; - * isRound: boolean = true; - * isOutline: boolean = false; - * isClear: boolean = true; - * myColor: string = 'secondary'; - * myColor2: string = 'dark'; - * - * logEvent(event) { - * console.log(event) - * } - * } - * - * ``` - * - * @demo /docs/demos/src/button/ - * @see {@link /docs/components#buttons Button Component Docs} - * @see {@link /docs/components#fabs FabButton Docs} - * @see {@link ../../fab/FabButton FabButton API Docs} - * @see {@link ../../fab/FabContainer FabContainer API Docs} - */ + */ @Component({ - selector: '[ion-button]', - template: - '' + - '' + - '' + - '
', - changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, + tag: 'ion-button', + styleUrls: { + ios: 'button.ios.scss', + md: 'button.md.scss', + wp: 'button.wp.scss' + } }) -export class Button extends Ion { - /** @hidden */ - _role: string = 'button'; // bar-button - - /** @hidden */ - _size: string; // large/small/default - - /** @hidden */ - _style: string = 'default'; // outline/clear/solid - - /** @hidden */ - _shape: string; // round/fab - - /** @hidden */ - _display: string; // block/full - - /** @hidden */ - _decorator: string; // strong - - /** @hidden */ - _init: boolean; +export class Button { /** * @input {boolean} If true, activates the large button size. + * Type: size */ - @Input() - set large(val: boolean) { - this._attr('_size', 'large', val); - } + @Prop() large: boolean = false; /** * @input {boolean} If true, activates the small button size. + * Type: size */ - @Input() - set small(val: boolean) { - this._attr('_size', 'small', val); - } + @Prop() small: boolean = false; /** * @input {boolean} If true, activates the default button size. Normally the default, useful for buttons in an item. + * Type: size */ - @Input() - set default(val: boolean) { - this._attr('_size', 'default', val); - } + @Prop() default: boolean = false; /** * @input {boolean} If true, activates a transparent button style with a border. + * Type: style */ - @Input() - set outline(val: boolean) { - this._attr('_style', 'outline', val); - } + @Prop() outline: boolean = false; /** * @input {boolean} If true, activates a transparent button style without a border. + * Type: style */ - @Input() - set clear(val: boolean) { - this._attr('_style', 'clear', val); - } + @Prop() clear: boolean = false; /** * @input {boolean} If true, activates a solid button style. Normally the default, useful for buttons in a toolbar. + * Type: style */ - @Input() - set solid(val: boolean) { - this._attr('_style', 'solid', val); - } + @Prop() solid: boolean = false; /** * @input {boolean} If true, activates a button with rounded corners. + * Type: shape */ - @Input() - set round(val: boolean) { - this._attr('_shape', 'round', val); - } + @Prop() round: boolean = false; /** * @input {boolean} If true, activates a button style that fills the available width. + * Type: display */ - @Input() - set block(val: boolean) { - this._attr('_display', 'block', val); - } + @Prop() block: boolean = false; /** * @input {boolean} If true, activates a button style that fills the available width without * a left and right border. + * Type: display */ - @Input() - set full(val: boolean) { - this._attr('_display', 'full', val); - } + @Prop() full: boolean = false; /** * @input {boolean} If true, activates a button with a heavier font weight. + * Type: decorator */ - @Input() - set strong(val: boolean) { - this._attr('_decorator', 'strong', val); - } + @Prop() strong: boolean = false; /** * @input {string} The mode determines which platform styles to use. * Possible values are: `"ios"`, `"md"`, or `"wp"`. * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ - @Input() - set mode(val: string) { - this._assignCss(false); - this._mode = val; - this._assignCss(true); - } - - /** @hidden */ - _attr(type: string, attrName: string, attrValue: boolean) { - if (type === '_style') { - this._updateColor(this._color, false); - } - this._setClass((this)[type], false); - if (isTrueProperty(attrValue)) { - (this)[type] = attrName; - this._setClass(attrName, true); - - } else { - // Special handling for '_style' which defaults to 'default'. - (this)[type] = (type === '_style' ? 'default' : null); - this._setClass((this)[type], true); - } - if (type === '_style') { - this._updateColor(this._color, true); - } - - } + @Prop() mode: 'ios' | 'md' | 'wp'; /** * @input {string} The color to use from your Sass `$colors` map. * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * For more information, see [Theming your App](/docs/theming/theming-your-app). */ - @Input() - set color(val: string) { - this._updateColor(this._color, false); - this._updateColor(val, true); - this._color = val; + @Prop() color: string; + /** + * @hidden + */ + getElementClassList(role: string, mode: string): string[] { + if (!role) { + return []; + } + return [ + role, + `${role}-${mode}` + ]; } - constructor( - @Attribute('ion-button') ionButton: string, - config: Config, - elementRef: ElementRef, - renderer: Renderer - ) { - super(config, elementRef, renderer); - this._mode = config.get('mode'); - if (config.get('hoverCSS') === false) { - this.setElementClass('disable-hover', true); + /** + * @hidden + */ + getClassList(role: string, type: string, mode: string): string[] { + if (!type) { + return []; } - - if (ionButton.trim().length > 0) { - this.setRole(ionButton); - } - } - - /** @hidden */ - ngAfterContentInit() { - this._init = true; - this._assignCss(true); + type = type.toLocaleLowerCase(); + return [ + `${role}-${type}`, + `${role}-${type}-${mode}` + ]; } /** * @hidden */ - setRole(val: string) { - this._assignCss(false); - this._role = val; - this._assignCss(true); + getColorClassList(color: string, role: string, style: string, mode: string): string | null { + if (!color) { + return null; + } + style = (role !== 'bar-button' && style === 'solid') ? 'default' : style; + let className = + role + + ((style && style !== 'default') ? + '-' + style.toLowerCase() : + ''); + + console.log(role, style, className, mode, color); + + return `${className}-${mode}-${color}`; } - /** - * @hidden - */ - _assignCss(assignCssClass: boolean) { - let role = this._role; - if (role) { - this.setElementClass(role, assignCssClass); // button - this.setElementClass(`${role}-${this._mode}`, assignCssClass); // button + render() { + var role = 'button'; + var size = + (this.large ? 'large' : null) || + (this.small ? 'small' : null) || + (this.default ? 'default' : null); - this._setClass(this._style, assignCssClass); // button-clear - this._setClass(this._shape, assignCssClass); // button-round - this._setClass(this._display, assignCssClass); // button-full - this._setClass(this._size, assignCssClass); // button-small - this._setClass(this._decorator, assignCssClass); // button-strong - this._updateColor(this._color, assignCssClass); // button-secondary, bar-button-secondary - } - } + var style = + (this.outline ? 'outline' : null) || + (this.clear ? 'clear' : null) || + (this.solid ? 'solid' : null) || + 'default'; - /** - * @hidden - */ - _setClass(type: string, assignCssClass: boolean) { - if (type && this._init) { - type = type.toLocaleLowerCase(); - this.setElementClass(`${this._role}-${type}`, assignCssClass); - this.setElementClass(`${this._role}-${type}-${this._mode}`, assignCssClass); - } - } + var shape = (this.round ? 'round' : null); - /** - * @hidden - */ - _updateColor(color: string, isAdd: boolean) { - if (color && this._init) { - // The class should begin with the button role - // button, bar-button - let className = this._role; + var display = + (this.block ? 'block' : null) || + (this.full ? 'full' : null); - // If the role is not a bar-button, don't apply the solid style - let style = this._style; - style = (this._role !== 'bar-button' && style === 'solid' ? 'default' : style); + var decorator = (this.strong ? 'strong' : null); - className += (style !== null && style !== '' && style !== 'default' ? '-' + style.toLowerCase() : ''); + var buttonClasses: CssClassObject = [] + .concat( + this.getElementClassList(role, this.mode), + this.getClassList(role, shape, this.mode), + this.getClassList(role, display, this.mode), + this.getClassList(role, size, this.mode), + this.getClassList(role, decorator, this.mode), + this.getColorClassList(this.color, role, style, this.mode) + ) + .reduce((prevValue, cssClass) => { + prevValue[cssClass] = true; + return prevValue; + }, {}); - if (color !== null && color !== '') { - this.setElementClass(`${className}-${this._mode}-${color}`, isAdd); - } - } + return h(this, + h('div', { + class: buttonClasses + }, + [ + h('span', { + class: { + 'button-inner': true + } + }, + h('slot') + ), + h('div', { + class: { + 'button-effect': true + } + } + ) + ] + ) + ); } } diff --git a/src/components/button/button.wp.scss b/src/components/button/button.wp.scss index 5d6892bf0b..cf6d76e8b9 100644 --- a/src/components/button/button.wp.scss +++ b/src/components/button/button.wp.scss @@ -1,4 +1,5 @@ @import "../../themes/ionic.globals.wp"; +@import "./button"; // Windows Button // -------------------------------------------------- diff --git a/src/components/button/test/button.spec.ts b/src/components/button/test/button.spec.ts deleted file mode 100644 index 0a5d6d5471..0000000000 --- a/src/components/button/test/button.spec.ts +++ /dev/null @@ -1,264 +0,0 @@ -import { Button } from '../button'; -import { Config } from '../../../config/config'; -import { mockConfig, mockElementRef, mockRenderer } from '../../../util/mock-providers'; - - -describe('button', () => { - - it('should set a different button role', () => { - let b = mockButton(); - b.outline = true; - b.small = true; - b.full = true; - b.color = 'primary'; - b.setRole('bar-button'); - b._assignCss(true); - - expect(hasClass(b, 'bar-button-outline')).toEqual(true); - expect(hasClass(b, 'bar-button-small')).toEqual(true); - expect(hasClass(b, 'bar-button-full')).toEqual(true); - expect(hasClass(b, 'bar-button-outline-ios-primary')).toEqual(true); - - expect(hasClass(b, 'button-outline')).toEqual(false); - expect(hasClass(b, 'button-small')).toEqual(false); - expect(hasClass(b, 'button-full')).toEqual(false); - expect(hasClass(b, 'button-primary')).toEqual(false); - }); - - it('should remove button color attributes and add different role', () => { - let b = mockButton(); - b.outline = true; - b.small = true; - b.full = true; - b.color = 'primary'; - - b._assignCss(true); - expect(hasClass(b, 'button-outline')).toEqual(true); - expect(hasClass(b, 'button-small')).toEqual(true); - expect(hasClass(b, 'button-full')).toEqual(true); - expect(hasClass(b, 'button-outline-ios-primary')).toEqual(true); - - b._assignCss(false); - expect(hasClass(b, 'button-outline')).toEqual(false); - expect(hasClass(b, 'button-small')).toEqual(false); - expect(hasClass(b, 'button-full')).toEqual(false); - expect(hasClass(b, 'button-outline-ios-primary')).toEqual(false); - }); - - it('should read button color attributes with styles', () => { - let b = mockButton(); - b.outline = true; - b.small = true; - b.full = true; - b.color = 'primary'; - - b._assignCss(true); - expect(hasClass(b, 'button')).toEqual(true); - expect(hasClass(b, 'button-outline')).toEqual(true); - expect(hasClass(b, 'button-small')).toEqual(true); - expect(hasClass(b, 'button-full')).toEqual(true); - expect(hasClass(b, 'button-outline-ios-primary')).toEqual(true); - - b = mockButton(); - b.clear = true; - b.color = 'primary'; - b.color = 'secondary'; - - b._assignCss(true); - expect(hasClass(b, 'button')).toEqual(true); - expect(hasClass(b, 'button-clear')).toEqual(true); - expect(hasClass(b, 'button-clear-ios-primary')).toEqual(false); - expect(hasClass(b, 'button-clear-ios-secondary')).toEqual(true); - - b = mockButton(); - b.solid = true; - b.color = 'primary'; - b.color = 'secondary'; - - b._assignCss(true); - expect(hasClass(b, 'button')).toEqual(true); - expect(hasClass(b, 'button-solid')).toEqual(true); - expect(hasClass(b, 'button-ios-primary')).toEqual(false); - expect(hasClass(b, 'button-ios-secondary')).toEqual(true); - - b = mockButton(); - b.solid = true; - b.color = 'primary'; - b.color = 'secondary'; - - b.setRole('bar-button'); - b._assignCss(true); - expect(hasClass(b, 'bar-button-solid')).toEqual(true); - expect(hasClass(b, 'bar-button-solid-ios-primary')).toEqual(false); - expect(hasClass(b, 'bar-button-solid-ios-secondary')).toEqual(true); - }); - - it('should auto add the default style', () => { - let b = mockButton(); - b._assignCss(true); - expect(hasClass(b, 'button')).toEqual(true); - expect(hasClass(b, 'button-default')).toEqual(true); - - b = mockButton(); - b.clear = true; - - b._assignCss(true); - expect(hasClass(b, 'button')).toEqual(true); - expect(hasClass(b, 'button-default')).toEqual(false); - expect(hasClass(b, 'button-clear')).toEqual(true); - }); - - it('should read button color attributes', () => { - let b = mockButton(); - b.color = 'primary'; - b._assignCss(true); - expect(hasClass(b, 'button-ios-primary')).toEqual(true); - - b = mockButton(); - b.color = 'primary'; - b.color = 'secondary'; - b._assignCss(true); - expect(hasClass(b, 'button-ios-primary')).toEqual(false); - expect(hasClass(b, 'button-ios-secondary')).toEqual(true); - }); - - it('should read button style attributes', () => { - let b = mockButton(); - b.clear = true; - b._assignCss(true); - expect(hasClass(b, 'button-clear')).toEqual(true); - - b = mockButton(); - b.outline = true; - b._assignCss(true); - expect(hasClass(b, 'button-outline')).toEqual(true); - - b = mockButton(); - b.solid = true; - b._assignCss(true); - expect(hasClass(b, 'button-solid')).toEqual(true); - - b = mockButton(); - b.clear = true; - b.outline = true; - b.small = true; - b.full = true; - b._assignCss(true); - expect(hasClass(b, 'button-clear')).toEqual(false); - expect(hasClass(b, 'button-outline')).toEqual(true); - expect(hasClass(b, 'button-small')).toEqual(true); - expect(hasClass(b, 'button-full')).toEqual(true); - - b = mockButton(); - b.outline = true; - b.setRole('bar-button'); - b._assignCss(true); - expect(hasClass(b, 'bar-button-outline')).toEqual(true); - }); - - it('should read button shape attributes', () => { - let b = mockButton(); - b.round = true; - b._assignCss(true); - expect(hasClass(b, 'button-round')).toEqual(true); - }); - - it('should read button display attributes', () => { - let b = mockButton(); - b.block = true; - b._assignCss(true); - expect(hasClass(b, 'button-block')).toEqual(true); - - b = mockButton(); - b.full = true; - b._assignCss(true); - expect(hasClass(b, 'button-full')).toEqual(true); - - b = mockButton(); - b.block = true; - b.full = true; - b._assignCss(true); - expect(hasClass(b, 'button-block')).toEqual(false); - expect(hasClass(b, 'button-full')).toEqual(true); - }); - - it('should read button size attributes', () => { - let b = mockButton(); - b.small = true; - b._assignCss(true); - expect(hasClass(b, 'button-small')).toEqual(true); - - b = mockButton(); - b.large = true; - b._assignCss(true); - expect(hasClass(b, 'button-large')).toEqual(true); - - b = mockButton(); - b.large = true; - b.small = true; - b._assignCss(true); - expect(hasClass(b, 'button-large')).toEqual(false); - expect(hasClass(b, 'button-small')).toEqual(true); - }); - - it('should add button css class', () => { - let b = mockButton(); - b._assignCss(true); - expect(hasClass(b, 'button')).toEqual(true); - }); - - it('should add disable-hover css class', () => { - let config = mockConfig({ - hoverCSS: false - }); - let b = mockButton(config); - - expect(hasClass(b, 'disable-hover')).toEqual(true); - }); - - it('should set defaults', () => { - let b = mockButton(); - expect(b._role).toEqual('button'); - expect(b._size).toEqual(undefined); - expect(b._color).toEqual(undefined); - expect(b._style).toEqual('default'); - expect(b._display).toEqual(undefined); - }); - - it('should set different modes', () => { - let b = mockButton(); - - b._assignCss(true); - expect(b._mode).toEqual('ios'); - expect(hasClass(b, 'button')).toEqual(true); - expect(hasClass(b, 'button-ios')).toEqual(true); - - b.mode = 'wp'; - expect(b._mode).toEqual('wp'); - expect(hasClass(b, 'button-wp')).toEqual(true); - - b.mode = 'blah'; - expect(b._mode).toEqual('blah'); - expect(hasClass(b, 'button-blah')).toEqual(true); - }); - - it('should add alert-button css class', () => { - let b = mockButton(null, 'alert-button'); - b._assignCss(true); - expect(hasClass(b, 'alert-button')).toEqual(true); - }); - -}); - -function mockButton(config?: Config, ionButton?: string) { - config = config || mockConfig(); - ionButton = ionButton || ''; - let b = new Button(ionButton, config, mockElementRef(), mockRenderer()); - b._init = true; - b.mode = 'ios'; - return b; -} - -function hasClass(button: any, className: string) { - return button._elementRef.nativeElement.classList.contains(className); -} diff --git a/src/components/item/item.ts b/src/components/item/item.ts index 021c99610f..e8a16fd805 100644 --- a/src/components/item/item.ts +++ b/src/components/item/item.ts @@ -414,11 +414,11 @@ export class Item extends Ion { */ @ContentChildren(Button) set _buttons(buttons: QueryList`; - } - } - - } else if (s.paginationType === 'fraction') { - paginationHTML = - '' + - ' / ' + - ''; - - } else if (s.paginationType === 'progress') { - paginationHTML = ''; - } - - s._paginationContainer.innerHTML = paginationHTML; - - s._bullets = s._paginationContainer.querySelectorAll('.' + CLS.bullet); -} - - -export function updatePaginationClasses(s: Slides) { - // Current/Total - var current: number; - var total = s.loop ? Math.ceil((s._slides.length - s.loopedSlides * 2) / s.slidesPerGroup) : s._snapGrid.length; - - if (s.loop) { - current = Math.ceil((s._activeIndex - s.loopedSlides) / s.slidesPerGroup); - if (current > s._slides.length - 1 - s.loopedSlides * 2) { - current = current - (s._slides.length - s.loopedSlides * 2); - } - if (current > total - 1) { - current = current - total; - } - if (current < 0 && s.paginationType !== 'bullets') { - current = total + current; - } - - } else { - if (typeof s._snapIndex !== 'undefined') { - current = s._snapIndex; - } else { - current = s._activeIndex || 0; - } - } - - // Types - if (s.paginationType === 'bullets' && s._bullets) { - var selector = current + ( current < 0 ? s._bullets.length : 0 ); - for (var i = 0; i < s._bullets.length; i++) { - if (i === selector) { - addClass(s._bullets[i], CLS.bulletActive); - } else { - removeClass(s._bullets[i], CLS.bulletActive); - } - } - } - - if (s.paginationType === 'fraction') { - eachChild(s._paginationContainer, '.' + CLS.paginationCurrent, (ele) => { - ele.textContent = (current + 1); - }); - eachChild(s._paginationContainer, '.' + CLS.paginationTotal, ele => { - ele.textContent = total; - }); - } - - if (s.paginationType === 'progress') { - var scale = (current + 1) / total, - scaleX = scale, - scaleY = 1; - if (!isHorizontal(s)) { - scaleY = scale; - scaleX = 1; - } - eachChild(s._paginationContainer, '.' + CLS.paginationProgressbar, ele => { - transform(ele, 'translate3d(0,0,0) scaleX(' + scaleX + ') scaleY(' + scaleY + ')'); - transition(ele, s.speed); - }); - } -} diff --git a/src/components/slides/swiper/swiper-parallax.ts b/src/components/slides/swiper/swiper-parallax.ts deleted file mode 100755 index cb1deca363..0000000000 --- a/src/components/slides/swiper/swiper-parallax.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { Slides } from '../slides'; -import { eachChild, isHorizontal, transform, transition } from './swiper-utils'; - - -/*========================= - Parallax - ===========================*/ -function setParallaxTransform(s: Slides, el: HTMLElement, progress: number) { - var p: string; - var pX: string; - var pY: string; - var rtlFactor = s._rtl ? -1 : 1; - - p = el.getAttribute('data-swiper-parallax') || '0'; - pX = el.getAttribute('data-swiper-parallax-x'); - pY = el.getAttribute('data-swiper-parallax-y'); - - if (pX || pY) { - pX = pX || '0'; - pY = pY || '0'; - - } else { - if (isHorizontal(s)) { - pX = p; - pY = '0'; - } else { - pY = p; - pX = '0'; - } - } - - if ((pX).indexOf('%') >= 0) { - pX = parseInt(pX, 10) * progress * rtlFactor + '%'; - } else { - pX = pX * progress * rtlFactor + 'px' ; - } - - if ((pY).indexOf('%') >= 0) { - pY = parseInt(pY, 10) * progress + '%'; - } else { - pY = pY * progress + 'px' ; - } - - transform(el, 'translate3d(' + pX + ', ' + pY + ',0px)'); -} - - -export function parallaxSetTranslate(s: Slides) { - eachChild(s.container, '[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y]', (el) => { - setParallaxTransform(s, el, s.progress); - }); - - for (var i = 0; i < s._slides.length; i++) { - var slide = s._slides[i]; - eachChild(slide, '[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y]', (el) => { - var progress = Math.min(Math.max(slide.progress, -1), 1); - setParallaxTransform(s, slide, progress); - }); - } -} - -export function parallaxSetTransition(s: Slides, duration: number) { - if (typeof duration === 'undefined') duration = s.speed; - - eachChild(s.container, '[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y]', (el) => { - var parallaxDuration = parseInt(el.getAttribute('data-swiper-parallax-duration'), 10) || duration; - if (duration === 0) parallaxDuration = 0; - transition(el, parallaxDuration); - }); -} diff --git a/src/components/slides/swiper/swiper-progress.ts b/src/components/slides/swiper/swiper-progress.ts deleted file mode 100644 index b36b9e0f5a..0000000000 --- a/src/components/slides/swiper/swiper-progress.ts +++ /dev/null @@ -1,72 +0,0 @@ -import { Slides } from '../slides'; -import { maxTranslate, minTranslate, removeClass, updateSlidesOffset, CLS } from './swiper-utils'; - - -export function updateProgress(s: Slides, translate?: number) { - if (typeof translate === 'undefined') { - translate = s._translate || 0; - } - var translatesDiff = maxTranslate(s) - minTranslate(s); - var wasBeginning = s._isBeginning; - var wasEnd = s._isEnd; - - if (translatesDiff === 0) { - s.progress = 0; - s._isBeginning = s._isEnd = true; - - } else { - s.progress = (translate - minTranslate(s)) / (translatesDiff); - s._isBeginning = s.progress <= 0; - s._isEnd = s.progress >= 1; - } - - s._zone.run(() => { - if (s._isBeginning && !wasBeginning) { - s.ionSlideReachStart.emit(); - } - - if (s._isEnd && !wasEnd) { - s.ionSlideReachEnd.emit(); - } - - if (s.watchSlidesProgress) { - updateSlidesProgress(s, translate); - } - - s.ionSlideProgress.emit(s.progress); - }); -} - - -function updateSlidesProgress(s: Slides, translate: number) { - if (typeof translate === 'undefined') { - translate = s._translate || 0; - } - if (s._slides.length === 0) return; - if (typeof s._slides[0].swiperSlideOffset === 'undefined') { - updateSlidesOffset(s); - } - - var offsetCenter = -translate; - if (s._rtl) offsetCenter = translate; - - // Visible Slides - removeClass(s._slides, CLS.slideVisible); - - for (var i = 0; i < s._slides.length; i++) { - var slide = s._slides[i]; - var slideProgress = (offsetCenter + (s.centeredSlides ? minTranslate(s) : 0) - slide.swiperSlideOffset) / (slide.swiperSlideSize + s.spaceBetween); - if (s.watchSlidesVisibility) { - var slideBefore = -(offsetCenter - slide.swiperSlideOffset); - var slideAfter = slideBefore + s._slidesSizesGrid[i]; - var isVisible = - (slideBefore >= 0 && slideBefore < s._renderedSize) || - (slideAfter > 0 && slideAfter <= s._renderedSize) || - (slideBefore <= 0 && slideAfter >= s._renderedSize); - if (isVisible) { - s._slides[i].classList.add(CLS.slideVisible); - } - } - slide.progress = s._rtl ? -slideProgress : slideProgress; - } -} diff --git a/src/components/slides/swiper/swiper-transition.ts b/src/components/slides/swiper/swiper-transition.ts deleted file mode 100644 index 8667a9b589..0000000000 --- a/src/components/slides/swiper/swiper-transition.ts +++ /dev/null @@ -1,149 +0,0 @@ -import { Slides } from '../slides'; -import { isHorizontal, round, transform, transition, maxTranslate, minTranslate } from './swiper-utils'; -import { parallaxSetTransition, parallaxSetTranslate } from './swiper-parallax'; -import { Platform } from '../../../platform/platform'; -import { updateProgress } from './swiper-progress'; -import { updateActiveIndex } from './swiper-index'; -import { SWIPER_CONTROLLER } from './swiper-controller'; -import { SWIPER_EFFECTS } from './swiper-effects'; - - -export function setWrapperTranslate(s: Slides, plt: Platform, translate: any, shouldUpdateActiveIndex?: boolean, byController?: Slides) { - var x = 0, y = 0, z = 0; - if (isHorizontal(s)) { - x = s._rtl ? -translate : translate; - } else { - y = translate; - } - - if (s.roundLengths) { - x = round(x); - y = round(y); - } - - if (!s.virtualTranslate) { - transform(s._wrapper, 'translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px)'); - } - - s._translate = isHorizontal(s) ? x : y; - - // Check if we need to update progress - var progress: number; - var translatesDiff = maxTranslate(s) - minTranslate(s); - - if (translatesDiff === 0) { - progress = 0; - } else { - progress = (translate - minTranslate(s)) / (translatesDiff); - } - - if (progress !== s.progress) { - updateProgress(s, translate); - } - - if (shouldUpdateActiveIndex) { - updateActiveIndex(s); - } - - if (s.effect !== 'slide' && SWIPER_EFFECTS[s.effect]) { - SWIPER_EFFECTS[s.effect].setTranslate(s, plt); - } - - if (s.parallax) { - parallaxSetTranslate(s); - } - - if (s.control) { - SWIPER_CONTROLLER.setTranslate(s, plt, s._translate, byController, setWrapperTranslate); - } -} - - -export function getTranslate(s: Slides, plt: Platform, el: HTMLElement, axis: string) { - var win: any = plt.win(); - var matrix: string[]; - var curTransform: any; - var curStyle: CSSStyleDeclaration; - var transformMatrix: any; - - // automatic axis detection - if (typeof axis === 'undefined') { - axis = 'x'; - } - - if (s.virtualTranslate) { - return s._rtl ? -s._translate : s._translate; - } - - curStyle = plt.getElementComputedStyle(el); - if (win.WebKitCSSMatrix) { - curTransform = curStyle.transform || curStyle.webkitTransform; - if (curTransform.split(',').length > 6) { - curTransform = curTransform.split(', ').map(function(a: any){ - return a.replace(',', '.'); - }).join(', '); - } - // Some old versions of Webkit choke when 'none' is passed; pass - // empty string instead in this case - transformMatrix = new win.WebKitCSSMatrix(curTransform === 'none' ? '' : curTransform); - - } else { - transformMatrix = (curStyle).MozTransform || (curStyle).OTransform || (curStyle).MsTransform || (curStyle).msTransform || curStyle.transform || curStyle.getPropertyValue('transform').replace('translate(', 'matrix(1, 0, 0, 1,'); - matrix = transformMatrix.toString().split(','); - } - - if (axis === 'x') { - if (win.WebKitCSSMatrix) { - // Latest Chrome and webkits Fix - curTransform = transformMatrix.m41; - } else if (matrix.length === 16) { - // Crazy IE10 Matrix - curTransform = parseFloat(matrix[12]); - } else { - // Normal Browsers - curTransform = parseFloat(matrix[4]); - } - } - - if (axis === 'y') { - if (win.WebKitCSSMatrix) { - // Latest Chrome and webkits Fix - curTransform = transformMatrix.m42; - } else if (matrix.length === 16) { - // Crazy IE10 Matrix - curTransform = parseFloat(matrix[13]); - } else { - // Normal Browsers - curTransform = parseFloat(matrix[5]); - } - } - - if (s._rtl && curTransform) { - curTransform = -curTransform; - } - - return curTransform || 0; -} - -export function getWrapperTranslate(s: Slides, plt: Platform, axis?: any) { - if (typeof axis === 'undefined') { - axis = isHorizontal(s) ? 'x' : 'y'; - } - return getTranslate(s, plt, s._wrapper, axis); -} - -export function setWrapperTransition(s: Slides, plt: Platform, duration: number, byController?: Slides) { - transition(s._wrapper, duration); - - if (s.effect !== 'slide' && SWIPER_EFFECTS[s.effect]) { - SWIPER_EFFECTS[s.effect].setTransition(s, plt, duration); - } - - if (s.parallax) { - parallaxSetTransition(s, duration); - } - - if (s.control) { - SWIPER_CONTROLLER.setTransition(s, plt, duration, byController, setWrapperTransition); - } -} diff --git a/src/components/slides/swiper/swiper-utils.ts b/src/components/slides/swiper/swiper-utils.ts deleted file mode 100644 index 423b5cca19..0000000000 --- a/src/components/slides/swiper/swiper-utils.ts +++ /dev/null @@ -1,188 +0,0 @@ -import { Slides } from '../slides'; -import { Platform } from '../../../platform/platform'; - - -export function round(a: any) { - return Math.floor(a); -} - -export function inlineStyle(ele: any, styles: any) { - if (ele) { - if (ele.length) { - for (var i = 0; i < ele.length; i++) { - inlineStyle(ele[i], styles); - } - - } else if (ele.nodeType) { - var cssProps = Object.keys(styles); - for (var i = 0; i < cssProps.length; i++) { - ele.style[cssProps[i]] = styles[cssProps[i]]; - } - } - } -} - -export function addClass(ele: any, className: string) { - if (ele) { - if (ele.length) { - for (var i = 0; i < ele.length; i++) { - addClass(ele[i], className); - } - - } else if (ele.nodeType) { - if (Array.isArray(className)) { - className.forEach(cls => { - ele.classList.add(cls); - }); - } else { - ele.classList.add(className); - } - } - } -} - -export function removeClass(ele: any, className: any) { - if (ele) { - if (ele.length) { - for (var i = 0; i < ele.length; i++) { - removeClass(ele[i], className); - } - - } else if (ele.nodeType) { - if (Array.isArray(className)) { - className.forEach(cls => { - ele.classList.remove(cls); - }); - } else { - ele.classList.remove(className); - } - } - } -} - -export function getElementIndex(ele: any) { - var i = 0; - if (ele) { - while ((ele = ele.previousSibling) !== null) { - if (ele.nodeType === 1) i++; - } - } - return i; -} - -export function queryChildren(parentEle: HTMLElement, query: string): HTMLElement[] { - if (parentEle) { - return parentEle.querySelectorAll(query); - } - return []; -} - -export function eachChild(parentEle: HTMLElement, query: string, callback: {(foundEle: HTMLElement): void}): void { - if (parentEle) { - var nodes = parentEle.querySelectorAll(query); - for (var i = 0; i < nodes.length; i++) { - callback(nodes[i]); - } - } -} - -export function transform(ele: HTMLElement, val: any) { - if (ele) { - var elStyle = ele.style; - elStyle.webkitTransform = elStyle.MsTransform = elStyle.msTransform = elStyle.transform = val; - } -} - -export function transition(ele: HTMLElement, duration: any) { - if (ele) { - if (typeof duration !== 'string') { - duration = duration + 'ms'; - } - var elStyle = ele.style; - elStyle.webkitTransitionDuration = elStyle.MsTransitionDuration = elStyle.msTransitionDuration = elStyle.transitionDuration = duration; - } -} - -export function triggerTransitionEnd(plt: Platform, ele: HTMLElement) { - try { - var win: any = plt.win(); - var evt = new win.CustomEvent('transitionend', {bubbles: true, cancelable: true}); - ele.dispatchEvent(evt); - } catch (e) {} -} - -export function offset(ele: HTMLElement, plt: Platform) { - if (ele) { - var box = plt.getElementBoundingClientRect(ele); - var body = plt.doc().body; - var win = plt.win(); - var clientTop = ele.clientTop || body.clientTop || 0; - var clientLeft = ele.clientLeft || body.clientLeft || 0; - var scrollTop = win.pageYOffset || ele.scrollTop; - var scrollLeft = win.pageXOffset || ele.scrollLeft; - return { - top: box.top + scrollTop - clientTop, - left: box.left + scrollLeft - clientLeft - }; - } - return null; -} - -export function updateSlidesOffset(s: Slides) { - for (var i = 0; i < s._slides.length; i++) { - s._slides[i].swiperSlideOffset = isHorizontal(s) ? s._slides[i].offsetLeft : s._slides[i].offsetTop; - } -} - -export function isHorizontal(s: Slides) { - return s.direction === 'horizontal'; -} - -const formElements = ['INPUT', 'SELECT', 'TEXTAREA', 'BUTTON', 'VIDEO']; -export function isFormElement(el: any) { - return !!el && formElements.indexOf(el.tagName) > -1; -} - - -/*========================= - Min/Max Translate - ===========================*/ -export function minTranslate(s: Slides) { - return (-s._snapGrid[0]); -} - -export function maxTranslate(s: Slides) { - return (-s._snapGrid[s._snapGrid.length - 1]); -} - -export const CLS = { - // Classnames - noSwiping: 'swiper-no-swiping', - containerModifier: 'swiper-container-', - slide: 'swiper-slide', - slideActive: 'swiper-slide-active', - slideDuplicateActive: 'swiper-slide-duplicate-active', - slideVisible: 'swiper-slide-visible', - slideDuplicate: 'swiper-slide-duplicate', - slideNext: 'swiper-slide-next', - slideDuplicateNext: 'swiper-slide-duplicate-next', - slidePrev: 'swiper-slide-prev', - slideDuplicatePrev: 'swiper-slide-duplicate-prev', - wrapper: 'swiper-wrapper', - bullet: 'swiper-pagination-bullet', - bulletActive: 'swiper-pagination-bullet-active', - buttonDisabled: 'swiper-button-disabled', - paginationCurrent: 'swiper-pagination-current', - paginationTotal: 'swiper-pagination-total', - paginationHidden: 'swiper-pagination-hidden', - paginationProgressbar: 'swiper-pagination-progressbar', - paginationClickable: 'swiper-pagination-clickable', - paginationModifier: 'swiper-pagination-', - lazyLoading: 'swiper-lazy', - lazyStatusLoading: 'swiper-lazy-loading', - lazyStatusLoaded: 'swiper-lazy-loaded', - lazyPreloader: 'swiper-lazy-preloader', - notification: 'swiper-notification', - preloader: 'preloader', - zoomContainer: 'swiper-zoom-container', -}; diff --git a/src/components/slides/swiper/swiper-zoom.ts b/src/components/slides/swiper/swiper-zoom.ts deleted file mode 100644 index 3c3936d055..0000000000 --- a/src/components/slides/swiper/swiper-zoom.ts +++ /dev/null @@ -1,543 +0,0 @@ -import { Slides } from '../slides'; -import { Platform } from '../../../platform/platform'; -import { transition, transform, isHorizontal, offset, CLS } from './swiper-utils'; -import { getTranslate } from './swiper-transition'; -import { SlideElement } from './swiper-interfaces'; - - -export function initZoom(s: Slides, plt: Platform) { - s._supportGestures = ('ongesturestart' in plt.win()); - - s._zoom = { - // "Global" Props - scale: 1, - currentScale: 1, - isScaling: false, - gesture: { - slide: undefined, - slideWidth: undefined, - slideHeight: undefined, - image: undefined, - imageWrap: undefined, - zoomMax: s.zoomMax - }, - image: { - isTouched: undefined, - isMoved: undefined, - currentX: undefined, - currentY: undefined, - minX: undefined, - minY: undefined, - maxX: undefined, - maxY: undefined, - width: undefined, - height: undefined, - startX: undefined, - startY: undefined, - touchesStart: {}, - touchesCurrent: {} - }, - velocity: { - x: undefined, - y: undefined, - prevPositionX: undefined, - prevPositionY: undefined, - prevTime: undefined - }, - unRegs: [] - }; - - resetZoomEvents(s, plt); - - return function() { - detachZoomEvents(s); - }; -} - - -// Calc Scale From Multi-touches -function getDistanceBetweenTouches(ev: TouchEvent) { - if (ev.targetTouches.length < 2) return 1; - - var x1 = ev.targetTouches[0].pageX, - y1 = ev.targetTouches[0].pageY, - x2 = ev.targetTouches[1].pageX, - y2 = ev.targetTouches[1].pageY; - - return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); -} - - -// Events -function onGestureStart(s: Slides, plt: Platform, ev: TouchEvent) { - const z = s._zoom; - s.originalEvent = ev; - - if (!s._supportGestures) { - if (ev.type !== 'touchstart' || ev.type === 'touchstart' && ev.targetTouches.length < 2) { - return; - } - z.gesture.scaleStart = getDistanceBetweenTouches(ev); - } - - if (!z.gesture.slide) { - if (ev.currentTarget && (ev.currentTarget).classList.contains(CLS.slide)) { - z.gesture.slide = ev.currentTarget; - } - - if (!z.gesture.slide) { - z.gesture.slide = s._slides[s._activeIndex]; - } - - z.gesture.image = z.gesture.slide.querySelector('img, svg, canvas, ion-img'); - z.gesture.imageWrap = z.gesture.image.closest('.' + CLS.zoomContainer); - - if (!z.gesture.imageWrap) { - z.gesture.image = undefined; - return; - } - - z.gesture.zoomMax = parseInt(z.gesture.imageWrap.getAttribute('data-swiper-zoom') || s.zoomMax, 10); - } - - transition(z.gesture.image, 0); - z.isScaling = true; -} - - -function onGestureChange(s: Slides, plt: Platform, ev: TouchEvent) { - const z = s._zoom; - s.originalEvent = ev; - - if (!s._supportGestures) { - if (ev.type !== 'touchmove' || ev.type === 'touchmove' && ev.targetTouches.length < 2) { - return; - } - z.gesture.scaleMove = getDistanceBetweenTouches(ev); - } - - if (!z.gesture.image) return; - - if (s._supportGestures) { - z.scale = (ev).scale * z.currentScale; - - } else { - z.scale = (z.gesture.scaleMove / z.gesture.scaleStart) * z.currentScale; - } - - if (z.scale > z.gesture.zoomMax) { - z.scale = z.gesture.zoomMax - 1 + Math.pow((z.scale - z.gesture.zoomMax + 1), 0.5); - } - - if (z.scale < s.zoomMin) { - z.scale = s.zoomMin + 1 - Math.pow((s.zoomMin - z.scale + 1), 0.5); - } - - transform(z.gesture.image, 'translate3d(0,0,0) scale(' + z.scale + ')'); -} - - -function onGestureEnd(s: Slides, plt: Platform, ev: TouchEvent) { - const z = s._zoom; - s.originalEvent = ev; - - if (!s._supportGestures) { - if (ev.type !== 'touchend' || ev.type === 'touchend' && ev.changedTouches.length < 2) { - return; - } - } - - if (!z.gesture.image) return; - - z.scale = Math.max(Math.min(z.scale, z.gesture.zoomMax), s.zoomMin); - - transition(z.gesture.image, s.speed); - transform(z.gesture.image, 'translate3d(0,0,0) scale(' + z.scale + ')'); - - z.currentScale = z.scale; - z.isScaling = false; - - if (z.scale === 1) { - z.gesture.slide = undefined; - } -} - - -function onTouchStart(s: Slides, plt: Platform, ev: TouchEvent) { - const z = s._zoom; - s.originalEvent = ev; - - if (!z.gesture.image || z.image.isTouched) return; - - if (plt.is('android')) { - ev.preventDefault(); - } - - z.image.isTouched = true; - z.image.touchesStart.x = ev.type === 'touchstart' ? ev.targetTouches[0].pageX : (ev).pageX; - z.image.touchesStart.y = ev.type === 'touchstart' ? ev.targetTouches[0].pageY : (ev).pageY; -} - - -function onTouchMove(s: Slides, plt: Platform, ev: TouchEvent) { - const z = s._zoom; - s.originalEvent = ev; - - if (!z.gesture.image) return; - - s._allowClick = false; - - if (!z.image.isTouched || !z.gesture.slide) return; - - if (!z.image.isMoved) { - z.image.width = z.gesture.image.offsetWidth; - z.image.height = z.gesture.image.offsetHeight; - - z.image.startX = getTranslate(s, plt, z.gesture.imageWrap, 'x') || 0; - z.image.startY = getTranslate(s, plt, z.gesture.imageWrap, 'y') || 0; - - z.gesture.slideWidth = z.gesture.slide.offsetWidth; - z.gesture.slideHeight = z.gesture.slide.offsetHeight; - - transition(z.gesture.imageWrap, 0); - - if (s._rtl) { - z.image.startX = -z.image.startX; - z.image.startY = -z.image.startY; - } - } - - // Define if we need image drag - var scaledWidth = z.image.width * z.scale; - var scaledHeight = z.image.height * z.scale; - - if (scaledWidth < z.gesture.slideWidth && scaledHeight < z.gesture.slideHeight) { - return; - } - - z.image.minX = Math.min((z.gesture.slideWidth / 2 - scaledWidth / 2), 0); - z.image.maxX = -z.image.minX; - - z.image.minY = Math.min((z.gesture.slideHeight / 2 - scaledHeight / 2), 0); - z.image.maxY = -z.image.minY; - - z.image.touchesCurrent.x = ev.type === 'touchmove' ? ev.targetTouches[0].pageX : (ev).pageX; - z.image.touchesCurrent.y = ev.type === 'touchmove' ? ev.targetTouches[0].pageY : (ev).pageY; - - if (!z.image.isMoved && !z.isScaling) { - if (isHorizontal(s) && - (Math.floor(z.image.minX) === Math.floor(z.image.startX) && z.image.touchesCurrent.x < z.image.touchesStart.x) || - (Math.floor(z.image.maxX) === Math.floor(z.image.startX) && z.image.touchesCurrent.x > z.image.touchesStart.x) - ) { - z.image.isTouched = false; - return; - - } else if (!isHorizontal(s) && - (Math.floor(z.image.minY) === Math.floor(z.image.startY) && z.image.touchesCurrent.y < z.image.touchesStart.y) || - (Math.floor(z.image.maxY) === Math.floor(z.image.startY) && z.image.touchesCurrent.y > z.image.touchesStart.y) - ) { - z.image.isTouched = false; - return; - } - } - - ev.preventDefault(); - ev.stopPropagation(); - - z.image.isMoved = true; - z.image.currentX = z.image.touchesCurrent.x - z.image.touchesStart.x + z.image.startX; - z.image.currentY = z.image.touchesCurrent.y - z.image.touchesStart.y + z.image.startY; - - if (z.image.currentX < z.image.minX) { - z.image.currentX = z.image.minX + 1 - Math.pow((z.image.minX - z.image.currentX + 1), 0.8); - } - if (z.image.currentX > z.image.maxX) { - z.image.currentX = z.image.maxX - 1 + Math.pow((z.image.currentX - z.image.maxX + 1), 0.8); - } - - if (z.image.currentY < z.image.minY) { - z.image.currentY = z.image.minY + 1 - Math.pow((z.image.minY - z.image.currentY + 1), 0.8); - } - if (z.image.currentY > z.image.maxY) { - z.image.currentY = z.image.maxY - 1 + Math.pow((z.image.currentY - z.image.maxY + 1), 0.8); - } - - // Velocity - if (!z.velocity.prevPositionX) z.velocity.prevPositionX = z.image.touchesCurrent.x; - if (!z.velocity.prevPositionY) z.velocity.prevPositionY = z.image.touchesCurrent.y; - if (!z.velocity.prevTime) z.velocity.prevTime = Date.now(); - - z.velocity.x = (z.image.touchesCurrent.x - z.velocity.prevPositionX) / (Date.now() - z.velocity.prevTime) / 2; - z.velocity.y = (z.image.touchesCurrent.y - z.velocity.prevPositionY) / (Date.now() - z.velocity.prevTime) / 2; - - if (Math.abs(z.image.touchesCurrent.x - z.velocity.prevPositionX) < 2) z.velocity.x = 0; - if (Math.abs(z.image.touchesCurrent.y - z.velocity.prevPositionY) < 2) z.velocity.y = 0; - - z.velocity.prevPositionX = z.image.touchesCurrent.x; - z.velocity.prevPositionY = z.image.touchesCurrent.y; - z.velocity.prevTime = Date.now(); - - transform(z.gesture.imageWrap, 'translate3d(' + z.image.currentX + 'px, ' + z.image.currentY + 'px,0)'); -} - - -function onTouchEnd(s: Slides) { - const z = s._zoom; - - if (!z.gesture.image) return; - - if (!z.image.isTouched || !z.image.isMoved) { - z.image.isTouched = false; - z.image.isMoved = false; - return; - } - - z.image.isTouched = false; - z.image.isMoved = false; - - var momentumDurationX = 300; - var momentumDurationY = 300; - var momentumDistanceX = z.velocity.x * momentumDurationX; - var newPositionX = z.image.currentX + momentumDistanceX; - var momentumDistanceY = z.velocity.y * momentumDurationY; - var newPositionY = z.image.currentY + momentumDistanceY; - - // Fix duration - if (z.velocity.x !== 0) momentumDurationX = Math.abs((newPositionX - z.image.currentX) / z.velocity.x); - if (z.velocity.y !== 0) momentumDurationY = Math.abs((newPositionY - z.image.currentY) / z.velocity.y); - - var momentumDuration = Math.max(momentumDurationX, momentumDurationY); - - z.image.currentX = newPositionX; - z.image.currentY = newPositionY; - - // Define if we need image drag - var scaledWidth = z.image.width * z.scale; - var scaledHeight = z.image.height * z.scale; - - z.image.minX = Math.min((z.gesture.slideWidth / 2 - scaledWidth / 2), 0); - z.image.maxX = -z.image.minX; - - z.image.minY = Math.min((z.gesture.slideHeight / 2 - scaledHeight / 2), 0); - z.image.maxY = -z.image.minY; - - z.image.currentX = Math.max(Math.min(z.image.currentX, z.image.maxX), z.image.minX); - z.image.currentY = Math.max(Math.min(z.image.currentY, z.image.maxY), z.image.minY); - - transition(z.gesture.imageWrap, momentumDuration); - transform(z.gesture.imageWrap, 'translate3d(' + z.image.currentX + 'px, ' + z.image.currentY + 'px,0)'); -} - - -function onTransitionEnd(s: Slides) { - const z = s._zoom; - - if (z.gesture.slide && s._previousIndex !== s._activeIndex) { - transform(z.gesture.image, 'translate3d(0,0,0) scale(1)'); - transform(z.gesture.imageWrap, 'translate3d(0,0,0)'); - - z.gesture.slide = z.gesture.image = z.gesture.imageWrap = undefined; - z.scale = z.currentScale = 1; - } -} - - -function toggleZoom(s: Slides, plt: Platform) { - const z = s._zoom; - const ev = s.originalEvent; - - if (!z.gesture.slide) { - z.gesture.slide = s.clickedSlide ? s.clickedSlide : s._slides[s._activeIndex]; - z.gesture.image = z.gesture.slide.querySelector('img, svg, canvas, ion-img'); - z.gesture.imageWrap = z.gesture.image.closest('.' + CLS.zoomContainer); - } - - if (!z.gesture.image) return; - - var touchX: number; - var touchY: number; - var offsetX: number; - var offsetY: number; - var diffX: number; - var diffY: number; - var translateX: number; - var translateY: number; - var imageWidth: number; - var imageHeight: number; - var scaledWidth: number; - var scaledHeight: number; - var translateMinX: number; - var translateMinY: number; - var translateMaxX: number; - var translateMaxY: number; - var slideWidth: number; - var slideHeight: number; - - if (typeof z.image.touchesStart.x === 'undefined' && ev) { - touchX = ev.type === 'touchend' ? ev.changedTouches[0].pageX : (ev).pageX; - touchY = ev.type === 'touchend' ? ev.changedTouches[0].pageY : (ev).pageY; - - } else { - touchX = z.image.touchesStart.x; - touchY = z.image.touchesStart.y; - } - - if (z.scale && z.scale !== 1) { - // Zoom Out - z.scale = z.currentScale = 1; - - transition(z.gesture.imageWrap, 300); - transform(z.gesture.imageWrap, 'translate3d(0,0,0)'); - - transition(z.gesture.image, 300); - transform(z.gesture.image, 'translate3d(0,0,0) scale(1)'); - - z.gesture.slide = undefined; - - } else { - // Zoom In - z.scale = z.currentScale = parseInt(z.gesture.imageWrap.getAttribute('data-swiper-zoom') || s.zoomMax, 10); - - if (ev) { - slideWidth = z.gesture.slide.offsetWidth; - slideHeight = z.gesture.slide.offsetHeight; - - var slideOffsets = offset(z.gesture.slide, plt); - offsetX = slideOffsets.left; - offsetY = slideOffsets.top; - - diffX = offsetX + slideWidth / 2 - touchX; - diffY = offsetY + slideHeight / 2 - touchY; - - imageWidth = z.gesture.image.offsetWidth; - imageHeight = z.gesture.image.offsetHeight; - scaledWidth = imageWidth * z.scale; - scaledHeight = imageHeight * z.scale; - - translateMinX = Math.min((slideWidth / 2 - scaledWidth / 2), 0); - translateMinY = Math.min((slideHeight / 2 - scaledHeight / 2), 0); - translateMaxX = -translateMinX; - translateMaxY = -translateMinY; - - translateX = diffX * z.scale; - translateY = diffY * z.scale; - - if (translateX < translateMinX) { - translateX = translateMinX; - } - - if (translateX > translateMaxX) { - translateX = translateMaxX; - } - - if (translateY < translateMinY) { - translateY = translateMinY; - } - - if (translateY > translateMaxY) { - translateY = translateMaxY; - } - - } else { - translateX = 0; - translateY = 0; - } - - transition(z.gesture.imageWrap, 300); - transform(z.gesture.imageWrap, 'translate3d(' + translateX + 'px, ' + translateY + 'px,0)'); - - transition(z.gesture.image, 300); - transform(z.gesture.image, 'translate3d(0,0,0) scale(' + z.scale + ')'); - } -} - - -export function resetZoomEvents(s: Slides, plt: Platform) { - detachZoomEvents(s); - - const unRegs = s._zoom.unRegs; - const evtOpts = { passive: s._touchEvents.start === 'touchstart', zone: false }; - const slides = s._slides; - let slide: SlideElement; - - // Scale image - if (s._supportGestures) { - for (var i = 0; i < slides.length; i++) { - slide = slides[i]; - // gesturestart - plt.registerListener(slide, 'gesturestart', (ev: TouchEvent) => { - onGestureStart(s, plt, ev); - }, evtOpts, unRegs); - - // gesturechange - plt.registerListener(slide, 'gesturechange', (ev: TouchEvent) => { - onGestureChange(s, plt, ev); - }, evtOpts, unRegs); - - // gestureend - plt.registerListener(slide, 'gestureend', (ev: TouchEvent) => { - onGestureEnd(s, plt, ev); - }, evtOpts, unRegs); - } - - } else if (s._touchEvents.start === 'touchstart') { - for (var i = 0; i < slides.length; i++) { - slide = slides[i]; - // touchstart - plt.registerListener(slide, s._touchEvents.start, (ev: TouchEvent) => { - onGestureStart(s, plt, ev); - }, evtOpts, unRegs); - - // touchmove - plt.registerListener(slide, s._touchEvents.move, (ev: TouchEvent) => { - onGestureChange(s, plt, ev); - }, evtOpts, unRegs); - - // touchend - plt.registerListener(slide, s._touchEvents.end, (ev: TouchEvent) => { - onGestureEnd(s, plt, ev); - }, evtOpts, unRegs); - } - } - - // Move image - var touchStartSub = s.ionSlideTouchStart.subscribe((ev: TouchEvent) => { - onTouchStart(s, plt, ev); - }); - unRegs.push(() => { touchStartSub.unsubscribe(); }); - - for (var i = 0; i < slides.length; i++) { - slide = slides[i]; - if (slide.querySelector('.' + CLS.zoomContainer)) { - plt.registerListener(slide, 's.touchEvents.move', (ev: TouchEvent) => { - onTouchMove(s, plt, ev); - }, evtOpts, unRegs); - } - } - - var touchEndSub = s.ionSlideTouchEnd.subscribe(() => { - onTouchEnd(s); - }); - unRegs.push(() => { touchEndSub.unsubscribe(); }); - - // Scale Out - var transEndSub = s.ionSlideTouchEnd.subscribe(() => { - onTransitionEnd(s); - }); - unRegs.push(() => { transEndSub.unsubscribe(); }); - - if (s.zoomToggle) { - var doubleTapSub = s.ionSlideDoubleTap.subscribe(() => { - toggleZoom(s, plt); - }); - unRegs.push(() => { doubleTapSub.unsubscribe(); }); - } - -} - -function detachZoomEvents(s: Slides) { - s._zoom.unRegs.forEach(unReg => { - unReg(); - }); - s._zoom.unRegs.length = 0; -} diff --git a/src/components/slides/swiper/swiper.ts b/src/components/slides/swiper/swiper.ts deleted file mode 100644 index 3bbb07b748..0000000000 --- a/src/components/slides/swiper/swiper.ts +++ /dev/null @@ -1,943 +0,0 @@ -/** - * Adopted from Swiper - * Most modern mobile touch slider and framework with hardware - * accelerated transitions. - * - * http://www.idangero.us/swiper/ - * - * Copyright 2016, Vladimir Kharlampidi - * The iDangero.us - * http://www.idangero.us/ - * - * Licensed under MIT - */ - -import { SlideElement } from './swiper-interfaces'; -import { Platform } from '../../../platform/platform'; -import { maxTranslate, minTranslate, addClass, eachChild, inlineStyle, removeClass, isHorizontal, round, updateSlidesOffset, CLS } from './swiper-utils'; -import { Slides } from '../slides'; -import { setWrapperTranslate, setWrapperTransition } from './swiper-transition'; -import { updateProgress } from './swiper-progress'; -import { updateClasses } from './swiper-classes'; -import { parallaxSetTranslate } from './swiper-parallax'; -import { updateActiveIndex, updateRealIndex } from './swiper-index'; -import { SWIPER_EFFECTS } from './swiper-effects'; -import { updatePagination } from './swiper-pagination'; -import { resetZoomEvents } from './swiper-zoom'; - - -export function initSwiper(s: Slides, plt: Platform) { - // Classname - s._classNames = []; - - /*========================= - Preparation - Define Container, Wrapper and Pagination - ===========================*/ - if (!s.container) { - return; - } - - // Save instance in container HTML Element and in data - s.container.swiper = s; - - const containerModifierClass = CLS.containerModifier; - s._classNames.push(containerModifierClass + s.direction); - - if (s.freeMode) { - s._classNames.push(containerModifierClass + 'free-mode'); - } - if (s.autoHeight) { - s._classNames.push(containerModifierClass + 'autoheight'); - } - // Enable slides progress when required - if (s.parallax || s.watchSlidesVisibility) { - s.watchSlidesProgress = true; - } - // Max resistance when touchReleaseOnEdges - if (s.touchReleaseOnEdges) { - s.resistanceRatio = 0; - } - - var effect = s.effect; - - // Coverflow / 3D - if (['cube', 'coverflow', 'flip'].indexOf(effect) >= 0) { - s.watchSlidesProgress = true; - s._classNames.push(containerModifierClass + '3d'); - } - - if (effect !== 'slide') { - s._classNames.push(containerModifierClass + effect); - } - - if (effect === 'cube') { - s.resistanceRatio = 0; - s.slidesPerView = 1; - s.slidesPerColumn = 1; - s.slidesPerGroup = 1; - s.centeredSlides = false; - s.spaceBetween = 0; - s.virtualTranslate = true; - s.setWrapperSize = false; - } - - if (effect === 'fade' || effect === 'flip') { - s.slidesPerView = 1; - s.slidesPerColumn = 1; - s.slidesPerGroup = 1; - s.watchSlidesProgress = true; - s.spaceBetween = 0; - s.setWrapperSize = false; - s.virtualTranslate = true; - } - - // Wrapper - s._wrapper = s.container.querySelector('.' + CLS.wrapper); - - // Pagination - if (s.paginationType) { - s._paginationContainer = s.container.querySelector('.swiper-pagination'); - - if (s.paginationType === 'bullets') { - s._paginationContainer.classList.add(CLS.paginationModifier + 'clickable'); - } - s._paginationContainer.classList.add(CLS.paginationModifier + s.paginationType); - } - - // Next/Prev Buttons - // if (s.nextButton || s.prevButton) { - // if (s.nextButton) { - // s.nextButton = s.container.closest('ion-content').querySelector(s.nextButton); - // } - // if (s.prevButton) { - // s.prevButton = s.container.closest('ion-content').querySelector(s.prevButton); - // } - // } - - // RTL - s._rtl = isHorizontal(s) && (s.container.dir.toLowerCase() === 'rtl' || s.container.style.direction === 'rtl'); - if (s._rtl) { - s._classNames.push(containerModifierClass + 'rtl'); - } - - // Columns - if (s.slidesPerColumn > 1) { - s._classNames.push(containerModifierClass + 'multirow'); - } - - // Check for Android - if (plt.is('android')) { - s._classNames.push(containerModifierClass + 'android'); - } - - // Add classes - s._classNames.forEach(clsName => { - s.container.classList.add(clsName); - }); - - // Translate - s._translate = 0; - - // Progress - s.progress = 0; - - // Velocity - s.velocity = 0; - - - /*========================= - Autoplay - ===========================*/ - s._autoplayTimeoutId = undefined; - s._autoplaying = false; - s._autoplayPaused = false; - - - s._allowClick = true; - - // Animating Flag - s._animating = false; - - // Touches information - s._touches = { - startX: 0, - startY: 0, - currentX: 0, - currentY: 0, - diff: 0 - }; - - if (s.loop) { - createLoop(s); - } - - updateContainerSize(s, plt); - updateSlidesSize(s, plt); - updatePagination(s); - - if (effect !== 'slide' && SWIPER_EFFECTS[effect]) { - if (!s.loop) { - updateProgress(s); - } - SWIPER_EFFECTS[effect].setTranslate(s, plt); - } - - if (s.loop) { - slideTo(s, plt, s.initialSlide + s.loopedSlides, 0, s.runCallbacksOnInit); - - } else { - slideTo(s, plt, s.initialSlide, 0, s.runCallbacksOnInit); - - if (s.initialSlide === 0) { - parallaxSetTranslate(s); - } - } - - if (s.autoplay) { - startAutoplay(s, plt); - } -} - -/*========================= - Autoplay - ===========================*/ -function autoplay(s: Slides, plt: Platform) { - var autoplayDelay = s.autoplay; - var activeSlide = s._slides[s._activeIndex]; - - if (activeSlide.hasAttribute('data-swiper-autoplay')) { - autoplayDelay = (activeSlide.getAttribute('data-swiper-autoplay') || s.autoplay); - } - - s._autoplayTimeoutId = plt.timeout(() => { - s._zone.run(() => { - if (s.loop) { - fixLoop(s, plt); - slideNext(s, plt, true, undefined, true); - s.ionSlideAutoplay.emit(s); - - } else { - if (!s._isEnd) { - slideNext(s, plt, true, undefined, true); - s.ionSlideAutoplay.emit(s); - - } else { - if (!s.autoplayStopOnLast) { - slideTo(s, plt, 0); - s.ionSlideAutoplay.emit(s); - - } else { - stopAutoplay(s); - } - } - } - }); - }, autoplayDelay); -} - -export function startAutoplay(s: Slides, plt: Platform) { - if (typeof s._autoplayTimeoutId !== 'undefined') return false; - - if (!s.autoplay || s._autoplaying) { - return false; - } - - s._autoplaying = true; - - s._zone.run(() => { - s.ionSlideAutoplayStart.emit(s); - }); - - autoplay(s, plt); -} - -export function stopAutoplay(s: Slides) { - if (!s._autoplayTimeoutId) return; - if (s._autoplayTimeoutId) clearTimeout(s._autoplayTimeoutId); - - s._autoplaying = false; - s._autoplayTimeoutId = undefined; - - s._zone.run(() => { - s.ionSlideAutoplayStop.emit(s); - }); -} - -export function pauseAutoplay(s: Slides, plt: Platform, speed?: number) { - if (s._autoplayPaused) return; - if (s._autoplayTimeoutId) clearTimeout(s._autoplayTimeoutId); - s._autoplayPaused = true; - - if (speed === 0) { - s._autoplayPaused = false; - autoplay(s, plt); - - } else { - plt.transitionEnd(s._wrapper, () => { - if (!s) return; - s._autoplayPaused = false; - if (!s._autoplaying) { - stopAutoplay(s); - } else { - autoplay(s, plt); - } - }); - } -} - - -/*========================= - Slider/slides sizes - ===========================*/ -export function updateAutoHeight(s: Slides) { - var activeSlides: SlideElement[] = []; - var newHeight = 0; - var i: number; - - // Find slides currently in view - if (s.slidesPerView !== 'auto' && s.slidesPerView > 1) { - for (i = 0; i < Math.ceil(s.slidesPerView); i++) { - var index = s._activeIndex + i; - if (index > s._slides.length) break; - activeSlides.push(s._slides[index]); - } - } else { - activeSlides.push(s._slides[s._activeIndex]); - } - - // Find new height from heighest slide in view - for (i = 0; i < activeSlides.length; i++) { - if (typeof activeSlides[i] !== 'undefined') { - var height = activeSlides[i].offsetHeight; - newHeight = height > newHeight ? height : newHeight; - } - } - - // Update Height - if (newHeight) { - s._wrapper.style.height = newHeight + 'px'; - } -} - -export function updateContainerSize(s: Slides, plt: Platform) { - const container = s.container; - - let width: number; - let height: number; - if (typeof s.width !== 'undefined') { - // manually assign user width - width = s.width; - } else { - width = container.clientWidth; - } - - if (typeof s.renderedHeight !== 'undefined') { - // manually assign user height - height = s.renderedHeight; - } else { - height = container.clientHeight; - } - - if (width === 0 && isHorizontal(s) || height === 0 && !isHorizontal(s)) { - return; - } - - // Subtract paddings - const containerStyles = plt.getElementComputedStyle(container); - width = width - parseInt(containerStyles.paddingLeft, 10) - parseInt(containerStyles.paddingRight, 10); - height = height - parseInt(containerStyles.paddingTop, 10) - parseInt(containerStyles.paddingBottom, 10); - - // Store values - s.renderedWidth = width; - s.renderedHeight = height; - s._renderedSize = isHorizontal(s) ? width : height; -} - -export function updateSlidesSize(s: Slides, plt: Platform) { - s._slides = (s._wrapper.querySelectorAll('.' + CLS.slide)); - s._snapGrid = []; - s._slidesGrid = []; - s._slidesSizesGrid = []; - - var spaceBetween: any = s.spaceBetween; - var slidePosition = -s.slidesOffsetBefore; - var i: number; - var prevSlideSize = 0; - var index = 0; - if (typeof s._renderedSize === 'undefined') return; - if (typeof spaceBetween === 'string' && spaceBetween.indexOf('%') >= 0) { - spaceBetween = parseFloat(spaceBetween.replace('%', '')) / 100 * s._renderedSize; - } - - s._virtualSize = -spaceBetween; - - // reset margins - if (s._rtl) { - inlineStyle(s._slides, { marginLeft: '', marginTop: '' }); - } else { - inlineStyle(s._slides, { marginRight: '', marginBottom: '' }); - } - - var slidesNumberEvenToRows: number; - if (s.slidesPerColumn > 1) { - if (Math.floor(s._slides.length / s.slidesPerColumn) === s._slides.length / s.slidesPerColumn) { - slidesNumberEvenToRows = s._slides.length; - } else { - slidesNumberEvenToRows = Math.ceil(s._slides.length / s.slidesPerColumn) * s.slidesPerColumn; - } - if (s.slidesPerView !== 'auto' && s.slidesPerColumnFill === 'row') { - slidesNumberEvenToRows = Math.max(slidesNumberEvenToRows, s.slidesPerView * s.slidesPerColumn); - } - } - - // Calc slides - var slideSize: number; - var slidesPerColumn = s.slidesPerColumn; - var slidesPerRow = slidesNumberEvenToRows / slidesPerColumn; - var numFullColumns = slidesPerRow - (s.slidesPerColumn * slidesPerRow - s._slides.length); - - for (i = 0; i < s._slides.length; i++) { - slideSize = 0; - var slide = s._slides[i]; - if (s.slidesPerColumn > 1) { - // Set slides order - var newSlideOrderIndex: number; - var column: number; - var row: number; - - if (s.slidesPerColumnFill === 'column') { - column = Math.floor(i / slidesPerColumn); - row = i - column * slidesPerColumn; - if (column > numFullColumns || (column === numFullColumns && row === slidesPerColumn - 1)) { - if (++row >= slidesPerColumn) { - row = 0; - column++; - } - } - newSlideOrderIndex = column + row * slidesNumberEvenToRows / slidesPerColumn; - inlineStyle(slide, { - '-webkit-box-ordinal-group': newSlideOrderIndex, - '-moz-box-ordinal-group': newSlideOrderIndex, - '-ms-flex-order': newSlideOrderIndex, - '-webkit-order': newSlideOrderIndex, - 'order': newSlideOrderIndex - }); - - } else { - row = Math.floor(i / slidesPerRow); - column = i - row * slidesPerRow; - } - - var cssVal = (row !== 0 && s.spaceBetween) && (s.spaceBetween + 'px'); - var cssObj: {[key: string]: string} = {}; - - if (isHorizontal(s)) { - cssObj['marginTop'] = cssVal; - } else { - cssObj['marginLeft'] = cssVal; - } - - inlineStyle(slide, cssObj); - slide.setAttribute('data-swiper-column', column); - slide.setAttribute('data-swiper-row', row); - } - - if (slide.style.display === 'none') { - continue; - } - - if (s.slidesPerView === 'auto') { - var styles = plt.getElementComputedStyle(slide); - if (isHorizontal(s)) { - slideSize = slide.offsetWidth + parseFloat(styles.marginRight) + parseFloat(styles.marginLeft); - } else { - slideSize = slide.offsetHeight + parseFloat(styles.marginTop) + parseFloat(styles.marginBottom); - } - if (s.roundLengths) slideSize = round(slideSize); - - } else { - slideSize = (s._renderedSize - (s.slidesPerView - 1) * spaceBetween) / s.slidesPerView; - if (s.roundLengths) slideSize = round(slideSize); - - if (isHorizontal(s)) { - s._slides[i].style.width = slideSize + 'px'; - } else { - s._slides[i].style.height = slideSize + 'px'; - } - } - s._slides[i].swiperSlideSize = slideSize; - s._slidesSizesGrid.push(slideSize); - - - if (s.centeredSlides) { - slidePosition = slidePosition + slideSize / 2 + prevSlideSize / 2 + spaceBetween; - if (i === 0) slidePosition = slidePosition - s._renderedSize / 2 - spaceBetween; - if (Math.abs(slidePosition) < 1 / 1000) slidePosition = 0; - if ((index) % s.slidesPerGroup === 0) s._snapGrid.push(slidePosition); - s._slidesGrid.push(slidePosition); - - } else { - if ((index) % s.slidesPerGroup === 0) s._snapGrid.push(slidePosition); - s._slidesGrid.push(slidePosition); - slidePosition = slidePosition + slideSize + spaceBetween; - } - - s._virtualSize += slideSize + spaceBetween; - - prevSlideSize = slideSize; - - index ++; - } - s._virtualSize = Math.max(s._virtualSize, s._renderedSize) + s.slidesOffsetAfter; - var newSlidesGrid: any[]; - - if ( - s._rtl && (s.effect === 'slide' || s.effect === 'coverflow')) { - inlineStyle(s._wrapper, {width: s._virtualSize + s.spaceBetween + 'px'}); - } - if (s.setWrapperSize) { - if (isHorizontal(s)) { - inlineStyle(s._wrapper, {width: s._virtualSize + s.spaceBetween + 'px'}); - } else { - inlineStyle(s._wrapper, {height: s._virtualSize + s.spaceBetween + 'px'}); - } - } - - if (s.slidesPerColumn > 1) { - s._virtualSize = (slideSize + s.spaceBetween) * slidesNumberEvenToRows; - s._virtualSize = Math.ceil(s._virtualSize / s.slidesPerColumn) - s.spaceBetween; - if (isHorizontal(s)) { - inlineStyle(s._wrapper, {width: s._virtualSize + s.spaceBetween + 'px'}); - } else { - inlineStyle(s._wrapper, {height: s._virtualSize + s.spaceBetween + 'px'}); - } - if (s.centeredSlides) { - newSlidesGrid = []; - for (i = 0; i < s._snapGrid.length; i++) { - if (s._snapGrid[i] < s._virtualSize + s._snapGrid[0]) newSlidesGrid.push(s._snapGrid[i]); - } - s._snapGrid = newSlidesGrid; - } - } - - // Remove last grid elements depending on width - if (!s.centeredSlides) { - newSlidesGrid = []; - for (i = 0; i < s._snapGrid.length; i++) { - if (s._snapGrid[i] <= s._virtualSize - s._renderedSize) { - newSlidesGrid.push(s._snapGrid[i]); - } - } - s._snapGrid = newSlidesGrid; - if (Math.floor(s._virtualSize - s._renderedSize) - Math.floor(s._snapGrid[s._snapGrid.length - 1]) > 1) { - s._snapGrid.push(s._virtualSize - s._renderedSize); - } - } - if (s._snapGrid.length === 0) s._snapGrid = [0]; - - if (s.spaceBetween !== 0) { - if (isHorizontal(s)) { - if (s._rtl) { - inlineStyle(s._slides, {marginLeft: spaceBetween + 'px'}); - } else { - inlineStyle(s._slides, {marginRight: spaceBetween + 'px'}); - } - } else { - inlineStyle(s._slides, {marginBottom: spaceBetween + 'px'}); - } - } - if (s.watchSlidesProgress) { - updateSlidesOffset(s); - } -} - - -/*========================= - Dynamic Slides Per View - ===========================*/ -export function currentSlidesPerView(s: Slides) { - var spv = 1; - var i: number; - var j: number; - - if (s.centeredSlides) { - var size = s._slides[s._activeIndex].swiperSlideSize; - var breakLoop: boolean; - - for (i = s._activeIndex + 1; i < s._slides.length; i++) { - if (s._slides[i] && !breakLoop) { - size += s._slides[i].swiperSlideSize; - spv ++; - if (size > s._renderedSize) breakLoop = true; - } - } - - for (j = s._activeIndex - 1; j >= 0; j--) { - if (s._slides[j] && !breakLoop) { - size += s._slides[j].swiperSlideSize; - spv ++; - if (size > s._renderedSize) breakLoop = true; - } - } - - } else { - for (i = s._activeIndex + 1; i < s._slides.length; i++) { - if (s._slidesGrid[i] - s._slidesGrid[s._activeIndex] < s._renderedSize) { - spv++; - } - } - } - return spv; -} - - -/*========================= - Common update method - ===========================*/ -export function update(s: Slides, plt: Platform, updateTranslate?: boolean) { - if (!s) return; - - updateContainerSize(s, plt); - updateSlidesSize(s, plt); - updateProgress(s); - updatePagination(s); - updateClasses(s); - - if (s.zoom) { - resetZoomEvents(s, plt); - } - - var translated: boolean; - var newTranslate: number; - - function forceSetTranslate() { - newTranslate = Math.min(Math.max(s._translate, maxTranslate(s)), minTranslate(s)); - setWrapperTranslate(s, plt, newTranslate); - updateActiveIndex(s); - updateClasses(s); - } - - if (updateTranslate) { - if (s._spline) { - s._spline = undefined; - } - if (s.freeMode) { - forceSetTranslate(); - if (s.autoHeight) { - updateAutoHeight(s); - } - - } else { - if ((s.slidesPerView === 'auto' || s.slidesPerView > 1) && s._isEnd && !s.centeredSlides) { - translated = slideTo(s, plt, s._slides.length - 1, 0, false, true); - } else { - translated = slideTo(s, plt, s._activeIndex, 0, false, true); - } - - if (!translated) { - forceSetTranslate(); - } - } - - } else if (s.autoHeight) { - updateAutoHeight(s); - } -} - - -/*========================= - Loop - ===========================*/ -// Create looped slides -function createLoop(s: Slides) { - // Remove duplicated slides - eachChild(s._wrapper, '.' + CLS.slide + '.' + CLS.slideDuplicate, ele => { - ele.parentElement.removeChild(ele); - }); - - var slides: SlideElement[] = s._wrapper.querySelectorAll('.' + CLS.slide); - - if (s.slidesPerView === 'auto' && !s.loopedSlides) { - s.loopedSlides = slides.length; - } - - s.loopedSlides = parseInt((s.loopedSlides || s.slidesPerView), 10); - s.loopedSlides = s.loopedSlides + s.loopAdditionalSlides; - if (s.loopedSlides > slides.length) { - s.loopedSlides = slides.length; - } - - var prependSlides: SlideElement[] = []; - var appendSlides: SlideElement[] = []; - - for (var i = 0; i < slides.length; i++) { - var slide = slides[i]; - if (i < s.loopedSlides) appendSlides.push(slide); - if (i < slides.length && i >= slides.length - s.loopedSlides) prependSlides.push(slide); - slide.setAttribute('data-swiper-slide-index', i); - } - - for (i = 0; i < appendSlides.length; i++) { - var appendClone = appendSlides[i].cloneNode(true); - addClass(appendClone, CLS.slideDuplicate); - s._wrapper.appendChild(appendClone); - } - for (i = prependSlides.length - 1; i >= 0; i--) { - var prependClone = prependSlides[i].cloneNode(true); - addClass(prependClone, CLS.slideDuplicate); - s._wrapper.insertBefore(prependClone, s._wrapper.firstElementChild); - } -} - -function destroyLoop(s: Slides) { - eachChild(s._wrapper, '.' + CLS.slide + '.' + CLS.slideDuplicate, ele => { - ele.parentElement.removeChild(ele); - }); - for (var i = 0; i < s._slides.length; i++) { - s._slides[i].removeAttribute('data-swiper-slide-index'); - } -} - -export function fixLoop(s: Slides, plt: Platform) { - var newIndex: number; - - if (s._activeIndex < s.loopedSlides) { - // Fix For Negative Oversliding - newIndex = s._slides.length - s.loopedSlides * 3 + s._activeIndex; - newIndex = newIndex + s.loopedSlides; - slideTo(s, plt, newIndex, 0, false, true); - - } else if ((s.slidesPerView === 'auto' && s._activeIndex >= s.loopedSlides * 2) || (s._activeIndex > s._slides.length - s.slidesPerView * 2)) { - // Fix For Positive Oversliding - newIndex = -s._slides.length + s._activeIndex + s.loopedSlides; - newIndex = newIndex + s.loopedSlides; - slideTo(s, plt, newIndex, 0, false, true); - } -} - - -/*========================= - Transitions - ===========================*/ - -export function slideTo(s: Slides, plt: Platform, slideIndex?: number, speed?: number, runCallbacks = true, internal?: boolean) { - if (typeof slideIndex === 'undefined') slideIndex = 0; - if (slideIndex < 0) slideIndex = 0; - - s._snapIndex = Math.floor(slideIndex / s.slidesPerGroup); - if (s._snapIndex >= s._snapGrid.length) s._snapIndex = s._snapGrid.length - 1; - - var translate = - s._snapGrid[s._snapIndex]; - // Stop autoplay - if (s.autoplay && s._autoplaying) { - if (internal || !s.autoplayDisableOnInteraction) { - pauseAutoplay(s, plt, speed); - } else { - stopAutoplay(s); - } - } - - // Update progress - updateProgress(s, translate); - - // Directions locks - if (!s._allowSwipeToNext && translate < s._translate && translate < minTranslate(s)) { - return false; - } - if (!s._allowSwipeToPrev && translate > s._translate && translate > maxTranslate(s)) { - if ((s._activeIndex || 0) !== slideIndex ) return false; - } - - // Update Index - if (typeof speed === 'undefined') speed = s.speed; - - s._previousIndex = s._activeIndex || 0; - s._activeIndex = slideIndex; - updateRealIndex(s); - - if ((s._rtl && -translate === s._translate) || (!s._rtl && translate === s._translate)) { - // Update Height - if (s.autoHeight) { - updateAutoHeight(s); - } - updateClasses(s); - if (s.effect !== 'slide') { - setWrapperTranslate(s, plt, translate); - } - return false; - } - - updateClasses(s); - onTransitionStart(s, runCallbacks); - - if (speed === 0) { - setWrapperTranslate(s, plt, translate); - setWrapperTransition(s, plt, 0); - onTransitionEnd(s, plt, runCallbacks); - - } else { - setWrapperTranslate(s, plt, translate); - setWrapperTransition(s, plt, speed); - if (!s._animating) { - s._animating = true; - plt.transitionEnd(s._wrapper, () => { - if (!s) return; - onTransitionEnd(s, plt, runCallbacks); - }); - } - - } - - return true; -} - - -export function onTransitionStart(s: Slides, runCallbacks = true) { - if (s.autoHeight) { - updateAutoHeight(s); - } - - if (runCallbacks) { - s._zone.run(() => { - s.ionSlideTransitionStart.emit(s); - - if (s._activeIndex !== s._previousIndex) { - s.ionSlideWillChange.emit(s); - - if (s._activeIndex > s._previousIndex) { - s.ionSlideNextStart.emit(s); - } else { - s.ionSlidePrevStart.emit(s); - } - } - }); - } -} - -export function onTransitionEnd(s: Slides, plt: Platform, runCallbacks = true) { - s._animating = false; - setWrapperTransition(s, plt, 0); - - if (runCallbacks) { - s._zone.run(() => { - s.ionSlideTransitionEnd.emit(s); - - if (s._activeIndex !== s._previousIndex) { - s.ionSlideDidChange.emit(s); - - if (s._activeIndex > s._previousIndex) { - s.ionSlideNextEnd.emit(s); - } else { - s.ionSlidePrevEnd.emit(s); - } - } - }); - } -} - -export function slideNext(s: Slides, plt: Platform, runCallbacks?: boolean, speed?: number, internal?: boolean): any { - if (s.loop) { - if (s._animating) return false; - fixLoop(s, plt); - s.container.clientLeft; - return slideTo(s, plt, s._activeIndex + s.slidesPerGroup, speed, runCallbacks, internal); - } - - var nextSlide = s._activeIndex + s.slidesPerGroup; - if (nextSlide < s._slides.length) { - return slideTo(s, plt, nextSlide, speed, runCallbacks, internal); - } - - return false; -} - -export function slidePrev(s: Slides, plt: Platform, runCallbacks?: boolean, speed?: number, internal?: boolean): any { - if (s.loop) { - if (s._animating) return false; - fixLoop(s, plt); - s.container.clientLeft; - return slideTo(s, plt, s._activeIndex - 1, speed, runCallbacks, internal); - } - - var previousSlide = s._activeIndex - 1; - if (previousSlide >= 0) { - return slideTo(s, plt, s._activeIndex - 1, speed, runCallbacks, internal); - } - - return false; -} - -export function slideReset(s: Slides, plt: Platform, runCallbacks?: boolean, speed?: number, internal?: boolean) { - return slideTo(s, plt, s._activeIndex, speed, runCallbacks, true); -} - -export function disableTouchControl(s: Slides) { - s.onlyExternal = true; - return true; -} - -export function enableTouchControl(s: Slides) { - s.onlyExternal = false; - return true; -} - - -/*========================= - Translate/transition helpers - ===========================*/ - - - - -// Cleanup dynamic styles -function cleanupStyles(s: Slides) { - if (!s.container || !s._wrapper) { - // fix #10830 - return; - } - - // Container - removeClass(s.container, s._classNames); - s.container.removeAttribute('style'); - - // Wrapper - s._wrapper.removeAttribute('style'); - - // Slides - if (s._slides && s._slides.length) { - removeClass(s._slides, [ - CLS.slideVisible, - CLS.slideActive, - CLS.slideNext, - CLS.slidePrev - ]); - for (var i = 0; i < s._slides.length; i++) { - var slide = s._slides[i]; - slide.removeAttribute('style'); - slide.removeAttribute('data-swiper-column'); - slide.removeAttribute('data-swiper-row'); - } - } - - // Pagination/Bullets - removeClass(s._bullets, CLS.bulletActive); - - // Buttons - removeClass(s.prevButton, CLS.buttonDisabled); - removeClass(s.nextButton, CLS.buttonDisabled); -}; - - -// Destroy -export function destroySwiper(s: Slides) { - // Stop autoplay - stopAutoplay(s); - - // Destroy loop - if (s.loop) { - destroyLoop(s); - } - - // Cleanup styles - cleanupStyles(s); -} diff --git a/src/components/slides/test/basic/app.module.ts b/src/components/slides/test/basic/app.module.ts index c480b5430e..7437ed7320 100644 --- a/src/components/slides/test/basic/app.module.ts +++ b/src/components/slides/test/basic/app.module.ts @@ -1,23 +1,22 @@ -import { Component, ViewChild, NgModule } from '@angular/core'; +import { Component, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; -import { IonicApp, IonicModule, Slides } from '../../../..'; +import { IonicApp, IonicModule } from '../../../..'; @Component({ templateUrl: 'main.html' }) export class E2EPage { - @ViewChild(Slides) slider: Slides; - onSlideWillChange(s: Slides) { + onSlideWillChange(s: any) { console.log(`onSlideWillChange: ${s}`); } - onSlideDidChange(s: Slides) { + onSlideDidChange(s: any) { console.log(`onSlideDidChange: ${s}`); } - onSlideDrag(s: Slides) { + onSlideDrag(s: any) { console.log(`onSlideDrag: ${s}`); } diff --git a/src/components/slides/test/control/app.module.ts b/src/components/slides/test/control/app.module.ts index fa91ab3f66..70390ecdf7 100644 --- a/src/components/slides/test/control/app.module.ts +++ b/src/components/slides/test/control/app.module.ts @@ -1,14 +1,12 @@ -import { Component, ViewChild, NgModule } from '@angular/core'; +import { Component, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; -import { IonicApp, IonicModule, Slides } from '../../../..'; +import { IonicApp, IonicModule } from '../../../..'; @Component({ templateUrl: 'main.html' }) export class MyPage { - @ViewChild('firstSlider') slider1: Slides; - @ViewChild('secondSlider') slider2: Slides; } diff --git a/src/components/slides/test/controller/app.module.ts b/src/components/slides/test/controller/app.module.ts index 85963772a0..0a961f5678 100644 --- a/src/components/slides/test/controller/app.module.ts +++ b/src/components/slides/test/controller/app.module.ts @@ -1,13 +1,13 @@ -import { Component, ViewChild, NgModule } from '@angular/core'; +import { Component, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; -import { IonicApp, IonicModule, Slides } from '../../../..'; +import { IonicApp, IonicModule } from '../../../..'; @Component({ templateUrl: 'main.html' }) export class MyPage { - @ViewChild('mySlider') slider: Slides; + slider: any; onSlideChanged() { let previousIndex = this.slider.getPreviousIndex(); diff --git a/src/components/slides/test/images/app.module.ts b/src/components/slides/test/images/app.module.ts index eb0a88b16e..193408e09c 100644 --- a/src/components/slides/test/images/app.module.ts +++ b/src/components/slides/test/images/app.module.ts @@ -1,8 +1,8 @@ -import { Component, ViewChild, NgModule } from '@angular/core'; +import { Component, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { Http } from '@angular/http'; -import { IonicApp, IonicModule, Slides } from '../../../..'; +import { IonicApp, IonicModule } from '../../../..'; @Component({ @@ -10,7 +10,7 @@ import { IonicApp, IonicModule, Slides } from '../../../..'; }) export class E2EPage { images: string[] = []; - @ViewChild(Slides) slider: Slides; + slider: any; constructor(private http: Http) {} diff --git a/src/components/slides/test/intro/app.module.ts b/src/components/slides/test/intro/app.module.ts index ea1cd13974..db64e64bd7 100644 --- a/src/components/slides/test/intro/app.module.ts +++ b/src/components/slides/test/intro/app.module.ts @@ -1,13 +1,13 @@ -import { Component, NgModule, ViewChild } from '@angular/core'; +import { Component, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; -import { IonicApp, IonicModule, NavController, Slides } from '../../../..'; +import { IonicApp, IonicModule, NavController } from '../../../..'; @Component({ templateUrl: 'main.html' }) export class IntroPage { - @ViewChild(Slides) slider: Slides; + slider: any; continueText: string = 'Skip'; mySlideOptions: any; @@ -17,7 +17,6 @@ export class IntroPage { ngOnInit() { this.slider.initialSlide = 1; - this.slider.paginationClickable = true; } onSlideChanged(slider: any) { diff --git a/src/components/slides/test/loop/app.module.ts b/src/components/slides/test/loop/app.module.ts index d1ce12c398..aee26da7e5 100644 --- a/src/components/slides/test/loop/app.module.ts +++ b/src/components/slides/test/loop/app.module.ts @@ -1,6 +1,6 @@ -import { Component, ViewChild, NgModule } from '@angular/core'; +import { Component, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; -import { IonicApp, IonicModule, Slides } from '../../../..'; +import { IonicApp, IonicModule } from '../../../..'; @Component({ @@ -8,7 +8,7 @@ import { IonicApp, IonicModule, Slides } from '../../../..'; }) export class E2EPage { slides: any[]; - @ViewChild('loopSlider') loopSlider: Slides; + loopSlider: any; startingIndex: number; myTopSlideOptions: any; @@ -35,7 +35,7 @@ export class E2EPage { } - onSlideChanged(slider: Slides) { + onSlideChanged(slider: any) { console.log('Slide changed', slider); } diff --git a/src/components/slides/test/options/app.module.ts b/src/components/slides/test/options/app.module.ts index bbd9268d35..f55d058351 100644 --- a/src/components/slides/test/options/app.module.ts +++ b/src/components/slides/test/options/app.module.ts @@ -1,23 +1,23 @@ -import { Component, ViewChild, NgModule } from '@angular/core'; +import { Component, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; -import { IonicApp, IonicModule, Slides } from '../../../..'; +import { IonicApp, IonicModule } from '../../../..'; @Component({ templateUrl: 'main.html' }) export class E2EPage { - @ViewChild(Slides) slider: Slides; + slider: any; - onSlideWillChange(s: Slides) { + onSlideWillChange(s: any) { console.log(`onSlideWillChange: ${s}`); } - onSlideDidChange(s: Slides) { + onSlideDidChange(s: any) { console.log(`onSlideDidChange: ${s}`); } - onSlideDrag(s: Slides) { + onSlideDrag(s: any) { console.log(`onSlideDrag: ${s}`); } diff --git a/src/components/slides/test/rtl/app.module.ts b/src/components/slides/test/rtl/app.module.ts index 304f00b2bb..841536a0fa 100644 --- a/src/components/slides/test/rtl/app.module.ts +++ b/src/components/slides/test/rtl/app.module.ts @@ -1,22 +1,22 @@ -import { Component, ViewChild, NgModule } from '@angular/core'; -import { IonicApp, IonicModule, Slides } from '../../../..'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule } from '../../../..'; @Component({ templateUrl: 'main.html' }) export class E2EPage { - @ViewChild(Slides) slider: Slides; + slider: any; - onSlideWillChange(s: Slides) { + onSlideWillChange(s: any) { console.log(`onSlideWillChange: ${s}`); } - onSlideDidChange(s: Slides) { + onSlideDidChange(s: any) { console.log(`onSlideDidChange: ${s}`); } - onSlideDrag(s: Slides) { + onSlideDrag(s: any) { console.log(`onSlideDrag: ${s}`); } diff --git a/src/components/toolbar/toolbar-item.ts b/src/components/toolbar/toolbar-item.ts index c5aa3c026a..0d9dae6149 100644 --- a/src/components/toolbar/toolbar-item.ts +++ b/src/components/toolbar/toolbar-item.ts @@ -31,7 +31,7 @@ export class ToolbarItem extends Ion { set _buttons(buttons: any) { if (this.inToolbar) { buttons.forEach((button: Button) => { - button.setRole('bar-button'); + // button.setRole('bar-button'); }); } } diff --git a/src/index.ts b/src/index.ts index e3423e6e4b..b9c551483e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -12,7 +12,6 @@ export { AlertCmp } from './components/alert/alert-component'; export { App } from './components/app/app'; export { Avatar } from './components/avatar/avatar'; export { Backdrop } from './components/backdrop/backdrop'; -export { Button } from './components/button/button'; export { Checkbox } from './components/checkbox/checkbox'; export { Chip } from './components/chip/chip'; export { Content, ScrollEvent } from './components/content/content'; @@ -84,8 +83,6 @@ export { SelectPopover, SelectPopoverOption } from './components/select/select-p export { ShowWhen } from './components/show-hide-when/show-when'; export { DisplayWhen } from './components/show-hide-when/display-when'; export { HideWhen } from './components/show-hide-when/hide-when'; -export { Slide } from './components/slides/slide'; -export { Slides } from './components/slides/slides'; export { Spinner } from './components/spinner/spinner'; export { SplitPane, RootNode } from './components/split-pane/split-pane'; export { Tab } from './components/tabs/tab'; diff --git a/src/module.ts b/src/module.ts index 1620d94d50..a474a95777 100644 --- a/src/module.ts +++ b/src/module.ts @@ -50,7 +50,6 @@ import { IonicApp } from './components/app/app-root'; import { OverlayPortal } from './components/app/overlay-portal'; import { Avatar } from './components/avatar/avatar'; import { Backdrop } from './components/backdrop/backdrop'; -import { Button } from './components/button/button'; import { Checkbox } from './components/checkbox/checkbox'; import { Chip } from './components/chip/chip'; import { Content } from './components/content/content'; @@ -112,8 +111,6 @@ import { SelectPopover } from './components/select/select-popover-component'; import { SegmentButton } from './components/segment/segment-button'; import { ShowWhen } from './components/show-hide-when/show-when'; import { HideWhen } from './components/show-hide-when/hide-when'; -import { Slide } from './components/slides/slide'; -import { Slides } from './components/slides/slides'; import { Spinner } from './components/spinner/spinner'; import { SplitPane } from './components/split-pane/split-pane'; import { Tab } from './components/tabs/tab'; @@ -185,7 +182,6 @@ import { BooleanInput } from './bindings/angular/components/boolean-input'; OverlayPortal, Avatar, Backdrop, - Button, Checkbox, Chip, Col, @@ -241,8 +237,6 @@ import { BooleanInput } from './bindings/angular/components/boolean-input'; SelectPopover, ShowWhen, HideWhen, - Slide, - Slides, Spinner, SplitPane, Tab, @@ -282,7 +276,6 @@ import { BooleanInput } from './bindings/angular/components/boolean-input'; OverlayPortal, Avatar, Backdrop, - Button, Checkbox, Chip, Col, @@ -338,8 +331,6 @@ import { BooleanInput } from './bindings/angular/components/boolean-input'; SelectPopover, ShowWhen, HideWhen, - Slide, - Slides, Spinner, SplitPane, Tab,