Skip to content

Commit

Permalink
Fixed #166
Browse files Browse the repository at this point in the history
  • Loading branch information
Çağatay Çivici committed Apr 6, 2016
1 parent 66708d8 commit 05eef85
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 53 deletions.
124 changes: 71 additions & 53 deletions components/orderlist/orderlist.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {Component,ElementRef,DoCheck,Input,Output,ContentChild,TemplateRef} from 'angular2/core';
import {Component,ElementRef,DoCheck,Input,Output,ContentChild,TemplateRef,EventEmitter} from 'angular2/core';
import {Button} from '../button/button';
import {DomHandler} from '../dom/domhandler';

Expand All @@ -8,10 +8,10 @@ import {DomHandler} from '../dom/domhandler';
<div [ngClass]="{'ui-orderlist ui-grid ui-widget':true,'ui-grid-responsive':responsive}" [attr.style]="style" [attr.class]="styleClass">
<div class="ui-grid-row">
<div class="ui-orderlist-controls ui-grid-col-2">
<button type="button" pButton icon="fa-angle-up" (click)="moveUp(listelement)"></button>
<button type="button" pButton icon="fa-angle-double-up" (click)="moveTop(listelement)"></button>
<button type="button" pButton icon="fa-angle-down" (click)="moveDown(listelement)"></button>
<button type="button" pButton icon="fa-angle-double-down" (click)="moveBottom(listelement)"></button>
<button type="button" pButton icon="fa-angle-up" (click)="moveUp($event,listelement)"></button>
<button type="button" pButton icon="fa-angle-double-up" (click)="moveTop($event,listelement)"></button>
<button type="button" pButton icon="fa-angle-down" (click)="moveDown($event,listelement)"></button>
<button type="button" pButton icon="fa-angle-double-down" (click)="moveBottom($event,listelement)"></button>
</div>
<div class="ui-grid-col-10">
<div class="ui-orderlist-caption ui-widget-header ui-corner-top" *ngIf="header">{{header}}</div>
Expand Down Expand Up @@ -39,6 +39,8 @@ export class OrderList {
@Input() listStyle: string;

@Input() responsive: boolean;

@Output() onReorder: EventEmitter<any> = new EventEmitter();

@ContentChild(TemplateRef) itemTemplate: TemplateRef;

Expand Down Expand Up @@ -105,75 +107,91 @@ export class OrderList {
}
}

moveUp(listElement) {
moveUp(event,listElement) {
let selectedElements = this.getSelectedListElements(listElement);
for(let i = 0; i < selectedElements.length; i++) {
let selectedElement = selectedElements[i];
let selectedElementIndex: number = this.domHandler.index(selectedElement);
if(selectedElements.length) {
for(let i = 0; i < selectedElements.length; i++) {
let selectedElement = selectedElements[i];
let selectedElementIndex: number = this.domHandler.index(selectedElement);

if(selectedElementIndex != 0) {
let movedItem = this.value[selectedElementIndex];
let temp = this.value[selectedElementIndex-1];
this.value[selectedElementIndex-1] = movedItem;
this.value[selectedElementIndex] = temp;
this.domHandler.scrollInView(listElement, listElement.children[selectedElementIndex - 1]);
}
else {
break;
if(selectedElementIndex != 0) {
let movedItem = this.value[selectedElementIndex];
let temp = this.value[selectedElementIndex-1];
this.value[selectedElementIndex-1] = movedItem;
this.value[selectedElementIndex] = temp;
this.domHandler.scrollInView(listElement, listElement.children[selectedElementIndex - 1]);
}
else {
break;
}
}

this.onReorder.emit(event);
}
}

moveTop(listElement) {
moveTop(event,listElement) {
let selectedElements = this.getSelectedListElements(listElement);
for(let i = 0; i < selectedElements.length; i++) {
let selectedElement = selectedElements[i];
let selectedElementIndex: number = this.domHandler.index(selectedElement);
if(selectedElements.length) {
for(let i = 0; i < selectedElements.length; i++) {
let selectedElement = selectedElements[i];
let selectedElementIndex: number = this.domHandler.index(selectedElement);

if(selectedElementIndex != 0) {
let movedItem = this.value.splice(selectedElementIndex,1)[0];
this.value.unshift(movedItem);
listElement.scrollTop = 0;
}
else {
break;
if(selectedElementIndex != 0) {
let movedItem = this.value.splice(selectedElementIndex,1)[0];
this.value.unshift(movedItem);
listElement.scrollTop = 0;
}
else {
break;
}
}

this.onReorder.emit(event);
}
}

moveDown(listElement) {
moveDown(event,listElement) {
let selectedElements = this.getSelectedListElements(listElement);
for(let i = selectedElements.length - 1; i >= 0; i--) {
let selectedElement = selectedElements[i];
let selectedElementIndex: number = this.domHandler.index(selectedElement);
if(selectedElements.length) {
for(let i = selectedElements.length - 1; i >= 0; i--) {
let selectedElement = selectedElements[i];
let selectedElementIndex: number = this.domHandler.index(selectedElement);

if(selectedElementIndex != (this.value.length - 1)) {
let movedItem = this.value[selectedElementIndex];
let temp = this.value[selectedElementIndex+1];
this.value[selectedElementIndex+1] = movedItem;
this.value[selectedElementIndex] = temp;
this.domHandler.scrollInView(listElement, listElement.children[selectedElementIndex + 1]);
}
else {
break;
if(selectedElementIndex != (this.value.length - 1)) {
let movedItem = this.value[selectedElementIndex];
let temp = this.value[selectedElementIndex+1];
this.value[selectedElementIndex+1] = movedItem;
this.value[selectedElementIndex] = temp;
this.domHandler.scrollInView(listElement, listElement.children[selectedElementIndex + 1]);
}
else {
break;
}
}

this.onReorder.emit(event);
}
}

moveBottom(listElement) {
moveBottom(event,listElement) {
let selectedElements = this.getSelectedListElements(listElement);
for(let i = selectedElements.length - 1; i >= 0; i--) {
let selectedElement = selectedElements[i];
let selectedElementIndex: number = this.domHandler.index(selectedElement);
if(selectedElements.length) {
for(let i = selectedElements.length - 1; i >= 0; i--) {
let selectedElement = selectedElements[i];
let selectedElementIndex: number = this.domHandler.index(selectedElement);

if(selectedElementIndex != (this.value.length - 1)) {
let movedItem = this.value.splice(selectedElementIndex,1)[0];
this.value.push(movedItem);
listElement.scrollTop = listElement.scrollHeight;
}
else {
break;
if(selectedElementIndex != (this.value.length - 1)) {
let movedItem = this.value.splice(selectedElementIndex,1)[0];
this.value.push(movedItem);
listElement.scrollTop = listElement.scrollHeight;
}
else {
break;
}
}

this.onReorder.emit(event);
}
}

Expand Down
20 changes: 20 additions & 0 deletions showcase/demo/orderlist/orderlistdemo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,26 @@ <h3>Attributes</h3>
</tbody>
</table>
</div>

<h3>Events</h3>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>onReorder</td>
<td>event: browser event</td>
<td>Callback to invoke when list is reordered.</td>
</tr>
</tbody>
</table>
</div>

<h3>Styling</h3>
<p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['Theming']">theming page</a>.</p>
Expand Down

0 comments on commit 05eef85

Please sign in to comment.