Scroll stuff

This commit is contained in:
Max Lynch
2013-11-06 13:01:06 -06:00
parent cc61fb5ff3
commit 2798630b39
13 changed files with 1413 additions and 1312 deletions

View File

@ -24,6 +24,9 @@ angular.module('ionic.ui.list', ['ngAnimate'])
</div>\
<div class="item-content slide-left" ng-transclude>\
</div>\
<div class="item-drag" ng-if="canReorder && isEditing">\
<button data-ionic-action="reorder" class="button button-icon"><i ng-class="reorderIcon"></i></button>\
</div>\
<div class="item-options" ng-if="canSwipe && !isEditing && showOptions">\
<button ng-click="buttonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in buttons">{{button.text}}</button>\
</div>\
@ -104,7 +107,10 @@ angular.module('ionic.ui.list', ['ngAnimate'])
compile: function(element, attr, transclude) {
return function($scope, $element, $attr) {
var lv = new ionic.views.List({el: $element[0]});
var lv = new ionic.views.ListView({
el: $element[0],
listEl: $element[0].children[0]
});
if(attr.animation) {
$element.addClass(attr.animation);

View File

@ -0,0 +1,21 @@
(function() {
'use strict';
/**
* @description
* The scroll directive lets you enable a content area for
* our custom momentum scrolling area. The benefit to a custom
* scroll area is configurability, and avoidance of the
* buggy -webkit-overflow-scrolling: touch.
*/
angular.module('ionic.ui.scroll', [])
.directive('scroll', function() {
return {
restrict: 'ECA',
replace: true,
transclude: true,
template: '<div class="scroll-content" ng-transclude></div>'
};
});

View File

@ -63,7 +63,7 @@
</head>
<body>
<content ng-controller="TestCtrl" class="reveal-animation">
<div ng-controller="TestCtrl" class="reveal-animation scroll-content">
<list is-editing="isEditingItems" on-refresh-holding="almostRefreshing()" on-refresh-opening="almostRefreshProjects(ratio)" on-refresh="refreshProjects()" animation="my-repeat-animation" delete-icon="icon ion-minus-circled" reorder-icon="icon ion-navicon">
<list-refresher>
</list-refresher>
@ -79,7 +79,7 @@
</list-item>
</list>
<button ng-click="edit()" class="button button-success">Edit</button>
</content>
</div>
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
@ -132,9 +132,10 @@
console.log("REFRESHING");
};
$scope.items = [
{
text: 'Item 1',
$scope.items = [];
for(var i = 0; i < 20; i++) {
$scope.items.push({
text: 'Item ' + i,
canDelete: true,
canSwipe: true,
canReorder: true,
@ -146,47 +147,9 @@
type: 'button-danger',
buttonClicked: removeItem,
}]
},
{
text: 'Item 2',
canDelete: true,
canSwipe: true,
canReorder: true,
icon: 'icon-chevron-right',
deleteItem: removeItem,
buttons: [{
text: 'Kill',
type: 'button-danger',
buttonClicked: removeItem,
}]
},
{
text: 'Item 3',
canDelete: true,
canSwipe: true,
canReorder: true,
icon: 'icon-chevron-right',
deleteItem: removeItem,
buttons: [{
text: 'Kill',
type: 'button-danger',
buttonClicked: removeItem,
}]
},
{
text: 'Item 4',
canDelete: true,
canSwipe: true,
canReorder: true,
icon: 'icon-chevron-right',
deleteItem: removeItem,
buttons: [{
text: 'Kill',
type: 'button-danger',
buttonClicked: removeItem,
}]
}
];
});
}
$scope.edit = function() {
$scope.isEditingItems = !$scope.isEditingItems;
}

View File

@ -376,13 +376,6 @@
// 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);
};
ionic.views.List.prototype = {
@ -417,6 +410,8 @@
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);
@ -454,6 +449,7 @@
_handleEndDrag: function(e) {
var _this = this;
return false;
if(!this._dragOp) {
this._initDrag();
@ -470,6 +466,7 @@
*/
_handleDrag: function(e) {
var _this = this, content, buttons;
return false;
if(!this._dragOp) {
this._startDrag(e);