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

Merged new scroll stuff

Browse Source
This commit is contained in:
Max Lynch
2013-12-03 19:06:26 -06:00
parent e03de8c8a4 2c4e363638
commit 8ac0bafcee
27 changed files with 3936 additions and 6596 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Gruntfile.js
View File

@@ -19,6 +19,7 @@ module.exports = function(grunt) {
'js/views/view.js',
'js/views/scrollView.js',
'js/views/scrollZyng.js',
'js/views/actionSheetView.js',
'js/views/checkboxView.js',

6039
dist/css/ionic.css vendored
View File

File diff suppressed because it is too large Load Diff

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

@@ -641,7 +641,7 @@ angular.module('ionic.ui.content', [])
// The content directive is a core scrollable content area
// that is part of many View hierarchies
.directive('content', ['$parse', function($parse) {
.directive('content', ['$parse', '$timeout', function($parse, $timeout) {
return {
restrict: 'E',
replace: true,
@@ -651,16 +651,16 @@ angular.module('ionic.ui.content', [])
onRefresh: '&',
onRefreshOpening: '&',
refreshComplete: '=',
scroll: '@'
scroll: '@',
hasScrollX: '@',
hasScrollY: '@'
},
compile: function(element, attr, transclude) {
return function($scope, $element, $attr) {
var
c = $element.eq(0),
clone,
sc,
sv,
addedPadding = false;
var clone, sc, sv;
var addedPadding = false;
var c = $element.eq(0);
if(attr.hasHeader == "true") {
c.addClass('has-header');
@@ -675,15 +675,6 @@ angular.module('ionic.ui.content', [])
c.addClass('has-tabs');
}
if(attr.refreshComplete) {
$scope.refreshComplete = function() {
if($scope.scrollView) {
$scope.scrollView.doneRefreshing();
$scope.$parent.$broadcast('scroll.onRefreshComplete');
}
};
}
// If they want plain overflow scrolling, add that as a class
if($scope.scroll === "false") {
clone = transclude($scope.$parent);
@@ -700,25 +691,56 @@ angular.module('ionic.ui.content', [])
addedPadding = true;
}
$element.append(sc);
// Otherwise, supercharge this baby!
sv = new ionic.views.Scroll({
el: $element[0].firstElementChild,
hasPullToRefresh: (typeof $scope.onRefresh !== 'undefined'),
onRefresh: function() {
$scope.onRefresh();
$scope.$parent.$broadcast('scroll.onRefresh');
},
onRefreshOpening: function(amt) {
$scope.onRefreshOpening({amount: amt});
$scope.$parent.$broadcast('scroll.onRefreshOpening', amt);
}
});
// Let child scopes access this
$scope.scrollView = sv;
// Pass the parent scope down to the child
clone = transclude($scope.$parent);
angular.element($element[0].firstElementChild).append(clone);
var refresher = $element[0].querySelector('.scroll-refresher');
var refresherHeight = refresher && refresher.clientHeight || 0;
if(attr.refreshComplete) {
$scope.refreshComplete = function() {
if($scope.scrollView) {
refresher && refresher.classList.remove('active');
$scope.scrollView.finishPullToRefresh();
$scope.$parent.$broadcast('scroll.onRefreshComplete');
}
};
}
// Otherwise, supercharge this baby!
// Add timeout to let content render so Scroller.resize grabs the right content height
$timeout(function() {
sv = new ionic.views.Scroller({
el: $element[0]
});
// Activate pull-to-refresh
if(refresher) {
sv.activatePullToRefresh(refresherHeight, function() {
refresher.classList.add('active');
}, function() {
refresher.classList.remove('refreshing');
refresher.classList.remove('active');
}, function() {
refresher.classList.add('refreshing');
$scope.onRefresh();
$scope.$parent.$broadcast('scroll.onRefresh');
});
}
$scope.$parent.$on('scroll.refreshComplete', function(e) {
sv && sv.finishPullToRefresh();
});
// Let child scopes access this
$scope.$parent.scrollView = sv;
}, 500);
}
// if padding attribute is true, then add padding if it wasn't added to the .scroll
@@ -736,22 +758,8 @@ angular.module('ionic.ui.content', [])
restrict: 'E',
replace: true,
require: ['^?content', '^?list'],
template: '<div class="scroll-refresher"><div class="ionic-refresher-content"><div class="ionic-refresher"></div></div></div>',
scope: true,
link: function($scope, $element, $attr, scrollCtrl) {
var icon = $element[0].querySelector('.ionic-refresher');
// Scale up the refreshing icon
var onRefreshOpening = ionic.throttle(function(e, amt) {
icon.style[ionic.CSS.TRANSFORM] = 'scale(' + Math.min((1 + amt), 2) + ')';
}, 100);
$scope.$on('scroll.onRefresh', function(e) {
icon.style[ionic.CSS.TRANSFORM] = 'scale(2)';
});
$scope.$on('scroll.onRefreshOpening', onRefreshOpening);
}
template: '<div class="scroll-refresher"><div class="ionic-refresher-content"><i class="icon ion-arrow-down-c icon-pulling"></i><i class="icon ion-loading-d icon-refreshing"></i></div></div>',
scope: true
};
})
@@ -1875,6 +1883,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
$element.addClass('menu-content');
var defaultPrevented = false;
var isDragging = false;
ionic.on('mousedown', function(e) {
// If the child element prevented the drag, don't drag
@@ -1885,15 +1894,25 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
if(defaultPrevented) {
return;
}
isDragging = true;
sideMenuCtrl._handleDrag(e);
e.gesture.srcEvent.preventDefault();
};
var dragVertFn = function(e) {
if(isDragging) {
e.gesture.srcEvent.preventDefault();
}
};
//var dragGesture = Gesture.on('drag', dragFn, $element);
var dragRightGesture = Gesture.on('dragright', dragFn, $element);
var dragLeftGesture = Gesture.on('dragleft', dragFn, $element);
var dragUpGesture = Gesture.on('dragup', dragVertFn, $element);
var dragDownGesture = Gesture.on('dragdown', dragVertFn, $element);
var dragReleaseFn = function(e) {
isDragging = false;
if(!defaultPrevented) {
sideMenuCtrl._endDrag(e);
}
@@ -1926,8 +1945,10 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
// Cleanup
$scope.$on('$destroy', function() {
Gesture.off(dragLeftGesture, 'drag', dragFn);
Gesture.off(dragRightGesture, 'drag', dragFn);
Gesture.off(dragLeftGesture, 'dragleft', dragFn);
Gesture.off(dragRightGesture, 'dragright', dragFn);
Gesture.off(dragUpGesture, 'dragup', dragFn);
Gesture.off(dragDownGesture, 'dragdown', dragFn);
Gesture.off(releaseGesture, 'release', dragReleaseFn);
});
};
@@ -2103,7 +2124,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
$scope.tabsController = this;
}],
//templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
template: '<div class="content"><tab-controller-bar></tab-controller-bar></div>',
template: '<div class="view"><tab-controller-bar></tab-controller-bar></div>',
compile: function(element, attr, transclude, tabsCtrl) {
return function($scope, $element, $attr) {
var tabs = $element[0].querySelector('.tabs');
@@ -2145,7 +2166,6 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
.directive('tab', ['$animate', '$parse', function($animate, $parse) {
return {
restrict: 'E',
replace: true,
require: '^tabs',
scope: true,
transclude: 'element',
@@ -2204,6 +2224,9 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
childScope = $scope.$new();
transclude(childScope, function(clone) {
childElement = clone;
clone.addClass('pane');
$animate.enter(clone, $element.parent(), $element);
if($scope.title) {

1723
dist/js/ionic.js vendored
View File

File diff suppressed because it is too large Load Diff

104
js/ext/angular/src/directive/ionicContent.js vendored
View File

@@ -18,7 +18,7 @@ angular.module('ionic.ui.content', [])
// The content directive is a core scrollable content area
// that is part of many View hierarchies
.directive('content', ['$parse', function($parse) {
.directive('content', ['$parse', '$timeout', function($parse, $timeout) {
return {
restrict: 'E',
replace: true,
@@ -28,16 +28,16 @@ angular.module('ionic.ui.content', [])
onRefresh: '&',
onRefreshOpening: '&',
refreshComplete: '=',
scroll: '@'
scroll: '@',
hasScrollX: '@',
hasScrollY: '@'
},
compile: function(element, attr, transclude) {
return function($scope, $element, $attr) {
var
c = $element.eq(0),
clone,
sc,
sv,
addedPadding = false;
var clone, sc, sv;
var addedPadding = false;
var c = $element.eq(0);
if(attr.hasHeader == "true") {
c.addClass('has-header');
@@ -52,15 +52,6 @@ angular.module('ionic.ui.content', [])
c.addClass('has-tabs');
}
if(attr.refreshComplete) {
$scope.refreshComplete = function() {
if($scope.scrollView) {
$scope.scrollView.doneRefreshing();
$scope.$parent.$broadcast('scroll.onRefreshComplete');
}
};
}
// If they want plain overflow scrolling, add that as a class
if($scope.scroll === "false") {
clone = transclude($scope.$parent);
@@ -77,25 +68,56 @@ angular.module('ionic.ui.content', [])
addedPadding = true;
}
$element.append(sc);
// Otherwise, supercharge this baby!
sv = new ionic.views.Scroll({
el: $element[0].firstElementChild,
hasPullToRefresh: (typeof $scope.onRefresh !== 'undefined'),
onRefresh: function() {
$scope.onRefresh();
$scope.$parent.$broadcast('scroll.onRefresh');
},
onRefreshOpening: function(amt) {
$scope.onRefreshOpening({amount: amt});
$scope.$parent.$broadcast('scroll.onRefreshOpening', amt);
}
});
// Let child scopes access this
$scope.scrollView = sv;
// Pass the parent scope down to the child
clone = transclude($scope.$parent);
angular.element($element[0].firstElementChild).append(clone);
var refresher = $element[0].querySelector('.scroll-refresher');
var refresherHeight = refresher && refresher.clientHeight || 0;
if(attr.refreshComplete) {
$scope.refreshComplete = function() {
if($scope.scrollView) {
refresher && refresher.classList.remove('active');
$scope.scrollView.finishPullToRefresh();
$scope.$parent.$broadcast('scroll.onRefreshComplete');
}
};
}
// Otherwise, supercharge this baby!
// Add timeout to let content render so Scroller.resize grabs the right content height
$timeout(function() {
sv = new ionic.views.Scroller({
el: $element[0]
});
// Activate pull-to-refresh
if(refresher) {
sv.activatePullToRefresh(refresherHeight, function() {
refresher.classList.add('active');
}, function() {
refresher.classList.remove('refreshing');
refresher.classList.remove('active');
}, function() {
refresher.classList.add('refreshing');
$scope.onRefresh();
$scope.$parent.$broadcast('scroll.onRefresh');
});
}
$scope.$parent.$on('scroll.refreshComplete', function(e) {
sv && sv.finishPullToRefresh();
});
// Let child scopes access this
$scope.$parent.scrollView = sv;
}, 500);
}
// if padding attribute is true, then add padding if it wasn't added to the .scroll
@@ -113,22 +135,8 @@ angular.module('ionic.ui.content', [])
restrict: 'E',
replace: true,
require: ['^?content', '^?list'],
template: '<div class="scroll-refresher"><div class="ionic-refresher-content"><div class="ionic-refresher"></div></div></div>',
scope: true,
link: function($scope, $element, $attr, scrollCtrl) {
var icon = $element[0].querySelector('.ionic-refresher');
// Scale up the refreshing icon
var onRefreshOpening = ionic.throttle(function(e, amt) {
icon.style[ionic.CSS.TRANSFORM] = 'scale(' + Math.min((1 + amt), 2) + ')';
}, 100);
$scope.$on('scroll.onRefresh', function(e) {
icon.style[ionic.CSS.TRANSFORM] = 'scale(2)';
});
$scope.$on('scroll.onRefreshOpening', onRefreshOpening);
}
template: '<div class="scroll-refresher"><div class="ionic-refresher-content"><i class="icon ion-arrow-down-c icon-pulling"></i><i class="icon ion-loading-d icon-refreshing"></i></div></div>',
scope: true
};
})

17
js/ext/angular/src/directive/ionicSideMenu.js vendored
View File

@@ -58,6 +58,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
$element.addClass('menu-content');
var defaultPrevented = false;
var isDragging = false;
ionic.on('mousedown', function(e) {
// If the child element prevented the drag, don't drag
@@ -68,15 +69,25 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
if(defaultPrevented) {
return;
}
isDragging = true;
sideMenuCtrl._handleDrag(e);
e.gesture.srcEvent.preventDefault();
};
var dragVertFn = function(e) {
if(isDragging) {
e.gesture.srcEvent.preventDefault();
}
};
//var dragGesture = Gesture.on('drag', dragFn, $element);
var dragRightGesture = Gesture.on('dragright', dragFn, $element);
var dragLeftGesture = Gesture.on('dragleft', dragFn, $element);
var dragUpGesture = Gesture.on('dragup', dragVertFn, $element);
var dragDownGesture = Gesture.on('dragdown', dragVertFn, $element);
var dragReleaseFn = function(e) {
isDragging = false;
if(!defaultPrevented) {
sideMenuCtrl._endDrag(e);
}
@@ -109,8 +120,10 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
// Cleanup
$scope.$on('$destroy', function() {
Gesture.off(dragLeftGesture, 'drag', dragFn);
Gesture.off(dragRightGesture, 'drag', dragFn);
Gesture.off(dragLeftGesture, 'dragleft', dragFn);
Gesture.off(dragRightGesture, 'dragright', dragFn);
Gesture.off(dragUpGesture, 'dragup', dragFn);
Gesture.off(dragDownGesture, 'dragdown', dragFn);
Gesture.off(releaseGesture, 'release', dragReleaseFn);
});
};

6
js/ext/angular/src/directive/ionicTabBar.js vendored
View File

@@ -49,7 +49,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
$scope.tabsController = this;
}],
//templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
template: '<div class="content"><tab-controller-bar></tab-controller-bar></div>',
template: '<div class="view"><tab-controller-bar></tab-controller-bar></div>',
compile: function(element, attr, transclude, tabsCtrl) {
return function($scope, $element, $attr) {
var tabs = $element[0].querySelector('.tabs');
@@ -91,7 +91,6 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
.directive('tab', ['$animate', '$parse', function($animate, $parse) {
return {
restrict: 'E',
replace: true,
require: '^tabs',
scope: true,
transclude: 'element',
@@ -150,6 +149,9 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
childScope = $scope.$new();
transclude(childScope, function(clone) {
childElement = clone;
clone.addClass('pane');
$animate.enter(clone, $element.parent(), $element);
if($scope.title) {

10
js/ext/angular/test/checkbox.html
View File

@@ -19,11 +19,11 @@
</div>
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/angular/1.2.2/angular.js"></script>
<script src="../../../../dist/js/angular/1.2.2/angular-animate.js"></script>
<script src="../../../../dist/js/angular/1.2.2/angular-route.js"></script>
<script src="../../../../dist/js/angular/1.2.2/angular-touch.js"></script>
<script src="../../../../dist/js/angular/1.2.2/angular-sanitize.js"></script>
<script src="../../../../dist/js/angular/angular.js"></script>
<script src="../../../../dist/js/angular/angular-animate.js"></script>
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
<script>
angular.module('navTest', ['ionic.ui.checkbox', 'ionic.ui.content', 'ngAnimate', 'ngTouch'])

83
js/ext/angular/test/content.html
View File

@@ -54,48 +54,67 @@
</style>
</head>
<body ng-controller="AppCtrl">
<header-bar
title="'Title'"
type="bar-primary"></header-bar>
<body>
<pane>
<header-bar
title="'Title'"
type="bar-primary"></header-bar>
<content
on-refresh="onRefresh()"
on-refresh-opening="onRefreshOpening(amount)"
refresh-complete="refreshComplete"
has-header="true"
has-footer="true"
>
<refresher></refresher>
<ul class="list">
<li class="list-item" ng-repeat="item in items">asdf{{$index}}</li>
</ul>
</content>
<footer-bar type="bar-assertive">
<h1 class="title">Footer</h1>
</footer-bar>
<div class="bar bar-positive bar-subheader">
<a href="#" class="button button-danger button-clear">Edit</a>
<h1 class="title">Scroll Me</h1>
<a href="#" class="button button-danger button-clear">Delete</a>
</div>
<content
on-refresh="onRefresh()"
on-refresh-opening="onRefreshOpening(amount)"
refresh-complete="refreshComplete"
has-tabs="true"
has-header="true"
has-subheader="true"
>
<refresher></refresher>
<ul class="list" ng-controller="AppCtrl">
<li class="list-item" ng-repeat="item in items">asdf{{$index}}</li>
</ul>
</content>
<nav id="tab-bar" class="tabs tabs-icon-top">
<a class="tab-item" href="#">
<i class="icon ion-game-controller-a"></i>
Fun
</a>
<a class="tab-item">
<i class="icon ion-locked"></i>
Security
</a>
<a class="tab-item">
<i class="icon ion-heart"></i>
Simple
</a>
<a class="tab-item">
<i class="icon ion-leaf"></i>
Light
</a>
<a class="tab-item">
<i class="icon ion-waterdrop"></i>
Clean
</a>
</nav>
</pane>
<script>
angular.module('navTest', ['ionic'])
.controller('AppCtrl', function($scope, $compile, $timeout, $element) {
$scope.items = [];
for(var i = 0; i < 200; i++) {
for(var i = 0; i < 70; i++) {
$scope.items.push({
});
}
$scope.what = {};
$scope.onRefresh = function() {
console.log('On refresh');
$timeout(function() {
$scope.refreshComplete();
}, 2000);
}
$scope.onRefreshOpening = function(amt) {
console.log('On refresh opening', amt);
}
$timeout(function() {
$scope.scrollView.resize();
}, 1000);
})
</script>
</body>

9
js/ext/angular/test/header.html
View File

@@ -7,6 +7,11 @@
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/angular/angular.js"></script>
<script src="../../../../dist/js/angular/angular-animate.js"></script>
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>
<body ng-controller="TestCtrl">
@@ -16,14 +21,14 @@
right-buttons="rightButtons"
type="bar-primary"></header-bar>
<content has-header="true">
<content>
<input type="text" ng-model="headerTitle">
</content>
<script>
angular.module('headerTest', ['ionic'])
.controller('TestCtrl', function($scope) {
$scope.headerTitle = 'A really long title here';
$scope.headerTitle = 'A really really really really really long title here';
$scope.leftButtons = [
{
text: 'Hello',

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

@@ -60,33 +60,34 @@
</head>
<body>
<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()"
refresh-complete="refreshComplete"
animation="my-repeat-animation"
delete-icon="icon ion-minus-circled"
reorder-icon="icon ion-navicon">
<pane>
<div ng-controller="TestCtrl">
<content on-refresh="refreshProjects()"
refresh-complete="refreshComplete">
<list is-editing="isEditingItems"
animation="my-repeat-animation"
delete-icon="icon ion-minus-circled"
reorder-icon="icon ion-navicon">
<refresher></refresher>
<refresher></refresher>
<item
ng-repeat="item in items"
buttons="item.buttons"
can-delete="true"
can-reorder="true"
can-swipe="true"
on-delete="deleteProject(project)"
on-select="selectProject(project)">
<i class="icon ion-email ion-primary"></i>
{{item.text}}
<i class="{{item.icon}}"></i>
</item>
</list>
<button ng-click="edit()" class="button button-success">Edit</button>
</div>
<item
ng-repeat="item in items"
buttons="item.buttons"
can-delete="true"
can-reorder="true"
can-swipe="true"
on-delete="deleteProject(project)"
on-select="selectProject(project)">
<i class="icon ion-email ion-primary"></i>
{{item.text}}
<i class="{{item.icon}}"></i>
</item>
</list>
<button ng-click="edit()" class="button button-success">Edit</button>
</content>
</div>
</pane>
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/angular/angular.js"></script>
@@ -117,7 +118,7 @@
$scope.refreshProjects = function() {
console.log("REFRESHING");
$timeout(function() {
$scope.refreshComplete();
$scope.$broadcast('scroll.refreshComplete');
}, 2000);
};

98
js/ext/angular/test/nav.html
View File

@@ -1,98 +0,0 @@
<html ng-app="navTest">
<head>
<meta charset="utf-8">
<title>Nav Bars</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
<style>
.view {
position: fixed;
width: 100%;
height: 100%;
}
.slide-in-slide-out {
/*
-webkit-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
-webkit-transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
*/
}
</style>
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/angular/angular.js"></script>
<script src="../../../../dist/js/angular/angular-animate.js"></script>
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>
<body>
<navigation first="page.html">
<nav-bar type="bar-primary" back-button-type="button-pure button-icon" back-button-icon="ion-arrow-left-c">
</nav-bar>
</navigation>
<script id="page.html" type="text/ng-template">
<div title="title" class="nav-page">
<div ng-controller="CatsCtrl">
<content has-header="true">
<h1></h1>
<a href="#" class="button button-royal" nav-push="page.html">Next</a>
<button class="button button-assertive" ng-click="thisThing()">Doit</button>
<list><list-item ng-repeat="item in items" on-select="goNext()">Test</list-item></list>
</content>
</div>
</div>
</script>
<script>
var pageNumber = 0;
var pushIt = function($scope, $compile, $element, cb) {
var childScope = $scope.$new();
childScope.isVisible = true;
var items = [];
for(var i = 0; i < 100; i++) {
items.push({});
}
childScope.items = items;
pageNumber++;
}
angular.module('navTest', ['ionic', 'ngAnimate'])
.controller('CatsCtrl', function($scope, $compile, $element) {
$scope.$on('navContent.shown', function() {
console.log('SHOWN');
});
$scope.$on('navContent.hidden', function() {
console.log('HIDDEN');
});
$scope.thisThing = function() {
console.log("THIS THING");
};
var items = [];
for(var i = 0; i < 100; i++) {
items.push({});
}
$scope.items = items;
$scope.goNext = function() {
$scope.navController.pushFromTemplate('page.html');
};
});
</script>
</body>
</html>

87
js/ext/angular/test/navPush.html
View File

@@ -1,87 +0,0 @@
<html ng-app="navTest">
<head>
<meta charset="utf-8">
<title>Nav Bars</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
<style>
.view {
position: fixed;
width: 100%;
height: 100%;
background-color: black;
}
.slide-in-slide-out {
/*
-webkit-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
-webkit-transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
*/
}
</style>
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/angular/angular.js"></script>
<script src="../../../../dist/js/angular/angular-animate.js"></script>
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>
<body>
<navigation first="page.html">
<nav-bar type="bar-primary" back-button-type="button-pure" align-title="left">
</nav-bar>
</navigation>
<script id="page.html" type="text/ng-template">
<div title="title" class="nav-page">
<div ng-controller="CatsCtrl">
<content has-header="true">
{{secretNumber}}
<list><item ng-repeat="item in items" nav-push="page.html">{{item.t}}</item></list>
<button nav-push="page.html" class="button button-assertive">Do it</button>
</content>
</div>
</div>
</script>
<script>
angular.module('navTest', ['ionic', 'ngAnimate'])
.controller('CatsCtrl', function($scope, $compile, $element) {
$scope.$on('navContent.shown', function() {
console.log('SHOWN');
});
$scope.$on('navContent.hidden', function() {
console.log('HIDDEN');
});
$scope.secretNumber = Math.floor(Math.random() * 100);
$scope.doit = function() { alert('waht'); };
var items = [
{t: 'This one'},
{t: 'Hmm, maybe this one'},
{t: 'Not that one, this one'},
{t: 'Um, this one?'},
{t: 'No, this one'}
];
items = items.sort(function() {
return .5 - Math.random();
});
$scope.items = items;
$scope.goNext = function() {
$scope.navController.pushFromTemplate('page.html');
};
});
</script>
</body>
</html>

26
js/ext/angular/test/navRouter.html
View File

@@ -21,24 +21,30 @@
</pane>
<script id="page1.html" type="text/ng-template">
<nav-page title="'Bears'" hide-nav-bar="true">
<h1>Page 1</h1>
<span>{{num}}</span>
<a class="button button-pure" nav-back>Back</a>
<a class="button button-assertive" href="#/page2">Next</a>
<nav-page title="'Bears'" hide-back-button="true">
<content has-header="true">
<h1>Page 1</h1>
<span>{{num}}</span>
<a class="button button-pure" nav-back>Back</a>
<a class="button button-assertive" href="#/page2">Next</a>
</content>
</nav-page>
</script>
<script id="page2.html" type="text/ng-template">
<nav-page title="'Beets'">
<h1>Page 2</h1>
<a class="button button-pure" nav-back>Back</a>
<a class="button button-assertive" href="#/page3">Next</a>
<content has-header="true">
<h1>Page 2</h1>
<a class="button button-pure" nav-back>Back</a>
<a class="button button-assertive" href="#/page3">Next</a>
</content>
</nav-page>
</script>
<script id="page3.html" type="text/ng-template">
<nav-page title="'Battlestar Galactica'">
<h1>Page 3</h1>
<a class="button button-pure" nav-back>Back</a>
<content has-header="true">
<h1>Page 3</h1>
<a class="button button-pure" nav-back>Back</a>
</content>
</nav-page>
</script>
<script>

61
js/ext/angular/test/navTest.html
View File

@@ -1,61 +0,0 @@
<html ng-app="navTest">
<head>
<meta charset="utf-8">
<title>Nav Bars</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/angular/angular.js"></script>
<script src="../../../../dist/js/angular/angular-animate.js"></script>
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>
<body>
<navs>
<nav-bar type="bar-primary" back-button-type="button-pure">
</nav-bar>
<div ng-controller="AppCtrl">
<content has-header="true">
</content>
</div>
</navs>
<script id="page.html" type="text/ng-template">
<div title="Home home" ng-controller="CatsCtrl" class="nav-content">
<h1></h1>
<button class="button button-success" ng-click="goNext()">Next</button>
<list><list-item ng-repeat="item in items" on-select="goNext()">Test</list-item></list>
</div>
</script>
<script>
angular.module('navTest', ['ionic', 'ngAnimate'])
.controller('AppCtrl', function($scope) {
$scope.navController.pushFromTemplate('page.html');
})
.controller('CatsCtrl', function($scope, $compile, $element) {
$scope.$on('navContent.shown', function() {
console.log('SHOWN');
});
$scope.$on('navContent.hidden', function() {
console.log('HIDDEN');
});
$scope.goNext = function() {
$scope.navController.pushFromTemplate('page.html');
};
});
</script>
</body>
</html>

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

@@ -23,7 +23,7 @@
<button class="button button-icon" ng-click="openLeft()"><i class="icon ion-navicon"></i></button>
<h1 class="title">Slide me</h1>
</header>
<content has-header="true">
<content>
<h1>Content</h1>
</content>
</pane>
@@ -31,7 +31,7 @@
<header class="bar bar-header bar-assertive">
<h1 class="title">Left</h1>
</header>
<content has-header="true" overflow-scroll="true">
<content>
<ul class="list">
<a href="#" class="item" ng-repeat="item in list">
{{item.text}}
@@ -43,7 +43,7 @@
<header class="bar bar-header bar-assertive">
<h1 class="title">Right</h1>
</header>
<content has-header="true">
<content>
<ul class="list">
<a href="#" class="item" ng-repeat="item in list">
{{item.text}}

16
js/ext/angular/test/subControllers.html
View File

@@ -16,7 +16,7 @@
</head>
<body>
<side-menu>
<side-menus>
<pane side-menu-content>
<header class="bar bar-header bar-dark">
<a href="#" class="button"><i class="icon-reorder"></i></a>
@@ -26,17 +26,17 @@
<h1>Slide me side to side!</h1>
</div>
</pane>
<menu side="left">
<side-menu side="left">
<h2>Left</h2>
<ul class="list">
<a href="#" class="list-item" ng-repeat="item in list">
{{item.text}}
</a>
</ul>
</menu>
<menu side="right">
</side-menu>
<side-menu side="right">
<tabs>
<tab title="Home" icon="icon-home" class="tab-content">
<tab title="Home" icon="ion-home" class="tab-content">
<header class="bar bar-header bar-dark">
<h1 class="title">Tab Bars</h1>
</header>
@@ -50,7 +50,7 @@
</content>
</tab>
<tab title="About" icon="icon-info" class="tab-content">
<tab title="About" icon="ion-info" class="tab-content">
<header class="bar bar-header bar-success">
<h1 class="title">About</h1>
</header>
@@ -68,8 +68,8 @@
</content>
</tab>
</tabs>
</menu>
</side-menu>
</side-menu>
</side-menus>
<script>
angular.module('sideMenuTest', ['ionic']);

66
js/ext/angular/test/tabBar.html
View File

@@ -1,66 +0,0 @@
<html ng-app="tabsTest">
<head>
<meta charset="utf-8">
<title>Tab Bars</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
<style>
.fade-out > .ng-enter,
.fade-out > .ng-leave,
.fade-out > .ng-move {
-webkit-transition: 0.2s linear all;
transition: 0.4s ease-out all;
position:relative;
}
.fade-out > .ng-enter {
left:-10px;
opacity:0;
}
.fade-out > .ng-enter.ng-enter-active {
left:0;
opacity:1;
}
.fade-out > .ng-leave {
left:0;
opacity:1;
}
.fade-out > .ng-leave.ng-leave-active {
left:-10px;
opacity:0;
}
.fade-out > .ng-move {
opacity:0.5;
}
.fade-out > .ng-move.ng-move-active {
opacity:1;
}
.completed {
text-decoration: line-through;
}
</style>
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/angular/angular.js"></script>
<script src="../../../../dist/js/angular/angular-animate.js"></script>
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>
<body>
<tab-bar>
<tab-item title="Home"></tab-item>
<tab-item title="Item"></tab-item>
<tab-item title="Test"></tab-item>
</tab-bar>
<script>
angular.module('tabsTest', ['ionic.ui', 'ionic.service.modal', 'ionic.service.actionSheet'])
</script>
</body>
</html>

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

@@ -64,14 +64,10 @@
<h1 class="title">Tasks</h1>
<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()" 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
<i class="icon ion-ios7-reloading"></i>
</div>
</refresher>
<content has-header="true" has-tabs="true" on-refresh="onRefresh()">
<refresher></refresher>
<list scroll="false" 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">
<item ng-repeat="item in items"
item="item"
buttons="item.buttons"
@@ -92,7 +88,7 @@
<header class="bar bar-header bar-positive">
<h1 class="title">Deadlines</h1>
</header>
<content has-header="true" has-tabs="true">
<content>
<h1>Deadlines</h1>
</content>
</tab>
@@ -101,7 +97,7 @@
<header class="bar bar-header bar-positive">
<h1 class="title">Settings</h1>
</header>
<content has-header="true" has-tabs="true">
<content>
<h1>Settings</h1>
</content>
</tab>
@@ -109,7 +105,7 @@
<header class="bar bar-header bar-positive">
<h1 class="title">Settings</h1>
</header>
<content has-header="true" has-tabs="true">
<content>
<h1>Settings</h1>
</content>
</tab>
@@ -117,7 +113,7 @@
<header class="bar bar-header bar-positive">
<h1 class="title">Settings</h1>
</header>
<content has-header="true" has-tabs="true">
<content>
<h1>Settings</h1>
</content>
</tab>
@@ -147,7 +143,7 @@
})
.controller('HomeCtrl', function($scope, Modal, ActionSheet) {
.controller('HomeCtrl', function($scope, $timeout, Modal, ActionSheet) {
$scope.items = [];
Modal.fromTemplateUrl('newTask.html', function(modal) {
@@ -179,8 +175,13 @@
$scope.onRefresh = function() {
console.log('ON REFRESH');
$timeout(function() {
$scope.$broadcast('scroll.refreshComplete');
}, 1000);
}
$scope.removeItem = function(item) {
removeItem(item);
};
@@ -190,7 +191,7 @@
};
// Create the items
for(var i = 0; i < 5; i++) {
for(var i = 0; i < 25; i++) {
$scope.items.push({
title: 'Task ' + (i + 1),
buttons: [{

12
js/views/listView.js
View File

@@ -258,7 +258,7 @@
* 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({
ionic.views.ListView = ionic.views.View.inherit({
initialize: function(opts) {
var _this = this;
@@ -274,7 +274,7 @@
this.itemHeight = this.listEl.children[0] && parseInt(this.listEl.children[0].style.height, 10);
}
ionic.views.ListView.__super__.initialize.call(this, opts);
//ionic.views.ListView.__super__.initialize.call(this, opts);
this.onRefresh = opts.onRefresh || function() {};
this.onRefreshOpening = opts.onRefreshOpening || function() {};
@@ -359,7 +359,7 @@
},
_initDrag: function() {
ionic.views.ListView.__super__._initDrag.call(this);
//ionic.views.ListView.__super__._initDrag.call(this);
//this._isDragging = false;
this._dragOp = null;
@@ -408,7 +408,7 @@
}
// We aren't handling it, so pass it up the chain
ionic.views.ListView.__super__._startDrag.call(this, e);
//ionic.views.ListView.__super__._startDrag.call(this, e);
},
@@ -416,7 +416,7 @@
var _this = this;
if(!this._dragOp) {
ionic.views.ListView.__super__._handleEndDrag.call(this, e);
//ionic.views.ListView.__super__._handleEndDrag.call(this, e);
return;
}
@@ -446,7 +446,7 @@
// No drag still, pass it up
if(!this._dragOp) {
ionic.views.ListView.__super__._handleDrag.call(this, e);
//ionic.views.ListView.__super__._handleDrag.call(this, e);
return;
}

1710
js/views/scrollZyng.js Normal file
View File

File diff suppressed because it is too large Load Diff

11
scss/_mixins.scss
View File

@@ -368,6 +368,17 @@
-moz-transform: translate3d($x, $y, $z);
transform: translate3d($x, $y, $z);
}
@mixin translateZ($z) {
-webkit-transform: translateZ($z);
-moz-transform: translateZ($z);
transform: translateZ($z);
}
@mixin transform-origin($left, $top) {
-webkit-transform-origin: $left $top;
-moz-transform-origin: $left $top;
transform-origin: $left $top;
}
// Backface visibility

106
scss/_scaffolding.scss
View File

@@ -61,14 +61,24 @@ body, .ionic-body {
}
.scroll-content {
position: absolute;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
overflow: hidden;
<<<<<<< HEAD
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
=======
// Hide the top border if any
margin-top: -1px;
width: auto;
>>>>>>> origin/228-scroll
}
/**
@@ -85,14 +95,21 @@ body, .ionic-body {
height: 100%;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
@include translateZ(0);
@include transform-origin(left, top);
}
// Scroll refresher (for pull to refresh)
.scroll-refresher {
display: none;
overflow: hidden;
margin-top: -100px;
height: 100px;
margin-top: -60px;
height: 60px;
position: relative;
.icon-refreshing {
display: none;
@include animation-duration(1.5s);
}
}
.scroll-refresher-content {
@@ -103,39 +120,65 @@ body, .ionic-body {
}
.ionic-refresher-content {
position: relative;
width: 100%;
height: 100%;
text-align: center;
}
.ionic-refresher {
position: absolute;
bottom: 25px;
left: 50%;
margin-left: -5px;
// A custom refresher
width: 10px;
height: 10px;
border-radius: 50%;
background-color: $positive;
left: 0;
bottom: 15px;
width: 100%;
text-align: center;
font-size: 30px;
color: $scroll-refresh-icon-color;
@include animation-duration(200ms);
@include animation-timing-function(linear);
@include animation-fill-mode(both);
}
.scroll-refreshing {
@include transition(height 0.1s ease-in-out);
@keyframes refresh-spin {
0% { transform: rotate(0); }
100% { transform: rotate(-180deg); }
}
.ionic-refresher {
@include animation(refresher-pulsate 1.5s linear);
-webkit-animation-iteration-count: infinite;
@-webkit-keyframes refresh-spin {
0% {-webkit-transform: rotate(0); }
100% {-webkit-transform: rotate(-180deg); }
}
.scroll-refresher.active {
.icon-pulling {
display: block;
}
.icon-refreshing {
display: none;
}
&.refreshing {
.icon-pulling {
display: none;
}
.icon-refreshing {
display: block;
}
}
.ionic-refresher-content {
@include animation-name(refresh-spin);
}
}
@-webkit-keyframes refresher-pulsate {
0% {-webkit-transform: scale(2, 2); }
50% {-webkit-transform: scale(1.5, 1.5); }
100% {-webkit-transform: scale(2, 2); }
.overflow-scroll {
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
.scroll {
position: static;
height: 100%;
}
}
.overflow-scroll {
overflow-x: hidden;
overflow-y: scroll;
@@ -163,12 +206,17 @@ body, .ionic-body {
// Specify that a content area will have tabs
.has-tabs {
bottom: 44px;
bottom: 49px;
}
// A full screen section with a solid background
.pane {
position: fixed;
}
.view {
position: absolute;
}
.pane, .view {
top: 0;
right: 0;
bottom: 0;

2
scss/_tabs.scss
View File

@@ -11,8 +11,10 @@
@include justify-content(center);
@include tab-style($tabs-default-bg, $tabs-default-border, $tabs-default-text);
position: absolute;
bottom: 0;
z-index: 5;
width: 100%;

4
scss/_variables.scss
View File

@@ -57,6 +57,10 @@ $border-radius-base: 4px !default;
$border-radius-large: 6px !default;
$border-radius-small: 3px !default;
// Content
// -------------------------------
$scroll-refresh-icon-color: #666666;
// Buttons
// -------------------------------

62
test/scroll_h.html Normal file
View File

@@ -0,0 +1,62 @@
<html>
<head>
<meta charset="utf-8">
<title>Content</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
<script src="../../../../dist/js/ionic.js"></script>
<style>
#c {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
font-family: sans-serif;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
#content{
background: white;
-webkit-transform-origin: left top;
-webkit-transform: translateZ(0);
-moz-transform-origin: left top;
-moz-transform: translateZ(0);
-ms-transform-origin: left top;
-ms-transform: translateZ(0);
-o-transform-origin: left top;
-o-transform: translateZ(0);
transform-origin: left top;
transform: translateZ(0);
}
</style>
</head>
<body>
<div id="c">
<div style="width: 5000px; height: 200px; background: url('tree_bark.png') repeat"></div>
</div>
<script>
var container = document.getElementById('c');
// Initialize Scroller
var scroller = new ionic.views.Scroller({
el: container,
scrollingX: true,
scrollingY: false
});
</script>
</body>
</html>

64
test/scroll_z.html Normal file
View File

@@ -0,0 +1,64 @@
<html>
<head>
<meta charset="utf-8">
<title>Content</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
<script src="../../../../dist/js/ionic.js"></script>
<style>
#c {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
font-family: sans-serif;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
#content{
background: white;
width: 100%;
-webkit-transform-origin: left top;
-webkit-transform: translateZ(0);
-moz-transform-origin: left top;
-moz-transform: translateZ(0);
-ms-transform-origin: left top;
-ms-transform: translateZ(0);
-o-transform-origin: left top;
-o-transform: translateZ(0);
transform-origin: left top;
transform: translateZ(0);
}
</style>
</head>
<body>
<div id="c">
<div id="content">
<div style="height: 3000px; width: 100%; background: url('tree_bark.png') repeat"></div>
</div>
</div>
<script>
var container = document.getElementById('c');
// Initialize Scroller
var scroller = new ionic.views.Scroller({
el: container,
scrollingX: false
});
</script>
</body>
</html>