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

fix(item): update test to call methods and fix gesture

Browse Source
This commit is contained in:
Brandy Carney
2017-07-19 11:58:03 -04:00
parent aaca2bc6ed
commit 4457820b0a
3 changed files with 158 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/core/src/components/item-sliding/item-sliding.tsx
View File

@ -1,4 +1,4 @@
import { Component, h, Ionic, State } from '@stencil/core'; import { Component, h, Ionic, Method, State } from '@stencil/core';
import { GestureDetail, HostElement } from '../../utils/interfaces'; import { GestureDetail, HostElement } from '../../utils/interfaces';
import { swipeShouldReset } from '../../utils/helpers'; import { swipeShouldReset } from '../../utils/helpers';
@ -240,7 +240,10 @@ export class ItemSliding {
} }
onDragEnd(gesture: GestureDetail) { onDragEnd(gesture: GestureDetail) {
this.selectedContainer.endSliding(gesture.velocityX); let coordX = gesture.currentX;
let deltaX = (coordX - this.firstCoordX);
let deltaT = (Date.now() - this.firstTimestamp);
this.selectedContainer.endSliding(deltaX / deltaT);
this.selectedContainer = null; this.selectedContainer = null;
this.preSelectedContainer = null; this.preSelectedContainer = null;
} }
@ -461,6 +464,7 @@ export class ItemSliding {
* } * }
* ``` * ```
*/ */
@Method()
close() { close() {
this.setOpenAmount(0, true); this.setOpenAmount(0, true);
} }

180
packages/core/src/components/item-sliding/test/basic.html
View File

