Fixed #360 - dynamic slidebox sizing

dist/js/ionic-angular.js

@@ -29,6 +29,7 @@ angular.module('ionic.service', [
 // UI specific services and delegates
 angular.module('ionic.ui.service', [
   'ionic.ui.service.scrollDelegate',
+  'ionic.ui.service.slideBoxDelegate',
 ]);
 
 angular.module('ionic.ui', [
@@ -121,6 +122,36 @@ angular.module('ionic.ui.service.scrollDelegate', [])
   };
 }]);
 
+})(ionic);
+;
+(function() {
+'use strict';
+
+angular.module('ionic.ui.service.slideBoxDelegate', [])
+
+.factory('SlideBoxDelegate', ['$rootScope', '$timeout', function($rootScope, $timeout) {
+  return {
+    /**
+     * Trigger a slidebox to update and resize itself
+     */
+    update: function(animate) {
+      $rootScope.$broadcast('slideBox.update');
+    },
+
+    register: function($scope, $element) {
+      $scope.$parent.$on('slideBox.update', function(e) {
+        if(e.defaultPrevented) {
+          return;
+        }
+        $timeout(function() {
+          $scope.$parent.slideBox.setup();
+        });
+        e.preventDefault();
+      });
+    }
+  };
+}]);
+
 })(ionic);
 ;
 angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet', 'ngAnimate'])
@@ -2317,7 +2348,7 @@ angular.module('ionic.ui.slideBox', [])
  * The internal controller for the slide box controller.
  */
 
-.directive('slideBox', ['$timeout', '$compile', function($timeout, $compile) {
+.directive('slideBox', ['$timeout', '$compile', 'SlideBoxDelegate', function($timeout, $compile, SlideBoxDelegate) {
   return {
     restrict: 'E',
     replace: true,
@@ -2377,6 +2408,8 @@ angular.module('ionic.ui.slideBox', [])
 
       $scope.$parent.slideBox = slider;
 
+      SlideBoxDelegate.register($scope, $element);
+
       this.getNumSlides = function() {
         return slider.getNumSlides();
       };

js/ext/angular/src/directive/ionicSlideBox.js

@@ -13,7 +13,7 @@ angular.module('ionic.ui.slideBox', [])
  * The internal controller for the slide box controller.
  */
 
-.directive('slideBox', ['$timeout', '$compile', function($timeout, $compile) {
+.directive('slideBox', ['$timeout', '$compile', 'SlideBoxDelegate', function($timeout, $compile, SlideBoxDelegate) {
   return {
     restrict: 'E',
     replace: true,
@@ -73,6 +73,8 @@ angular.module('ionic.ui.slideBox', [])
 
       $scope.$parent.slideBox = slider;
 
+      SlideBoxDelegate.register($scope, $element);
+
       this.getNumSlides = function() {
         return slider.getNumSlides();
       };

js/ext/angular/src/ionicAngular.js

@@ -16,6 +16,7 @@ angular.module('ionic.service', [
 // UI specific services and delegates
 angular.module('ionic.ui.service', [
   'ionic.ui.service.scrollDelegate',
+  'ionic.ui.service.slideBoxDelegate',
 ]);
 
 angular.module('ionic.ui', [

js/ext/angular/src/service/delegates/ionicSlideBoxDelegate.js

@@ -0,0 +1,29 @@
+(function() {
+'use strict';
+
+angular.module('ionic.ui.service.slideBoxDelegate', [])
+
+.factory('SlideBoxDelegate', ['$rootScope', '$timeout', function($rootScope, $timeout) {
+  return {
+    /**
+     * Trigger a slidebox to update and resize itself
+     */
+    update: function(animate) {
+      $rootScope.$broadcast('slideBox.update');
+    },
+
+    register: function($scope, $element) {
+      $scope.$parent.$on('slideBox.update', function(e) {
+        if(e.defaultPrevented) {
+          return;
+        }
+        $timeout(function() {
+          $scope.$parent.slideBox.setup();
+        });
+        e.preventDefault();
+      });
+    }
+  };
+}]);
+
+})(ionic);

js/ext/angular/test/directive/ionicSlideBox.unit.js

@@ -3,11 +3,13 @@
  * see the core Ionic sideMenu controller tests.
  */
 describe('Ionic Angular Slide Box', function() {
-  var el;
+  var el, delegate, timeout;
 
-  beforeEach(module('ionic.ui.slideBox'));
+  beforeEach(module('ionic'));
 
-  beforeEach(inject(function($compile, $rootScope) {
+  beforeEach(inject(function($compile, $rootScope, $timeout, SlideBoxDelegate) {
+    delegate = SlideBoxDelegate;
+    timeout = $timeout;
     el = $compile('<slide-box>\
       <slide>\
         <div class="box blue">\
@@ -29,4 +31,13 @@ describe('Ionic Angular Slide Box', function() {
     var scope = el.scope();
     expect(scope.slideBox).not.toBe(undefined);
   });
+
+  it('Should update with delegate', function() {
+    var scope = el.scope();
+    var slideBox = scope.slideBox;
+    spyOn(slideBox, 'setup');
+    delegate.update();
+    timeout.flush();
+    expect(slideBox.setup).toHaveBeenCalled();
+  });
 });

js/ext/angular/test/slideBoxDynamic.html

@@ -0,0 +1,89 @@
+<html ng-app="slideBoxTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Dynamic Slide Box</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" 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-ui/angular-ui-router.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
+    <style>
+      .slider-slide {
+        padding-top: 80px;
+        color: #000;
+        background-color: #fff;
+        text-align: center;
+
+        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
+        font-weight: 300;
+      }
+      .slider-pager .slider-pager-page {
+        color: #000;
+      }
+
+      #logo {
+        margin: 30px 0px;
+      }
+
+      #list {
+        width: 170px;
+        margin: 30px auto;
+        font-size: 20px;
+      }
+      #list ol {
+        margin-top: 30px;
+      }
+      #list ol li {
+        text-align: left;
+        list-style: decimal;
+        margin: 10px 0px;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div ng-controller="SlideCtrl">
+      <pane>
+        <header-bar left-buttons="leftButtons" right-buttons="rightButtons" title=""></header-bar>
+        <content has-header="true">
+          <slide-box>
+            <slide ng-repeat="page in pages">
+              {{page.text}}
+            </slide>
+          </slide-box>
+        </content>
+      </pane>
+    </div>
+    <script>
+      angular.module('slideBoxTest', ['ionic'])
+
+      .controller('SlideCtrl', function($scope, $timeout, SlideBoxDelegate) {
+
+        $timeout(function() {
+          $scope.pages = [ {
+              text: 
+              'This is a really long page text\
+              This is a really long page text\
+              This is a really long page text\
+              This is a really long page text\
+              This is a really long page text\
+              This is a really long page text\
+              This is a really long page text'
+            }
+          ];
+
+          SlideBoxDelegate.update();
+        }, 100);
+      })
+
+    </script>
+  </body>
+</html>
+