Skip to content

Commit 0d5bd75

Browse files
author
Max Lynch
committed
Fixed #172 - list item reorder persistence
1 parent a04dc02 commit 0d5bd75

File tree

7 files changed

+98
-10
lines changed

7 files changed

+98
-10
lines changed

‎dist/js/ionic-angular.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24851,6 +24851,7 @@ angular.module('ionic.ui.list', ['ngAnimate'])
2485124851
hasPullToRefresh: '@',
2485224852
onRefresh: '&',
2485324853
onRefreshOpening: '&',
24854+
onReorder: '&',
2485424855
refreshComplete: '='
2485524856
},
2485624857

@@ -24879,6 +24880,12 @@ angular.module('ionic.ui.list', ['ngAnimate'])
2487924880
onRefreshOpening: function(amt) {
2488024881
$scope.onRefreshOpening({amount: amt});
2488124882
$scope.$parent.$broadcast('scroll.onRefreshOpening', amt);
24883+
},
24884+
onReorder: function(el, oldIndex, newIndex) {
24885+
console.log('Moved', el,oldIndex,newIndex);
24886+
$scope.$apply(function() {
24887+
$scope.onReorder({el: el, start: oldIndex, end: newIndex});
24888+
});
2488224889
}
2488324890
});
2488424891

‎dist/js/ionic.js‎

Lines changed: 39 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,20 @@ window.ionic = {
158158
return null
159159
},
160160

