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

Removed listViewScroll, renmaed to new listView.js

Browse Source
This commit is contained in:
Max Lynch
2013-11-07 11:23:00 -06:00
parent e8aa4a859b
commit afba3f1deb
4 changed files with 122 additions and 1083 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
js/views/listView.js
View File

@ -1,6 +1,13 @@
(function(ionic) {
'use strict';
var ITEM_CLASS = 'item';
var ITEM_CONTENT_CLASS = 'item-content';
var ITEM_SLIDING_CLASS = 'item-sliding';
var ITEM_OPTIONS_CLASS = 'item-options';
var ITEM_PLACEHOLDER_CLASS = 'item-placeholder';
var ITEM_REORDERING_CLASS = 'item-reordering';
var ITEM_DRAG_CLASS = 'item-drag';
var DragOp = function() {};
DragOp.prototype = {
@ -138,10 +145,10 @@
SlideDrag.prototype.start = function(e) {
var content, buttons, offsetX, buttonsWidth;
if(e.target.classList.contains('list-item-content')) {
if(e.target.classList.contains(ITEM_CONTENT_CLASS)) {
content = e.target;
} else if(e.target.classList.contains('list-item')) {
content = e.target.querySelector('.list-item-content');
} else if(e.target.classList.contains(ITEM_CLASS)) {
content = e.target.querySelector('.' + ITEM_CONTENT_CLASS);
}
// If we don't have a content area as one of our children (or ourselves), skip
@ -150,13 +157,13 @@
}
// Make sure we aren't animating as we slide
content.classList.remove('list-item-sliding');
content.classList.remove(ITEM_SLIDING_CLASS);
// Grab the starting X point for the item (for example, so we can tell whether it is open or closed to start)
offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
// Grab the buttons
buttons = content.parentNode.querySelector('.list-item-buttons');
buttons = content.parentNode.querySelector('.' + ITEM_OPTIONS_CLASS);
if(!buttons) {
return;
}
@ -235,7 +242,7 @@
var onRestingAnimationEnd = function(e) {
if(e.propertyName == '-webkit-transform') {
content.classList.remove('list-item-sliding');
content.classList.remove(ITEM_SLIDING_CLASS);
}
e.target.removeEventListener('webkitTransitionEnd', onRestingAnimationEnd);
};
@ -243,7 +250,7 @@
window.requestAnimationFrame(function() {
var currentX = parseFloat(_this._currentDrag.content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
if(currentX !== restingPoint) {
_this._currentDrag.content.classList.add('list-item-sliding');
_this._currentDrag.content.classList.add(ITEM_SLIDING_CLASS);
_this._currentDrag.content.addEventListener('webkitTransitionEnd', onRestingAnimationEnd);
}
_this._currentDrag.content.style.webkitTransform = 'translate3d(' + restingPoint + 'px, 0, 0)';
@ -273,11 +280,11 @@
var placeholder = this.el.cloneNode(true);
placeholder.classList.add('list-item-placeholder');
placeholder.classList.add(ITEM_PLACEHOLDER_CLASS);
this.el.parentNode.insertBefore(placeholder, this.el);
this.el.classList.add('list-item-reordering');
this.el.classList.add(ITEM_REORDERING_CLASS);
this._currentDrag = {
@ -344,7 +351,7 @@
var placeholder = this._currentDrag.placeholder;
// Reposition the element
this.el.classList.remove('list-item-reordering');
this.el.classList.remove(ITEM_REORDERING_CLASS);
this.el.style.top = 0;
var finalPosition = ionic.DomUtil.getChildIndex(placeholder);
@ -361,24 +368,38 @@
* The ListView handles a list of items. It will process drag animations, edit mode,
* and other operations that are common on mobile lists or table views.
*/
ionic.views.List = function(opts) {
var _this = this;
ionic.views.ListView = ionic.views.Scroll.inherit({
initialize: function(opts) {
var _this = this;
this.el = opts.el;
opts = ionic.extend({
virtualRemoveThreshold: -200,
virtualAddThreshold: 200
}, opts);
// The amount of dragging required to start sliding the element over (in pixels)
this.dragThresholdX = opts.dragThresholdX || 10;
ionic.extend(this, opts);
this.onRefresh = opts.onRefresh || function() {};
this.onRefreshOpening = opts.onRefreshOpening || function() {};
this.onRefreshHolding = opts.onRefreshHolding || function() {};
// Start the drag states
this._initDrag();
if(!this.itemHeight && this.listEl) {
this.itemHeight = this.listEl.children[0] && parseInt(this.listEl.children[0].style.height);
}
};
ionic.views.ListView.__super__.initialize.call(this, opts);
ionic.views.List.prototype = {
this.onRefresh = opts.onRefresh || function() {};
this.onRefreshOpening = opts.onRefreshOpening || function() {};
this.onRefreshHolding = opts.onRefreshHolding || function() {};
// Start the drag states
this._initDrag();
// Listen for drag and release events
window.ionic.onGesture('drag', function(e) {
_this._handleDrag(e);
}, this.el);
window.ionic.onGesture('release', function(e) {
_this._handleEndDrag(e);
}, this.el);
},
/**
* Called to tell the list to stop refreshing. This is useful
* if you are refreshing the list and are done with refreshing.
@ -388,15 +409,75 @@
refresher.style.height = '0px';
},
/**
* If we scrolled and have virtual mode enabled, compute the window
* of active elements in order to figure out the viewport to render.
*/
didScroll: function(e) {
if(this.isVirtual) {
var itemHeight = this.itemHeight;
// TODO: This would be inaccurate if we are windowed
var totalItems = this.listEl.children.length;
// Grab the total height of the list
var scrollHeight = e.target.scrollHeight;
// Get the viewport height
var viewportHeight = this.el.parentNode.offsetHeight;
// scrollTop is the current scroll position
var scrollTop = e.scrollTop;
// High water is the pixel position of the first element to include (everything before
// that will be removed)
var highWater = Math.max(0, e.scrollTop + this.virtualRemoveThreshold);
// Low water is the pixel position of the last element to include (everything after
// that will be removed)
var lowWater = Math.min(scrollHeight, Math.abs(e.scrollTop) + viewportHeight + this.virtualAddThreshold);
// Compute how many items per viewport size can show
var itemsPerViewport = Math.floor((lowWater - highWater) / itemHeight);
// Get the first and last elements in the list based on how many can fit
// between the pixel range of lowWater and highWater
var first = parseInt(Math.abs(highWater / itemHeight));
var last = parseInt(Math.abs(lowWater / itemHeight));
// Get the items we need to remove
this._virtualItemsToRemove = Array.prototype.slice.call(this.listEl.children, 0, first);
// Grab the nodes we will be showing
var nodes = Array.prototype.slice.call(this.listEl.children, first, first + itemsPerViewport);
this.renderViewport && this.renderViewport(highWater, lowWater, first, last);
}
},
didStopScrolling: function(e) {
if(this.isVirtual) {
for(var i = 0; i < this._virtualItemsToRemove.length; i++) {
var el = this._virtualItemsToRemove[i];
//el.parentNode.removeChild(el);
this.didHideItem && this.didHideItem(i);
}
// Once scrolling stops, check if we need to remove old items
}
},
_initDrag: function() {
this._isDragging = false;
this._dragOp = null;
ionic.views.ListView.__super__._initDrag.call(this);
//this._isDragging = false;
//this._dragOp = null;
},
// Return the list item from the given target
_getItem: function(target) {
while(target) {
if(target.classList.contains('list-item')) {
if(target.classList.contains(ITEM_CLASS)) {
return target;
}
target = target.parentNode;
@ -406,14 +487,15 @@
_startDrag: function(e) {
ionic.views.ListView.__super__._startDrag.call(this, e);
var _this = this;
this._isDragging = false;
return false;
// Check if this is a reorder drag
if(ionic.DomUtil.getParentOrSelfWithClass(e.target, 'list-item-drag') && (e.gesture.direction == 'up' || e.gesture.direction == 'down')) {
if(ionic.DomUtil.getParentOrSelfWithClass(e.target, ITEM_DRAG_CLASS) && (e.gesture.direction == 'up' || e.gesture.direction == 'down')) {
var item = this._getItem(e.target);
if(item) {
@ -421,8 +503,9 @@
this._dragOp.start(e);
}
}
// Check if this is a "pull down" drag for pull to refresh
/*
else if(e.gesture.direction == 'down') {
this._dragOp = new PullToRefreshDrag({
el: this.el,
@ -438,18 +521,20 @@
});
this._dragOp.start(e);
}
*/
// Or check if this is a swipe to the side drag
else if(e.gesture.direction == 'left' || e.gesture.direction == 'right') {
this._dragOp = new SlideDrag({ el: this.el });
this._dragOp.start(e);
e.preventDefault();
}
},
_handleEndDrag: function(e) {
ionic.views.ListView.__super__._handleEndDrag.call(this, e);
var _this = this;
return false;
if(!this._dragOp) {
this._initDrag();
@ -465,16 +550,17 @@
* Process the drag event to move the item to the left or right.
*/
_handleDrag: function(e) {
ionic.views.ListView.__super__._handleDrag.call(this, e);
var _this = this, content, buttons;
return false;
if(!this._dragOp) {
e.preventDefault();
this._startDrag(e);
if(!this._dragOp) { return; }
}
this._dragOp.drag(e);
}
};
});
})(ionic);