Some loading box tweaks

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;