161-
getChildIndex: function(element) {
161+
getChildIndex: function(element, type) {
162+
if(type) {
163+
var ch = element.parentNode.children;
164+
var c;
165+
for(var i = 0, k = 0, j = ch.length; i < j; i++) {
166+
c = ch[i];
167+
if(c.nodeName && c.nodeName.toLowerCase() == type) {
168+
if(c == element) {
169+
return k;
170+
}
171+
k++;
172+
}
173+
}
174+
}
162175
return Array.prototype.slice.call(element.parentNode.children).indexOf(element);
163176
},
164177
swapNodes: function(src, dest) {
@@ -1838,6 +1851,17 @@ window.ionic = {
18381851
*/
18391852
ionic.Utils = {
18401853

1854+
arrayMove: function (arr, old_index, new_index) {
1855+
if (new_index >= arr.length) {
1856+
var k = new_index - arr.length;
1857+
while ((k--) + 1) {
1858+
arr.push(undefined);
1859+
}
1860+
}
1861+
arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
1862+
return arr;
1863+
},
1864+
18411865
/**
18421866
* Return a function that will be called with the given context
18431867
*/
@@ -3062,6 +3086,7 @@ window.ionic = {
30623086

30633087
var ReorderDrag = function(opts) {
30643088
this.dragThresholdY = opts.dragThresholdY || 0;
3089+
this.onReorder = opts.onReorder;
30653090
this.el = opts.el;
30663091
};
30673092

@@ -3074,6 +3099,8 @@ window.ionic = {
30743099
// Grab the starting Y point for the item
30753100
var offsetY = this.el.offsetTop;//parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
30763101

3102+
var startIndex = ionic.DomUtil.getChildIndex(this.el, this.el.nodeName.toLowerCase());
3103+
30773104
var placeholder = this.el.cloneNode(true);
30783105

30793106
placeholder.classList.add(ITEM_PLACEHOLDER_CLASS);
@@ -3082,9 +3109,9 @@ window.ionic = {
30823109

30833110
this.el.classList.add(ITEM_REORDERING_CLASS);
30843111

3085-
30863112
this._currentDrag = {
30873113
startOffsetTop: offsetY,
3114+
startIndex: startIndex,
30883115
placeholder: placeholder
30893116
};
30903117
};
@@ -3150,10 +3177,12 @@ window.ionic = {
31503177
this.el.classList.remove(ITEM_REORDERING_CLASS);
31513178
this.el.style.top = 0;
31523179

3153-
var finalPosition = ionic.DomUtil.getChildIndex(placeholder);
3180+
var finalPosition = ionic.DomUtil.getChildIndex(placeholder, placeholder.nodeName.toLowerCase());
31543181
placeholder.parentNode.insertBefore(this.el, placeholder);
31553182
placeholder.parentNode.removeChild(placeholder);
31563183

3184+
this.onReorder && this.onReorder(this.el, this._currentDrag.startIndex, finalPosition);
3185+
31573186
this._currentDrag = null;
31583187
doneCallback && doneCallback();
31593188
};
@@ -3169,6 +3198,7 @@ window.ionic = {
31693198
var _this = this;
31703199

31713200
opts = ionic.extend({
3201+
onReorder: function(el, oldIndex, newIndex) {},
31723202
virtualRemoveThreshold: -200,
31733203
virtualAddThreshold: 200
31743204
}, opts);
@@ -3292,7 +3322,12 @@ window.ionic = {
32923322
var item = this._getItem(e.target);
32933323

32943324
if(item) {
3295-
this._dragOp = new ReorderDrag({ el: item });
3325+
this._dragOp = new ReorderDrag({
3326+
el: item,
3327+
onReorder: function(el, start, end) {
3328+
_this.onReorder && _this.onReorder(el, start, end);
3329+
}
3330+
});
32963331
this._dragOp.start(e);
32973332
e.preventDefault();
32983333
return;

‎js/ext/angular/src/directive/ionicList.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,7 @@ angular.module('ionic.ui.list', ['ngAnimate'])
163163
hasPullToRefresh: '@',
164164
onRefresh: '&',
165165
onRefreshOpening: '&',
166+
onReorder: '&',
166167
refreshComplete: '='
167168
},
168169

@@ -191,6 +192,12 @@ angular.module('ionic.ui.list', ['ngAnimate'])
191192
onRefreshOpening: function(amt) {
192193
$scope.onRefreshOpening({amount: amt});
193194
$scope.$parent.$broadcast('scroll.onRefreshOpening', amt);
195+
},
196+
onReorder: function(el, oldIndex, newIndex) {
197+
console.log('Moved', el,oldIndex,newIndex);
198+
$scope.$apply(function() {
199+
$scope.onReorder({el: el, start: oldIndex, end: newIndex});
200+
});
194201
}
195202
});
196203

‎js/ext/angular/test/tabs.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ <h1 class="title">Tasks</h1>
6060
<button class="button button-clear button-primary" ng-click="isEditingItems = !isEditingItems">Edit</button>
6161
</header>
6262
<content has-header="true" has-footer="true" scroll="false">
63-
<list on-refresh="onRefresh()" is-editing="isEditingItems" animation="fade-out" delete-icon="icon ion-minus-circled" reorder-icon="icon ion-navicon">
63+
<list on-refresh="onRefresh()" on-reorder="onReorder(el, start, end)" is-editing="isEditingItems" animation="fade-out" delete-icon="icon ion-minus-circled" reorder-icon="icon ion-navicon">
6464
<refresher>
6565
<div id="refresh-content">
6666
Refreshing
@@ -168,6 +168,10 @@ <h1 class="title">New Task</h1>
168168
item.isCompleted = true;
169169
};
170170

171+
$scope.onReorder = function(el, start, end) {
172+
ionic.Utils.arrayMove($scope.items, start, end);
173+
};
174+
171175
$scope.onRefresh = function() {
172176
console.log('ON REFRESH');
173177
}
@@ -181,7 +185,7 @@ <h1 class="title">New Task</h1>
181185
};
182186

183187
// Create the items
184-
for(var i = 0; i < 30; i++) {
188+
for(var i = 0; i < 5; i++) {
185189
$scope.items.push({
186190
title: 'Task ' + (i + 1),
187191
buttons: [{

‎js/utils/dom.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,20 @@
2323
return null
2424
},
2525

26-
getChildIndex: function(element) {
26+
getChildIndex: function(element, type) {
27+
if(type) {
28+
var ch = element.parentNode.children;
29+
var c;
30+
for(var i = 0, k = 0, j = ch.length; i < j; i++) {
31+
c = ch[i];
32+
if(c.nodeName && c.nodeName.toLowerCase() == type) {
33+
if(c == element) {
34+
return k;
35+
}
36+
k++;
37+
}
38+
}
39+
}
2740
return Array.prototype.slice.call(element.parentNode.children).indexOf(element);
2841
},
2942
swapNodes: function(src, dest) {

‎js/utils/utils.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,17 @@
77
*/
88
ionic.Utils = {
99

10+
arrayMove: function (arr, old_index, new_index) {
11+
if (new_index >= arr.length) {
12+
var k = new_index - arr.length;
13+
while ((k--) + 1) {
14+
arr.push(undefined);
15+
}
16+
}
17+
arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
18+
return arr;
19+
},
20+
1021
/**
1122
* Return a function that will be called with the given context
1223
*/

‎js/views/listView.js‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,7 @@
151151

152152
var ReorderDrag = function(opts) {
153153
this.dragThresholdY = opts.dragThresholdY || 0;
154+
this.onReorder = opts.onReorder;
154155
this.el = opts.el;
155156
};
156157

@@ -163,6 +164,8 @@
163164
// Grab the starting Y point for the item
164165
var offsetY = this.el.offsetTop;//parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
165166

167+
var startIndex = ionic.DomUtil.getChildIndex(this.el, this.el.nodeName.toLowerCase());
168+
166169
var placeholder = this.el.cloneNode(true);
167170

168171
placeholder.classList.add(ITEM_PLACEHOLDER_CLASS);
@@ -171,9 +174,9 @@
171174

172175
this.el.classList.add(ITEM_REORDERING_CLASS);
173176

174-
175177
this._currentDrag = {
176178
startOffsetTop: offsetY,
179+
startIndex: startIndex,
177180
placeholder: placeholder
178181
};
179182
};
@@ -239,10 +242,12 @@
239242
this.el.classList.remove(ITEM_REORDERING_CLASS);
240243
this.el.style.top = 0;
241244

242-
var finalPosition = ionic.DomUtil.getChildIndex(placeholder);
245+
var finalPosition = ionic.DomUtil.getChildIndex(placeholder, placeholder.nodeName.toLowerCase());
243246
placeholder.parentNode.insertBefore(this.el, placeholder);
244247
placeholder.parentNode.removeChild(placeholder);
245248

249+
this.onReorder && this.onReorder(this.el, this._currentDrag.startIndex, finalPosition);
250+
246251
this._currentDrag = null;
247252
doneCallback && doneCallback();
248253
};
@@ -258,6 +263,7 @@
258263
var _this = this;
259264

260265
opts = ionic.extend({
266+
onReorder: function(el, oldIndex, newIndex) {},
261267
virtualRemoveThreshold: -200,
262268
virtualAddThreshold: 200
263269
}, opts);
@@ -381,7 +387,12 @@
381387
var item = this._getItem(e.target);
382388

383389
if(item) {
384-
this._dragOp = new ReorderDrag({ el: item });
390+
this._dragOp = new ReorderDrag({
391+
el: item,
392+
onReorder: function(el, start, end) {
393+
_this.onReorder && _this.onReorder(el, start, end);
394+
}
395+
});
385396
this._dragOp.start(e);
386397
e.preventDefault();
387398
return;

0 commit comments

Comments
 (0)