javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 13:32:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(packages): move the packages to root

Browse Source
This commit is contained in:
Brandy Carney
2018-03-12 16:02:25 -04:00
parent 097f1a2cd3
commit d37623a2ca
1255 changed files with 38 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
core/src/components/infinite-scroll/infinite-scroll.scss Normal file
View File

@ -0,0 +1,12 @@
// Infinite Scroll
// --------------------------------------------------
ion-infinite-scroll {
display: none;
width: 100%;
}
.infinite-scroll-enabled {
display: block;
}

236
core/src/components/infinite-scroll/infinite-scroll.tsx Normal file
View File

@ -0,0 +1,236 @@
import { Component, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, State, Watch } from '@stencil/core';
import { DomController } from '../../index';
const enum Position {
Top = 'top',
Bottom = 'bottom',
}
@Component({
tag: 'ion-infinite-scroll',
styleUrl: 'infinite-scroll.scss'
})
export class InfiniteScroll {
private thrPx = 0;
private thrPc = 0;
private scrollEl: HTMLIonScrollElement|null = null;
private didFire = false;
private isBusy = false;
private init = false;
@Element() private el: HTMLElement;
@State() isLoading = false;
@Prop({ context: 'dom' }) dom: DomController;
@Prop({ context: 'enableListener' }) enableListener: EventListenerEnable;
/**
* The threshold distance from the bottom
* of the content to call the `infinite` output event when scrolled.
* The threshold value can be either a percent, or
* in pixels. For example, use the value of `10%` for the `infinite`
* output event to get called when the user has scrolled 10%
* from the bottom of the page. Use the value `100px` when the
* scroll is within 100 pixels from the bottom of the page.
* Defaults to `15%`.
*/
@Prop() threshold = '15%';
@Watch('threshold')
protected thresholdChanged(val: string) {
if (val.lastIndexOf('%') > -1) {
this.thrPx = 0;
this.thrPc = (parseFloat(val) / 100);
} else {
this.thrPx = parseFloat(val);
this.thrPc = 0;
}
}
/**
* If true, the infinite scroll will be hidden and scroll event listeners
* will be removed.
*
* Call `enable(false)` to disable the infinite scroll from actively
* trying to receive new data while scrolling. This method is useful
* when it is known that there is no more data that can be added, and
* the infinite scroll is no longer needed.
*/
@Prop() disabled = false;
@Watch('disabled')
protected disabledChanged(val: boolean) {
this.enableScrollEvents(!val);
}
/**
* The position of the infinite scroll element.
* The value can be either `top` or `bottom`.
* Defaults to `bottom`.
*/
@Prop() position: string = Position.Bottom;
/**
* Emitted when the scroll reaches
* the threshold distance. From within your infinite handler,
* you must call the infinite scroll's `complete()` method when
* your async operation has completed.
*/
@Event() ionInfinite: EventEmitter;
componentWillLoad() {
const scrollEl = this.el.closest('ion-scroll');
return scrollEl.componentOnReady().then((el) => {
this.scrollEl = el;
});
}
componentDidLoad() {
if (this.init) {
console.warn('instance was already initialized');
return;
}
this.init = true;
this.thresholdChanged(this.threshold);
this.enableScrollEvents(!this.disabled);
if (this.position === Position.Top) {
this.dom.write(() => this.scrollEl && this.scrollEl.scrollToBottom(0));
}
}
componentDidUnload() {
this.scrollEl = null;
}
@Listen('scroll', {enabled: false})
protected onScroll() {
const scrollEl = this.scrollEl;
if (!scrollEl || !this.canStart()) {
return 1;
}
const infiniteHeight = this.el.offsetHeight;
if (!infiniteHeight) {
// if there is no height of this element then do nothing
return 2;
}
const scrollTop = scrollEl.scrollTop;
const scrollHeight = scrollEl.scrollHeight;
const height = scrollEl.offsetHeight;
const threshold = this.thrPc ? (height * this.thrPc) : this.thrPx;
const distanceFromInfinite = (this.position === Position.Bottom)
? scrollHeight - infiniteHeight - scrollTop - threshold - height
: scrollTop - infiniteHeight - threshold;
if (distanceFromInfinite < 0) {
if (!this.didFire) {
this.isLoading = true;
this.didFire = true;
this.ionInfinite.emit(this);
return 3;
}
} else {
this.didFire = false;
}
return 4;
}
/**
* Call `complete()` within the `infinite` output event handler when
* your async operation has completed. For example, the `loading`
* state is while the app is performing an asynchronous operation,
* such as receiving more data from an AJAX request to add more items
* to a data list. Once the data has been received and UI updated, you
* then call this method to signify that the loading has completed.
* This method will change the infinite scroll's state from `loading`
* to `enabled`.
*/
@Method()
complete() {
const scrollEl = this.scrollEl;
if (!this.isLoading || !scrollEl) {
return;
}
this.isLoading = false;
if (this.position === Position.Top) {
/**
* New content is being added at the top, but the scrollTop position stays the same,
* which causes a scroll jump visually. This algorithm makes sure to prevent this.
* (Frame 1)
* - complete() is called, but the UI hasn't had time to update yet.
* - Save the current content dimensions.
* - Wait for the next frame using _dom.read, so the UI will be updated.
* (Frame 2)
* - Read the new content dimensions.
* - Calculate the height difference and the new scroll position.
* - Delay the scroll position change until other possible dom reads are done using _dom.write to be performant.
* (Still frame 2, if I'm correct)
* - Change the scroll position (= visually maintain the scroll position).
* - Change the state to re-enable the InfiniteScroll.
* - This should be after changing the scroll position, or it could
* cause the InfiniteScroll to be triggered again immediately.
* (Frame 3)
* Done.
*/
this.isBusy = true;
// ******** DOM READ ****************
// Save the current content dimensions before the UI updates
const prev = scrollEl.scrollHeight - scrollEl.scrollTop;
// ******** DOM READ ****************
this.dom.read(() => {
// UI has updated, save the new content dimensions
const scrollHeight = scrollEl.scrollHeight;
// New content was added on top, so the scroll position should be changed immediately to prevent it from jumping around
const newScrollTop = scrollHeight - prev;
// ******** DOM WRITE ****************
this.dom.write(() => {
scrollEl.scrollTop = newScrollTop;
this.isBusy = false;
});
});
}
}
/**
* Pass a promise inside `waitFor()` within the `infinite` output event handler in order to
* change state of infiniteScroll to "complete"
*/
@Method()
waitFor(action: Promise<any>) {
const enable = this.complete.bind(this);
action.then(enable, enable);
}
private canStart(): boolean {
return (
!this.disabled &&
!this.isBusy &&
!!this.scrollEl &&
!this.isLoading);
}
private enableScrollEvents(shouldListen: boolean) {
if (this.scrollEl) {
this.enableListener(this, 'scroll', shouldListen, this.scrollEl);
}
}
hostData() {
return {
class: {
'infinite-scroll-loading': this.isLoading,
'infinite-scroll-enabled': !this.disabled
}
};
}
}

