Skip to content

Commit c9bc2e2

Browse files
mlynchmlynch
committed
Fixed #360 - dynamic slidebox sizing
1 parent 621d42e commit c9bc2e2

File tree

7 files changed

+172
-7
lines changed

7 files changed

+172
-7
lines changed

‎dist/js/ionic-angular.js‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ angular.module('ionic.service', [
2929
// UI specific services and delegates
3030
angular.module('ionic.ui.service', [
3131
'ionic.ui.service.scrollDelegate',
32+
'ionic.ui.service.slideBoxDelegate',
3233
]);
3334

3435
angular.module('ionic.ui', [
@@ -121,6 +122,36 @@ angular.module('ionic.ui.service.scrollDelegate', [])
121122
};
122123
}]);
123124

125+
})(ionic);
126+
;
127+
(function() {
128+
'use strict';
129+
130+
angular.module('ionic.ui.service.slideBoxDelegate', [])
131+
132+
.factory('SlideBoxDelegate', ['$rootScope', '$timeout', function($rootScope, $timeout) {
133+
return {
134+
/**
135+
* Trigger a slidebox to update and resize itself
136+
*/
137+
update: function(animate) {
138+
$rootScope.$broadcast('slideBox.update');
139+
},
140+
141+
register: function($scope, $element) {
142+
$scope.$parent.$on('slideBox.update', function(e) {
143+
if(e.defaultPrevented) {
144+
return;
145+
}
146+
$timeout(function() {
147+
$scope.$parent.slideBox.setup();
148+
});
149+
e.preventDefault();
150+
});
151+
}
152+
};
153+
}]);
154+
124155
})(ionic);
125156
;
126157
angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet', 'ngAnimate'])
@@ -2317,7 +2348,7 @@ angular.module('ionic.ui.slideBox', [])
23172348
* The internal controller for the slide box controller.
23182349
*/
23192350

