From 30cd5454a1b25f18f5c5da3545d5ed00a47d4413 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 13 Jun 2017 15:18:08 -0400 Subject: [PATCH] refactor(components): remove old *.ts files --- src/components/avatar/avatar.ts | 17 - src/components/badge/badge.ts | 17 - src/components/button/button.ts | 364 ------------- src/components/card-content/card-content.ts | 17 - src/components/card-header/card-header.ts | 17 - src/components/card-title/card-title.ts | 17 - src/components/card/card.ts | 17 - src/components/slides/slide.ts | 33 -- src/components/slides/slides.ts | 540 -------------------- src/components/toggle/toggle.ts | 174 ------- 10 files changed, 1213 deletions(-) delete mode 100644 src/components/avatar/avatar.ts delete mode 100644 src/components/badge/badge.ts delete mode 100644 src/components/button/button.ts delete mode 100644 src/components/card-content/card-content.ts delete mode 100644 src/components/card-header/card-header.ts delete mode 100644 src/components/card-title/card-title.ts delete mode 100644 src/components/card/card.ts delete mode 100644 src/components/slides/slide.ts delete mode 100644 src/components/slides/slides.ts delete mode 100644 src/components/toggle/toggle.ts diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts deleted file mode 100644 index 356f8043f4..0000000000 --- a/src/components/avatar/avatar.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Directive } from '@angular/core'; - -/** - * @name Avatar - * @module ionic - * @description - * An Avatar is a component that creates a circular image for an item. - * Avatars can be placed on the left or right side of an item with the `item-start` or `item-end` directive. - * @see {@link /docs/components/#avatar-list Avatar Component Docs} - */ -@Directive({ - selector: 'ion-avatar' -}) -export class Avatar { - constructor() { - } -} diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts deleted file mode 100644 index c332885517..0000000000 --- a/src/components/badge/badge.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component, h, Ionic } from '../index'; - - -@Component({ - tag: 'ion-badge', - styleUrls: { - ios: 'badge.ios.scss', - md: 'badge.md.scss', - wp: 'badge.wp.scss' - }, - shadow: false -}) -export class Badge { - render() { - return h(this, Ionic.theme(this, 'badge')); - } -} diff --git a/src/components/button/button.ts b/src/components/button/button.ts deleted file mode 100644 index 787ddfc335..0000000000 --- a/src/components/button/button.ts +++ /dev/null @@ -1,364 +0,0 @@ -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'; - - -/** - * @name Button - * @module ionic - * @description - * Buttons are simple components in Ionic. They can consist of text and icons - * and be enhanced by a wide range of attributes. - * - * @usage - * - * ```html - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * ``` - * - * @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, -}) -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; - - /** - * @input {boolean} If true, activates the large button size. - */ - @Input() - set large(val: boolean) { - this._attr('_size', 'large', val); - } - - /** - * @input {boolean} If true, activates the small button size. - */ - @Input() - set small(val: boolean) { - this._attr('_size', 'small', val); - } - - /** - * @input {boolean} If true, activates the default button size. Normally the default, useful for buttons in an item. - */ - @Input() - set default(val: boolean) { - this._attr('_size', 'default', val); - } - - /** - * @input {boolean} If true, activates a transparent button style with a border. - */ - @Input() - set outline(val: boolean) { - this._attr('_style', 'outline', val); - } - - /** - * @input {boolean} If true, activates a transparent button style without a border. - */ - @Input() - set clear(val: boolean) { - this._attr('_style', 'clear', val); - } - - /** - * @input {boolean} If true, activates a solid button style. Normally the default, useful for buttons in a toolbar. - */ - @Input() - set solid(val: boolean) { - this._attr('_style', 'solid', val); - } - - /** - * @input {boolean} If true, activates a button with rounded corners. - */ - @Input() - set round(val: boolean) { - this._attr('_shape', 'round', val); - } - - /** - * @input {boolean} If true, activates a button style that fills the available width. - */ - @Input() - set block(val: boolean) { - this._attr('_display', 'block', val); - } - - /** - * @input {boolean} If true, activates a button style that fills the available width without - * a left and right border. - */ - @Input() - set full(val: boolean) { - this._attr('_display', 'full', val); - } - - /** - * @input {boolean} If true, activates a button with a heavier font weight. - */ - @Input() - set strong(val: boolean) { - this._attr('_decorator', 'strong', val); - } - - /** - * @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); - } - - } - - /** - * @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; - - } - - 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); - } - - if (ionButton.trim().length > 0) { - this.setRole(ionButton); - } - } - - /** @hidden */ - ngAfterContentInit() { - this._init = true; - this._assignCss(true); - } - - /** - * @hidden - */ - setRole(val: string) { - this._assignCss(false); - this._role = val; - this._assignCss(true); - } - - /** - * @hidden - */ - _assignCss(assignCssClass: boolean) { - let role = this._role; - if (role) { - this.setElementClass(role, assignCssClass); // button - this.setElementClass(`${role}-${this._mode}`, assignCssClass); // button - - 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 - } - } - - /** - * @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); - } - } - - /** - * @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; - - // 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); - - className += (style !== null && style !== '' && style !== 'default' ? '-' + style.toLowerCase() : ''); - - if (color !== null && color !== '') { - this.setElementClass(`${className}-${this._mode}-${color}`, isAdd); - } - } - } -} diff --git a/src/components/card-content/card-content.ts b/src/components/card-content/card-content.ts deleted file mode 100644 index bbdbb93959..0000000000 --- a/src/components/card-content/card-content.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component, h, Ionic } from '../index'; - - -@Component({ - tag: 'ion-card-content', - styleUrls: { - ios: 'card-content.ios.scss', - md: 'card-content.md.scss', - wp: 'card-content.wp.scss' - }, - shadow: false -}) -export class CardContent { - render() { - return h(this, Ionic.theme(this, 'card-content')); - } -} diff --git a/src/components/card-header/card-header.ts b/src/components/card-header/card-header.ts deleted file mode 100644 index 2a379438b9..0000000000 --- a/src/components/card-header/card-header.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component, h, Ionic } from '../index'; - - -@Component({ - tag: 'ion-card-header', - styleUrls: { - ios: 'card-header.ios.scss', - md: 'card-header.md.scss', - wp: 'card-header.wp.scss' - }, - shadow: false -}) -export class CardHeader { - render() { - return h(this, Ionic.theme(this, 'card-header')); - } -} diff --git a/src/components/card-title/card-title.ts b/src/components/card-title/card-title.ts deleted file mode 100644 index 0ef311ceff..0000000000 --- a/src/components/card-title/card-title.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component, h, Ionic } from '../index'; - - -@Component({ - tag: 'ion-card-title', - styleUrls: { - ios: 'card-title.ios.scss', - md: 'card-title.md.scss', - wp: 'card-title.wp.scss' - }, - shadow: false -}) -export class CardTitle { - render() { - return h(this, Ionic.theme(this, 'card-title')); - } -} diff --git a/src/components/card/card.ts b/src/components/card/card.ts deleted file mode 100644 index 8463e9e1d6..0000000000 --- a/src/components/card/card.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component, h, Ionic } from '../index'; - - -@Component({ - tag: 'ion-card', - styleUrls: { - ios: 'card.ios.scss', - md: 'card.md.scss', - wp: 'card.wp.scss' - }, - shadow: false -}) -export class Card { - render() { - return h(this, Ionic.theme(this, 'card')); - } -} diff --git a/src/components/slides/slide.ts b/src/components/slides/slide.ts deleted file mode 100644 index 739b92e00c..0000000000 --- a/src/components/slides/slide.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { Component, h } from '../index'; - - /** - * @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/demos/src/slides/ - * @see {@link /docs/api/components/slides/Slides/ Slides API Docs} - */ -@Component({ - tag: 'ion-slide', - styleUrls: { - default: 'slide.scss', - }, - shadow: false -}) -export class Slide { - $el: HTMLElement; - - render() { - return h(this, { - class: { - 'slide-zoom': true, - 'swiper-slide': true - } - }); - } -} diff --git a/src/components/slides/slides.ts b/src/components/slides/slides.ts deleted file mode 100644 index e85f92440c..0000000000 --- a/src/components/slides/slides.ts +++ /dev/null @@ -1,540 +0,0 @@ -import { Component, h, Ionic, Prop } from '../index'; -import { Swiper } from '../../vendor/swiper'; - -/** - * @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. - * - * - * Adopted from Swiper.js: - * The 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 - */ - - -@Component({ - tag: 'ion-slides', - styleUrls: { - default: 'slides.scss' - }, - shadow: false -}) -export class Slides { - swiper: any; - $el: HTMLElement; - - /** - * @input {string} The animation effect of the slides. - * Possible values are: `slide`, `fade`, `cube`, `coverflow` or `flip`. - * Default: `slide`. - */ - @Prop() effect: string = 'slide'; - - /** - * @input {number} Delay between transitions (in milliseconds). If this - * parameter is not passed, autoplay is disabled. Default does - * not have a value and does not autoplay. - * Default: `null`. - */ - @Prop() autoplay: number; - - /** - * @input {Slides} Pass another Slides instance or array of Slides instances - * that should be controlled by this Slides instance. - * Default: `null`. - */ - @Prop() control: Slides | Slides[] = null; - - /** - * @input {string} Swipe direction: 'horizontal' or 'vertical'. - * Default: `horizontal`. - */ - @Prop() direction: 'horizontal' | 'vertical' = 'horizontal'; - - /** - * @input {number} Index number of initial slide. Default: `0`. - */ - @Prop() initialSlide: number = 0; - - /** - * @input {boolean} If true, continuously loop from the last slide to the - * first slide. - */ - @Prop() loop: boolean = false; - - /** - * @input {boolean} If true, show the pager. - */ - @Prop() pager: boolean; - - /** - * @input {string} Type of pagination. Possible values are: - * `bullets`, `fraction`, `progress`. Default: `bullets`. - * (Note that the pager will not show unless `pager` input - * is set to true). - */ - @Prop() paginationType: string = 'bullets'; - - - /** - * @input {boolean} If true, allows you to use "parallaxed" elements inside of - * slider. - */ - @Prop() parallax: boolean = false; - - /** - * @input {number} Slides per view. Slides visible at the same time. Default: `1`. - */ - @Prop() slidesPerView: number | 'auto' = 1; - - /** - * @input {number} Distance between slides in px. Default: `0`. - */ - @Prop() spaceBetween: number = 0; - - /** - * @input {number} Duration of transition between slides - * (in milliseconds). Default: `300`. - */ - @Prop() speed: number = 300; - - - /** - * @input {boolean} If true, enables zooming functionality. - */ - @Prop() zoom: boolean; - - /** - * @input {boolean} If true, enables keyboard control - */ - @Prop() keyboardControl: boolean; - - - render() { - return h(this, - h('div', { - class: { - 'swiper-container': true - }, - 'data-dir': 'rtl' - }, - [ - h('div', { - class: { - 'swiper-wrapper': true - } - }, - h('slot') - ), - h('div', { - class: { - 'swiper-pagination': true, - 'hide': !this.pager - } - }) - ] - ) - ); - } - - /** - * @hidden - * Height of container. - */ - height: number; - - /** - * @hidden - * Width of container. - */ - width: number; - - /** - * @hidden - * Enabled this option and swiper will be operated as usual except it will - * not move, real translate values on wrapper will not be set. Useful when - * you may need to create custom slide transition. - */ - virtualTranslate = false; - - /** - * @hidden - * Set to true to round values of slides width and height to prevent blurry - * texts on usual resolution screens (if you have such) - */ - roundLengths = false; - - // Slides grid - - /** - * @hidden - */ - originalEvent: any; - - emitEvent(eventName: string) { - return (data: any) => { - Ionic.emit(this, eventName, data); - }; - } - - - /** - * Private properties only useful to this class. - * ------------------------------------ - */ - private _init: boolean; - private _tmr: number; - - /** - * Properties that are exposed publically but no docs. - * ------------------------------------ - */ - /** @hidden */ - container: HTMLElement; - /** @hidden */ - id: number; - /** @hidden */ - renderedHeight: number; - /** @hidden */ - renderedWidth: number; - /** @hidden */ - slideId: string; - /** @hidden */ - swipeDirection: string; - /** @hidden */ - velocity: number; - - - /** - * Properties which are for internal use only - * and not exposed to the public - * ------------------------------------ - */ - - /** @hidden */ - nextButton: HTMLElement; - /** @hidden */ - prevButton: HTMLElement; - - - - constructor( - ) { - this.id = ++slidesId; - this.slideId = 'slides-' + this.id; - } - - private _initSlides() { - if (!this._init) { - console.debug(`ion-slides, init`); - - this.container = this.$el.children[0]; - - var swiperOptions = { - height: this.height, - width: this.width, - virtualTranslate: this.virtualTranslate, - roundLengths: this.roundLengths, - originalEvent: this.originalEvent, - autoplay: this.autoplay, - direction: this.direction, - initialSlide: this.initialSlide, - loop: this.loop, - pager: this.pager, - paginationType: this.paginationType, - parallax: this.parallax, - slidesPerView: this.slidesPerView, - spaceBetween: this.spaceBetween, - speed: this.speed, - zoom: this.zoom, - slidesPerColumn: 1, - slidesPerColumnFill: 'column', - slidesPerGroup: 1, - centeredSlides: false, - slidesOffsetBefore: 0, - slidesOffsetAfter: 0, - touchEventsTarget: 'container', - autoplayDisableOnInteraction: true, - autoplayStopOnLast: false, - freeMode: false, - freeModeMomentum: true, - freeModeMomentumRatio: 1, - freeModeMomentumBounce: true, - freeModeMomentumBounceRatio: 1, - freeModeMomentumVelocityRatio: 1, - freeModeSticky: false, - freeModeMinimumVelocity: 0.02, - autoHeight: false, - setWrapperSize: false, - zoomMax: 3, - zoomMin: 1, - zoomToggle: true, - touchRatio: 1, - touchAngle: 45, - simulateTouch: true, - shortSwipes: true, - longSwipes: true, - longSwipesRatio: 0.5, - longSwipesMs: 300, - followFinger: true, - onlyExternal: false, - threshold: 0, - touchMoveStopPropagation: true, - touchReleaseOnEdges: false, - iOSEdgeSwipeDetection: false, - iOSEdgeSwipeThreshold: 20, - paginationClickable: false, - paginationHide: false, - resistance: true, - resistanceRatio: 0.85, - watchSlidesProgress: false, - watchSlidesVisibility: false, - preventClicks: true, - preventClicksPropagation: true, - slideToClickedSlide: false, - loopAdditionalSlides: 0, - noSwiping: true, - runCallbacksOnInit: true, - controlBy: 'slide', - controlInverse: false, - keyboardControl: true, - coverflow: { - rotate: 50, - stretch: 0, - depth: 100, - modifier: 1, - slideShadows: true - }, - flip: { - slideShadows: true, - limitRotation: true - }, - cube: { - slideShadows: true, - shadow: true, - shadowOffset: 20, - shadowScale: 0.94 - }, - fade: { - crossFade: false - }, - prevSlideMessage: 'Previous slide', - nextSlideMessage: 'Next slide', - firstSlideMessage: 'This is the first slide', - lastSlideMessage: 'This is the last slide', - onSlideChangeStart: this.emitEvent('ionSlideWillChange'), - onSlideChangeEnd: this.emitEvent('ionSlideDidChange'), - onAutoplay: this.emitEvent('ionSlideAutoplay'), - onAutoplayStart: this.emitEvent('ionSlideAutoplayStart'), - onAutoplayStop: this.emitEvent('ionSlideAutoplayStop'), - onSlideNextStart: this.emitEvent('ionSlideNextStarto'), - onSlidePrevStart: this.emitEvent('ionSlidePrevStart'), - onSlideNextEnd: this.emitEvent('ionSlideNextEnd'), - onSlidePrevEnd: this.emitEvent('ionSlidePrevEnd'), - onTransitionStart: this.emitEvent('ionSlideTransitionStart'), - onTransitionEnd: this.emitEvent('ionSlideTransitionEnd'), - onTap: this.emitEvent('ionSlideTap'), - onDoubleTap: this.emitEvent('ionSlideDoubleTap'), - onProgress: this.emitEvent('ionSlideProgress'), - onSliderMove: this.emitEvent('ionSlideDrag'), - onReachBeginning: this.emitEvent('ionSlideReachStart'), - onReachEnd: this.emitEvent('ionSlideReachEnd'), - onTouchStart: this.emitEvent('ionSlideTouchStart'), - onTouchEnd: this.emitEvent('ionSlideTouchEnd') - }; - - // init swiper core - this.swiper = new Swiper(this.container, swiperOptions); - - if (this.keyboardControl) { - // init keyboard event listeners - this.enableKeyboardControl(true); - } - - this._init = true; - } - } - - /** - * @hidden - */ - ionViewDidLoad() { - /** - * TODO: This should change because currently ionViewDidLoad fires independent of whether the - * child components are ready. - */ - setTimeout(() => { - this._initSlides(); - }, 10); - } - - /** - * Update the underlying slider implementation. Call this if you've added or removed - * child slides. - */ - update(debounce = 300) { - if (this._init) { - window.clearTimeout(this._tmr); - this._tmr = window.setTimeout(() => { - this.swiper.update(); - - // Don't allow pager to show with > 10 slides - if (this.length() > 10) { - this.paginationType = undefined; - } - }, debounce); - } - } - - /** - * Transition to the specified slide. - * - * @param {number} index The index number of the slide. - * @param {number} [speed] Transition duration (in ms). - * @param {boolean} [runCallbacks] Whether or not to emit the `ionSlideWillChange`/`ionSlideDidChange` events. Default true. - */ - slideTo(index: number, speed?: number, runCallbacks?: boolean) { - this.swiper.slideTo(index, speed, runCallbacks); - } - - /** - * Transition to the next slide. - * - * @param {number} [speed] Transition duration (in ms). - * @param {boolean} [runCallbacks] Whether or not to emit the `ionSlideWillChange`/`ionSlideDidChange` events. Default true. - */ - slideNext(speed?: number, runCallbacks?: boolean) { - this.swiper.slideNext(runCallbacks, speed); - } - - /** - * Transition to the previous slide. - * - * @param {number} [speed] Transition duration (in ms). - * @param {boolean} [runCallbacks] Whether or not to emit the `ionSlideWillChange`/`ionSlideDidChange` events. Default true. - */ - slidePrev(speed?: number, runCallbacks?: boolean) { - this.swiper.slidePrev(runCallbacks, speed); - } - - /** - * Get the index of the active slide. - * - * @returns {number} The index number of the current slide. - */ - getActiveIndex(): number { - return this.swiper.activeIndex; - } - - /** - * Get the index of the previous slide. - * - * @returns {number} The index number of the previous slide. - */ - getPreviousIndex(): number { - return this.swiper.previousIndex; - } - - /** - * Get the total number of slides. - * - * @returns {number} The total number of slides. - */ - length(): number { - return this.swiper.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.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.isBeginning(); - } - - /** - * Start auto play. - */ - startAutoplay() { - this.swiper.startAutoplay(); - } - - /** - * Stop auto play. - */ - stopAutoplay() { - this.swiper.stopAutoplay(); - } - - /** - * Lock or unlock the ability to slide to the next slides. - */ - lockSwipeToNext(shouldLockSwipeToNext: boolean) { - if (shouldLockSwipeToNext) { - return this.swiper.lockSwipeToNext(); - } - this.swiper.unlockSwipeToNext(); - } - - /** - * Lock or unlock the ability to slide to the previous slides. - */ - lockSwipeToPrev(shouldLockSwipeToPrev: boolean) { - if (shouldLockSwipeToPrev) { - return this.swiper.lockSwipeToPrev(); - } - this.swiper.unlockSwipeToPrev(); - } - - /** - * Lock or unlock the ability to slide to change slides. - */ - lockSwipes(shouldLockSwipes: boolean) { - if (shouldLockSwipes) { - return this.swiper.lockSwipes(); - } - this.swiper.unlockSwipes(); - } - - /** - * Enable or disable keyboard control. - */ - enableKeyboardControl(shouldEnableKeyboard: boolean) { - if (shouldEnableKeyboard) { - return this.swiper.enableKeyboardControl(); - } - this.swiper.disableKeyboardControl(); - } - - /** - * @hidden - */ - ionViewDidUnload() { - this._init = false; - - this.swiper.destroy(true, true); - this.enableKeyboardControl(false); - } -} - -let slidesId = -1; diff --git a/src/components/toggle/toggle.ts b/src/components/toggle/toggle.ts deleted file mode 100644 index 162564a72d..0000000000 --- a/src/components/toggle/toggle.ts +++ /dev/null @@ -1,174 +0,0 @@ -import { BooleanInputComponent, GestureDetail } from '../../util/interfaces'; -import { Component, h, Ionic, Listen, Prop, Watch } from '../index'; - - -@Component({ - tag: 'ion-toggle', - styleUrls: { - ios: 'toggle.ios.scss', - md: 'toggle.md.scss', - wp: 'toggle.wp.scss' - }, - shadow: false -}) -export class Toggle implements BooleanInputComponent { - activated: boolean = false; - hasFocus: boolean = false; - id: string; - labelId: string; - startX: number; - styleTmr: any; - - @Prop() checked: boolean = false; - @Prop() disabled: boolean = false; - @Prop() value: string; - - ionViewDidLoad() { - this.emitStyle(); - } - - @Watch('checked') - changed(val: boolean) { - Ionic.emit(this, 'ionChange', { detail: { checked: val } }); - this.emitStyle(); - } - - @Watch('disabled') - disableChanged() { - this.emitStyle(); - } - - private emitStyle() { - clearTimeout(this.styleTmr); - - this.styleTmr = setTimeout(() => { - Ionic.emit(this, 'ionStyle', { - detail: { - 'toggle-disabled': this.disabled, - 'toggle-checked': this.checked, - 'toggle-activated': this.activated, - 'toggle-focus': this.hasFocus - } - }); - }); - } - - private canStart() { - return !this.disabled; - } - - - private onDragStart(detail: GestureDetail) { - this.startX = detail.startX; - this.fireFocus(); - } - - - private onDragMove(detail: GestureDetail) { - if (this.checked) { - if (detail.currentX + 15 < this.startX) { - this.checked = false; - this.activated = true; - this.startX = detail.currentX; - } - - } else if (detail.currentX - 15 > this.startX) { - this.checked = true; - this.activated = (detail.currentX < this.startX + 5); - this.startX = detail.currentX; - } - } - - - private onDragEnd(detail: GestureDetail) { - if (this.checked) { - if (detail.startX + 4 > detail.currentX) { - this.checked = false; - } - - } else if (detail.startX - 4 < detail.currentX) { - this.checked = true; - } - - this.activated = false; - this.fireBlur(); - this.startX = null; - } - - - @Listen('keydown.space') - onSpace(ev: KeyboardEvent) { - this.toggle(); - ev.stopPropagation(); - ev.preventDefault(); - } - - toggle() { - if (!this.disabled) { - this.checked = !this.checked; - this.fireFocus(); - } - return this.checked; - } - - - fireFocus() { - if (!this.hasFocus) { - this.hasFocus = true; - Ionic.emit(this, 'ionFocus'); - this.emitStyle(); - } - } - - - fireBlur() { - if (this.hasFocus) { - this.hasFocus = false; - Ionic.emit(this, 'ionBlur'); - this.emitStyle(); - } - } - - - render() { - return h(this, Ionic.theme(this, 'toggle', { - class: { - 'toggle-activated': this.activated, - 'toggle-checked': this.checked, - 'toggle-disabled': this.disabled, - }, - }), h('ion-gesture', { - props: { - 'canStart': this.canStart.bind(this), - 'onStart': this.onDragStart.bind(this), - 'onMove': this.onDragMove.bind(this), - 'onEnd': this.onDragEnd.bind(this), - 'onPress': this.toggle.bind(this), - 'gestureName': 'toggle', - 'gesturePriority': 30, - 'type': 'pan,press', - 'direction': 'x', - 'threshold': 20, - 'attachTo': 'parent' - } - }, - [ - h('div.toggle-icon', - h('div.toggle-inner') - ), - h('div.toggle-cover', { - attrs: { - 'id': this.id, - 'aria-checked': this.checked ? 'true' : false, - 'aria-disabled': this.disabled ? 'true' : false, - 'aria-labelledby': this.labelId, - 'role': 'checkbox', - 'tabindex': 0 - } - }) - ] - ) - ); - } - -}