javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 11:41:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(): radio/switch/checkbox

Browse Source
This commit is contained in:
Adam Bradley
2015-09-26 21:27:05 -05:00
parent 2ef5f51851
commit 510b1a0caf
17 changed files with 130 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ionic/components/action-sheet/action-sheet.ts
View File

@ -54,7 +54,7 @@ import * as util from 'ionic/util';
*/ */
@View({ @View({
template: template:
'<backdrop (click)="_cancel()" tappable></backdrop>' + '<backdrop (click)="_cancel()" tappable disable-activated></backdrop>' +
'<action-sheet-wrapper>' + '<action-sheet-wrapper>' +
'<div class="action-sheet-container">' + '<div class="action-sheet-container">' +
'<div class="action-sheet-group action-sheet-options">' + '<div class="action-sheet-group action-sheet-options">' +

8
ionic/components/checkbox/checkbox.ts
View File

@ -34,7 +34,7 @@ import {IonicComponent, IonicView} from '../../config/decorators';
'id' 'id'
], ],
host: { host: {
'class': 'item no-activated', 'class': 'item',
'role': 'checkbox', 'role': 'checkbox',
'tappable': 'true', 'tappable': 'true',
'[attr.tab-index]': 'tabIndex', '[attr.tab-index]': 'tabIndex',
@ -46,9 +46,9 @@ import {IonicComponent, IonicView} from '../../config/decorators';
}) })
@IonicView({ @IonicView({
template: template:
'<div item-left class="media-checkbox">' + '<media-checkbox disable-activated>' +
'<div class="checkbox-icon"></div>' + '<checkbox-icon></checkbox-icon>' +
'</div>' + '</media-checkbox>' +
'<ion-item-content id="{{labelId}}">' + '<ion-item-content id="{{labelId}}">' +
'<ng-content></ng-content>' + '<ng-content></ng-content>' +
'</ion-item-content>' '</ion-item-content>'

14
ionic/components/checkbox/modes/ios.scss
View File

@ -12,12 +12,12 @@ $checkbox-ios-checkmark-color-on: $background-color !default;
ion-checkbox { ion-checkbox {
&[aria-checked=true] .checkbox-icon { &[aria-checked=true] checkbox-icon {
background-color: $checkbox-ios-background-color-on; background-color: $checkbox-ios-background-color-on;
border-color: $checkbox-ios-border-color-on; border-color: $checkbox-ios-border-color-on;
} }
&[aria-checked=true] .checkbox-icon:after { &[aria-checked=true] checkbox-icon:after {
position: absolute; position: absolute;
border: 1px solid $checkbox-ios-checkmark-color-on; border: 1px solid $checkbox-ios-checkmark-color-on;
top: 3px; top: 3px;
@ -32,8 +32,14 @@ ion-checkbox {
} }
.checkbox-icon { media-checkbox {
display: block;
margin: $item-ios-padding-media-top ($item-ios-padding-right / 2) $item-ios-padding-media-bottom ($item-ios-padding-left / 2);
}
checkbox-icon {
position: relative; position: relative;
display: block;
width: $checkbox-ios-icon-size; width: $checkbox-ios-icon-size;
height: $checkbox-ios-icon-size; height: $checkbox-ios-icon-size;
border-radius: 50%; border-radius: 50%;
@ -47,7 +53,7 @@ ion-checkbox {
@mixin checkbox-theme-ios($color-name, $bg-on) { @mixin checkbox-theme-ios($color-name, $bg-on) {
ion-checkbox[#{$color-name}][aria-checked=true] .checkbox-icon { ion-checkbox[#{$color-name}][aria-checked=true] checkbox-icon {
background-color: $bg-on; background-color: $bg-on;
border-color: $bg-on; border-color: $bg-on;
} }

14
ionic/components/checkbox/modes/md.scss
View File

@ -14,12 +14,12 @@ $checkbox-md-checkmark-color-on: $background-color !default;
ion-checkbox { ion-checkbox {
&[aria-checked=true] .checkbox-icon { &[aria-checked=true] checkbox-icon {
background-color: $checkbox-md-background-color-on; background-color: $checkbox-md-background-color-on;
border-color: $checkbox-md-border-color-on; border-color: $checkbox-md-border-color-on;
} }
&[aria-checked=true] .checkbox-icon:after { &[aria-checked=true] checkbox-icon:after {
position: absolute; position: absolute;
border: 2px solid $checkbox-md-checkmark-color-on; border: 2px solid $checkbox-md-checkmark-color-on;
top: 0; top: 0;
@ -34,8 +34,14 @@ ion-checkbox {
} }
.checkbox-icon { media-checkbox {
display: block;
margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom ($item-md-padding-left / 2);
}
checkbox-icon {
position: relative; position: relative;
display: block;
width: $checkbox-md-icon-size; width: $checkbox-md-icon-size;
height: $checkbox-md-icon-size; height: $checkbox-md-icon-size;
border-radius: $checkbox-md-border-radius; border-radius: $checkbox-md-border-radius;
@ -49,7 +55,7 @@ ion-checkbox {
@mixin checkbox-theme-md($color-name, $bg-on) { @mixin checkbox-theme-md($color-name, $bg-on) {
ion-checkbox[#{$color-name}][aria-checked=true] .checkbox-icon { ion-checkbox[#{$color-name}][aria-checked=true] checkbox-icon {
background-color: $bg-on; background-color: $bg-on;
border-color: $bg-on; border-color: $bg-on;
} }

2
ionic/components/item/modes/ios.scss
View File

@ -139,7 +139,7 @@ $item-ios-forward-icon-color: $item-ios-border-color !default;
} }
.item.activated:not(.no-activated) { .item.activated {
background-color: $item-ios-activated-background-color; background-color: $item-ios-activated-background-color;
} }

2
ionic/components/popup/popup.ts
View File

@ -198,7 +198,7 @@ const OVERLAY_TYPE = 'popup';
}) })
@View({ @View({
template: template:
'<backdrop (click)="_cancel($event)" tappable></backdrop>' + '<backdrop (click)="_cancel($event)" tappable disable-activated></backdrop>' +
'<popup-wrapper>' + '<popup-wrapper>' +
'<div class="popup-head">' + '<div class="popup-head">' +
'<h3 class="popup-title" [inner-html]="title"></h3>' + '<h3 class="popup-title" [inner-html]="title"></h3>' +

12
ionic/components/radio/modes/ios.scss
View File

@ -7,7 +7,7 @@ $radio-ios-color-on: color(primary) !default;
ion-radio { ion-radio {
&[aria-checked=true] .radio-icon:after { &[aria-checked=true] radio-icon:after {
position: absolute; position: absolute;
border: 2px solid $radio-ios-color-on; border: 2px solid $radio-ios-color-on;
top: 3px; top: 3px;
@ -26,8 +26,14 @@ ion-radio {
} }
.radio-icon { media-radio {
display: block;
margin: $item-ios-padding-media-top ($item-ios-padding-right / 2) $item-ios-padding-media-bottom ($item-ios-padding-left / 2);
}
radio-icon {
position: relative; position: relative;
display: block;
width: 16px; width: 16px;
height: 21px; height: 21px;
} }
@ -40,7 +46,7 @@ ion-radio {
ion-radio[#{$color-name}] { ion-radio[#{$color-name}] {
&[aria-checked=true] .radio-icon:after { &[aria-checked=true] radio-icon:after {
border-color: $color-value; border-color: $color-value;
} }

18
ionic/components/radio/modes/md.scss
View File

@ -14,10 +14,11 @@ $radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
ion-radio { ion-radio {
.radio-icon { radio-icon {
position: relative; position: relative;
top: 0; top: 0;
left: 0; left: 0;
display: block;
width: $radio-md-icon-size; width: $radio-md-icon-size;
height: $radio-md-icon-size; height: $radio-md-icon-size;
margin: 0; margin: 0;
@ -25,11 +26,11 @@ ion-radio {
border-radius: 50%; border-radius: 50%;
} }
&[aria-checked=true] .radio-icon { &[aria-checked=true] radio-icon {
border-color: $radio-md-color-on; border-color: $radio-md-color-on;
} }
.radio-icon:after { radio-icon:after {
position: absolute; position: absolute;
top: $radio-md-border-width; top: $radio-md-border-width;
left: $radio-md-border-width; left: $radio-md-border-width;
@ -42,7 +43,7 @@ ion-radio {
transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0);
} }
&[aria-checked=true] .radio-icon:after { &[aria-checked=true] radio-icon:after {
transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);
} }
@ -52,6 +53,11 @@ ion-radio {
} }
media-radio {
display: block;
margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom ($item-md-padding-left / 2);
}
// Material Design Radio Color Mixin // Material Design Radio Color Mixin
// -------------------------------------------------- // --------------------------------------------------
@ -60,11 +66,11 @@ ion-radio {
ion-radio[#{$color-name}] { ion-radio[#{$color-name}] {
&[aria-checked=true] .radio-icon { &[aria-checked=true] radio-icon {
border-color: $color-value; border-color: $color-value;
} }
&[aria-checked=true] .radio-icon:after { &[aria-checked=true] radio-icon:after {
background: $color-value; background: $color-value;
} }

6
ionic/components/radio/radio.ts
View File

@ -189,9 +189,9 @@ export class RadioGroup extends Ion {
'<ion-item-content id="{{labelId}}">' + '<ion-item-content id="{{labelId}}">' +
'<ng-content></ng-content>' + '<ng-content></ng-content>' +
'</ion-item-content>' + '</ion-item-content>' +
'<div item-right class="media-radio">' + '<media-radio>' +
'<div class="radio-icon"></div>' + '<radio-icon></radio-icon>' +
'</div>' '</media-radio>'
}) })
export class RadioButton extends Ion { export class RadioButton extends Ion {
/** /**

24
ionic/components/switch/modes/ios.scss
View File

@ -24,8 +24,7 @@ $switch-ios-transition-duration: 300ms !default;
ion-switch { ion-switch {
[item-right].media-switch { media-switch {
margin: 0;
padding: 6px ($item-ios-padding-right / 2) 6px ($item-ios-padding-left); padding: 6px ($item-ios-padding-right / 2) 6px ($item-ios-padding-left);
} }
@ -33,9 +32,10 @@ ion-switch {
// Switch Background Track // Switch Background Track
// ----------------------------------------- // -----------------------------------------
.switch-icon { switch-icon {
// bg track, when not checked // bg track, when not checked
position: relative; position: relative;
display: block;
width: $switch-ios-width; width: $switch-ios-width;
height: $switch-ios-height; height: $switch-ios-height;
border-radius: $switch-ios-border-radius; border-radius: $switch-ios-border-radius;
@ -46,7 +46,7 @@ ion-switch {
transition: background-color $switch-ios-transition-duration; transition: background-color $switch-ios-transition-duration;
} }
&[aria-checked=true] .switch-icon { &[aria-checked=true] switch-icon {
// bg track, when checked // bg track, when checked
background-color: $switch-ios-background-color-on; background-color: $switch-ios-background-color-on;
} }
@ -55,7 +55,7 @@ ion-switch {
// Switch Background Track, Inner Oval // Switch Background Track, Inner Oval
// ----------------------------------------- // -----------------------------------------
.switch-icon:before { switch-icon:before {
// inner bg track's oval, when not checked // inner bg track's oval, when not checked
content: ''; content: '';
position: absolute; position: absolute;
@ -72,8 +72,8 @@ ion-switch {
transition: transform $switch-ios-transition-duration; transition: transform $switch-ios-transition-duration;
} }
&[aria-checked=true] .switch-icon:before, &[aria-checked=true] switch-icon:before,
.switch-activated .switch-icon:before { .switch-activated switch-icon:before {
// inner bg track's oval, when checked // inner bg track's oval, when checked
transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0);
} }
@ -82,7 +82,7 @@ ion-switch {
// Switch Knob // Switch Knob
// ----------------------------------------- // -----------------------------------------
.switch-icon:after { switch-icon:after {
// knob, when not checked // knob, when not checked
content: ''; content: '';
position: absolute; position: absolute;
@ -100,18 +100,18 @@ ion-switch {
transition: transform $switch-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms; transition: transform $switch-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms;
} }
&[aria-checked=true] .switch-icon:after { &[aria-checked=true] switch-icon:after {
// knob, when checked // knob, when checked
transform: translate3d($switch-ios-width - $switch-ios-handle-width - ($switch-ios-border-width * 2), 0, 0); transform: translate3d($switch-ios-width - $switch-ios-handle-width - ($switch-ios-border-width * 2), 0, 0);
} }
.switch-activated .switch-icon:after { .switch-activated switch-icon:after {
// when pressing down on the switch and NOT checked // when pressing down on the switch and NOT checked
// then make the knob wider // then make the knob wider
width: $switch-ios-handle-width + 6; width: $switch-ios-handle-width + 6;
} }
&[aria-checked=true] .switch-activated .switch-icon:after { &[aria-checked=true] .switch-activated switch-icon:after {
// when pressing down on the switch and IS checked // when pressing down on the switch and IS checked
// make the knob wider and move it left a bit // make the knob wider and move it left a bit
left: $switch-ios-border-width - 6; left: $switch-ios-border-width - 6;
@ -127,7 +127,7 @@ ion-switch {
ion-switch[#{$color-name}] { ion-switch[#{$color-name}] {
&[aria-checked=true] .switch-icon { &[aria-checked=true] switch-icon {
background-color: $bg-on; background-color: $bg-on;
} }

18
ionic/components/switch/modes/md.scss
View File

@ -20,18 +20,18 @@ $switch-md-transition-duration: 300ms !default;
ion-switch { ion-switch {
[item-right].media-switch { media-switch {
margin: 0; padding: 12px ($item-md-padding-right / 2) 12px $item-md-padding-left;
padding: 6px ($item-md-padding-right / 2) 6px $item-md-padding-left;
} }
// Switch Background Track // Switch Background Track
// ----------------------------------------- // -----------------------------------------
.switch-icon { switch-icon {
// bg track, when not checked // bg track, when not checked
position: relative; position: relative;
display: block;
width: $switch-md-track-width; width: $switch-md-track-width;
height: $switch-md-track-height; height: $switch-md-track-height;
pointer-events: none; pointer-events: none;
@ -42,7 +42,7 @@ ion-switch {
transition: background-color $switch-md-transition-duration transition: background-color $switch-md-transition-duration
} }
&[aria-checked=true] .switch-icon { &[aria-checked=true] switch-icon {
// bg track, when not checked // bg track, when not checked
background-color: $switch-md-track-background-color-on; background-color: $switch-md-track-background-color-on;
} }
@ -51,7 +51,7 @@ ion-switch {
// Switch Knob // Switch Knob
// ----------------------------------------- // -----------------------------------------
.switch-icon:after { switch-icon:after {
// knob, when not checked // knob, when not checked
content: ''; content: '';
position: absolute; position: absolute;
@ -71,7 +71,7 @@ ion-switch {
transition-duration: $switch-md-transition-duration; transition-duration: $switch-md-transition-duration;
} }
&[aria-checked=true] .switch-icon:after { &[aria-checked=true] switch-icon:after {
// knob, when not checked // knob, when not checked
background-color: $switch-md-handle-background-color-on; background-color: $switch-md-handle-background-color-on;
transform: translate3d($switch-md-track-width - $switch-md-handle-width, 0, 0); transform: translate3d($switch-md-track-width - $switch-md-handle-width, 0, 0);
@ -87,11 +87,11 @@ ion-switch {
ion-switch[#{$color-name}] { ion-switch[#{$color-name}] {
&[aria-checked=true] .switch-icon { &[aria-checked=true] switch-icon {
background-color: lighten($bg-on, 25%); background-color: lighten($bg-on, 25%);
} }
&[aria-checked=true] .switch-icon:after { &[aria-checked=true] switch-icon:after {
background-color: $bg-on; background-color: $bg-on;
} }

3
ionic/components/switch/switch.scss
View File

@ -4,10 +4,11 @@
ion-switch { ion-switch {
display: block;
@include user-select-none(); @include user-select-none();
} }
ion-switch .media-switch { ion-switch media-switch {
margin: 0; margin: 0;
cursor: pointer; cursor: pointer;
} }

45
ionic/components/switch/switch.ts
View File

@ -21,11 +21,8 @@ import {pointerCoord} from '../../util/dom';
* @private * @private
*/ */
@Directive({ @Directive({
selector: '.media-switch', selector: 'media-switch',
host: { host: {
'tappable': 'true',
'(touchstart)': 'swtch.pointerDown($event)',
'(mousedown)': 'swtch.pointerDown($event)',
'[class.switch-activated]': 'swtch.isActivated' '[class.switch-activated]': 'swtch.isActivated'
} }
}) })
@ -93,12 +90,15 @@ class MediaSwitch {
host: { host: {
'class': 'item', 'class': 'item',
'role': 'checkbox', 'role': 'checkbox',
'tappable': 'true',
'[attr.tab-index]': 'tabIndex', '[attr.tab-index]': 'tabIndex',
'[attr.aria-checked]': 'checked', '[attr.aria-checked]': 'checked',
'[attr.aria-disabled]': 'disabled', '[attr.aria-disabled]': 'disabled',
'[attr.aria-labelledby]': 'labelId', '[attr.aria-labelledby]': 'labelId',
'(touchstart)': 'pointerDown($event)',
'(mousedown)': 'pointerDown($event)',
'(touchend)': 'pointerUp($event)', '(touchend)': 'pointerUp($event)',
'(mouseup)': 'pointerUp($event)', '(mouseup)': 'pointerUp($event)'
} }
}) })
@IonicView({ @IonicView({
@ -107,9 +107,9 @@ class MediaSwitch {
'<ion-item-content id="{{labelId}}">' + '<ion-item-content id="{{labelId}}">' +
'<ng-content></ng-content>' + '<ng-content></ng-content>' +
'</ion-item-content>' + '</ion-item-content>' +
'<div item-right class="media-switch">' + '<media-switch disable-activated>' +
'<div class="switch-icon"></div>' + '<switch-icon></switch-icon>' +
'</div>', '</media-switch>',
directives: [MediaSwitch] directives: [MediaSwitch]
}) })
export class Switch extends Ion { export class Switch extends Ion {
@ -130,6 +130,7 @@ export class Switch extends Ion {
self.id = IonInput.nextId(); self.id = IonInput.nextId();
self.tabIndex = 0; self.tabIndex = 0;
self.lastTouch = 0; self.lastTouch = 0;
self.mode = config.setting('mode');
self.onChange = (_) => {}; self.onChange = (_) => {};
self.onTouched = (_) => {}; self.onTouched = (_) => {};
@ -142,11 +143,11 @@ export class Switch extends Ion {
if (self.checked) { if (self.checked) {
if (currentX + 15 < self.startX) { if (currentX + 15 < self.startX) {
self.toggle(); self.toggle(ev);
self.startX = currentX; self.startX = currentX;
} }
} else if (currentX - 15 > self.startX) { } else if (currentX - 15 > self.startX) {
self.toggle(); self.toggle(ev);
self.startX = currentX; self.startX = currentX;
} }
} }
@ -187,14 +188,10 @@ export class Switch extends Ion {
/** /**
* Toggle the checked state of this switch. * Toggle the checked state of this switch.
*/ */
toggle() { toggle(ev) {
this.check(!this.checked);
}
click(ev) {
ev.preventDefault(); ev.preventDefault();
ev.stopPropagation(); ev.stopPropagation();
this.toggle(); this.check(!this.checked);
} }
writeValue(value) { writeValue(value) {
@ -206,9 +203,7 @@ export class Switch extends Ion {
this.lastTouch = Date.now(); this.lastTouch = Date.now();
} }
if (this.lastTouch + 999 > Date.now() && /mouse/.test(ev.type)) { if (this.isDisabled(ev)) return;
return;
}
this.startX = pointerCoord(ev).x; this.startX = pointerCoord(ev).x;
@ -219,18 +214,16 @@ export class Switch extends Ion {
} }
pointerUp(ev) { pointerUp(ev) {
if (this.lastTouch + 999 > Date.now() && /mouse/.test(ev.type)) { if (this.isDisabled(ev)) return;
return;
}
let endX = pointerCoord(ev).x; let endX = pointerCoord(ev).x;
if (this.checked) { if (this.checked) {
if (this.startX + 4 > endX) { if (this.startX + 4 > endX) {
this.toggle(); this.toggle(ev);
} }
} else if (this.startX - 4 < endX) { } else if (this.startX - 4 < endX) {
this.toggle(); this.toggle(ev);
} }
this.removeMoveListener(); this.removeMoveListener();
@ -247,4 +240,8 @@ export class Switch extends Ion {
this.removeMoveListener(); this.removeMoveListener();
this.switchEle = this.addMoveListener = this.removeMoveListener = null; this.switchEle = this.addMoveListener = this.removeMoveListener = null;
} }
isDisabled(ev) {
return (this.lastTouch + 999 > Date.now() && /mouse/.test(ev.type)) || (this.mode == 'ios' && ev.target.tagName == 'ION-SWITCH');
}
} }

2
ionic/components/switch/test/basic/e2e.ts
View File

@ -1,6 +1,6 @@
it('should check apple via switch element click', function() { it('should check apple via switch element click', function() {
element(by.css('.e2eAppleCheckbox .media-switch')).click(); element(by.css('.e2eAppleCheckbox media-switch')).click();
}); });

26
ionic/components/tap-click/activator.ts
View File

@ -14,23 +14,25 @@ export class Activator {
this.y = 0; this.y = 0;
} }
downAction(targetEle, pointerX, pointerY, callback) { downAction(ev, activatableEle, pointerX, pointerY, callback) {
// the user just pressed down // the user just pressed down
if (this.disableActivated(ev)) return;
// remember where they pressed // remember where they pressed
this.x = pointerX; this.x = pointerX;
this.y = pointerY; this.y = pointerY;
// queue to have this element activated // queue to have this element activated
this.queue.push(targetEle); this.queue.push(activatableEle);
raf(() => { raf(() => {
let targetEle; let activatableEle;
for (let i = 0; i < this.queue.length; i++) { for (let i = 0; i < this.queue.length; i++) {
targetEle = this.queue[i]; activatableEle = this.queue[i];
if (targetEle && targetEle.parentNode) { if (activatableEle && activatableEle.parentNode) {
this.active.push(targetEle); this.active.push(activatableEle);
targetEle.classList.add(this.activatedClass); activatableEle.classList.add(this.activatedClass);
} }
} }
this.queue = []; this.queue = [];
@ -70,4 +72,14 @@ export class Activator {
this.active = []; this.active = [];
} }
disableActivated(ev) {
let targetEle = ev.target;
for (let x = 0; x < 4; x++) {
if (!targetEle) break;
if (targetEle.hasAttribute('disable-activated')) return true;
targetEle = targetEle.parentElement;
}
return false;
}
} }

18
ionic/components/tap-click/ripple.ts
View File

@ -10,13 +10,14 @@ export class RippleActivator extends Activator {
this.ripples = {}; this.ripples = {};
} }
downAction(targetEle, pointerX, pointerY) { downAction(ev, activatableEle, pointerX, pointerY) {
super.downAction(targetEle, pointerX, pointerY);
if (!isRippleElement(targetEle)) return; if (this.disableActivated(ev)) return;
super.downAction(ev, activatableEle, pointerX, pointerY);
// create a new ripple element // create a new ripple element
let r = targetEle.getBoundingClientRect(); let r = activatableEle.getBoundingClientRect();
let x = Math.max(Math.abs(r.width - pointerX), pointerX) * 2; let x = Math.max(Math.abs(r.width - pointerX), pointerX) * 2;
let y = Math.max(Math.abs(r.height - pointerY), pointerY) * 2; let y = Math.max(Math.abs(r.height - pointerY), pointerY) * 2;
let size = (Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2))) - 10; let size = (Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2))) - 10;
@ -30,7 +31,7 @@ export class RippleActivator extends Activator {
eleStyle.left = (pointerX - r.left) + 'px'; eleStyle.left = (pointerX - r.left) + 'px';
eleStyle.top = (pointerY - r.top) + 'px'; eleStyle.top = (pointerY - r.top) + 'px';
targetEle.appendChild(rippleEle); activatableEle.appendChild(rippleEle);
let ripple = this.ripples[Date.now()] = { ele: rippleEle }; let ripple = this.ripples[Date.now()] = { ele: rippleEle };
@ -117,10 +118,3 @@ export class RippleActivator extends Activator {
} }
} }
function isRippleElement(targetEle) {
return (targetEle && targetEle.parentNode && !(NO_RIPPLE_TAGNAMES.test(targetEle.tagName)));
}
const NO_RIPPLE_TAGNAMES = /BACKDROP/;

10
ionic/components/tap-click/tap-click.ts
View File

@ -141,11 +141,11 @@ export class TapClick {
* @param {TODO} ev TODO * @param {TODO} ev TODO
*/ */
pointerStart(ev) { pointerStart(ev) {
let targetEle = this.getActivatableTarget(ev.target); let activatableEle = this.getActivatableTarget(ev.target);
if (targetEle) { if (activatableEle) {
this.start = pointerCoord(ev); this.start = pointerCoord(ev);
this.activator.downAction(targetEle, this.start.x, this.start.y); this.activator.downAction(ev, activatableEle, this.start.x, this.start.y);
this.moveListeners(true); this.moveListeners(true);
} else { } else {
@ -205,8 +205,8 @@ export class TapClick {
} }
getActivatableTarget(ele) { getActivatableTarget(ele) {
var targetEle = ele; let targetEle = ele;
for (var x = 0; x < 4; x++) { for (let x = 0; x < 4; x++) {
if (!targetEle) break; if (!targetEle) break;
if (this.isActivatable(targetEle)) return targetEle; if (this.isActivatable(targetEle)) return targetEle;
targetEle = targetEle.parentElement; targetEle = targetEle.parentElement;