2320-
.directive('slideBox', ['$timeout', '$compile', function($timeout, $compile) {
2351+
.directive('slideBox', ['$timeout', '$compile', 'SlideBoxDelegate', function($timeout, $compile, SlideBoxDelegate) {
23212352
return {
23222353
restrict: 'E',
23232354
replace: true,
@@ -2377,6 +2408,8 @@ angular.module('ionic.ui.slideBox', [])
23772408

23782409
$scope.$parent.slideBox = slider;
23792410

2411+
SlideBoxDelegate.register($scope, $element);
2412+
23802413
this.getNumSlides = function() {
23812414
return slider.getNumSlides();
23822415
};

‎dist/js/ionic-angular.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ angular.module('ionic.ui.slideBox', [])
1313
* The internal controller for the slide box controller.
1414
*/
1515

16-
.directive('slideBox', ['$timeout', '$compile', function($timeout, $compile) {
16+
.directive('slideBox', ['$timeout', '$compile', 'SlideBoxDelegate', function($timeout, $compile, SlideBoxDelegate) {
1717
return {
1818
restrict: 'E',
1919
replace: true,
@@ -73,6 +73,8 @@ angular.module('ionic.ui.slideBox', [])
7373

7474
$scope.$parent.slideBox = slider;
7575

76+
SlideBoxDelegate.register($scope, $element);
77+
7678
this.getNumSlides = function() {
7779
return slider.getNumSlides();
7880
};

‎js/ext/angular/src/ionicAngular.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ angular.module('ionic.service', [
1616
// UI specific services and delegates
1717
angular.module('ionic.ui.service', [
1818
'ionic.ui.service.scrollDelegate',
19+
'ionic.ui.service.slideBoxDelegate',
1920
]);
2021

2122
angular.module('ionic.ui', [

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
(function() {
2+
'use strict';
3+
4+
angular.module('ionic.ui.service.slideBoxDelegate', [])
5+
6+
.factory('SlideBoxDelegate', ['$rootScope', '$timeout', function($rootScope, $timeout) {
7+
return {
8+
/**
9+
* Trigger a slidebox to update and resize itself
10+
*/
11+
update: function(animate) {
12+
$rootScope.$broadcast('slideBox.update');
13+
},
14+
15+
register: function($scope, $element) {
16+
$scope.$parent.$on('slideBox.update', function(e) {
17+
if(e.defaultPrevented) {
18+
return;
19+
}
20+
$timeout(function() {
21+
$scope.$parent.slideBox.setup();
22+
});
23+
e.preventDefault();
24+
});
25+
}
26+
};
27+
}]);
28+
29+
})(ionic);

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

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@
33
* see the core Ionic sideMenu controller tests.
44
*/
55
describe('Ionic Angular Slide Box', function() {
6-
var el;
6+
var el, delegate, timeout;
77

8-
beforeEach(module('ionic.ui.slideBox'));
8+
beforeEach(module('ionic'));
99

10-
beforeEach(inject(function($compile, $rootScope) {
10+
beforeEach(inject(function($compile, $rootScope, $timeout, SlideBoxDelegate) {
11+
delegate = SlideBoxDelegate;
12+
timeout = $timeout;
1113
el = $compile('<slide-box>\
1214
<slide>\
1315
<div class="box blue">\
@@ -29,4 +31,13 @@ describe('Ionic Angular Slide Box', function() {
2931
var scope = el.scope();
3032
expect(scope.slideBox).not.toBe(undefined);
3133
});
34+
35+
it('Should update with delegate', function() {
36+
var scope = el.scope();
37+
var slideBox = scope.slideBox;
38+
spyOn(slideBox, 'setup');
39+
delegate.update();
40+
timeout.flush();
41+
expect(slideBox.setup).toHaveBeenCalled();
42+
});
3243
});

‎js/ext/angular/test/slideBoxDynamic.html‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<html ng-app="slideBoxTest">
2+
<head>
3+
<meta charset="utf-8">
4+
<title>Dynamic Slide Box</title>
5+
6+
<!-- Sets initial viewport load and disables zooming -->
7+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8+
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
9+
<script src="../../../../dist/js/ionic.js"></script>
10+
<script src="../../../../dist/js/angular/angular.js"></script>
11+
<script src="../../../../dist/js/angular/angular-animate.js"></script>
12+
<script src="../../../../dist/js/angular/angular-route.js"></script>
13+
<script src="../../../../dist/js/angular/angular-touch.js"></script>
14+
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
15+
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
16+
<script src="../../../../dist/js/ionic-angular.js"></script>
17+
<style>
18+
.slider-slide {
19+
padding-top: 80px;
20+
color: #000;
21+
background-color: #fff;
22+
text-align: center;
23+
24+
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
25+
font-weight: 300;
26+
}
27+
.slider-pager .slider-pager-page {
28+
color: #000;
29+
}
30+
31+
#logo {
32+
margin: 30px 0px;
33+
}
34+
35+
#list {
36+
width: 170px;
37+
margin: 30px auto;
38+
font-size: 20px;
39+
}
40+
#list ol {
41+
margin-top: 30px;
42+
}
43+
#list ol li {
44+
text-align: left;
45+
list-style: decimal;
46+
margin: 10px 0px;
47+
}
48+
</style>
49+
</head>
50+
<body>
51+
52+
<div ng-controller="SlideCtrl">
53+
<pane>
54+
<header-bar left-buttons="leftButtons" right-buttons="rightButtons" title=""></header-bar>
55+
<content has-header="true">
56+
<slide-box>
57+
<slide ng-repeat="page in pages">
58+
{{page.text}}
59+
</slide>
60+
</slide-box>
61+
</content>
62+
</pane>
63+
</div>
64+
<script>
65+
angular.module('slideBoxTest', ['ionic'])
66+
67+
.controller('SlideCtrl', function($scope, $timeout, SlideBoxDelegate) {
68+
69+
$timeout(function() {
70+
$scope.pages = [ {
71+
text:
72+
'This is a really long page text\
73+
This is a really long page text\
74+
This is a really long page text\
75+
This is a really long page text\
76+
This is a really long page text\
77+
This is a really long page text\
78+
This is a really long page text'
79+
}
80+
];
81+
82+
SlideBoxDelegate.update();
83+
}, 100);
84+
})
85+
86+
</script>
87+
</body>
88+
</html>
89+

0 commit comments

Comments
 (0)