Some loading box tweaks

dist/css/ionic-ios7.css

@@ -375,6 +375,14 @@ body, .ionic-body {
   height: 100%;
   -webkit-overflow-scrolling: touch; }
 
+.content-plain {
+  position: absolute;
+  width: 100%;
+  top: 0;
+  bottom: 0;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch; }
+
 .has-header {
   margin-top: 44px; }
 

dist/css/ionic.css

@@ -1454,6 +1454,14 @@ body, .ionic-body {
   height: 100%;
   -webkit-overflow-scrolling: touch; }
 
+.content-plain {
+  position: absolute;
+  width: 100%;
+  top: 0;
+  bottom: 0;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch; }
+
 .has-header {
   margin-top: 44px; }
 
@@ -2074,11 +2082,13 @@ address {
   position: fixed;
   left: 50%;
   top: 50%;
+  text-align: center;
+  text-overflow: ellipsis;
   border-radius: 5px;
   padding: 20px;
   background-color: rgba(0, 0, 0, 0.7);
   color: #fff;
-  font-size: 20px; }
+  font-size: 15px; }
   .loading h1, .loading h2, .loading h3, .loading h4, .loading h5 {
     color: #fff; }
 

dist/js/ionic-angular.js

@@ -96,7 +96,9 @@ angular.module('ionic.service.loading', ['ionic.ui.loading'])
       var defaults = {
         content: '',
         animation: 'fade-in',
-        showBackdrop: true
+        showBackdrop: true,
+        maxWidth: 200,
+        showDelay: 2000
       };
 
       opts = angular.extend(defaults, opts);
@@ -119,7 +121,12 @@ angular.module('ionic.service.loading', ['ionic.ui.loading'])
 
       $document[0].body.appendChild(element[0]);
 
-      var loading = new ionic.views.Loading({el: element[0] });
+      var loading = new ionic.views.Loading({
+        el: element[0],
+        maxWidth: opts.maxWidth,
+        showDelay: opts.showDelay
+      });
+
       loading.show();
 
       scope.loading = loading;

dist/js/ionic.js

@@ -2336,6 +2336,9 @@ window.ionic = {
     var _this = this;
 
     this.el = opts.el;
+
+    this.maxWidth = opts.maxWidth || 200;
+
     this._loadingBox = this.el.querySelector('.loading');
   };
 
@@ -2344,12 +2347,18 @@ window.ionic = {
       var _this = this;
 
       if(this._loadingBox) {
-        window.requestAnimationFrame(function() {
-          _this.el.classList.add('active');
+        //window.requestAnimationFrame(function() {
+          var lb = _this._loadingBox;
 
-          _this._loadingBox.style.marginLeft = (-_this._loadingBox.offsetWidth) / 2 + 'px';
-          _this._loadingBox.style.marginTop = (-_this._loadingBox.offsetHeight) / 2 + 'px';
-        });
+          var width = Math.min(_this.maxWidth, Math.max(window.outerWidth - 40, lb.offsetWidth));
+
+          lb.style.width = width;
+
+          lb.style.marginLeft = (-lb.offsetWidth) / 2 + 'px';
+          lb.style.marginTop = (-lb.offsetHeight) / 2 + 'px';
+
+          _this.el.classList.add('active');
+        //});
       }
     },
     hide: function() {
@@ -2450,8 +2459,10 @@ window.ionic = {
 
   ionic.views.Popup.prototype = {
     setTitle: function(title) {
-      var title = el.querySelector('.popup-title');
-      title && title.innerHTML = title;
+      var titleEl = el.querySelector('.popup-title');
+      if(titleEl) {
+        titleEl.innerHTML = title;
+      }
     },
     alert: function(message) {
       var _this = this;

js/ext/angular/src/service/ionicLoading.js

@@ -14,7 +14,9 @@ angular.module('ionic.service.loading', ['ionic.ui.loading'])
       var defaults = {
         content: '',
         animation: 'fade-in',
-        showBackdrop: true
+        showBackdrop: true,
+        maxWidth: 200,
+        showDelay: 2000
       };
 
       opts = angular.extend(defaults, opts);
@@ -37,7 +39,12 @@ angular.module('ionic.service.loading', ['ionic.ui.loading'])
 
       $document[0].body.appendChild(element[0]);
 
-      var loading = new ionic.views.Loading({el: element[0] });
+      var loading = new ionic.views.Loading({
+        el: element[0],
+        maxWidth: opts.maxWidth,
+        showDelay: opts.showDelay
+      });
+
       loading.show();
 
       scope.loading = loading;

js/ext/angular/test/loading.html

@@ -22,12 +22,11 @@
       .controller('LoadingCtrl', function($scope, Loading) {
         $scope.startLoading = function() {
           var loading = Loading.show({
+            width: 200,
+            height: 100,
             animation: 'fade-in',
-            content: 'Loading'
+            content: 'Getting current location...'
           });
-          setTimeout(function() {
-            loading.hide();
-          }, 2000);
         };
       });
     </script>

js/views/loadingView.js

@@ -10,6 +10,9 @@
     var _this = this;
 
     this.el = opts.el;
+
+    this.maxWidth = opts.maxWidth || 200;
+
     this._loadingBox = this.el.querySelector('.loading');
   };
 
@@ -18,12 +21,18 @@
       var _this = this;
 
       if(this._loadingBox) {
-        window.requestAnimationFrame(function() {
-          _this.el.classList.add('active');
+        //window.requestAnimationFrame(function() {
+          var lb = _this._loadingBox;
 
-          _this._loadingBox.style.marginLeft = (-_this._loadingBox.offsetWidth) / 2 + 'px';
-          _this._loadingBox.style.marginTop = (-_this._loadingBox.offsetHeight) / 2 + 'px';
-        });
+          var width = Math.min(_this.maxWidth, Math.max(window.outerWidth - 40, lb.offsetWidth));
+
+          lb.style.width = width;
+
+          lb.style.marginLeft = (-lb.offsetWidth) / 2 + 'px';
+          lb.style.marginTop = (-lb.offsetHeight) / 2 + 'px';
+
+          _this.el.classList.add('active');
+        //});
       }
     },
     hide: function() {

js/views/popupView.js

@@ -14,8 +14,10 @@
 
   ionic.views.Popup.prototype = {
     setTitle: function(title) {
-      var title = el.querySelector('.popup-title');
-      title && title.innerHTML = title;
+      var titleEl = el.querySelector('.popup-title');
+      if(titleEl) {
+        titleEl.innerHTML = title;
+      }
     },
     alert: function(message) {
       var _this = this;

scss/ionic/_popup.scss

@@ -39,12 +39,15 @@
   left: 50%;
   top: 50%;
 
+  text-align: center;
+  text-overflow: ellipsis;
+
   border-radius: 5px;
   padding: 20px;
   background-color: rgba(0,0,0,0.7);
 
   color: #fff;
-  font-size: 20px;
+  font-size: 15px;
 
   h1,h2,h3,h4,h5 {
     color: #fff;

scss/ionic/_scaffolding.scss

@@ -79,6 +79,20 @@ body, .ionic-body {
   -webkit-overflow-scrolling: touch;
 }
 
+.content-plain {
+  position: absolute; 
+  width: 100%;
+  top: 0;
+  bottom: 0;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  &.has-header {
+  }
+
+  &.has-footer {
+  }
+}
+
 // Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
 // Note: For these to work, content must come after both bars in the markup
 .has-header {

starters/map/index.html

@@ -28,9 +28,9 @@
     <div class="bar bar-header bar-dark">
       <h1 class="title">Map</h1>
     </div>
-    <content has-header="true">
+    <div class="content-plain has-header has-footer">
       <div id="map"></div>
-    </content>
+    </div>
     <div class="bar bar-footer bar-dark">
       <button ng-click="centerOnMe()" class="button button-icon"><i class="icon-ios7-navigate"></i></button>
     </div>
@@ -55,16 +55,17 @@
         if(!$scope.map) {
           return;
         }
-        var loading = Loading.show({
+
+        $scope.loading = Loading.show({
           content: 'Getting current location...',
           showBackdrop: false
         });
 
         navigator.geolocation.getCurrentPosition(function(pos) {
           $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
-          loading.hide();
+          $scope.loading.hide();
         }, function(error) {
-          alert('Unable to get location');
+          alert('Unable to get location: ' + error.message);
         });
       };
     });