Fixed #296 - scrollview dynamic sizing

ionic-team · Dec 9, 2013 · 2e87fe3 · 2e87fe3
1 parent c08007d
commit 2e87fe3
Show file tree

Hide file tree

Showing 10 changed files with 143 additions and 6 deletions.
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
@@ -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
  * --------------------------------------------------

diff --git a/dist/css/ionic.min.css b/dist/css/ionic.min.css
diff --git a/dist/js/ionic.js b/dist/js/ionic.js
@@ -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) {

diff --git a/dist/js/ionic.min.js b/dist/js/ionic.min.js
diff --git a/examples/starters/flickr/README.md b/examples/starters/flickr/README.md
diff --git a/examples/starters/flickr/index.html b/examples/starters/flickr/index.html
@@ -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>
diff --git a/examples/starters/flickr/script.js b/examples/starters/flickr/script.js
@@ -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);
+  }
+
+});
diff --git a/examples/starters/flickr/style.css b/examples/starters/flickr/style.css
@@ -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%; }
diff --git a/js/views/scrollView.js b/js/views/scrollView.js
@@ -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) {

diff --git a/scss/_util.scss b/scss/_util.scss
@@ -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