mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 15:07:13 +08:00
Scroll stuff
This commit is contained in:
8
js/ext/angular/src/directive/ionicList.js
vendored
8
js/ext/angular/src/directive/ionicList.js
vendored
@ -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);
|
||||
|
||||
21
js/ext/angular/src/directive/ionicScroll.js
vendored
Normal file
21
js/ext/angular/src/directive/ionicScroll.js
vendored
Normal 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>'
|
||||
};
|
||||
});
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
Reference in New Issue
Block a user