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

Merge branch 'pr/351'

Browse Source 
Conflicts:
	dist/css/ionic.css
	dist/js/ionic-angular.js
	dist/js/ionic.js
This commit is contained in:
Max Lynch
2014-01-07 19:17:42 -06:00
parent 0a6cf0a347 c0e11312bb
commit 437317c07c
12 changed files with 477 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
dist/css/ionic.css vendored
View File

@@ -2700,6 +2700,24 @@ body, .ionic-body {
-moz-animation-name: refresh-spin;
animation-name: refresh-spin; }
infinite-scroll .scroll-infinite {
overflow: hidden;
margin-top: -70px;
height: 60px;
position: relative; }
.scroll-infinite-content {
position: absolute;
left: 0;
bottom: 15px;
width: 100%;
text-align: center;
font-size: 30px;
color: #666666; }
infinite-scroll.active .scroll-infinite {
margin-top: -30px; }
.overflow-scroll {
overflow-x: hidden;
overflow-y: scroll;

2
dist/css/ionic.min.css vendored
View File

File diff suppressed because one or more lines are too long

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

@@ -736,6 +736,8 @@ angular.module('ionic.ui.content', ['ionic.ui.service'])
onScroll: '&',
onScrollComplete: '&',
refreshComplete: '=',
onInfiniteScroll: '=',
infiniteScrollDistance: '@',
scroll: '@',
hasScrollX: '@',
hasScrollY: '@',
@@ -828,7 +830,38 @@ angular.module('ionic.ui.content', ['ionic.ui.service'])
$scope.$parent.scrollView = sv;
});
// Check if this supports infinite scrolling and listen for scroll events
// to trigger the infinite scrolling
var infiniteScroll = $element.find('infinite-scroll');
var infiniteStarted = false;
if(infiniteScroll) {
// Parse infinite scroll distance
var distance = attr.infiniteScrollDistance || '1%';
var maxScroll;
if(distance.indexOf('%')) {
// It's a multiplier
maxScroll = function() {
return sv.getScrollMax().top * ( 1 - parseInt(distance, 10) / 100 );
};
} else {
// It's a pixel value
maxScroll = function() {
return sv.getScrollMax().top - parseInt(distance, 10);
};
}
$element.bind('scroll', function(e) {
if( sv && !infiniteStarted && (sv.getValues().top > maxScroll() ) ) {
infiniteStarted = true;
infiniteScroll.addClass('active');
var cb = function() {
sv.resize();
infiniteStarted = false;
infiniteScroll.removeClass('active');
};
$scope.$apply(angular.bind($scope, $scope.onInfiniteScroll, cb));
}
});
}
}
// if padding attribute is true, then add padding if it wasn't added to the .scroll
@@ -858,8 +891,15 @@ angular.module('ionic.ui.content', ['ionic.ui.service'])
transclude: true,
template: '<div class="scroll-refresher"><div class="scroll-refresher-content" ng-transclude></div></div>'
};
});
})
.directive('infiniteScroll', function() {
return {
restrict: 'E',
replace: false,
template: '<div class="scroll-infinite"><div class="scroll-infinite-content"><i class="icon ion-loading-d icon-refreshing"></i></div></div>'
};
});
})();
;
@@ -868,7 +908,7 @@ angular.module('ionic.ui.content', ['ionic.ui.service'])
angular.module('ionic.ui.list', ['ngAnimate'])
.directive('item', ['$timeout', function($timeout) {
.directive('item', ['$timeout', '$parse', function($timeout, $parse) {
return {
restrict: 'E',
require: '?^list',
@@ -912,7 +952,6 @@ angular.module('ionic.ui.list', ['ngAnimate'])
// Set this item's class, first from the item directive attr, and then the list attr if item not set
$scope.itemClass = $scope.itemType || $parentScope.itemType;
// Decide if this item can do stuff, and follow a certain priority
// depending on where the value comes from
if(($attr.canDelete ? $scope.canDelete : $parentScope.canDelete) !== "false") {

4
dist/js/ionic-angular.min.js vendored
View File

File diff suppressed because one or more lines are too long

98
examples/starters/infinitescroll/index.html Normal file
View File

@@ -0,0 +1,98 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ionic List Example</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="/dist/css/ionic.css" rel="stylesheet">
<!-- ionic/angularjs scripts -->
<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>
<!-- your app's script -->
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
</head>
<!--
'listExample' is the name of this angular module (app.js)
'nav-router' attribute updates the nav-bar title and animations as you navigate
'animation' attribute sets which type of animations to use
-->
<body ng-app="listExample" nav-router animation="slide-left-right-ios7">
<!-- The nav bar that will be updated as we navigate -->
<nav-bar
class="nav-title-slide-ios7"
type="bar-positive"
back-button-type="button-icon"
back-button-icon="ion-arrow-left-c"></nav-bar>
<!-- where the content of each page will be rendered -->
<ng-view></ng-view>
<!--
Belows are examples of using inline angular templates:
http://docs.angularjs.org/api/ng.directive:script
-->
<!--
This template loads when the the root '/' url is matched (app.js)
'movies' is a $scope variable which was created in MovieIndexCtrl (controllers.js)
The MovieIndexCtrl gets data from the MovieService (service.js)
-->
<script type="text/ng-template" id="/index.html">
<nav-page title="title">
<content has-header="true" on-infinite-scroll="loadMore">
<list>
<item ng-repeat="movie in movies" href="#/movie/{{movie.id}}" type="item-link">
{{ movie.title }}
</item>
</list>
<infinite-scroll></infinite-scroll>
</content>
</nav-page>
</script>
<!--
This template loads when the '/movie/:movieId' url is matched (app.js)
'movie' is a $scope variable which was created in MovieDetailCtrl (controllers.js)
The MovieDetailCtrl gets data from the MovieService (service.js)
-->
<script type="text/ng-template" id="/movie.html">
<nav-page title="title">
<content has-header="true" padding="true">
<h1>{{ movie.title }}</h1>
<dl>
<dt>Description:</dt>
<dd>{{ movie.description }}</dd>
</dl>
<dl>
<dt>Released:</dt>
<dd>{{ movie.released }}</dd>
</dl>
<dl>
<dt>Director:</dt>
<dd>{{ movie.director }}</dd>
</dl>
<dl>
<dt>Rating:</dt>
<dd>{{ movie.rating }}</dd>
</dl>
</content>
</nav-page>
</script>
</body>
</html>

36
examples/starters/infinitescroll/js/app.js Normal file
View File

@@ -0,0 +1,36 @@
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'listExample' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array or 'requires'
// 'listExample.services' is found in services.js
// 'listExample.controllers' is found in controllers.js
angular.module('listExample', ['ionic', 'ngRoute', 'ngAnimate', 'listExample.services', 'listExample.controllers'])
.config(function ($compileProvider){
// Needed for routing to work
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
})
.config(function($routeProvider, $locationProvider) {
// Set up the initial routes that our app will respond to.
// These are then tied up to our nav router which animates and
// updates a navigation bar
$routeProvider.when('/', {
templateUrl: '/index.html',
controller: 'MovieIndexCtrl'
});
// if the url matches something like /movie/88 then this route
// will fire off the MovieDetailCtrl (controllers.js)
$routeProvider.when('/movie/:movieId', {
templateUrl: '/movie.html',
controller: 'MovieDetailCtrl'
});
// if none of the above routes are met, use this fallback
$routeProvider.otherwise({
redirectTo: '/'
});
});

36
examples/starters/infinitescroll/js/controllers.js Normal file
View File

@@ -0,0 +1,36 @@
angular.module('listExample.controllers', [])
// Controller that fetches a list of data
.controller('MovieIndexCtrl', function($scope, MovieService,$timeout) {
// "MovieService" is a service returning mock data (services.js)
// the returned data from the service is placed into this
// controller's scope so the template can render the data
$scope.movies = MovieService.all();
$scope.title = "Completely Random Collection Of Movies";
// Method called on infinite scroll
// Receives a "done" callback to inform the infinite scroll that we are done
$scope.loadMore = function(done) {
$timeout(function() {
$scope.movies.push({
id: 'tt0114814',
title: 'Usual Suspects',
released: '1995',
description: 'A boat has been destroyed, criminals are dead, and the key to this mystery lies with the only survivor and his twisted, convoluted story beginning with five career crooks in a seemingly random police lineup.',
director: 'Bryan Singer',
rating: 8.3
});
done();
}, 1000);
}
})
// Controller that shows more detailed info about a movie
.controller('MovieDetailCtrl', function($scope, $routeParams, MovieService) {
// "MovieService" is a service returning mock data (services.js)
$scope.movie = MovieService.get($routeParams.movieId);
$scope.title = "Movie Info";
});

146
examples/starters/infinitescroll/js/services.js Normal file
View File

@@ -0,0 +1,146 @@
angular.module('listExample.services', [])
/**
* A simple example service that returns some data.
*/
.factory('MovieService', function() {
// Might use a resource here that returns a JSON array
// Some fake testing data
var movies = [
{
id: 'tt0080487',
title: 'Caddyshack',
released: '1980',
description: 'An exclusive golf course has to deal with a brash new member and a destructive dancing gopher.',
director: 'Harold Ramis',
rating: 7.2
},
{
id: 'tt0087332',
title: 'Ghostbusters',
released: '1984',
description: 'Three unemployed parapsychology professors set up shop as a unique ghost removal service.',
director: 'Ivan Reitman',
rating: 7.8
},
{
id: 'tt0097428',
title: 'Ghostbusters II',
released: '1989',
description: 'The discovery of a massive river of ectoplasm and a resurgence of spectral activity allows the staff of Ghostbusters to revive the business.',
director: 'Ivan Reitman',
rating: 6.4
},
{
id: 'tt0107048',
title: 'Groundhog Day',
released: '1993',
description: 'A weatherman finds himself living the same day over and over again.',
director: 'Harold Ramis',
rating: 8.1
},
{
id: 'tt0116778',
title: 'Kingpin',
released: '1996',
description: 'A star bowler whose career was prematurely "cut off" hopes to ride a new prodigy to success and riches.',
director: 'Bobby Farrelly, Peter Farrelly',
rating: 6.8
},
{
id: 'tt0335266',
title: 'Lost in Translation',
released: '2003',
description: 'A faded movie star and a neglected young wife form an unlikely bond after crossing paths in Tokyo.',
director: 'Sofia Coppola',
rating: 7.8
},
{
id: 'tt0079540',
title: 'Meatballs',
released: '1979',
description: 'Wacky hijinks of counselors and campers at a less-than-average summer camp.',
director: 'Ivan Reitman',
rating: 5.9
},
{
id: 'tt0128445',
title: 'Rushmore',
released: '1998',
description: 'The king of Rushmore prep school is put on academic probation.',
director: 'Wes Anderson',
rating: 7.7
},
{
id: 'tt0096061',
title: 'Scrooged',
released: '1988',
description: 'A cynically selfish TV executive gets haunted by three spirits bearing lessons on Christmas Eve.',
director: 'Richard Donner',
rating: 6.9
},
{
id: 'tt0083131',
title: 'Stripes',
released: '1981',
description: 'Two friends who are dissatisfied with their jobs decide to join the army for a bit of fun.',
director: 'Ivan Reitman',
rating: 6.8
},
{
id: 'tt0362270',
title: 'The Life Aquatic with Steve Zissou',
released: '2004',
description: 'With a plan to exact revenge on a mythical shark that killed his partner, oceanographer Steve Zissou rallies a crew that includes his estranged wife, a journalist, and a man who may or may not be his son.',
director: 'Wes Anderson',
rating: 7.2
},
{
id: 'tt0120483',
title: 'The Man Who Knew Too Little',
released: '1997',
description: 'Murray is mistaken for a spy and must stop a plot to assasinate international leaders at a banquet.',
director: 'Jon Amiel',
rating: 6.4
},
{
id: 'tt0265666',
title: 'The Royal Tenenbaums',
released: '2001',
description: 'An estranged family of former child prodigies reunites when one of their member announces he has a terminal illness.',
director: 'Wes Anderson',
rating: 7.5
},
{
id: 'tt0103241',
title: 'What About Bob?',
released: '1991',
description: 'A successful psychiatrist loses his mind after one of his most dependent patients, a highly manipulative obsessive-compulsive, tracks him down during his family vacation.',
director: 'Frank Oz',
rating: 6.8
},
{
id: 'tt1156398',
title: 'Zombieland',
released: '2009',
description: 'A shy student trying to reach his family in Ohio, and a gun-toting tough guy trying to find the Last Twinkie and a pair of sisters trying to get to an amusement park join forces to travel across a zombie-filled America.',
director: 'Ruben Fleischer',
rating: 7.7
}
];
return {
all: function() {
return movies;
},
get: function(movieId) {
// Simple index lookup
for(var i=0, l=movies.length; i < l; i++) {
if(movies[i].id == movieId) {
return movies[i];
}
}
}
}
});

34
examples/starters/list/js/controllers.js
View File

@@ -2,7 +2,7 @@ angular.module('listExample.controllers', [])
// Controller that fetches a list of data
.controller('MovieIndexCtrl', function($scope, MovieService) {
.controller('MovieIndexCtrl', function($scope, MovieService,$timeout) {
// "MovieService" is a service returning mock data (services.js)
// the returned data from the service is placed into this
@@ -10,6 +10,38 @@ angular.module('listExample.controllers', [])
$scope.movies = MovieService.all();
$scope.title = "Completely Random Collection Of Movies";
// Method called on infinite scroll
// Receives a "done" callback to inform the infinite scroll that we are done
$scope.loadMore = function(done) {
$timeout(function() {
$scope.movies.push({
id: 'tt0114814',
title: 'Usual Suspects',
released: '1995',
description: 'A boat has been destroyed, criminals are dead, and the key to this mystery lies with the only survivor and his twisted, convoluted story beginning with five career crooks in a seemingly random police lineup.',
director: 'Bryan Singer',
rating: 8.3
});
$scope.movies.push({
id: 'tt0357413',
title: 'Anchorman: The Legend of Ron Burgundy',
released: '2004',
description: "Ron Burgundy is San Diego's top rated newsman in the male-dominated broadcasting of the 70's, but that's all about to change for Ron and his cronies when an ambitious woman is hired as a new anchor.",
director: 'Adam McKay',
rating: 7.2
});
$scope.movies.push({
id: 'tt0058331',
title: 'Mary Poppins',
released: '1964',
description: "A magic nanny comes to work for a cold banker's unhappy family.",
director: 'Robert Stevenson',
rating: 7.7
});
done();
}, 1000);
}
})
// Controller that shows more detailed info about a movie

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

@@ -30,6 +30,8 @@ angular.module('ionic.ui.content', ['ionic.ui.service'])
onScroll: '&',
onScrollComplete: '&',
refreshComplete: '=',
onInfiniteScroll: '=',
infiniteScrollDistance: '@',
scroll: '@',
hasScrollX: '@',
hasScrollY: '@',
@@ -122,7 +124,38 @@ angular.module('ionic.ui.content', ['ionic.ui.service'])
$scope.$parent.scrollView = sv;
});
// Check if this supports infinite scrolling and listen for scroll events
// to trigger the infinite scrolling
var infiniteScroll = $element.find('infinite-scroll');
var infiniteStarted = false;
if(infiniteScroll) {
// Parse infinite scroll distance
var distance = attr.infiniteScrollDistance || '1%';
var maxScroll;
if(distance.indexOf('%')) {
// It's a multiplier
maxScroll = function() {
return sv.getScrollMax().top * ( 1 - parseInt(distance, 10) / 100 );
};
} else {
// It's a pixel value
maxScroll = function() {
return sv.getScrollMax().top - parseInt(distance, 10);
};
}
$element.bind('scroll', function(e) {
if( sv && !infiniteStarted && (sv.getValues().top > maxScroll() ) ) {
infiniteStarted = true;
infiniteScroll.addClass('active');
var cb = function() {
sv.resize();
infiniteStarted = false;
infiniteScroll.removeClass('active');
};
$scope.$apply(angular.bind($scope, $scope.onInfiniteScroll, cb));
}
});
}
}
// if padding attribute is true, then add padding if it wasn't added to the .scroll
@@ -152,7 +185,14 @@ angular.module('ionic.ui.content', ['ionic.ui.service'])
transclude: true,
template: '<div class="scroll-refresher"><div class="scroll-refresher-content" ng-transclude></div></div>'
};
})
.directive('infiniteScroll', function() {
return {
restrict: 'E',
replace: false,
template: '<div class="scroll-infinite"><div class="scroll-infinite-content"><i class="icon ion-loading-d icon-refreshing"></i></div></div>'
};
});
})();

3
js/ext/angular/src/directive/ionicList.js vendored
View File

@@ -3,7 +3,7 @@
angular.module('ionic.ui.list', ['ngAnimate'])
.directive('item', ['$timeout', function($timeout) {
.directive('item', ['$timeout', '$parse', function($timeout, $parse) {
return {
restrict: 'E',
require: '?^list',
@@ -47,7 +47,6 @@ angular.module('ionic.ui.list', ['ngAnimate'])
// Set this item's class, first from the item directive attr, and then the list attr if item not set
$scope.itemClass = $scope.itemType || $parentScope.itemType;
// Decide if this item can do stuff, and follow a certain priority
// depending on where the value comes from
if(($attr.canDelete ? $scope.canDelete : $parentScope.canDelete) !== "false") {

21
scss/_scaffolding.scss
View File

@@ -219,6 +219,27 @@ body, .ionic-body {
}
}
// Infinite scroll
infinite-scroll .scroll-infinite {
overflow: hidden;
margin-top: -70px;
height: 60px;
position: relative;
}
.scroll-infinite-content {
position: absolute;
left: 0;
bottom: 15px;
width: 100%;
text-align: center;
font-size: 30px;
color: #666666; }
infinite-scroll.active .scroll-infinite {
margin-top: -30px;
}
.overflow-scroll {
overflow-x: hidden;
overflow-y: scroll;