245
core/src/components/infinite-scroll/readme.md Normal file
View File

@ -0,0 +1,245 @@
# ion-infinite-scroll
The Infinite Scroll allows you to perform an action when the user
scrolls a specified distance from the bottom or top of the page.
The expression assigned to the `infinite` event is called when
the user scrolls to the specified distance. When this expression
has finished its tasks, it should call the `complete()` method
on the infinite scroll instance.
```html
<ion-content>
<ion-list>
<ion-item ngFor="let i of items">{% raw %}{{i}}{% endraw %}</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
```
```ts
@Component({...})
export class NewsFeedPage {
items = [];
constructor() {
for (let i = 0; i < 30; i++) {
this.items.push( this.items.length );
}
}
doInfinite(infiniteScroll) {
console.log('Begin async operation');
setTimeout(() => {
for (let i = 0; i < 30; i++) {
this.items.push( this.items.length );
}
console.log('Async operation has ended');
infiniteScroll.complete();
}, 500);
}
}
```
## `waitFor` method of InfiniteScroll
In case if your async operation returns promise you can utilize
`waitFor` method inside your template.
```html
<ion-content>
<ion-list>
<ion-itemngFor="let item of items">{{item}}</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="$event.waitFor(doInfinite())">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
```
```ts
@Component({...})
export class NewsFeedPage {
items = [];
constructor() {
for (var i = 0; i < 30; i++) {
this.items.push( this.items.length );
}
}
doInfinite(): Promise<any> {
console.log('Begin async operation');
return new Promise((resolve) => {
setTimeout(() => {
for (var i = 0; i < 30; i++) {
this.items.push( this.items.length );
}
console.log('Async operation has ended');
resolve();
}, 500);
})
}
}
```
## Infinite Scroll Content
By default, Ionic uses the infinite scroll spinner that looks
best for the platform the user is on. However, you can change the
default spinner or add text by adding properties to the
`ion-infinite-scroll-content` component.
```html
<ion-content>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
```
## Further Customizing Infinite Scroll Content
The `ion-infinite-scroll` component holds the infinite scroll logic.
It requires a child component in order to display the content.
Ionic uses `ion-infinite-scroll-content` by default. This component
displays the infinite scroll and changes the look depending
on the infinite scroll's state. Separating these components allows
developers to create their own infinite scroll content components.
You could replace our default content with custom SVG or CSS animations.
<!-- Auto Generated Below -->
## Properties
#### disabled
boolean
If true, the infinite scroll will be hidden and scroll event listeners
will be removed.
Call `enable(false)` to disable the infinite scroll from actively
trying to receive new data while scrolling. This method is useful
when it is known that there is no more data that can be added, and
the infinite scroll is no longer needed.
#### position
string
The position of the infinite scroll element.
The value can be either `top` or `bottom`.
Defaults to `bottom`.
#### threshold
string
The threshold distance from the bottom
of the content to call the `infinite` output event when scrolled.
The threshold value can be either a percent, or
in pixels. For example, use the value of `10%` for the `infinite`
output event to get called when the user has scrolled 10%
from the bottom of the page. Use the value `100px` when the
scroll is within 100 pixels from the bottom of the page.
Defaults to `15%`.
## Attributes
#### disabled
boolean
If true, the infinite scroll will be hidden and scroll event listeners
will be removed.
Call `enable(false)` to disable the infinite scroll from actively
trying to receive new data while scrolling. This method is useful
when it is known that there is no more data that can be added, and
the infinite scroll is no longer needed.
#### position
string
The position of the infinite scroll element.
The value can be either `top` or `bottom`.
Defaults to `bottom`.
#### threshold
string
The threshold distance from the bottom
of the content to call the `infinite` output event when scrolled.
The threshold value can be either a percent, or
in pixels. For example, use the value of `10%` for the `infinite`
output event to get called when the user has scrolled 10%
from the bottom of the page. Use the value `100px` when the
scroll is within 100 pixels from the bottom of the page.
Defaults to `15%`.
## Events
#### ionInfinite
Emitted when the scroll reaches
the threshold distance. From within your infinite handler,
you must call the infinite scroll's `complete()` method when
your async operation has completed.
## Methods
#### complete()
Call `complete()` within the `infinite` output event handler when
your async operation has completed. For example, the `loading`
state is while the app is performing an asynchronous operation,
such as receiving more data from an AJAX request to add more items
to a data list. Once the data has been received and UI updated, you
then call this method to signify that the loading has completed.
This method will change the infinite scroll's state from `loading`
to `enabled`.
#### waitFor()
Pass a promise inside `waitFor()` within the `infinite` output event handler in order to
change state of infiniteScroll to "complete"
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*

