Skip to content

Commit 2e87fe3

Browse files
author
Max Lynch
committed
Fixed #296 - scrollview dynamic sizing
1 parent c08007d commit 2e87fe3

10 files changed

Lines changed: 143 additions & 6 deletions

File tree

‎dist/css/ionic.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6334,6 +6334,15 @@ a.button {
63346334
.full-image {
63356335
width: 100%; }
63366336

6337+
.clearfix {
6338+
*zoom: 1; }
6339+
.clearfix:before, .clearfix:after {
6340+
display: table;
6341+
content: "";
6342+
line-height: 0; }
6343+
.clearfix:after {
6344+
clear: both; }
6345+
63376346
/**
63386347
* Content Padding
63396348
* --------------------------------------------------

‎dist/css/ionic.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/ionic.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2413,6 +2413,10 @@ ionic.views.Scroll = ionic.views.View.inherit({
24132413
this.options[key] = options[key];
24142414
}
24152415

2416+
this.hintResize = ionic.debounce(function() {
2417+
self.resize();
2418+
}, 1000, true);
2419+
24162420
this.triggerScrollEvent = ionic.throttle(function() {
24172421
ionic.trigger('scroll', {
24182422
scrollTop: self.__scrollTop,
@@ -2673,8 +2677,8 @@ ionic.views.Scroll = ionic.views.View.inherit({
26732677
// Update Scroller dimensions for changed content
26742678
// Add padding to bottom of content
26752679
this.setDimensions(
2676-
Math.min(this.__container.clientWidth, this.__container.parentElement.clientWidth),
2677-
Math.min(this.__container.clientHeight, this.__container.parentElement.clientHeight),
2680+
this.__container.clientWidth,
2681+
this.__container.clientHeight,
26782682
this.__content.offsetWidth,
26792683
this.__content.offsetHeight+20);
26802684
},
@@ -3106,6 +3110,7 @@ ionic.views.Scroll = ionic.views.View.inherit({
31063110
* Touch start handler for scrolling support
31073111
*/
31083112
doTouchStart: function(touches, timeStamp) {
3113+
this.hintResize();
31093114

31103115
// Array-like check is enough here
31113116
if (touches.length == null) {

‎dist/js/ionic.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/starters/flickr/README.md‎

Whitespace-only changes.

‎examples/starters/flickr/index.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html ng-app="myApp">
3+
4+
<head>
5+
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
6+
7+
<!-- Sets initial viewport load and disables zooming -->
8+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
9+
10+
<title></title>
11+
12+
<link rel="stylesheet" href="style.css">
13+
<link rel="stylesheet" type="text/css" href="/dist/css/ionic.css">
14+
15+
<script src="/dist/js/ionic.js"></script>
16+
<script src="/dist/js/angular/angular.js"></script>
17+
<script src="/dist/js/angular/angular-animate.js"></script>
18+
<script src="/dist/js/angular/angular-route.js"></script>
19+
<script src="/dist/js/angular/angular-touch.js"></script>
20+
<script src="/dist/js/angular/angular-sanitize.js"></script>
21+
<script src="/dist/js/angular/angular-resource.js"></script>
22+
<script src="/dist/js/ionic-angular.js"></script>
23+
24+
25+
<script src="script.js"></script>
26+
</head>
27+
28+
<body>
29+
30+
<div ng-controller="FlickrCtrl">
31+
<header-bar title="'Flickr Search'" type="bar-dark">
32+
</header-bar>
33+
<content has-header="true">
34+
<div class="list">
35+
<div class="item item-input-inset">
36+
<label class="item-input-wrapper" id="search-input">
37+
<i class="icon ion-search placeholder-icon"></i>
38+
<input type="text" placeholder="Search" ng-model="query" ng-change="search()">
39+
</label>
40+
</div>
41+
</div>
42+
<div id="photos" class="clearfix">
43+
<div class="photo" ng-repeat="photo in photos.items">
44+
<img ng-src="{{ photo.media.m }}">
45+
</div>
46+
</div>
47+
</content>
48+
</div>
49+
50+
</body>
51+
52+
</html>

‎examples/starters/flickr/script.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
angular.module('myApp', ['ionic', 'ngResource'])
2+
3+
.factory('Flickr', function($resource, $q) {
4+
var photosPublic = $resource('http://api.flickr.com/services/feeds/photos_public.gne',
5+
{ format: 'json', jsoncallback: 'JSON_CALLBACK' },
6+
{ 'load': { 'method': 'JSONP' } });
7+
8+
return {
9+
search: function(query) {
10+
var q = $q.defer();
11+
photosPublic.load({
12+
tags: query
13+
}, function(resp) {
14+
q.resolve(resp);
15+
}, function(err) {
16+
q.reject(err);
17+
})
18+
19+
return q.promise;
20+
}
21+
}
22+
})
23+
.controller('FlickrCtrl', function($scope, Flickr) {
24+
var doSearch = ionic.debounce(function(query) {
25+
Flickr.search(query).then(function(resp) {
26+
$scope.photos = resp;
27+
});
28+
}, 300);
29+
30+
$scope.search = function() {
31+
doSearch($scope.query);
32+
}
33+
34+
});

‎examples/starters/flickr/style.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
#search-input {
2+
text-align: center;
3+
}
4+
5+
#photos {
6+
-webkit-flex-wrap: wrap;
7+
-webkit-flex-direction: row;
8+
}
9+
10+
.photo {
11+
width: 25%;
12+
min-width: 150px;
13+
max-width: 200px;
14+
max-height: 200px;
15+
margin: 10px;
16+
float: left;
17+
}
18+
.photo img { width: 100%; }

‎js/views/scrollView.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -346,6 +346,10 @@ ionic.views.Scroll = ionic.views.View.inherit({
346346
this.options[key] = options[key];
347347
}
348348

349+
this.hintResize = ionic.debounce(function() {
350+
self.resize();
351+
}, 1000, true);
352+
349353
this.triggerScrollEvent = ionic.throttle(function() {
350354
ionic.trigger('scroll', {
351355
scrollTop: self.__scrollTop,
@@ -606,8 +610,8 @@ ionic.views.Scroll = ionic.views.View.inherit({
606610
// Update Scroller dimensions for changed content
607611
// Add padding to bottom of content
608612
this.setDimensions(
609-
Math.min(this.__container.clientWidth, this.__container.parentElement.clientWidth),
610-
Math.min(this.__container.clientHeight, this.__container.parentElement.clientHeight),
613+
this.__container.clientWidth,
614+
this.__container.clientHeight,
611615
this.__content.offsetWidth,
612616
this.__content.offsetHeight+20);
613617
},
@@ -1039,6 +1043,7 @@ ionic.views.Scroll = ionic.views.View.inherit({
10391043
* Touch start handler for scrolling support
10401044
*/
10411045
doTouchStart: function(touches, timeStamp) {
1046+
this.hintResize();
10421047

10431048
// Array-like check is enough here
10441049
if (touches.length == null) {

‎scss/_util.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,20 @@
3535
width: 100%;
3636
}
3737

38+
.clearfix {
39+
*zoom: 1;
40+
&:before,
41+
&:after {
42+
display: table;
43+
content: "";
44+
// Fixes Opera/contenteditable bug:
45+
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
46+
line-height: 0;
47+
}
48+
&:after {
49+
clear: both;
50+
}
51+
}
3852

3953
/**
4054
* Content Padding

0 commit comments

Comments
 (0)