fix(status-tap): using ion-scroll API

This commit is contained in:
Manu Mtz.-Almeida
2018-02-01 22:40:02 +01:00
parent 0a7d3808fd
commit ceccd024ed
5 changed files with 73 additions and 29 deletions

View File

@ -2805,6 +2805,36 @@ declare global {
}
import {
StatusTap as IonStatusTap
} from './components/status-tap/status-tap';
declare global {
interface HTMLIonStatusTapElement extends IonStatusTap, HTMLElement {
}
var HTMLIonStatusTapElement: {
prototype: HTMLIonStatusTapElement;
new (): HTMLIonStatusTapElement;
};
interface HTMLElementTagNameMap {
"ion-status-tap": HTMLIonStatusTapElement;
}
interface ElementTagNameMap {
"ion-status-tap": HTMLIonStatusTapElement;
}
namespace JSX {
interface IntrinsicElements {
"ion-status-tap": JSXElements.IonStatusTapAttributes;
}
}
namespace JSXElements {
export interface IonStatusTapAttributes extends HTMLAttributes {
}
}
}
import {
TabButton as IonTabButton
} from './components/tab-button/tab-button';

View File

@ -131,12 +131,13 @@ export class App {
}
render() {
const dom = [<ion-tap-click />, <slot></slot>];
if (this.useRouter) {
// dom.push(<ion-router-controller></ion-router-controller>);
}
return dom;
const isDevice = true;
return [
isDevice && <ion-tap-click />,
isDevice && <ion-status-tap />,
// <ion-router-controller></ion-router-controller>
<slot></slot>
];
}
}

View File

@ -0,0 +1,16 @@
# ion-status-tap
<!-- Auto Generated Below -->
## Methods
#### mockTap()
----------------------------------------------
*Built by [StencilJS](https://stenciljs.com/)*

View File

@ -1,7 +1,6 @@
import { Component, Listen, Method, Prop } from '@stencil/core';
import { DomController } from '../..';
import { domControllerAsync } from '../../utils/helpers';
@Component({
tag: 'ion-status-tap'
@ -10,33 +9,30 @@ export class StatusTap {
@Prop({ context: 'dom' }) dom: DomController;
@Prop() duration = 300;
@Listen('window:statusTap')
statusTap() {
handleTap(this);
this.tap();
}
@Method()
mockTap() {
return handleTap(this);
this.tap();
}
private tap() {
this.dom.read(() => {
const width = window.innerWidth;
const height = window.innerWidth;
const el = document.elementFromPoint(width / 2, height / 2);
if (!el) {
return;
}
const scroll = el.closest('ion-scroll') as HTMLIonScrollElement;
(scroll as any).componentOnReady().then(() => {
this.dom.write(() => scroll.scrollToTop(this.duration));
});
});
}
}
export function handleTap(tap: StatusTap): Promise<any> {
let width = 0;
let height = 0;
return domControllerAsync(tap.dom.read, () => {
width = window.innerWidth;
height = window.innerHeight;
}).then(() => {
const element = document.elementFromPoint(width / 2, height / 2);
if (!element) {
return;
}
const content = element.closest('.scroll-content');
if (!content) {
return;
}
throw new Error('Manu going to take over here');
});
}

View File

@ -41,6 +41,7 @@ exports.config = {
{ components: ['ion-tabs', 'ion-tab', 'ion-tabbar', 'ion-tab-button'] },
{ components: ['ion-toggle'] },
{ components: ['ion-toast', 'ion-toast-controller'] },
{ components: ['ion-tap-click', 'ion-status-tap'] },
],
collections: [
'ionicons'