mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Fixed #296 - scrollview dynamic sizing
This commit is contained in:
Max Lynch
9
dist/css/ionic.css
vendored
9
dist/css/ionic.css
vendored
@@ -6334,6 +6334,15 @@ a.button {
|
||||
.full-image {
|
||||
width: 100%; }
|
||||
|
||||
.clearfix {
|
||||
*zoom: 1; }
|
||||
.clearfix:before, .clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0; }
|
||||
.clearfix:after {
|
||||
clear: both; }
|
||||
|
||||
/**
|
||||
* Content Padding
|
||||
* --------------------------------------------------
|
||||
|
||||
2
dist/css/ionic.min.css
vendored
2
dist/css/ionic.min.css
vendored
File diff suppressed because one or more lines are too long
9
dist/js/ionic.js
vendored
9
dist/js/ionic.js
vendored
@@ -2413,6 +2413,10 @@ ionic.views.Scroll = ionic.views.View.inherit({
|
||||
this.options[key] = options[key];
|
||||
}
|
||||
|
||||
this.hintResize = ionic.debounce(function() {
|
||||
self.resize();
|
||||
}, 1000, true);
|
||||
|
||||
this.triggerScrollEvent = ionic.throttle(function() {
|
||||
ionic.trigger('scroll', {
|
||||
scrollTop: self.__scrollTop,
|
||||
@@ -2673,8 +2677,8 @@ ionic.views.Scroll = ionic.views.View.inherit({
|
||||
// Update Scroller dimensions for changed content
|
||||
// Add padding to bottom of content
|
||||
this.setDimensions(
|
||||
Math.min(this.__container.clientWidth, this.__container.parentElement.clientWidth),
|
||||
Math.min(this.__container.clientHeight, this.__container.parentElement.clientHeight),
|
||||
this.__container.clientWidth,
|
||||
this.__container.clientHeight,
|
||||
this.__content.offsetWidth,
|
||||
this.__content.offsetHeight+20);
|
||||
},
|
||||
@@ -3106,6 +3110,7 @@ ionic.views.Scroll = ionic.views.View.inherit({
|
||||
* Touch start handler for scrolling support
|
||||
*/
|
||||
doTouchStart: function(touches, timeStamp) {
|
||||
this.hintResize();
|
||||
|
||||
// Array-like check is enough here
|
||||
if (touches.length == null) {
|
||||
|
||||
2
dist/js/ionic.min.js
vendored
2
dist/js/ionic.min.js
vendored
File diff suppressed because one or more lines are too long
0
examples/starters/flickr/README.md
Normal file
0
examples/starters/flickr/README.md
Normal file
52
examples/starters/flickr/index.html
Normal file
52
examples/starters/flickr/index.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app="myApp">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
|
||||
<title></title>
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" type="text/css" 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/angular/angular-resource.js"></script>
|
||||
<script src="/dist/js/ionic-angular.js"></script>
|
||||
|
||||
|
||||
<script src="script.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div ng-controller="FlickrCtrl">
|
||||
<header-bar title="'Flickr Search'" type="bar-dark">
|
||||
</header-bar>
|
||||
<content has-header="true">
|
||||
<div class="list">
|
||||
<div class="item item-input-inset">
|
||||
<label class="item-input-wrapper" id="search-input">
|
||||
<i class="icon ion-search placeholder-icon"></i>
|
||||
<input type="text" placeholder="Search" ng-model="query" ng-change="search()">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="photos" class="clearfix">
|
||||
<div class="photo" ng-repeat="photo in photos.items">
|
||||
<img ng-src="{{ photo.media.m }}">
|
||||
</div>
|
||||
</div>
|
||||
</content>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
34
examples/starters/flickr/script.js
Normal file
34
examples/starters/flickr/script.js
Normal file
@@ -0,0 +1,34 @@
|
||||
angular.module('myApp', ['ionic', 'ngResource'])
|
||||
|
||||
.factory('Flickr', function($resource, $q) {
|
||||
var photosPublic = $resource('http://api.flickr.com/services/feeds/photos_public.gne',
|
||||
{ format: 'json', jsoncallback: 'JSON_CALLBACK' },
|
||||
{ 'load': { 'method': 'JSONP' } });
|
||||
|
||||
return {
|
||||
search: function(query) {
|
||||
var q = $q.defer();
|
||||
photosPublic.load({
|
||||
tags: query
|
||||
}, function(resp) {
|
||||
q.resolve(resp);
|
||||
}, function(err) {
|
||||
q.reject(err);
|
||||
})
|
||||
|
||||
return q.promise;
|
||||
}
|
||||
}
|
||||
})
|
||||
.controller('FlickrCtrl', function($scope, Flickr) {
|
||||
var doSearch = ionic.debounce(function(query) {
|
||||
Flickr.search(query).then(function(resp) {
|
||||
$scope.photos = resp;
|
||||
});
|
||||
}, 300);
|
||||
|
||||
$scope.search = function() {
|
||||
doSearch($scope.query);
|
||||
}
|
||||
|
||||
});
|
||||
18
examples/starters/flickr/style.css
Normal file
18
examples/starters/flickr/style.css
Normal file
@@ -0,0 +1,18 @@
|
||||
#search-input {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#photos {
|
||||
-webkit-flex-wrap: wrap;
|
||||
-webkit-flex-direction: row;
|
||||
}
|
||||
|
||||
.photo {
|
||||
width: 25%;
|
||||
min-width: 150px;
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
margin: 10px;
|
||||
float: left;
|
||||
}
|
||||
.photo img { width: 100%; }
|
||||
@@ -346,6 +346,10 @@ ionic.views.Scroll = ionic.views.View.inherit({
|
||||
this.options[key] = options[key];
|
||||
}
|
||||
|
||||
this.hintResize = ionic.debounce(function() {
|
||||
self.resize();
|
||||
}, 1000, true);
|
||||
|
||||
this.triggerScrollEvent = ionic.throttle(function() {
|
||||
ionic.trigger('scroll', {
|
||||
scrollTop: self.__scrollTop,
|
||||
@@ -606,8 +610,8 @@ ionic.views.Scroll = ionic.views.View.inherit({
|
||||
// Update Scroller dimensions for changed content
|
||||
// Add padding to bottom of content
|
||||
this.setDimensions(
|
||||
Math.min(this.__container.clientWidth, this.__container.parentElement.clientWidth),
|
||||
Math.min(this.__container.clientHeight, this.__container.parentElement.clientHeight),
|
||||
this.__container.clientWidth,
|
||||
this.__container.clientHeight,
|
||||
this.__content.offsetWidth,
|
||||
this.__content.offsetHeight+20);
|
||||
},
|
||||
@@ -1039,6 +1043,7 @@ ionic.views.Scroll = ionic.views.View.inherit({
|
||||
* Touch start handler for scrolling support
|
||||
*/
|
||||
doTouchStart: function(touches, timeStamp) {
|
||||
this.hintResize();
|
||||
|
||||
// Array-like check is enough here
|
||||
if (touches.length == null) {
|
||||
|
||||
@@ -35,6 +35,20 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
*zoom: 1;
|
||||
&:before,
|
||||
&:after {
|
||||
display: table;
|
||||
content: "";
|
||||
// Fixes Opera/contenteditable bug:
|
||||
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
|
||||
line-height: 0;
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Content Padding
|
||||
|
||||
Reference in New Issue
Block a user