Skip to content

Commit 196e015

Browse files
mlynchmlynch
committed
More slide stuff working
1 parent 8d42f85 commit 196e015

File tree

8 files changed

+123
-48
lines changed

8 files changed

+123
-48
lines changed

‎dist/css/ionic.css‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2601,9 +2601,6 @@ body, .ionic-body {
26012601
-moz-transform-origin: left top;
26022602
transform-origin: left top;
26032603
-webkit-backface-visibility: hidden; }
2604-
.scroll.scroll-paging {
2605-
white-space: nowrap;
2606-
font-size: 0; }
26072604

26082605
.scroll-bar {
26092606
position: absolute;
@@ -4415,9 +4412,7 @@ button.item-button-right:after {
44154412
background-color: #000; }
44164413

44174414
.slider-slides {
4418-
position: relative;
4419-
white-space: nowrap;
4420-
font-size: 0; }
4415+
position: relative; }
44214416

44224417
.slider-slide {
44234418
display: block;

‎dist/js/ionic-angular.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -541,6 +541,7 @@ angular.module('ionic.ui.header', ['ngAnimate'])
541541
});
542542

543543
$scope.$watch('rightButtons', function(val) {
544+
console.log('Right buttons changed');
544545
// Resize the title since the buttons have changed
545546
hb.align();
546547
});
@@ -1816,18 +1817,24 @@ angular.module('ionic.ui.slideBox', [])
18161817
restrict: 'E',
18171818
replace: true,
18181819
transclude: true,
1819-
scope: {},
1820+
scope: {
1821+
showPager: '@',
1822+
onSlideChanged: '&'
1823+
},
18201824
controller: ['$scope', '$element', function($scope, $element) {
18211825
var _this = this;
18221826

18231827
var slider = new ionic.views.Slider({
18241828
el: $element[0],
18251829
slidesChanged: function() {
18261830
$scope.currentSlide = slider.getPos();
1831+
1832+
// Occasionally we need to trigger a digest
18271833
$timeout(function() {});
18281834
},
18291835
callback: function(slideIndex) {
18301836
$scope.currentSlide = slideIndex;
1837+
$scope.onSlideChanged({index:$scope.currentSlide});
18311838
$scope.$parent.$broadcast('slideBox.slideChanged', slideIndex);
18321839
$scope.$apply();
18331840
}
@@ -1847,7 +1854,7 @@ angular.module('ionic.ui.slideBox', [])
18471854

18481855
link: function($scope, $element, $attr, slideBoxCtrl) {
18491856
// If the pager should show, append it to the slide box
1850-
if($attr.showPager !== "false") {
1857+
if($scope.$eval($scope.showPager) !== false) {
18511858
var childScope = $scope.$new();
18521859
var pager = angular.element('<pager></pager>');
18531860
$element.append(pager);

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ angular.module('ionic.ui.header', ['ngAnimate'])
4545
});
4646

4747
$scope.$watch('rightButtons', function(val) {
48+
console.log('Right buttons changed');
4849
// Resize the title since the buttons have changed
4950
hb.align();
5051
});

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,24 @@ angular.module('ionic.ui.slideBox', [])
2020
restrict: 'E',
2121
replace: true,
2222
transclude: true,
23-
scope: {},
23+
scope: {
24+
showPager: '@',
25+
onSlideChanged: '&'
26+
},
2427
controller: ['$scope', '$element', function($scope, $element) {
2528
var _this = this;
2629

2730
var slider = new ionic.views.Slider({
2831
el: $element[0],
2932
slidesChanged: function() {
3033
$scope.currentSlide = slider.getPos();
34+
35+
// Occasionally we need to trigger a digest
3136
$timeout(function() {});
3237
},
3338
callback: function(slideIndex) {
3439
$scope.currentSlide = slideIndex;
40+
$scope.onSlideChanged({index:$scope.currentSlide});
3541
$scope.$parent.$broadcast('slideBox.slideChanged', slideIndex);
3642
$scope.$apply();
3743
}
@@ -51,7 +57,7 @@ angular.module('ionic.ui.slideBox', [])
5157

5258
link: function($scope, $element, $attr, slideBoxCtrl) {
5359
// If the pager should show, append it to the slide box
54-
if($attr.showPager !== "false") {
60+
if($scope.$eval($scope.showPager) !== false) {
5561
var childScope = $scope.$new();
5662
var pager = angular.element('<pager></pager>');
5763
$element.append(pager);

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

Lines changed: 51 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,40 @@
66
<!-- Sets initial viewport load and disables zooming -->
77
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
88
<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/ionic-angular.js"></script>
916
<style>
17+
.box {
18+
width: 100%;
19+
height: 50px;
20+
color: #fff;
21+
}
22+
.box h1 {
23+
position: absolute;
24+
top: 50%;
25+
width: 100%;
26+
margin-top: -50px;
27+
28+
color: #fff;
29+
30+
font-size: 60px;
31+
text-align: center;
32+
font-weight: bold;
33+
}
34+
.blue {
35+
background-color: rgb(71, 138, 238);
36+
}
37+
.yellow {
38+
background-color: rgb(233, 233, 109);
39+
}
40+
.pink {
41+
background-color: rgb(233, 109, 233);
42+
}
1043
.my-repeat-animation > .ng-enter,
1144
.my-repeat-animation > .ng-leave,
1245
.my-repeat-animation > .ng-move {
@@ -124,22 +157,32 @@ <h2>Nic Cage</h2>
124157
<i class="icon {{ item.icon }}"></i>
125158
{{ item.text }}
126159
</a>
160+
<div class="item">
161+
<slide-box show-pager="false">
162+
<slide>
163+
<div class="box blue">
164+
<h1>BLUE {{slideBox.slideIndex}}</h1>
165+
</div>
166+
</slide>
167+
<slide>
168+
<div class="box yellow">
169+
<h1>YELLOW {{slideBox.slideIndex}}</h1>
170+
</div>
171+
</slide>
172+
<slide>
173+
<div class="box pink"><h1>PINK {{slideBox.slideIndex}}</h1></div>
174+
</slide>
175+
</slide-box>
176+
</div>
127177

128178
</list>
129179

130180
</content>
131181

132182
</pane>
133183

134-
<script src="../../../../dist/js/ionic.js"></script>
135-
<script src="../../../../dist/js/angular/angular.js"></script>
136-
<script src="../../../../dist/js/angular/angular-animate.js"></script>
137-
<script src="../../../../dist/js/angular/angular-route.js"></script>
138-
<script src="../../../../dist/js/angular/angular-touch.js"></script>
139-
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
140-
<script src="../../../../dist/js/ionic-angular.js"></script>
141184
<script>
142-
angular.module('navTest', ['ionic.ui.list', 'ionic.ui.content'])
185+
angular.module('navTest', ['ionic'])
143186

144187
.controller('TestCtrl', function($scope, $timeout) {
145188

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

Lines changed: 53 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,14 @@
1717
.box {
1818
width: 100%;
1919
height: 100%;
20-
color: #fff;
21-
}
22-
.box h1 {
23-
position: absolute;
24-
top: 50%;
25-
width: 100%;
26-
margin-top: -50px;
27-
28-
color: #fff;
29-
30-
font-size: 60px;
20+
padding-top: 80px;
21+
color: #000;
22+
background-color: #fff;
3123
text-align: center;
32-
font-weight: bold;
24+
}
25+
.box > * {
26+
font-weight: 100;
27+
font-family: 'Helvetica Neue';
3328
}
3429
.blue {
3530
background-color: rgb(71, 138, 238);
@@ -40,37 +35,72 @@
4035
.pink {
4136
background-color: rgb(233, 109, 233);
4237
}
38+
.slider-pager .slider-pager-page {
39+
color: #000;
40+
}
4341
</style>
4442
</head>
4543
<body>
4644

4745
<div ng-controller="SlideCtrl">
48-
<slide-box>
46+
<header-bar left-buttons="leftButtons" right-buttons="rightButtons" title=""></header-bar>
47+
<slide-box on-slide-changed="slideChanged(index)">
4948
<slide>
50-
<div class="box blue">
51-
<h1>BLUE {{slideBox.slideIndex}}</h1>
49+
<div class="box">
50+
<h3>Thank you for choosing my app!</h3>
51+
<p>
52+
We've worked super hard to make you happy.
53+
</p>
54+
<p>
55+
But if you are angry, please contact us at [email protected]
56+
</p>
5257
</div>
5358
</slide>
5459
<slide>
55-
<div class="box yellow">
56-
<h1>YELLOW {{slideBox.slideIndex}}</h1>
60+
<div class="box">
5761
</div>
5862
</slide>
5963
<slide>
60-
<div class="box pink"><h1>PINK {{slideBox.slideIndex}}</h1></div>
64+
<div class="box">
65+
</div>
6166
</slide>
6267
</slide-box>
6368
</div>
6469
<script>
6570
angular.module('slideBoxTest', ['ionic'])
6671

6772
.controller('SlideCtrl', function($scope) {
68-
$scope.onScroll = function(top, left) {
69-
console.log('On scroll', top, left, $scope.scrollView.__maxScrollLeft);
70-
};
71-
$scope.$on('slideBox.slideChanged', function(e, index) {
73+
$scope.leftButtons = [
74+
{
75+
content: 'Skip',
76+
type: 'button-positive button-clear',
77+
onTap: function(e) {
78+
}
79+
}
80+
];
81+
$scope.slideChanged = function(index) {
7282
console.log('Slide changed', index);
73-
});
83+
if(index == 2) {
84+
$scope.rightButtons = [
85+
{
86+
content: 'Start using MyApp',
87+
type: 'button-positive button-clear',
88+
onTap: function(e) {
89+
}
90+
}
91+
];
92+
} else {
93+
$scope.rightButtons = [
94+
{
95+
content: 'Next',
96+
type: 'button-positive button-clear',
97+
onTap: function(e) {
98+
}
99+
}
100+
];
101+
}
102+
$scope.$apply();
103+
};
74104
});
75105
</script>
76106
</body>

‎scss/_scaffolding.scss‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -100,11 +100,6 @@ body, .ionic-body {
100100
@include transform-origin(left, top);
101101
//-webkit-perspective: 1000;
102102
-webkit-backface-visibility: hidden;
103-
104-
&.scroll-paging {
105-
white-space: nowrap;
106-
font-size: 0;
107-
}
108103
}
109104

110105
// Scroll bar styles

‎scss/_slide-box.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,6 @@
1313
}
1414
.slider-slides {
1515
position: relative;
16-
white-space: nowrap;
17-
font-size: 0; // Remove the gaps between slide content items
1816
}
1917

2018
.slider-slide {

0 commit comments

Comments
 (0)