javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 06:57:02 +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

481
dist/js/ionic.js vendored
View File

@ -2629,487 +2629,6 @@ window.ionic = {
} }
}; };
})(ionic);
;
(function(ionic) {
'use strict';
var DragOp = function() {};
DragOp.prototype = {
start: function(e) {
},
drag: function(e) {
},
end: function(e) {
}
};
/**
* The Pull To Refresh drag operation handles the well-known
* "pull to refresh" concept seen on various apps. This lets
* the user indicate they want to refresh a given list by dragging
* down.
*
* @param {object} opts the options for the pull to refresh drag.
*/
var PullToRefreshDrag = function(opts) {
this.dragThresholdY = opts.dragThresholdY || 10;
this.onRefreshOpening = opts.onRefreshOpening || function() {};
this.onRefresh = opts.onRefresh || function() {};
this.onRefreshHolding = opts.onRefreshHolding || function() {};
this.el = opts.el;
};
PullToRefreshDrag.prototype = new DragOp();
PullToRefreshDrag.prototype.start = function(e) {
var content, refresher;
content = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'list');
if(!content) { return; }
// Grab the refresher element that will show as you drag down
refresher = content.querySelector('.list-refresher');
if(!refresher) {
refresher = this._injectRefresher();
}
// Disable animations while dragging
refresher.classList.remove('list-refreshing');
this._currentDrag = {
refresher: refresher,
content: content,
isHolding: false
};
};
PullToRefreshDrag.prototype._injectRefresher = function() {
var refresher = document.createElement('div');
refresher.className = 'list-refresher';
this.el.insertBefore(refresher, this.el.firstChild);
return refresher;
};
PullToRefreshDrag.prototype.drag = function(e) {
var _this = this;
window.requestAnimationFrame(function() {
// We really aren't dragging
if(!_this._currentDrag) {
return;
}
// Check if we should start dragging. Check if we've dragged past the threshold,
// or we are starting from the open state.
if(!_this._isDragging && Math.abs(e.gesture.deltaY) > _this.dragThresholdY) {
_this._isDragging = true;
}
if(_this._isDragging) {
var refresher = _this._currentDrag.refresher;
var currentHeight = parseFloat(refresher.style.height);
refresher.style.height = e.gesture.deltaY + 'px';
var newHeight = parseFloat(refresher.style.height);
var firstChildHeight = parseFloat(refresher.firstElementChild.offsetHeight);
if(newHeight > firstChildHeight && !_this._currentDrag.isHolding) {
// The user is holding the refresh but hasn't let go of it
_this._currentDrag.isHolding = true;
_this.onRefreshHolding && _this.onRefreshHolding();
} else {
// Indicate what ratio of opening the list refresh drag is
var ratio = Math.min(1, newHeight / firstChildHeight);
_this.onRefreshOpening && _this.onRefreshOpening(ratio);
}
}
});
};
PullToRefreshDrag.prototype.end = function(e, doneCallback) {
var _this = this;
// There is no drag, just end immediately
if(!this._currentDrag) {
return;
}
var refresher = this._currentDrag.refresher;
var currentHeight = parseFloat(refresher.style.height);
refresher.style.height = e.gesture.deltaY + 'px';
var firstChildHeight = parseFloat(refresher.firstElementChild.offsetHeight);
if(currentHeight > firstChildHeight) {
//this.refreshing();
refresher.classList.add('list-refreshing');
refresher.style.height = firstChildHeight + 'px';
this.onRefresh && _this.onRefresh();
} else {
// Enable animations
refresher.classList.add('list-refreshing');
refresher.style.height = '0px';
this.onRefresh && _this.onRefresh();
}
this._currentDrag = null;
doneCallback && doneCallback();
};
var SlideDrag = function(opts) {
this.dragThresholdX = opts.dragThresholdX || 10;
this.el = opts.el;
};
SlideDrag.prototype = new DragOp();
SlideDrag.prototype.start = function(e) {
var content, buttons, offsetX, buttonsWidth;
if(e.target.classList.contains('list-item-content')) {
content = e.target;
} else if(e.target.classList.contains('list-item')) {
content = e.target.querySelector('.list-item-content');
}
// If we don't have a content area as one of our children (or ourselves), skip
if(!content) {
return;
}
// Make sure we aren't animating as we slide
content.classList.remove('list-item-sliding');
// 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');
if(!buttons) {
return;
}
buttonsWidth = buttons.offsetWidth;
this._currentDrag = {
buttonsWidth: buttonsWidth,
content: content,
startOffsetX: offsetX
};
};
SlideDrag.prototype.drag = function(e) {
var _this = this, buttonsWidth;
window.requestAnimationFrame(function() {
// We really aren't dragging
if(!_this._currentDrag) {
return;
}
// Check if we should start dragging. Check if we've dragged past the threshold,
// or we are starting from the open state.
if(!_this._isDragging &&
((Math.abs(e.gesture.deltaX) > _this.dragThresholdX) ||
(Math.abs(_this._currentDrag.startOffsetX) > 0)))
{
_this._isDragging = true;
}
if(_this._isDragging) {
buttonsWidth = _this._currentDrag.buttonsWidth;
// Grab the new X point, capping it at zero
var newX = Math.min(0, _this._currentDrag.startOffsetX + e.gesture.deltaX);
// If the new X position is past the buttons, we need to slow down the drag (rubber band style)
if(newX < -buttonsWidth) {
// Calculate the new X position, capped at the top of the buttons
newX = Math.min(-buttonsWidth, -buttonsWidth + (((e.gesture.deltaX + buttonsWidth) * 0.4)));
}
_this._currentDrag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
}
});
};
SlideDrag.prototype.end = function(e, doneCallback) {
var _this = this;
// There is no drag, just end immediately
if(!this._currentDrag) {
doneCallback && doneCallback();
return;
}
// If we are currently dragging, we want to snap back into place
// The final resting point X will be the width of the exposed buttons
var restingPoint = -this._currentDrag.buttonsWidth;
// Check if the drag didn't clear the buttons mid-point
// and we aren't moving fast enough to swipe open
if(e.gesture.deltaX > -(this._currentDrag.buttonsWidth/2)) {
// If we are going left but too slow, or going right, go back to resting
if(e.gesture.direction == "left" && Math.abs(e.gesture.velocityX) < 0.3) {
restingPoint = 0;
} else if(e.gesture.direction == "right") {
restingPoint = 0;
}
}
var content = this._currentDrag.content;
var onRestingAnimationEnd = function(e) {
if(e.propertyName == '-webkit-transform') {
content.classList.remove('list-item-sliding');
}
e.target.removeEventListener('webkitTransitionEnd', onRestingAnimationEnd);
};
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.addEventListener('webkitTransitionEnd', onRestingAnimationEnd);
}
_this._currentDrag.content.style.webkitTransform = 'translate3d(' + restingPoint + 'px, 0, 0)';
// Kill the current drag
this._currentDrag = null;
// We are done, notify caller
doneCallback && doneCallback();
});
};
var ReorderDrag = function(opts) {
this.dragThresholdY = opts.dragThresholdY || 0;
this.el = opts.el;
};
ReorderDrag.prototype = new DragOp();
ReorderDrag.prototype.start = function(e) {
var content;
// Grab the starting Y point for the item
var offsetY = this.el.offsetTop;//parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
var placeholder = this.el.cloneNode(true);
placeholder.classList.add('list-item-placeholder');
this.el.parentNode.insertBefore(placeholder, this.el);
this.el.classList.add('list-item-reordering');
this._currentDrag = {
startOffsetTop: offsetY,
placeholder: placeholder
};
};
ReorderDrag.prototype.drag = function(e) {
var _this = this;
window.requestAnimationFrame(function() {
// We really aren't dragging
if(!_this._currentDrag) {
return;
}
// Check if we should start dragging. Check if we've dragged past the threshold,
// or we are starting from the open state.
if(!_this._isDragging && Math.abs(e.gesture.deltaY) > _this.dragThresholdY) {
_this._isDragging = true;
}
if(_this._isDragging) {
var newY = _this._currentDrag.startOffsetTop + e.gesture.deltaY;
_this.el.style.top = newY + 'px';
_this._currentDrag.currentY = newY;
_this._reorderItems();
}
});
};
// When an item is dragged, we need to reorder any items for sorting purposes
ReorderDrag.prototype._reorderItems = function() {
var placeholder = this._currentDrag.placeholder;
var siblings = Array.prototype.slice.call(this._currentDrag.placeholder.parentNode.children);
// Remove the floating element from the child search list
siblings.splice(siblings.indexOf(this.el), 1);
var index = siblings.indexOf(this._currentDrag.placeholder);
var topSibling = siblings[Math.max(0, index - 1)];
var bottomSibling = siblings[Math.min(siblings.length, index+1)];
var thisOffsetTop = this._currentDrag.currentY;// + this._currentDrag.startOffsetTop;
if(topSibling && (thisOffsetTop < topSibling.offsetTop + topSibling.offsetHeight/2)) {
ionic.DomUtil.swapNodes(this._currentDrag.placeholder, topSibling);
return index - 1;
} else if(bottomSibling && thisOffsetTop > (bottomSibling.offsetTop + bottomSibling.offsetHeight/2)) {
ionic.DomUtil.swapNodes(bottomSibling, this._currentDrag.placeholder);
return index + 1;
}
};
ReorderDrag.prototype.end = function(e, doneCallback) {
if(!this._currentDrag) {
doneCallback && doneCallback();
return;
}
var placeholder = this._currentDrag.placeholder;
// Reposition the element
this.el.classList.remove('list-item-reordering');
this.el.style.top = 0;
var finalPosition = ionic.DomUtil.getChildIndex(placeholder);
placeholder.parentNode.insertBefore(this.el, placeholder);
placeholder.parentNode.removeChild(placeholder);
this._currentDrag = null;
doneCallback && doneCallback();
};
/**
* 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;
this.el = opts.el;
// The amount of dragging required to start sliding the element over (in pixels)
this.dragThresholdX = opts.dragThresholdX || 10;
this.onRefresh = opts.onRefresh || function() {};
this.onRefreshOpening = opts.onRefreshOpening || function() {};
this.onRefreshHolding = opts.onRefreshHolding || function() {};
// Start the drag states
this._initDrag();
};
ionic.views.List.prototype = {
/**
* Called to tell the list to stop refreshing. This is useful
* if you are refreshing the list and are done with refreshing.
*/
stopRefreshing: function() {
var refresher = this.el.querySelector('.list-refresher');
refresher.style.height = '0px';
},
_initDrag: function() {
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')) {
return target;
}
target = target.parentNode;
}
return null;
},
_startDrag: function(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')) {
var item = this._getItem(e.target);
if(item) {
this._dragOp = new ReorderDrag({ el: item });
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,
onRefresh: function() {
_this.onRefresh && _this.onRefresh();
},
onRefreshHolding: function() {
_this.onRefreshHolding && _this.onRefreshHolding();
},
onRefreshOpening: function(ratio) {
_this.onRefreshOpening && _this.onRefreshOpening(ratio);
}
});
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);
}
},
_handleEndDrag: function(e) {
var _this = this;
return false;
if(!this._dragOp) {
this._initDrag();
return;
}
this._dragOp.end(e, function() {
_this._initDrag();
});
},
/**
* Process the drag event to move the item to the left or right.
*/
_handleDrag: function(e) {
var _this = this, content, buttons;
return false;
if(!this._dragOp) {
this._startDrag(e);
if(!this._dragOp) { return; }
}
this._dragOp.drag(e);
}
};
})(ionic); })(ionic);
; ;
(function(ionic) { (function(ionic) {

6
js/ext/angular/test/list.html
View File

@ -6,9 +6,9 @@
<!-- Sets initial viewport load and disables zooming --> <!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../../../dist/css/ionic.css"> <link rel="stylesheet" href="../../../../dist/css/ionic.css">
<script src="/vendor/angular/angular-1.2.0rc2.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
<script src="/vendor/angular/angular-touch.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-touch.js"></script>
<script src="/vendor/angular/angular-animate.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-animate.js"></script>
<style> <style>
.my-repeat-animation > .ng-enter, .my-repeat-animation > .ng-enter,
.my-repeat-animation > .ng-leave, .my-repeat-animation > .ng-leave,

138
js/views/listView.js
View File

@ -1,6 +1,13 @@
(function(ionic) { (function(ionic) {
'use strict'; '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() {}; var DragOp = function() {};
DragOp.prototype = { DragOp.prototype = {
@ -138,10 +145,10 @@
SlideDrag.prototype.start = function(e) { SlideDrag.prototype.start = function(e) {
var content, buttons, offsetX, buttonsWidth; var content, buttons, offsetX, buttonsWidth;
if(e.target.classList.contains('list-item-content')) { if(e.target.classList.contains(ITEM_CONTENT_CLASS)) {
content = e.target; content = e.target;
} else if(e.target.classList.contains('list-item')) { } else if(e.target.classList.contains(ITEM_CLASS)) {
content = e.target.querySelector('.list-item-content'); content = e.target.querySelector('.' + ITEM_CONTENT_CLASS);
} }
// If we don't have a content area as one of our children (or ourselves), skip // 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 // 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) // 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; offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
// Grab the buttons // Grab the buttons
buttons = content.parentNode.querySelector('.list-item-buttons'); buttons = content.parentNode.querySelector('.' + ITEM_OPTIONS_CLASS);
if(!buttons) { if(!buttons) {
return; return;
} }
@ -235,7 +242,7 @@
var onRestingAnimationEnd = function(e) { var onRestingAnimationEnd = function(e) {
if(e.propertyName == '-webkit-transform') { if(e.propertyName == '-webkit-transform') {
content.classList.remove('list-item-sliding'); content.classList.remove(ITEM_SLIDING_CLASS);
} }
e.target.removeEventListener('webkitTransitionEnd', onRestingAnimationEnd); e.target.removeEventListener('webkitTransitionEnd', onRestingAnimationEnd);
}; };
@ -243,7 +250,7 @@
window.requestAnimationFrame(function() { window.requestAnimationFrame(function() {
var currentX = parseFloat(_this._currentDrag.content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0; var currentX = parseFloat(_this._currentDrag.content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
if(currentX !== restingPoint) { 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.addEventListener('webkitTransitionEnd', onRestingAnimationEnd);
} }
_this._currentDrag.content.style.webkitTransform = 'translate3d(' + restingPoint + 'px, 0, 0)'; _this._currentDrag.content.style.webkitTransform = 'translate3d(' + restingPoint + 'px, 0, 0)';
@ -273,11 +280,11 @@
var placeholder = this.el.cloneNode(true); 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.parentNode.insertBefore(placeholder, this.el);
this.el.classList.add('list-item-reordering'); this.el.classList.add(ITEM_REORDERING_CLASS);
this._currentDrag = { this._currentDrag = {
@ -344,7 +351,7 @@
var placeholder = this._currentDrag.placeholder; var placeholder = this._currentDrag.placeholder;
// Reposition the element // Reposition the element
this.el.classList.remove('list-item-reordering'); this.el.classList.remove(ITEM_REORDERING_CLASS);
this.el.style.top = 0; this.el.style.top = 0;
var finalPosition = ionic.DomUtil.getChildIndex(placeholder); var finalPosition = ionic.DomUtil.getChildIndex(placeholder);
@ -361,13 +368,22 @@
* The ListView handles a list of items. It will process drag animations, edit mode, * 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. * and other operations that are common on mobile lists or table views.
*/ */
ionic.views.List = function(opts) { ionic.views.ListView = ionic.views.Scroll.inherit({
initialize: function(opts) {
var _this = this; 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) ionic.extend(this, opts);
this.dragThresholdX = opts.dragThresholdX || 10;
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);
this.onRefresh = opts.onRefresh || function() {}; this.onRefresh = opts.onRefresh || function() {};
this.onRefreshOpening = opts.onRefreshOpening || function() {}; this.onRefreshOpening = opts.onRefreshOpening || function() {};
@ -376,9 +392,14 @@
// Start the drag states // Start the drag states
this._initDrag(); this._initDrag();
}; // Listen for drag and release events
window.ionic.onGesture('drag', function(e) {
ionic.views.List.prototype = { _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 * Called to tell the list to stop refreshing. This is useful
* if you are refreshing the list and are done with refreshing. * if you are refreshing the list and are done with refreshing.
@ -388,15 +409,75 @@
refresher.style.height = '0px'; 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() { _initDrag: function() {
this._isDragging = false; ionic.views.ListView.__super__._initDrag.call(this);
this._dragOp = null;
//this._isDragging = false;
//this._dragOp = null;
}, },
// Return the list item from the given target // Return the list item from the given target
_getItem: function(target) { _getItem: function(target) {
while(target) { while(target) {
if(target.classList.contains('list-item')) { if(target.classList.contains(ITEM_CLASS)) {
return target; return target;
} }
target = target.parentNode; target = target.parentNode;
@ -406,14 +487,15 @@
_startDrag: function(e) { _startDrag: function(e) {
ionic.views.ListView.__super__._startDrag.call(this, e);
var _this = this; var _this = this;
this._isDragging = false; this._isDragging = false;
return false;
// Check if this is a reorder drag // 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); var item = this._getItem(e.target);
if(item) { if(item) {
@ -423,6 +505,7 @@
} }
// Check if this is a "pull down" drag for pull to refresh // Check if this is a "pull down" drag for pull to refresh
/*
else if(e.gesture.direction == 'down') { else if(e.gesture.direction == 'down') {
this._dragOp = new PullToRefreshDrag({ this._dragOp = new PullToRefreshDrag({
el: this.el, el: this.el,
@ -438,18 +521,20 @@
}); });
this._dragOp.start(e); this._dragOp.start(e);
} }
*/
// Or check if this is a swipe to the side drag // Or check if this is a swipe to the side drag
else if(e.gesture.direction == 'left' || e.gesture.direction == 'right') { else if(e.gesture.direction == 'left' || e.gesture.direction == 'right') {
this._dragOp = new SlideDrag({ el: this.el }); this._dragOp = new SlideDrag({ el: this.el });
this._dragOp.start(e); this._dragOp.start(e);
e.preventDefault();
} }
}, },
_handleEndDrag: function(e) { _handleEndDrag: function(e) {
ionic.views.ListView.__super__._handleEndDrag.call(this, e);
var _this = this; var _this = this;
return false;
if(!this._dragOp) { if(!this._dragOp) {
this._initDrag(); this._initDrag();
@ -465,16 +550,17 @@
* Process the drag event to move the item to the left or right. * Process the drag event to move the item to the left or right.
*/ */
_handleDrag: function(e) { _handleDrag: function(e) {
ionic.views.ListView.__super__._handleDrag.call(this, e);
var _this = this, content, buttons; var _this = this, content, buttons;
return false;
if(!this._dragOp) { if(!this._dragOp) {
e.preventDefault();
this._startDrag(e); this._startDrag(e);
if(!this._dragOp) { return; } if(!this._dragOp) { return; }
} }
this._dragOp.drag(e); this._dragOp.drag(e);
} }
}; });
})(ionic); })(ionic);

566
js/views/listViewScroll.js
View File

@ -1,566 +0,0 @@
(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 = {
start: function(e) {
},
drag: function(e) {
},
end: function(e) {
}
};
/**
* The Pull To Refresh drag operation handles the well-known
* "pull to refresh" concept seen on various apps. This lets
* the user indicate they want to refresh a given list by dragging
* down.
*
* @param {object} opts the options for the pull to refresh drag.
*/
var PullToRefreshDrag = function(opts) {
this.dragThresholdY = opts.dragThresholdY || 10;
this.onRefreshOpening = opts.onRefreshOpening || function() {};
this.onRefresh = opts.onRefresh || function() {};
this.onRefreshHolding = opts.onRefreshHolding || function() {};
this.el = opts.el;
};
PullToRefreshDrag.prototype = new DragOp();
PullToRefreshDrag.prototype.start = function(e) {
var content, refresher;
content = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'list');
if(!content) { return; }
// Grab the refresher element that will show as you drag down
refresher = content.querySelector('.list-refresher');
if(!refresher) {
refresher = this._injectRefresher();
}
// Disable animations while dragging
refresher.classList.remove('list-refreshing');
this._currentDrag = {
refresher: refresher,
content: content,
isHolding: false
};
};
PullToRefreshDrag.prototype._injectRefresher = function() {
var refresher = document.createElement('div');
refresher.className = 'list-refresher';
this.el.insertBefore(refresher, this.el.firstChild);
return refresher;
};
PullToRefreshDrag.prototype.drag = function(e) {
var _this = this;
window.requestAnimationFrame(function() {
// We really aren't dragging
if(!_this._currentDrag) {
return;
}
// Check if we should start dragging. Check if we've dragged past the threshold,
// or we are starting from the open state.
if(!_this._isDragging && Math.abs(e.gesture.deltaY) > _this.dragThresholdY) {
_this._isDragging = true;
}
if(_this._isDragging) {
var refresher = _this._currentDrag.refresher;
var currentHeight = parseFloat(refresher.style.height);
refresher.style.height = e.gesture.deltaY + 'px';
var newHeight = parseFloat(refresher.style.height);
var firstChildHeight = parseFloat(refresher.firstElementChild.offsetHeight);
if(newHeight > firstChildHeight && !_this._currentDrag.isHolding) {
// The user is holding the refresh but hasn't let go of it
_this._currentDrag.isHolding = true;
_this.onRefreshHolding && _this.onRefreshHolding();
} else {
// Indicate what ratio of opening the list refresh drag is
var ratio = Math.min(1, newHeight / firstChildHeight);
_this.onRefreshOpening && _this.onRefreshOpening(ratio);
}
}
});
};
PullToRefreshDrag.prototype.end = function(e, doneCallback) {
var _this = this;
// There is no drag, just end immediately
if(!this._currentDrag) {
return;
}
var refresher = this._currentDrag.refresher;
var currentHeight = parseFloat(refresher.style.height);
refresher.style.height = e.gesture.deltaY + 'px';
var firstChildHeight = parseFloat(refresher.firstElementChild.offsetHeight);
if(currentHeight > firstChildHeight) {
//this.refreshing();
refresher.classList.add('list-refreshing');
refresher.style.height = firstChildHeight + 'px';
this.onRefresh && _this.onRefresh();
} else {
// Enable animations
refresher.classList.add('list-refreshing');
refresher.style.height = '0px';
this.onRefresh && _this.onRefresh();
}
this._currentDrag = null;
doneCallback && doneCallback();
};
var SlideDrag = function(opts) {
this.dragThresholdX = opts.dragThresholdX || 10;
this.el = opts.el;
};
SlideDrag.prototype = new DragOp();
SlideDrag.prototype.start = function(e) {
var content, buttons, offsetX, buttonsWidth;
if(e.target.classList.contains(ITEM_CONTENT_CLASS)) {
content = e.target;
} 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
if(!content) {
return;
}
// Make sure we aren't animating as we slide
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('.' + ITEM_OPTIONS_CLASS);
if(!buttons) {
return;
}
buttonsWidth = buttons.offsetWidth;
this._currentDrag = {
buttonsWidth: buttonsWidth,
content: content,
startOffsetX: offsetX
};
};
SlideDrag.prototype.drag = function(e) {
var _this = this, buttonsWidth;
window.requestAnimationFrame(function() {
// We really aren't dragging
if(!_this._currentDrag) {
return;
}
// Check if we should start dragging. Check if we've dragged past the threshold,
// or we are starting from the open state.
if(!_this._isDragging &&
((Math.abs(e.gesture.deltaX) > _this.dragThresholdX) ||
(Math.abs(_this._currentDrag.startOffsetX) > 0)))
{
_this._isDragging = true;
}
if(_this._isDragging) {
buttonsWidth = _this._currentDrag.buttonsWidth;
// Grab the new X point, capping it at zero
var newX = Math.min(0, _this._currentDrag.startOffsetX + e.gesture.deltaX);
// If the new X position is past the buttons, we need to slow down the drag (rubber band style)
if(newX < -buttonsWidth) {
// Calculate the new X position, capped at the top of the buttons
newX = Math.min(-buttonsWidth, -buttonsWidth + (((e.gesture.deltaX + buttonsWidth) * 0.4)));
}
_this._currentDrag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
}
});
};
SlideDrag.prototype.end = function(e, doneCallback) {
var _this = this;
// There is no drag, just end immediately
if(!this._currentDrag) {
doneCallback && doneCallback();
return;
}
// If we are currently dragging, we want to snap back into place
// The final resting point X will be the width of the exposed buttons
var restingPoint = -this._currentDrag.buttonsWidth;
// Check if the drag didn't clear the buttons mid-point
// and we aren't moving fast enough to swipe open
if(e.gesture.deltaX > -(this._currentDrag.buttonsWidth/2)) {
// If we are going left but too slow, or going right, go back to resting
if(e.gesture.direction == "left" && Math.abs(e.gesture.velocityX) < 0.3) {
restingPoint = 0;
} else if(e.gesture.direction == "right") {
restingPoint = 0;
}
}
var content = this._currentDrag.content;
var onRestingAnimationEnd = function(e) {
if(e.propertyName == '-webkit-transform') {
content.classList.remove(ITEM_SLIDING_CLASS);
}
e.target.removeEventListener('webkitTransitionEnd', onRestingAnimationEnd);
};
window.requestAnimationFrame(function() {
var currentX = parseFloat(_this._currentDrag.content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
if(currentX !== restingPoint) {
_this._currentDrag.content.classList.add(ITEM_SLIDING_CLASS);
_this._currentDrag.content.addEventListener('webkitTransitionEnd', onRestingAnimationEnd);
}
_this._currentDrag.content.style.webkitTransform = 'translate3d(' + restingPoint + 'px, 0, 0)';
// Kill the current drag
this._currentDrag = null;
// We are done, notify caller
doneCallback && doneCallback();
});
};
var ReorderDrag = function(opts) {
this.dragThresholdY = opts.dragThresholdY || 0;
this.el = opts.el;
};
ReorderDrag.prototype = new DragOp();
ReorderDrag.prototype.start = function(e) {
var content;
// Grab the starting Y point for the item
var offsetY = this.el.offsetTop;//parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
var placeholder = this.el.cloneNode(true);
placeholder.classList.add(ITEM_PLACEHOLDER_CLASS);
this.el.parentNode.insertBefore(placeholder, this.el);
this.el.classList.add(ITEM_REORDERING_CLASS);
this._currentDrag = {
startOffsetTop: offsetY,
placeholder: placeholder
};
};
ReorderDrag.prototype.drag = function(e) {
var _this = this;
window.requestAnimationFrame(function() {
// We really aren't dragging
if(!_this._currentDrag) {
return;
}
// Check if we should start dragging. Check if we've dragged past the threshold,
// or we are starting from the open state.
if(!_this._isDragging && Math.abs(e.gesture.deltaY) > _this.dragThresholdY) {
_this._isDragging = true;
}
if(_this._isDragging) {
var newY = _this._currentDrag.startOffsetTop + e.gesture.deltaY;
_this.el.style.top = newY + 'px';
_this._currentDrag.currentY = newY;
_this._reorderItems();
}
});
};
// When an item is dragged, we need to reorder any items for sorting purposes
ReorderDrag.prototype._reorderItems = function() {
var placeholder = this._currentDrag.placeholder;
var siblings = Array.prototype.slice.call(this._currentDrag.placeholder.parentNode.children);
// Remove the floating element from the child search list
siblings.splice(siblings.indexOf(this.el), 1);
var index = siblings.indexOf(this._currentDrag.placeholder);
var topSibling = siblings[Math.max(0, index - 1)];
var bottomSibling = siblings[Math.min(siblings.length, index+1)];
var thisOffsetTop = this._currentDrag.currentY;// + this._currentDrag.startOffsetTop;
if(topSibling && (thisOffsetTop < topSibling.offsetTop + topSibling.offsetHeight/2)) {
ionic.DomUtil.swapNodes(this._currentDrag.placeholder, topSibling);
return index - 1;
} else if(bottomSibling && thisOffsetTop > (bottomSibling.offsetTop + bottomSibling.offsetHeight/2)) {
ionic.DomUtil.swapNodes(bottomSibling, this._currentDrag.placeholder);
return index + 1;
}
};
ReorderDrag.prototype.end = function(e, doneCallback) {
if(!this._currentDrag) {
doneCallback && doneCallback();
return;
}
var placeholder = this._currentDrag.placeholder;
// Reposition the element
this.el.classList.remove(ITEM_REORDERING_CLASS);
this.el.style.top = 0;
var finalPosition = ionic.DomUtil.getChildIndex(placeholder);
placeholder.parentNode.insertBefore(this.el, placeholder);
placeholder.parentNode.removeChild(placeholder);
this._currentDrag = null;
doneCallback && doneCallback();
};
/**
* 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.ListView = ionic.views.Scroll.inherit({
initialize: function(opts) {
var _this = this;
opts = ionic.extend({
virtualRemoveThreshold: -200,
virtualAddThreshold: 200
}, opts);
ionic.extend(this, opts);
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);
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.
*/
stopRefreshing: function() {
var refresher = this.el.querySelector('.list-refresher');
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() {
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(ITEM_CLASS)) {
return target;
}
target = target.parentNode;
}
return null;
},
_startDrag: function(e) {
ionic.views.ListView.__super__._startDrag.call(this, e);
var _this = this;
this._isDragging = false;
// Check if this is a reorder drag
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) {
this._dragOp = new ReorderDrag({ el: item });
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,
onRefresh: function() {
_this.onRefresh && _this.onRefresh();
},
onRefreshHolding: function() {
_this.onRefreshHolding && _this.onRefreshHolding();
},
onRefreshOpening: function(ratio) {
_this.onRefreshOpening && _this.onRefreshOpening(ratio);
}
});
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;
if(!this._dragOp) {
this._initDrag();
return;
}
this._dragOp.end(e, function() {
_this._initDrag();
});
},
/**
* 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;
if(!this._dragOp) {
e.preventDefault();
this._startDrag(e);
if(!this._dragOp) { return; }
}
this._dragOp.drag(e);
}
});
})(ionic);