Skip to content

Commit

Permalink
feat(item): sliding items work with list reorder
Browse files Browse the repository at this point in the history
  • Loading branch information
@manucorporat
manucorporat committed Jun 24, 2016
1 parent b7826ba commit bfdc898
Show file tree
Hide file tree
Showing 15 changed files with 494 additions and 349 deletions.
48 changes: 46 additions & 2 deletions demos/item-sliding/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,52 @@
import { Component } from '@angular/core';
import { Component, ViewEncapsulation } from '@angular/core';

import { ionicBootstrap, ItemSliding, NavController, Toast } from 'ionic-angular';


@Component({
templateUrl: 'main.html'
templateUrl: 'main.html',
encapsulation: ViewEncapsulation.None
})
class ApiDemoPage {
chats: any[];
logins: any[];
editButton: string = 'Edit';
editing: boolean = false;

constructor(private nav: NavController) {
this.chats = [
{
img: './avatar-cher.png',
name: 'Cher',
message: 'Ugh. As if.',
time: '9:38 pm'
}, {
img: './avatar-dionne.png',
name: 'Dionne',
message: 'Mr. Hall was way harsh.',
time: '8:59 pm'
}, {
img: './avatar-murray.png',
name: 'Murray',
message: 'Excuse me, "Ms. Dione."',
time: 'Wed'
},
{
img: './avatar-cher.png',
name: 'Cher',
message: 'Ugh. As if.',
time: '9:38 pm'
}, {
img: './avatar-dionne.png',
name: 'Dionne',
message: 'Mr. Hall was way harsh.',
time: '8:59 pm'
}, {
img: './avatar-murray.png',
name: 'Murray',
message: 'Excuse me, "Ms. Dione."',
time: 'Wed'
},
{
img: './avatar-cher.png',
name: 'Cher',
Expand Down Expand Up @@ -49,6 +84,15 @@ class ApiDemoPage {
}];
}

toggleEdit() {
this.editing = !this.editing;
if (this.editing) {
this.editButton = 'Done';
} else {
this.editButton = 'Edit';
}
}

more(item: ItemSliding) {
console.log('More');
item.close();
Expand Down
20 changes: 16 additions & 4 deletions demos/item-sliding/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,24 @@

<ion-navbar>
<ion-title>Item Sliding</ion-title>
<ion-buttons end>
<button (click)="toggleEdit()">{{editButton}}</button>
</ion-buttons>
</ion-navbar>

</ion-header>


<ion-content class="outer-content">
<ion-content class="outer-content" fullscreen>

<ion-list class="chat-sliding-demo">
<ion-list class="chat-sliding-demo" [sliding]="!editing">
<ion-list-header>
Chats
</ion-list-header>

<ion-item-sliding *ngFor="let chat of chats; let ref = index" [ref]="ref" #item>
<ion-item-group [reorder]="editing">

<ion-item-sliding *ngFor="let chat of chats" #item>
<ion-item>
<ion-avatar item-left>
<img [src]="chat.img">
Expand All @@ -41,13 +46,14 @@ <h2>{{chat.name}}</h2>
</button>
</ion-item-options>

<ion-item-options side="left">
<ion-item-options side="left" (ionSwipe)="archive(item)">
<button primary expandable (click)="archive(item)">
<ion-icon name="archive"></ion-icon>
Archive
</button>
</ion-item-options>
</ion-item-sliding>
</ion-item-group>
</ion-list>

<ion-list class="login-sliding-demo">
Expand Down Expand Up @@ -87,6 +93,12 @@ <h2>{{login.name}}</h2>
#download-spinner {
display: none;
}

div.toolbar-background {
background-color: rgba(255, 255, 255, 0.65);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}

svg circle {
stroke: white;
Expand Down
86 changes: 44 additions & 42 deletions src/components/item/item-reorder-gesture.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {Item} from './item';
import {List} from '../list/list';
import {Reorder} from '../item/item-reorder';
import {UIEventManager} from '../../util/ui-event-manager';
import {closest, Coordinates, pointerCoord, CSS, nativeRaf} from '../../util/dom';

Expand All @@ -12,7 +12,6 @@ const ITEM_REORDER_ACTIVE = 'reorder-active';
* @private
*/
export class ItemReorderGesture {
private selectedItem: Item = null;
private selectedItemEle: HTMLElement = null;
private selectedItemHeight: number;

Expand All @@ -26,7 +25,7 @@ export class ItemReorderGesture {

private events: UIEventManager = new UIEventManager(false);

constructor(public list: List) {
constructor(public list: Reorder) {
let element = this.list.getNativeElement();
this.events.pointerEvents(element,
this.onDragStart.bind(this),
Expand All @@ -35,32 +34,30 @@ export class ItemReorderGesture {
}

private onDragStart(ev: any): boolean {
let itemEle = ev.target;
if (itemEle.nodeName !== 'ION-REORDER') {
let reorderElement = ev.target;
if (reorderElement.nodeName !== 'ION-REORDER') {
return false;
}

let item = <Item> itemEle['$ionComponent'];
let item = reorderElement['$ionReorderNode'];
if (!item) {
console.error('item does not contain ion component');
console.error('item does not contain ion ionReorderNode');
return false;
}
ev.preventDefault();

// Preparing state
this.selectedItem = item;
this.selectedItemEle = item.getNativeElement();
this.selectedItemHeight = item.height();
this.lastToIndex = item.index;
this.lastYcoord = -100;
this.selectedItemEle = item;
this.selectedItemHeight = item.offsetHeight;
this.lastYcoord = this.lastToIndex = -100;

this.windowHeight = window.innerHeight - AUTO_SCROLL_MARGIN;
this.lastScrollPosition = this.list.scrollContent(0);

this.offset = pointerCoord(ev);
this.offset.y += this.lastScrollPosition;

item.setCssClass(ITEM_REORDER_ACTIVE, true);
item.classList.add(ITEM_REORDER_ACTIVE);
this.list.reorderStart();
return true;
}
Expand All @@ -83,9 +80,9 @@ export class ItemReorderGesture {
if (Math.abs(posY - this.lastYcoord) > 30) {
let overItem = this.itemForCoord(coord);
if (overItem) {
let toIndex = overItem.index;
if (toIndex !== this.lastToIndex || this.emptyZone) {
let fromIndex = this.selectedItem.index;
let toIndex = indexForItem(overItem);
if (toIndex && (toIndex !== this.lastToIndex || this.emptyZone)) {
let fromIndex = indexForItem(this.selectedItemEle);
this.lastToIndex = toIndex;
this.lastYcoord = posY;
this.emptyZone = false;
Expand All @@ -96,40 +93,25 @@ export class ItemReorderGesture {
}
}

// Update selected item position
// Update selected item position
let ydiff = Math.round(posY - this.offset.y + scrollPosition);
selectedItem.style[CSS.transform] = `translateY(${ydiff}px)`;
}

private onDragEnd() {
if (!this.selectedItemEle) {
return;
}

nativeRaf(() => {
let toIndex = this.lastToIndex;
let fromIndex = this.selectedItem.index;
this.selectedItem.setCssClass(ITEM_REORDER_ACTIVE, false);
this.selectedItem = null;
this.selectedItemEle = null;
this.list.reorderEmit(fromIndex, toIndex);
});
let toIndex = this.lastToIndex;
let fromIndex = indexForItem(this.selectedItemEle);
this.selectedItemEle.classList.remove(ITEM_REORDER_ACTIVE);
this.selectedItemEle = null;
this.list.reorderEmit(fromIndex, toIndex);
}

private itemForCoord(coord: Coordinates): Item {
let element = <HTMLElement>document.elementFromPoint(this.offset.x - 100, coord.y);
if (!element) {
return null;
}
if (element.nodeName !== 'ION-ITEM') {
return null;
}
let item = <Item>(<any>element)['$ionComponent'];
if (!item) {
console.error('item does not have $ionComponent');
return null;
}
return item;
private itemForCoord(coord: Coordinates): HTMLElement {
return itemForPosition(this.offset.x - 100, coord.y);
}

private scroll(posY: number): number {
Expand All @@ -141,8 +123,6 @@ export class ItemReorderGesture {
return this.lastScrollPosition;
}



/**
* @private
*/
Expand All @@ -153,3 +133,25 @@ export class ItemReorderGesture {
this.list = null;
}
}

function itemForPosition(x: number, y: number): HTMLElement {
let element = <HTMLElement>document.elementFromPoint(x, y);
if (!element) {
return null;
}
if (element.nodeName !== 'ION-ITEM' && !element.hasAttribute('ion-item')) {
return null;
}
if (indexForItem(element)) {
return element;
}
let parent = element.parentNode;
if (indexForItem(parent)) {
return <HTMLElement>parent;
}
return null;
}

function indexForItem(element: any): number {
return element['$ionIndex'];
}
5 changes: 4 additions & 1 deletion src/components/item/item-reorder.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@ ion-reorder {

.reorder-enabled {

.item {
.item, .item-wrapper {
transition: transform 300ms;

will-change: transform;
}

Expand All @@ -40,6 +42,7 @@ ion-reorder {
}


.item-wrapper.reorder-active,
.item.reorder-active {
z-index: 4;

Expand Down
Loading

0 comments on commit bfdc898

Please sign in to comment.