@ -8,15 +8,27 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Sliding Items</ion-title>
<ion-buttons slot="start">
<ion-button onclick="changeDynamicText()">Dynamic</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button onclick="reload()">Reload</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content> <ion-content>
<div padding> <div padding>
<ion-button block onclick="toggleSliding()">Toggle sliding</ion-button> <ion-button block onclick="toggleSliding()">Toggle sliding</ion-button>
<ion-button block onclick="changeDynamic()">Change Dynamic Options</ion-button> <ion-button block onclick="toggleDynamicOptions()">Toggle Dynamic Options</ion-button>
<ion-button block onclick="closeOpened()">Close Opened Items</ion-button> <ion-button block onclick="closeOpened()">Close Opened Items</ion-button>
</div> </div>
<ion-list #myList> <ion-list id="list">
<ion-item-sliding> <ion-item-sliding>
<ion-item> <ion-item>
@ -33,14 +45,14 @@
One Line, dynamic option and text One Line, dynamic option and text
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item-options *ngIf="showOptions"> <ion-item-options class="show-options">
<ion-item-option color="primary"> <ion-item-option color="primary">
<ion-icon name="more"></ion-icon> <ion-icon name="more"></ion-icon>
{{ moreText }} <span class="more-text"></span>
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary" onclick="archive('item6')"> <ion-item-option color="secondary" onclick="archive('item6')">
<ion-icon name="archive"></ion-icon> <ion-icon name="archive"></ion-icon>
{{ archiveText }} <span class="archive-text"></span>
</ion-item-option> </ion-item-option>
</ion-item-options> </ion-item-options>
</ion-item-sliding> </ion-item-sliding>
@ -56,19 +68,19 @@
<ion-icon slot="icon-only" name="more"></ion-icon> <ion-icon slot="icon-only" name="more"></ion-icon>
</ion-item-option> </ion-item-option>
</ion-item-options> </ion-item-options>
<ion-item-options side="right" *ngIf="showOptions"> <ion-item-options side="right" class="show-options">
<ion-item-option color="primary"> <ion-item-option color="primary">
<ion-icon name="more"></ion-icon> <ion-icon name="more"></ion-icon>
{{ moreText }} <span class="more-text"></span>
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary" onclick="archive('item6')"> <ion-item-option color="secondary" onclick="archive('item6')">
<ion-icon name="archive"></ion-icon> <ion-icon name="archive"></ion-icon>
{{ archiveText }} <span class="archive-text"></span>
</ion-item-option> </ion-item-option>
</ion-item-options> </ion-item-options>
</ion-item-sliding> </ion-item-sliding>
<ion-item-sliding id="item1"00> <ion-item-sliding id="item100">
<ion-item href="#"> <ion-item href="#">
<ion-label> <ion-label>
<h2>HubStruck Notifications</h2> <h2>HubStruck Notifications</h2>
@ -81,12 +93,12 @@
</ion-item> </ion-item>
<ion-item-options side="left"> <ion-item-options side="left">
<ion-item-option onclick="noclose(item100)"> <ion-item-option onclick="noclose('item100')">
No close No close
</ion-item-option> </ion-item-option>
</ion-item-options> </ion-item-options>
<ion-item-options side="right"> <ion-item-options side="right">
<ion-item-option color="danger" onclick="unread('item100')"> <ion-item-option color="light" onclick="unread('item100')">
<ion-icon slot="icon-only" name="trash"></ion-icon> <ion-icon slot="icon-only" name="trash"></ion-icon>
</ion-item-option> </ion-item-option>
<ion-item-option onclick="unread('item100')"> <ion-item-option onclick="unread('item100')">
@ -97,13 +109,13 @@
</ion-item-sliding> </ion-item-sliding>
<ion-item-sliding id="item0"> <ion-item-sliding id="item0">
<ion-item text-wrap onclick="didClick(item0)"> <ion-item text-wrap onclick="clickedItem('item0')">
<ion-label> <ion-label>
<h2>RIGHT side - no icons</h2> <h2>RIGHT side - no icons</h2>
<p>Hey do you want to go to the game tonight?</p> <p>Hey do you want to go to the game tonight?</p>
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item-options *ngIf="slidingEnabled"> <ion-item-options class="sliding-enabled">
<ion-item-option color="primary" onclick="archive('item0')">Archive</ion-item-option> <ion-item-option color="primary" onclick="archive('item0')">Archive</ion-item-option>
<ion-item-option color="danger" onclick="del('item0')">Delete</ion-item-option> <ion-item-option color="danger" onclick="del('item0')">Delete</ion-item-option>
</ion-item-options> </ion-item-options>
@ -116,7 +128,7 @@
<p>I think I figured out how to get more Mountain Dew</p> <p>I think I figured out how to get more Mountain Dew</p>
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item-options side="left" *ngIf="slidingEnabled"> <ion-item-options side="left" class="sliding-enabled">
<ion-item-option color="primary" onclick="archive('item1')">Archive</ion-item-option> <ion-item-option color="primary" onclick="archive('item1')">Archive</ion-item-option>
<ion-item-option color="danger" onclick="del('item1')">Delete</ion-item-option> <ion-item-option color="danger" onclick="del('item1')">Delete</ion-item-option>
</ion-item-options> </ion-item-options>
@ -130,13 +142,13 @@
<p>I think I figured out how to get more Mountain Dew</p> <p>I think I figured out how to get more Mountain Dew</p>
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item-options side="left" (ionSwipe)="unread($event)" *ngIf="slidingEnabled"> <ion-item-options side="left" (ionSwipe)="unread($event)" class="sliding-enabled">
<ion-item-option color="secondary" expandable onclick="unread('item2')"> <ion-item-option color="secondary" expandable onclick="unread('item2')">
<ion-icon name="ios-checkmark"></ion-icon>Unread <ion-icon name="ios-checkmark"></ion-icon>Unread
</ion-item-option> </ion-item-option>
</ion-item-options> </ion-item-options>
<ion-item-options side="right" (ionSwipe)="del('item2')" *ngIf="slidingEnabled"> <ion-item-options side="right" (ionSwipe)="del('item2')" class="sliding-enabled">
<ion-item-option color="primary" onclick="archive('item2')"> <ion-item-option color="primary" onclick="archive('item2')">
<ion-icon name="mail"></ion-icon>Archive <ion-icon name="mail"></ion-icon>Archive
</ion-item-option> </ion-item-option>
@ -153,7 +165,7 @@
<p>I think I figured out how to get more Mountain Dew</p> <p>I think I figured out how to get more Mountain Dew</p>
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item-options side="left" icon-start (ionSwipe)="unread($event)" *ngIf="slidingEnabled"> <ion-item-options side="left" icon-start (ionSwipe)="unread($event)" class="sliding-enabled">
<ion-item-option color="secondary" expandable onclick="unread('item3')"> <ion-item-option color="secondary" expandable onclick="unread('item3')">
<ion-icon name="ios-checkmark"></ion-icon>Unread <ion-icon name="ios-checkmark"></ion-icon>Unread
</ion-item-option> </ion-item-option>
@ -163,7 +175,7 @@
<ion-item-option color="primary" onclick="archive('item3')"> <ion-item-option color="primary" onclick="archive('item3')">
<ion-icon name="mail"></ion-icon>Archive <ion-icon name="mail"></ion-icon>Archive
</ion-item-option> </ion-item-option>
<ion-item-option color="danger" onclick="del('item3')" expandable *ngIf="slidingEnabled"> <ion-item-option color="danger" onclick="del('item3')" expandable class="sliding-enabled">
<ion-icon name="trash"></ion-icon>Delete <ion-icon name="trash"></ion-icon>Delete
</ion-item-option> </ion-item-option>
</ion-item-options> </ion-item-options>
@ -178,14 +190,14 @@
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item-options icon-start (ionSwipe)="archive($event)"> <ion-item-options icon-start (ionSwipe)="archive($event)">
<ion-item-option color="primary" onclick="archive('item4')" expandable *ngIf="slidingEnabled"> <ion-item-option color="primary" onclick="archive('item4')" expandable class="sliding-enabled">
<ion-icon name="archive"></ion-icon>Archive <ion-icon name="archive"></ion-icon>Archive
</ion-item-option> </ion-item-option>
</ion-item-options> </ion-item-options>
</ion-item-sliding> </ion-item-sliding>
<ion-item-sliding id="item5" *ngIf="slidingEnabled"> <ion-item-sliding id="item5" class="sliding-enabled">
<ion-item> <ion-item>
<ion-avatar slot="start"> <ion-avatar slot="start">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
@ -201,7 +213,7 @@
<ion-item-option color="secondary" onclick="archive('item5')"> <ion-item-option color="secondary" onclick="archive('item5')">
<ion-icon name="archive"></ion-icon>Archive <ion-icon name="archive"></ion-icon>Archive
</ion-item-option> </ion-item-option>
<ion-item-option color="danger" onclick="del('item5')"> <ion-item-option color="light" onclick="del('item5')">
<ion-icon name="trash"></ion-icon>Delete <ion-icon name="trash"></ion-icon>Delete
</ion-item-option> </ion-item-option>
</ion-item-options> </ion-item-options>
@ -217,11 +229,11 @@
<ion-item-options icon-start> <ion-item-options icon-start>
<ion-item-option color="primary"> <ion-item-option color="primary">
<ion-icon name="more"></ion-icon> <ion-icon name="more"></ion-icon>
{{ moreText }} <span class="more-text"></span>
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary" onclick="archive('item7')"> <ion-item-option color="secondary" onclick="archive('item7')">
<ion-icon name="archive"></ion-icon> <ion-icon name="archive"></ion-icon>
{{ archiveText }} <span class="archive-text"></span>
</ion-item-option> </ion-item-option>
</ion-item-options> </ion-item-options>
</ion-item-sliding> </ion-item-sliding>
@ -236,14 +248,16 @@
<p>Paragraph text.</p> <p>Paragraph text.</p>
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item-options (ionSwipe)="download($event)"> <ion-item-options (ionSwipe)="download('item8')">
<ion-item-option color="primary" onclick="archive('item8')"> <ion-item-option color="primary" onclick="archive('item8')">
<ion-icon name="archive"></ion-icon>Archive <ion-icon name="archive"></ion-icon>Archive
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary" expandable onclick="download(item8)"> <ion-item-option color="secondary" expandable onclick="download('item8')">
<ion-icon name="download" class="download-hide"></ion-icon> <ion-icon name="download" class="download-hide"></ion-icon>
<div class="download-hide">Download</div> <div class="download-hide">Download</div>
<ion-spinner id="download-spinner"></ion-spinner>
<ion-icon class="download-spinner" name="refresh"></ion-icon>
<div class="download-spinner">Loading...</div>
</ion-item-option> </ion-item-option>
</ion-item-options> </ion-item-options>
</ion-item-sliding> </ion-item-sliding>
@ -267,7 +281,7 @@
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item text-wrap onclick="didClick(item9)"> <ion-item text-wrap onclick="clickedItem('item9')">
<ion-label> <ion-label>
<h2>Normal button (no sliding)</h2> <h2>Normal button (no sliding)</h2>
<p>Hey do you want to go to the game tonight?</p> <p>Hey do you want to go to the game tonight?</p>
@ -277,32 +291,118 @@
</ion-list> </ion-list>
<script> <script>
var dynamicColor = document.getElementById('dynamicColor'); var dynamicSlidingEnabled = document.getElementsByClassName('sliding-enabled');
function unread(item) { // Toggle the dynamic options
console.log('unread'); var dynamicShowOptions = document.getElementsByClassName('show-options');
toggleDynamicOptions();
function toggleDynamicOptions() {
// TODO the element needs to be removed / added to the DOM
} }
function archive(item) { // Change the text for the more and archive buttons
console.log('archive'); var dynamicText = true;
} var moreTextSpans = document.getElementsByClassName('more-text');
var archiveTextSpans = document.getElementsByClassName('archive-text');
changeDynamicText();
function del(item) { function changeDynamicText() {
console.log('del'); dynamicText = !dynamicText;
for (var i = 0; i < moreTextSpans.length; i++) {
var moreText = dynamicText ? 'Changed More' : 'Dynamic More';
moreTextSpans[i].innerHTML = moreText;
}
for (var i = 0; i < archiveTextSpans.length; i++) {
var archiveText = dynamicText ? 'Changed Archive' : 'Dynamic Archive';
archiveTextSpans[i].innerHTML = archiveText;
}
} }
function toggleSliding() { function toggleSliding() {
// this.slidingEnabled = !this.slidingEnabled;
}
function changeDynamic() {
} }
function closeOpened() { function closeOpened() {
var list = document.getElementById('list');
list.closeSlidingItems();
}
function noclose(item) {
var itemEle = document.getElementById(item);
console.log('no close', itemEle);
}
function unread(item) {
closeSlidingItem('UNREAD', item);
}
function archive(item) {
closeSlidingItem('ARCHIVE', item);
}
function del(item) {
closeSlidingItem('DELETE', item);
}
function download(item) {
var itemEle = document.getElementById(item);
console.log(itemEle);
itemEle.classList.add('downloading');
setTimeout(() => {
alert('Item was downloaded!');
itemEle.classList.remove('downloading');
itemEle.close();
}, 1500);
}
function closeSlidingItem(option, item) {
var itemEle = document.getElementById(item);
// TODO open alert instead
if (itemEle) {
itemEle.close();
}
console.log(option, itemEle);
}
function clickedItem(item) {
var itemEle = document.getElementById(item);
console.log('Clicked, ion-item', itemEle);
}
function reload() {
window.location.reload();
} }
</script> </script>
<style>
img {
height: 100px;
}
.download-spinner {
display: none;
}
svg circle {
stroke: white;
}
.downloading .download-spinner {
display: block;
}
.downloading .download-hide {
display: none;
}
[padding] {
padding: 16px;
}
</style>
</ion-content> </ion-content>
</ion-app> </ion-app>
</body> </body>

12
packages/core/src/components/list/list.tsx
View File

@ -1,4 +1,4 @@
import { Component, h } from '@stencil/core'; import { Component, h, Method } from '@stencil/core';
@Component({ @Component({
tag: 'ion-list', tag: 'ion-list',
@ -15,4 +15,14 @@ export class List {
render() { render() {
return <slot></slot>; return <slot></slot>;
} }
/**
* Close any sliding items that are open.
*/
@Method()
closeSlidingItems() {
// TODO implement this
console.log('in list method closeSlidingItems');
// this._slidingGesture && this._slidingGesture.closeOpened();
}
} }