Skip to content

Commit b996e9a

Browse files
mlynchmlynch
committed
SEXY
1 parent 4de3403 commit b996e9a

File tree

7 files changed

+115
-46
lines changed

7 files changed

+115
-46
lines changed

‎dist/css/ionic.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4408,8 +4408,7 @@ button.item-button-right:after {
44084408
.slider {
44094409
position: relative;
44104410
overflow: hidden;
4411-
visibility: hidden;
4412-
background-color: #000; }
4411+
visibility: hidden; }
44134412

44144413
.slider-slides {
44154414
position: relative; }
@@ -4420,8 +4419,9 @@ button.item-button-right:after {
44204419
width: 100%;
44214420
float: left;
44224421
vertical-align: top; }
4423-
.slider-slide img {
4424-
width: 100%; }
4422+
4423+
.slider-slide-image > img {
4424+
width: 100%; }
44254425

44264426
.slider-pager {
44274427
position: absolute;

‎dist/js/ionic-angular.js‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -507,7 +507,7 @@ angular.module('ionic.ui.header', ['ngAnimate'])
507507
transclude: true,
508508
template: '<header class="bar bar-header">\
509509
<div class="buttons">\
510-
<button ng-repeat="button in leftButtons" class="button" ng-class="button.type" ng-click="button.tap($event, $index)" ng-bind-html="button.content">\
510+
<button ng-repeat="button in leftButtons" class="button no-animation" ng-class="button.type" ng-click="button.tap($event, $index)" ng-bind-html="button.content">\
511511
</button>\
512512
</div>\
513513
<h1 class="title" ng-bind-html="title"></h1>\
@@ -1818,6 +1818,7 @@ angular.module('ionic.ui.slideBox', [])
18181818
replace: true,
18191819
transclude: true,
18201820
scope: {
1821+
doesContinue: '@',
18211822
showPager: '@',
18221823
onSlideChanged: '&'
18231824
},
@@ -1826,20 +1827,34 @@ angular.module('ionic.ui.slideBox', [])
18261827

18271828
var slider = new ionic.views.Slider({
18281829
el: $element[0],
1830+
continuous: $scope.$eval($scope.doesContinue) === true,
18291831
slidesChanged: function() {
18301832
$scope.currentSlide = slider.getPos();
18311833

1832-
// Occasionally we need to trigger a digest
1834+
// Try to trigger a digest
18331835
$timeout(function() {});
18341836
},
18351837
callback: function(slideIndex) {
18361838
$scope.currentSlide = slideIndex;
18371839
$scope.onSlideChanged({index:$scope.currentSlide});
18381840
$scope.$parent.$broadcast('slideBox.slideChanged', slideIndex);
1839-
$scope.$apply();
1841+
1842+
// Try to trigger a digest
1843+
$timeout(function() {});
18401844
}
18411845
});
18421846

1847+
$scope.$on('slideBox.nextSlide', function() {
1848+
slider.next();
1849+
});
1850+
1851+
$scope.$on('slideBox.prevSlide', function() {
1852+
slider.prev();
1853+
});
1854+
1855+
$scope.$on('slideBox.setSlide', function(e, index) {
1856+
slider.slide(index);
1857+
});
18431858

18441859
$scope.slider = slider;
18451860

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ angular.module('ionic.ui.header', ['ngAnimate'])
1111
transclude: true,
1212
template: '<header class="bar bar-header">\
1313
<div class="buttons">\
14-
<button ng-repeat="button in leftButtons" class="button" ng-class="button.type" ng-click="button.tap($event, $index)" ng-bind-html="button.content">\
14+
<button ng-repeat="button in leftButtons" class="button no-animation" ng-class="button.type" ng-click="button.tap($event, $index)" ng-bind-html="button.content">\
1515
</button>\
1616
</div>\
1717
<h1 class="title" ng-bind-html="title"></h1>\

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

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ angular.module('ionic.ui.slideBox', [])
2121
replace: true,
2222
transclude: true,
2323
scope: {
24+
doesContinue: '@',
2425
showPager: '@',
2526
onSlideChanged: '&'
2627
},
@@ -29,20 +30,34 @@ angular.module('ionic.ui.slideBox', [])
2930

3031
var slider = new ionic.views.Slider({
3132
el: $element[0],
33+
continuous: $scope.$eval($scope.doesContinue) === true,
3234
slidesChanged: function() {
3335
$scope.currentSlide = slider.getPos();
3436

35-
// Occasionally we need to trigger a digest
37+
// Try to trigger a digest
3638
$timeout(function() {});
3739
},
3840
callback: function(slideIndex) {
3941
$scope.currentSlide = slideIndex;
4042
$scope.onSlideChanged({index:$scope.currentSlide});
4143
$scope.$parent.$broadcast('slideBox.slideChanged', slideIndex);
42-
$scope.$apply();
44+
45+
// Try to trigger a digest
46+
$timeout(function() {});
4347
}
4448
});
4549

50+
$scope.$on('slideBox.nextSlide', function() {
51+
slider.next();
52+
});
53+
54+
$scope.$on('slideBox.prevSlide', function() {
55+
slider.prev();
56+
});
57+
58+
$scope.$on('slideBox.setSlide', function(e, index) {
59+
slider.slide(index);
60+
});
4661

4762
$scope.slider = slider;
4863

‎js/ext/angular/test/app_icon.png‎

12.2 KB
Loading

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

Lines changed: 71 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -14,29 +14,37 @@
1414
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
1515
<script src="../../../../dist/js/ionic-angular.js"></script>
1616
<style>
17-
.box {
17+
.slider-slide {
1818
width: 100%;
1919
height: 100%;
2020
padding-top: 80px;
2121
color: #000;
2222
background-color: #fff;
2323
text-align: center;
24+
25+
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
26+
font-weight: 300;
2427
}
25-
.box > * {
26-
font-weight: 100;
27-
font-family: 'Helvetica Neue';
28+
.slider-pager .slider-pager-page {
29+
color: #000;
2830
}
29-
.blue {
30-
background-color: rgb(71, 138, 238);
31+
32+
#logo {
33+
margin: 30px 0px;
3134
}
32-
.yellow {
33-
background-color: rgb(233, 233, 109);
35+
36+
#list {
37+
width: 170px;
38+
margin: 30px auto;
39+
font-size: 20px;
3440
}
35-
.pink {
36-
background-color: rgb(233, 109, 233);
41+
#list ol {
42+
margin-top: 30px;
3743
}
38-
.slider-pager .slider-pager-page {
39-
color: #000;
44+
#list ol li {
45+
text-align: left;
46+
list-style: decimal;
47+
margin: 10px 0px;
4048
}
4149
</style>
4250
</head>
@@ -46,23 +54,34 @@
4654
<header-bar left-buttons="leftButtons" right-buttons="rightButtons" title=""></header-bar>
4755
<slide-box on-slide-changed="slideChanged(index)">
4856
<slide>
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>
57+
<h3>Thank you for choosing the Awesome App!</h3>
58+
<div id="logo">
59+
<img src="app_icon.png">
5760
</div>
61+
<p>
62+
We've worked super hard to make you happy.
63+
</p>
64+
<p>
65+
But if you are angry, too bad.
66+
</p>
5867
</slide>
5968
<slide>
60-
<div class="box">
69+
<h3>Using Awesome</h3>
70+
71+
<div id="list">
72+
<h5>Just three steps:</h5>
73+
<ol>
74+
<li>Be awesome</li>
75+
<li>Stay awesome</li>
76+
<li>There is no step 3</li>
77+
</ol>
6178
</div>
6279
</slide>
6380
<slide>
64-
<div class="box">
65-
</div>
81+
<h3>Any questions?</h3>
82+
<p>
83+
Too bad!
84+
</p>
6685
</slide>
6786
</slide-box>
6887
</div>
@@ -71,46 +90,64 @@ <h3>Thank you for choosing my app!</h3>
7190

7291
.controller('SlideCtrl', function($scope) {
7392
$scope.next = function() {
93+
console.log('NEXT');
94+
$scope.$broadcast('slideBox.nextSlide');
7495
};
75-
$scope.rightButtons = [
96+
97+
var rightButtons = [
7698
{
7799
content: 'Next',
78100
type: 'button-positive button-clear',
79-
onTap: function(e) {
101+
tap: function(e) {
102+
console.log('NEXT');
80103
$scope.next();
81104
}
82105
}
83106
];
84-
$scope.leftButtons = [
107+
var leftButtons = [
85108
{
86109
content: 'Skip',
87110
type: 'button-positive button-clear',
88-
onTap: function(e) {
111+
tap: function(e) {
112+
alert('Skipping');
89113
}
90114
}
91115
];
116+
117+
$scope.leftButtons = leftButtons;
118+
$scope.rightButtons = rightButtons;
119+
120+
92121
$scope.slideChanged = function(index) {
93122
console.log('Slide changed', index);
94-
if(index == 2) {
95-
$scope.rightButtons = [
123+
124+
if(index > 0) {
125+
$scope.leftButtons = [
96126
{
97-
content: 'Start using MyApp',
127+
content: 'Back',
98128
type: 'button-positive button-clear',
99-
onTap: function(e) {
129+
tap: function(e) {
130+
$scope.$broadcast('slideBox.prevSlide');
100131
}
101132
}
102133
];
103134
} else {
135+
$scope.leftButtons = leftButtons;
136+
}
137+
138+
if(index == 2) {
104139
$scope.rightButtons = [
105140
{
106-
content: 'Next',
141+
content: 'Start using MyApp',
107142
type: 'button-positive button-clear',
108-
onTap: function(e) {
143+
tap: function(e) {
144+
alert('Done!');
109145
}
110146
}
111147
];
148+
} else {
149+
$scope.rightButtons = rightButtons;
112150
}
113-
$scope.$apply();
114151
};
115152
});
116153
</script>

‎scss/_slide-box.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
// Make sure items don't scroll over ever
1010
overflow: hidden;
1111
visibility: hidden;
12-
background-color: #000;
1312
}
1413
.slider-slides {
1514
position: relative;
@@ -22,7 +21,10 @@
2221
float: left;
2322
vertical-align: top;
2423

25-
img {
24+
}
25+
26+
.slider-slide-image {
27+
> img {
2628
width: 100%;
2729
}
2830
}

0 commit comments

Comments
 (0)