19
core/src/components/infinite-scroll/test/basic/e2e.js Normal file
View File

@ -0,0 +1,19 @@
'use strict';
const { By, until } = require('selenium-webdriver');
const { register, Page, platforms } = require('../../../../../scripts/e2e');
class E2ETestPage extends Page {
constructor(driver, platform) {
super(driver, `http://localhost:3333/src/components/infinite-scroll/test/basic?ionicplatform=${platform}`);
}
}
platforms.forEach(platform => {
describe('infinite-scroll/basic', () => {
register('should init', driver => {
const page = new E2ETestPage(driver, platform);
return page.navigate('#content');
});
});
});

89
core/src/components/infinite-scroll/test/basic/index.html Normal file
View File

@ -0,0 +1,89 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Infinite Scroll - Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Infinite Scroll - Basic</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="content" padding>
<ion-button onclick="toggleInfiniteScroll()" block>
Toggle InfiniteScroll
</ion-button>
<ion-list id="list">
</ion-list>
<ion-infinite-scroll threshold="100px" id="infinite-scroll">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
</ion-app>
<script>
let items = [];
for (var i = 0; i < 30; i++) {
items.push( i+1 );
}
const list = document.getElementById('list');
const infiniteScroll = document.getElementById('infinite-scroll');
function toggleInfiniteScroll() {
infiniteScroll.disabled = !infiniteScroll.disabled;
}
infiniteScroll.addEventListener('ionInfinite', async function() {
console.log('Loading data...');
const data = await getAsyncData();
items = items.concat(data);
infiniteScroll.complete();
render();
console.log('Done');
});
function render() {
let html = '';
for(let item of items) {
html += `<ion-item>${item}</ion-item>`;
}
list.innerHTML = html;
}
function getAsyncData() {
// async return mock data
return new Promise(resolve => {
setTimeout(() => {
let data = [];
for (var i = 0; i < 30; i++) {
data.push(i);
}
resolve(data);
}, 500);
});
}
render();
</script>
</body>
</html>

