mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
refactor(components): remove old *.ts files
This commit is contained in:
Brandy Carney
@ -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() {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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'));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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
|
|
||||||
*
|
|
||||||
* <!-- Colors -->
|
|
||||||
* <button ion-button>Default</button>
|
|
||||||
*
|
|
||||||
* <button ion-button color="secondary">Secondary</button>
|
|
||||||
*
|
|
||||||
* <button ion-button color="danger">Danger</button>
|
|
||||||
*
|
|
||||||
* <button ion-button color="light">Light</button>
|
|
||||||
*
|
|
||||||
* <button ion-button color="dark">Dark</button>
|
|
||||||
*
|
|
||||||
* <!-- Shapes -->
|
|
||||||
* <button ion-button full>Full Button</button>
|
|
||||||
*
|
|
||||||
* <button ion-button block>Block Button</button>
|
|
||||||
*
|
|
||||||
* <button ion-button round>Round Button</button>
|
|
||||||
*
|
|
||||||
* <!-- Outline -->
|
|
||||||
* <button ion-button full outline>Outline + Full</button>
|
|
||||||
*
|
|
||||||
* <button ion-button block outline>Outline + Block</button>
|
|
||||||
*
|
|
||||||
* <button ion-button round outline>Outline + Round</button>
|
|
||||||
*
|
|
||||||
* <!-- Icons -->
|
|
||||||
* <button ion-button icon-start>
|
|
||||||
* <ion-icon name="star"></ion-icon>
|
|
||||||
* Left Icon
|
|
||||||
* </button>
|
|
||||||
*
|
|
||||||
* <button ion-button icon-end>
|
|
||||||
* Right Icon
|
|
||||||
* <ion-icon name="star"></ion-icon>
|
|
||||||
* </button>
|
|
||||||
*
|
|
||||||
* <button ion-button icon-only>
|
|
||||||
* <ion-icon name="star"></ion-icon>
|
|
||||||
* </button>
|
|
||||||
*
|
|
||||||
* <!-- Sizes -->
|
|
||||||
* <button ion-button large>Large</button>
|
|
||||||
*
|
|
||||||
* <button ion-button>Default</button>
|
|
||||||
*
|
|
||||||
* <button ion-button small>Small</button>
|
|
||||||
* ```
|
|
||||||
*
|
|
||||||
* @advanced
|
|
||||||
*
|
|
||||||
* ```html
|
|
||||||
*
|
|
||||||
* <!-- Bind the color and outline inputs to an expression -->
|
|
||||||
* <button ion-button [color]="isDanger ? 'danger' : 'primary'" [outline]="isOutline">
|
|
||||||
* Danger (Solid)
|
|
||||||
* </button>
|
|
||||||
*
|
|
||||||
* <!-- Bind the color and round inputs to an expression -->
|
|
||||||
* <button ion-button [color]="myColor" [round]="isRound">
|
|
||||||
* Secondary (Round)
|
|
||||||
* </button>
|
|
||||||
*
|
|
||||||
* <!-- Bind the color and clear inputs to an expression -->
|
|
||||||
* <button ion-button [color]="isSecondary ? 'secondary' : 'primary'" [clear]="isClear">
|
|
||||||
* Primary (Clear)
|
|
||||||
* </button>
|
|
||||||
*
|
|
||||||
* <!-- Bind the color, outline and round inputs to an expression -->
|
|
||||||
* <button ion-button [color]="myColor2" [outline]="isOutline" [round]="isRound">
|
|
||||||
* Dark (Solid + Round)
|
|
||||||
* </button>
|
|
||||||
*
|
|
||||||
* <!-- Bind the click event to a method -->
|
|
||||||
* <button ion-button (click)="logEvent($event)">
|
|
||||||
* Click me!
|
|
||||||
* </button>
|
|
||||||
* ```
|
|
||||||
*
|
|
||||||
* ```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:
|
|
||||||
'<span class="button-inner">' +
|
|
||||||
'<ng-content></ng-content>' +
|
|
||||||
'</span>' +
|
|
||||||
'<div class="button-effect"></div>',
|
|
||||||
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((<any>this)[type], false);
|
|
||||||
if (isTrueProperty(attrValue)) {
|
|
||||||
(<any>this)[type] = attrName;
|
|
||||||
this._setClass(attrName, true);
|
|
||||||
|
|
||||||
} else {
|
|
||||||
// Special handling for '_style' which defaults to 'default'.
|
|
||||||
(<any>this)[type] = (type === '_style' ? 'default' : null);
|
|
||||||
this._setClass((<any>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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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'));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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'));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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'));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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'));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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 = <HTMLElement>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;
|
|
||||||
@ -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
|
|
||||||
}
|
|
||||||
})
|
|
||||||
]
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user