mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 21:48:42 +08:00
test(snapshot): add assistive popover to change direction (#11976)
This commit is contained in:

committed by
Brandy Carney

parent
d0ae810bae
commit
bb574743d9
@ -0,0 +1,4 @@
|
|||||||
|
<ion-list no-margin>
|
||||||
|
<button ion-item (click)="homeButton()">Home Button</button>
|
||||||
|
<button ion-item (click)="flipDirection()">Flip Direction</button>
|
||||||
|
</ion-list>
|
@ -0,0 +1,21 @@
|
|||||||
|
import { AssistivePopover } from './assistive-popover';
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { IonicPageModule } from '../../../../../../../module';
|
||||||
|
import { AssistiveTouchProvider } from '../../../providers/assistive-touch/assistive-touch';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [
|
||||||
|
AssistivePopover,
|
||||||
|
],
|
||||||
|
imports: [
|
||||||
|
IonicPageModule.forChild(AssistivePopover),
|
||||||
|
],
|
||||||
|
exports: [
|
||||||
|
AssistivePopover
|
||||||
|
],
|
||||||
|
providers: [
|
||||||
|
AssistiveTouchProvider
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class AssistivePopoverModule {
|
||||||
|
}
|
@ -0,0 +1,29 @@
|
|||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { IonicPage } from '../../../../../../../navigation/ionic-page';
|
||||||
|
import { AssistiveTouchProvider } from '../../../providers/assistive-touch/assistive-touch';
|
||||||
|
import { ViewController } from '../../../../../../../navigation/view-controller';
|
||||||
|
import { Platform } from '../../../../../../../platform/platform';
|
||||||
|
|
||||||
|
@IonicPage()
|
||||||
|
@Component({
|
||||||
|
templateUrl: 'assistive-popover.html'
|
||||||
|
})
|
||||||
|
export class AssistivePopover {
|
||||||
|
constructor(private assistive: AssistiveTouchProvider,
|
||||||
|
private plt: Platform,
|
||||||
|
private viewCtrl: ViewController) {}
|
||||||
|
|
||||||
|
homeButton() {
|
||||||
|
this.assistive.closeButton.emit();
|
||||||
|
this.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
flipDirection() {
|
||||||
|
this.plt.setDir(this.plt.dir() === 'ltr' ? 'rtl' : 'ltr', true);
|
||||||
|
this.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
private close() {
|
||||||
|
this.viewCtrl.dismiss();
|
||||||
|
}
|
||||||
|
}
|
@ -1,7 +1,7 @@
|
|||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { AssistiveTouchComponent } from './assistive-touch';
|
import { AssistiveTouchComponent } from './assistive-touch';
|
||||||
import { IonicPageModule } from '../../../../../../module';
|
import { IonicPageModule } from '../../../../../../module';
|
||||||
import { AssistiveTouchProvider } from '../../providers/assistive-touch/assistive-touch';
|
import { AssistivePopoverModule } from './assistive-popover/assistive-popover.module';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
@ -9,12 +9,10 @@ import { AssistiveTouchProvider } from '../../providers/assistive-touch/assistiv
|
|||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
IonicPageModule.forChild(AssistiveTouchComponent),
|
IonicPageModule.forChild(AssistiveTouchComponent),
|
||||||
|
AssistivePopoverModule
|
||||||
],
|
],
|
||||||
exports: [
|
exports: [
|
||||||
AssistiveTouchComponent
|
AssistiveTouchComponent
|
||||||
],
|
|
||||||
providers: [
|
|
||||||
AssistiveTouchProvider
|
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class AssistiveTouchComponentModule {
|
export class AssistiveTouchComponentModule {
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import { AfterViewInit, Component, ElementRef, Renderer2 } from '@angular/core';
|
import { AfterViewInit, Component, ElementRef, Renderer2 } from '@angular/core';
|
||||||
import { DomController } from '../../../../../../platform/dom-controller';
|
import { DomController } from '../../../../../../platform/dom-controller';
|
||||||
import { AssistiveTouchProvider } from '../../providers/assistive-touch/assistive-touch';
|
import { PopoverController } from '../../../../../popover/popover-controller';
|
||||||
|
import { AssistivePopover } from './assistive-popover/assistive-popover';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'assistive-touch',
|
selector: 'assistive-touch',
|
||||||
@ -18,7 +19,10 @@ export class AssistiveTouchComponent implements AfterViewInit {
|
|||||||
private elemWidthOffset: number;
|
private elemWidthOffset: number;
|
||||||
private elemHeightOffset: number;
|
private elemHeightOffset: number;
|
||||||
|
|
||||||
constructor(private assistive: AssistiveTouchProvider, public element: ElementRef, public renderer: Renderer2, public domCtrl: DomController) {
|
constructor(private popoverCtrl: PopoverController,
|
||||||
|
public element: ElementRef,
|
||||||
|
public renderer: Renderer2,
|
||||||
|
public domCtrl: DomController) {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngAfterViewInit() {
|
ngAfterViewInit() {
|
||||||
@ -35,7 +39,7 @@ export class AssistiveTouchComponent implements AfterViewInit {
|
|||||||
this.updatePosition();
|
this.updatePosition();
|
||||||
}
|
}
|
||||||
|
|
||||||
private handlePan(ev: {center: {x: number, y: number}}) {
|
private handlePan(ev: { center: { x: number, y: number } }) {
|
||||||
let newX = ev.center.x;
|
let newX = ev.center.x;
|
||||||
let newY = ev.center.y;
|
let newY = ev.center.y;
|
||||||
|
|
||||||
@ -77,8 +81,6 @@ export class AssistiveTouchComponent implements AfterViewInit {
|
|||||||
}
|
}
|
||||||
|
|
||||||
openControl() {
|
openControl() {
|
||||||
// TODO when custom alerts are out, this should open a custom alert
|
this.popoverCtrl.create(AssistivePopover).present();
|
||||||
// Allow setting direction, close, whatever
|
|
||||||
this.assistive.closeButton.emit();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user