19
core/src/components/infinite-scroll/test/standalone/e2e.js Normal file
View File

@ -0,0 +1,19 @@
'use strict';
const { By, until } = require('selenium-webdriver');
const { register, Page, platforms } = require('../../../../../scripts/e2e');
class E2ETestPage extends Page {
constructor(driver, platform) {
super(driver, `http://localhost:3333/src/components/infinite-scroll/test/standalone?ionicplatform=${platform}`);
}
}
platforms.forEach(platform => {
describe('infinite-scroll/standalone', () => {
register('should init', driver => {
const page = new E2ETestPage(driver, platform);
return page.navigate();
});
});
});

67
core/src/components/infinite-scroll/test/standalone/index.html Normal file
View File

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Infinite Scroll - Standalone</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
</head>
<body>
<ion-scroll>
<ion-list id="list"> </ion-list>
<ion-infinite-scroll threshold="100px" id="infinite-scroll">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-scroll>
<script>
let items = [];
for (var i = 0; i < 30; i++) {
items.push( i+1 );
}
const list = document.getElementById('list');
const infiniteScroll = document.getElementById('infinite-scroll');
infiniteScroll.addEventListener('ionInfinite', async function() {
console.log('Loading data...');
const data = await getAsyncData();
items = items.concat(data);
infiniteScroll.complete();
render();
console.log('Done');
});
function render() {
let html = '';
for(let item of items) {
html += `<ion-item>${item}</ion-item>`;
}
list.innerHTML = html;
}
function getAsyncData() {
// async return mock data
return new Promise(resolve => {
setTimeout(() => {
let data = [];
for (var i = 0; i < 30; i++) {
data.push(i);
}
resolve(data);
}, 500);
});
}
render();
</script>
</body>
</html>