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

Fixed #172 - list item reorder persistence

Browse Source
This commit is contained in:
Max Lynch
2013-11-22 10:39:31 -06:00
parent a04dc02dee
commit 0d5bd759a1
7 changed files with 98 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
dist/js/ionic-angular.js vendored
View File

@@ -24851,6 +24851,7 @@ angular.module('ionic.ui.list', ['ngAnimate'])
hasPullToRefresh: '@',
onRefresh: '&',
onRefreshOpening: '&',
onReorder: '&',
refreshComplete: '='
},
@@ -24879,6 +24880,12 @@ angular.module('ionic.ui.list', ['ngAnimate'])
onRefreshOpening: function(amt) {
$scope.onRefreshOpening({amount: amt});
$scope.$parent.$broadcast('scroll.onRefreshOpening', amt);
},
onReorder: function(el, oldIndex, newIndex) {
console.log('Moved', el,oldIndex,newIndex);
$scope.$apply(function() {
$scope.onReorder({el: el, start: oldIndex, end: newIndex});
});
}
});

43
dist/js/ionic.js vendored
View File

@@ -158,7 +158,20 @@ window.ionic = {
return null
},
getChildIndex: function(element) {
getChildIndex: function(element, type) {
if(type) {
var ch = element.parentNode.children;
var c;
for(var i = 0, k = 0, j = ch.length; i < j; i++) {
c = ch[i];
if(c.nodeName && c.nodeName.toLowerCase() == type) {
if(c == element) {
return k;
}
k++;
}
}
}
return Array.prototype.slice.call(element.parentNode.children).indexOf(element);
},
swapNodes: function(src, dest) {
@@ -1838,6 +1851,17 @@ window.ionic = {
*/
ionic.Utils = {
arrayMove: function (arr, old_index, new_index) {
if (new_index >= arr.length) {
var k = new_index - arr.length;
while ((k--) + 1) {
arr.push(undefined);
}
}
arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
return arr;
},
/**
* Return a function that will be called with the given context
*/
@@ -3062,6 +3086,7 @@ window.ionic = {
var ReorderDrag = function(opts) {
this.dragThresholdY = opts.dragThresholdY || 0;
this.onReorder = opts.onReorder;
this.el = opts.el;
};
@@ -3074,6 +3099,8 @@ window.ionic = {
// Grab the starting Y point for the item
var offsetY = this.el.offsetTop;//parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
var startIndex = ionic.DomUtil.getChildIndex(this.el, this.el.nodeName.toLowerCase());
var placeholder = this.el.cloneNode(true);
placeholder.classList.add(ITEM_PLACEHOLDER_CLASS);
@@ -3082,9 +3109,9 @@ window.ionic = {
this.el.classList.add(ITEM_REORDERING_CLASS);
this._currentDrag = {
startOffsetTop: offsetY,
startIndex: startIndex,
placeholder: placeholder
};
};
@@ -3150,10 +3177,12 @@ window.ionic = {
this.el.classList.remove(ITEM_REORDERING_CLASS);
this.el.style.top = 0;
var finalPosition = ionic.DomUtil.getChildIndex(placeholder);
var finalPosition = ionic.DomUtil.getChildIndex(placeholder, placeholder.nodeName.toLowerCase());
placeholder.parentNode.insertBefore(this.el, placeholder);
placeholder.parentNode.removeChild(placeholder);
this.onReorder && this.onReorder(this.el, this._currentDrag.startIndex, finalPosition);
this._currentDrag = null;
doneCallback && doneCallback();
};
@@ -3169,6 +3198,7 @@ window.ionic = {
var _this = this;
opts = ionic.extend({
onReorder: function(el, oldIndex, newIndex) {},
virtualRemoveThreshold: -200,
virtualAddThreshold: 200
}, opts);
@@ -3292,7 +3322,12 @@ window.ionic = {
var item = this._getItem(e.target);
if(item) {
this._dragOp = new ReorderDrag({ el: item });
this._dragOp = new ReorderDrag({
el: item,
onReorder: function(el, start, end) {
_this.onReorder && _this.onReorder(el, start, end);
}
});
this._dragOp.start(e);
e.preventDefault();
return;

7
js/ext/angular/src/directive/ionicList.js vendored
View File

@@ -163,6 +163,7 @@ angular.module('ionic.ui.list', ['ngAnimate'])
hasPullToRefresh: '@',
onRefresh: '&',
onRefreshOpening: '&',
onReorder: '&',
refreshComplete: '='
},
@@ -191,6 +192,12 @@ angular.module('ionic.ui.list', ['ngAnimate'])
onRefreshOpening: function(amt) {
$scope.onRefreshOpening({amount: amt});
$scope.$parent.$broadcast('scroll.onRefreshOpening', amt);
},
onReorder: function(el, oldIndex, newIndex) {
console.log('Moved', el,oldIndex,newIndex);
$scope.$apply(function() {
$scope.onReorder({el: el, start: oldIndex, end: newIndex});
});
}
});

8
js/ext/angular/test/tabs.html
View File

@@ -60,7 +60,7 @@
<button class="button button-clear button-primary" ng-click="isEditingItems = !isEditingItems">Edit</button>
</header>
<content has-header="true" has-footer="true" scroll="false">
<list on-refresh="onRefresh()" is-editing="isEditingItems" animation="fade-out" delete-icon="icon ion-minus-circled" reorder-icon="icon ion-navicon">
<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">
<refresher>
<div id="refresh-content">
Refreshing
@@ -168,6 +168,10 @@
item.isCompleted = true;
};
$scope.onReorder = function(el, start, end) {
ionic.Utils.arrayMove($scope.items, start, end);
};
$scope.onRefresh = function() {
console.log('ON REFRESH');
}
@@ -181,7 +185,7 @@
};
// Create the items
for(var i = 0; i < 30; i++) {
for(var i = 0; i < 5; i++) {
$scope.items.push({
title: 'Task ' + (i + 1),
buttons: [{

15
js/utils/dom.js
View File

@@ -23,7 +23,20 @@
return null
},
getChildIndex: function(element) {
getChildIndex: function(element, type) {
if(type) {
var ch = element.parentNode.children;
var c;
for(var i = 0, k = 0, j = ch.length; i < j; i++) {
c = ch[i];
if(c.nodeName && c.nodeName.toLowerCase() == type) {
if(c == element) {
return k;
}
k++;
}
}
}
return Array.prototype.slice.call(element.parentNode.children).indexOf(element);
},
swapNodes: function(src, dest) {

11
js/utils/utils.js
View File

@@ -7,6 +7,17 @@
*/
ionic.Utils = {
arrayMove: function (arr, old_index, new_index) {
if (new_index >= arr.length) {
var k = new_index - arr.length;
while ((k--) + 1) {
arr.push(undefined);
}
}
arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
return arr;
},
/**
* Return a function that will be called with the given context
*/

17
js/views/listView.js
View File

@@ -151,6 +151,7 @@
var ReorderDrag = function(opts) {
this.dragThresholdY = opts.dragThresholdY || 0;
this.onReorder = opts.onReorder;
this.el = opts.el;
};
@@ -163,6 +164,8 @@
// Grab the starting Y point for the item
var offsetY = this.el.offsetTop;//parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
var startIndex = ionic.DomUtil.getChildIndex(this.el, this.el.nodeName.toLowerCase());
var placeholder = this.el.cloneNode(true);
placeholder.classList.add(ITEM_PLACEHOLDER_CLASS);
@@ -171,9 +174,9 @@
this.el.classList.add(ITEM_REORDERING_CLASS);
this._currentDrag = {
startOffsetTop: offsetY,
startIndex: startIndex,
placeholder: placeholder
};
};
@@ -239,10 +242,12 @@
this.el.classList.remove(ITEM_REORDERING_CLASS);
this.el.style.top = 0;
var finalPosition = ionic.DomUtil.getChildIndex(placeholder);
var finalPosition = ionic.DomUtil.getChildIndex(placeholder, placeholder.nodeName.toLowerCase());
placeholder.parentNode.insertBefore(this.el, placeholder);
placeholder.parentNode.removeChild(placeholder);
this.onReorder && this.onReorder(this.el, this._currentDrag.startIndex, finalPosition);
this._currentDrag = null;
doneCallback && doneCallback();
};
@@ -258,6 +263,7 @@
var _this = this;
opts = ionic.extend({
onReorder: function(el, oldIndex, newIndex) {},
virtualRemoveThreshold: -200,
virtualAddThreshold: 200
}, opts);
@@ -381,7 +387,12 @@
var item = this._getItem(e.target);
if(item) {
this._dragOp = new ReorderDrag({ el: item });
this._dragOp = new ReorderDrag({
el: item,
onReorder: function(el, start, end) {
_this.onReorder && _this.onReorder(el, start, end);
}
});
this._dragOp.start(e);
e.preventDefault();
return;