Skip to content

Commit e1ae338

Browse files
mlynchmlynch
committed
Fixed #288, added carousel support to slide box
Also fixed evevt bubbling and incorrect iOS 7 detection in mobile safari
1 parent c7b84f5 commit e1ae338

File tree

10 files changed

+257
-73
lines changed

10 files changed

+257
-73
lines changed

‎dist/js/ionic-angular.js‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1709,7 +1709,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
17091709

17101710
var dragFn = function(e) {
17111711
if($scope.dragContent) {
1712-
if(defaultPrevented) {
1712+
if(defaultPrevented || e.gesture.srcEvent.defaultPrevented) {
17131713
return;
17141714
}
17151715
isDragging = true;
@@ -1839,15 +1839,22 @@ angular.module('ionic.ui.slideBox', [])
18391839
transclude: true,
18401840
scope: {
18411841
doesContinue: '@',
1842+
slideInterval: '@',
18421843
showPager: '@',
1844+
disableScroll: '@',
18431845
onSlideChanged: '&'
18441846
},
18451847
controller: ['$scope', '$element', function($scope, $element) {
18461848
var _this = this;
18471849

1850+
var continuous = $scope.$eval($scope.doesContinue) === true;
1851+
var slideInterval = continuous ? $scope.$eval($scope.slideInterval) || 4000 : 0;
1852+
18481853
var slider = new ionic.views.Slider({
18491854
el: $element[0],
1850-
continuous: $scope.$eval($scope.doesContinue) === true,
1855+
auto: slideInterval,
1856+
disableScroll: ($scope.$eval($scope.disableScroll) === true) || false,
1857+
continuous: continuous,
18511858
slidesChanged: function() {
18521859
$scope.currentSlide = slider.getPos();
18531860

@@ -1876,7 +1883,11 @@ angular.module('ionic.ui.slideBox', [])
18761883
slider.slide(index);
18771884
});
18781885

1879-
$scope.slideBox = slider;
1886+
$scope.$parent.slideBox = slider;
1887+
1888+
this.getNumSlides = function() {
1889+
return slider.getNumSlides();
1890+
};
18801891

18811892
$timeout(function() {
18821893
slider.load();
@@ -1902,14 +1913,11 @@ angular.module('ionic.ui.slideBox', [])
19021913
.directive('slide', function() {
19031914
return {
19041915
restrict: 'E',
1905-
replace: true,
19061916
require: '^slideBox',
1907-
transclude: true,
1908-
template: '<div class="slider-slide" ng-transclude></div>',
1909-
compile: function(element, attr, transclude) {
1910-
return function($scope, $element, $attr, slideBoxCtrl) {
1911-
};
1912-
}
1917+
compile: function(element, attr) {
1918+
element.addClass('slider-slide');
1919+
return function($scope, $element, $attr) {};
1920+
},
19131921
};
19141922
})
19151923

@@ -1933,7 +1941,7 @@ angular.module('ionic.ui.slideBox', [])
19331941
};
19341942

19351943
$scope.numSlides = function() {
1936-
return new Array($scope.slideBox.getNumSlides());
1944+
return new Array(slideBox.getNumSlides());
19371945
};
19381946

19391947
$scope.$watch('currentSlide', function(v) {

‎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.

‎dist/js/ionic.js‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1769,18 +1769,12 @@ window.ionic = {
17691769
// window.device available.
17701770
isCordova: function() {
17711771
return (window.cordova || window.PhoneGap || window.phonegap);
1772-
//&& /^file:\/{3}[^\/]/i.test(window.location.href)
1773-
//&& /ios|iphone|ipod|ipad|android/i.test(navigator.userAgent);
17741772
},
17751773
isIPad: function() {
17761774
return navigator.userAgent.toLowerCase().indexOf('ipad') >= 0;
17771775
},
17781776
isIOS7: function() {
17791777
if(!window.device) {
1780-
var parts = navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i);
1781-
if(parts && parts.length > 0) {
1782-
return true;
1783-
}
17841778
return false;
17851779
}
17861780
return window.device.platform == 'iOS' && parseFloat(window.device.version) >= 7.0;
@@ -5235,6 +5229,7 @@ ionic.views.Slider = ionic.views.View.inherit({
52355229
} else {
52365230
element.addEventListener('mousemove', this, false);
52375231
element.addEventListener('mouseup', this, false);
5232+
document.addEventListener('mouseup', this, false);
52385233
}
52395234
},
52405235
move: function(event) {
@@ -5378,6 +5373,7 @@ ionic.views.Slider = ionic.views.View.inherit({
53785373
} else {
53795374
element.removeEventListener('mousemove', events, false)
53805375
element.removeEventListener('mouseup', events, false)
5376+
document.removeEventListener('mouseup', events, false);
53815377
}
53825378

53835379
},

‎dist/js/ionic.min.js‎

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

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
7474

7575
var dragFn = function(e) {
7676
if($scope.dragContent) {
77-
if(defaultPrevented) {
77+
if(defaultPrevented || e.gesture.srcEvent.defaultPrevented) {
7878
return;
7979
}
8080
isDragging = true;

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

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,22 @@ angular.module('ionic.ui.slideBox', [])
2222
transclude: true,
2323
scope: {
2424
doesContinue: '@',
25+
slideInterval: '@',
2526
showPager: '@',
27+
disableScroll: '@',
2628
onSlideChanged: '&'
2729
},
2830
controller: ['$scope', '$element', function($scope, $element) {
2931
var _this = this;
3032

33+
var continuous = $scope.$eval($scope.doesContinue) === true;
34+
var slideInterval = continuous ? $scope.$eval($scope.slideInterval) || 4000 : 0;
35+
3136
var slider = new ionic.views.Slider({
3237
el: $element[0],
33-
continuous: $scope.$eval($scope.doesContinue) === true,
38+
auto: slideInterval,
39+
disableScroll: ($scope.$eval($scope.disableScroll) === true) || false,
40+
continuous: continuous,
3441
slidesChanged: function() {
3542
$scope.currentSlide = slider.getPos();
3643

@@ -59,7 +66,11 @@ angular.module('ionic.ui.slideBox', [])
5966
slider.slide(index);
6067
});
6168

62-
$scope.slideBox = slider;
69+
$scope.$parent.slideBox = slider;
70+
71+
this.getNumSlides = function() {
72+
return slider.getNumSlides();
73+
};
6374

6475
$timeout(function() {
6576
slider.load();
@@ -85,14 +96,11 @@ angular.module('ionic.ui.slideBox', [])
8596
.directive('slide', function() {
8697
return {
8798
restrict: 'E',
88-
replace: true,
8999
require: '^slideBox',
90-
transclude: true,
91-
template: '<div class="slider-slide" ng-transclude></div>',
92-
compile: function(element, attr, transclude) {
93-
return function($scope, $element, $attr, slideBoxCtrl) {
94-
};
95-
}
100+
compile: function(element, attr) {
101+
element.addClass('slider-slide');
102+
return function($scope, $element, $attr) {};
103+
},
96104
};
97105
})
98106

@@ -116,7 +124,7 @@ angular.module('ionic.ui.slideBox', [])
116124
};
117125

118126
$scope.numSlides = function() {
119-
return new Array($scope.slideBox.getNumSlides());
127+
return new Array(slideBox.getNumSlides());
120128
};
121129

122130
$scope.$watch('currentSlide', function(v) {

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

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
<html ng-app="slideBoxTest">
2+
<head>
3+
<meta charset="utf-8">
4+
<title>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/ionic-angular.js"></script>
16+
<style>
17+
.slider-slide {
18+
padding-top: 80px;
19+
color: #000;
20+
background-color: #fff;
21+
text-align: center;
22+
23+
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
24+
font-weight: 300;
25+
}
26+
.slider-pager .slider-pager-page {
27+
color: #000;
28+
}
29+
30+
#logo {
31+
margin: 30px 0px;
32+
}
33+
34+
#list {
35+
width: 170px;
36+
margin: 30px auto;
37+
font-size: 20px;
38+
}
39+
#list ol {
40+
margin-top: 30px;
41+
}
42+
#list ol li {
43+
text-align: left;
44+
list-style: decimal;
45+
margin: 10px 0px;
46+
}
47+
</style>
48+
</head>
49+
<body>
50+
51+
<div ng-controller="SlideCtrl">
52+
<slide-box on-slide-changed="slideChanged(index)" does-continue="true">
53+
<slide>
54+
<h3>Thank you for choosing the Awesome App!</h3>
55+
<div id="logo">
56+
<img src="app_icon.png">
57+
</div>
58+
<p>
59+
We've worked super hard to make you happy.
60+
</p>
61+
<p>
62+
But if you are angry, too bad.
63+
</p>
64+
</slide>
65+
<slide>
66+
<h3>Using Awesome</h3>
67+
68+
<div id="list">
69+
<h5>Just three steps:</h5>
70+
<ol>
71+
<li>Be awesome</li>
72+
<li>Stay awesome</li>
73+
<li>There is no step 3</li>
74+
</ol>
75+
</div>
76+
</slide>
77+
<slide>
78+
<h3>Any questions?</h3>
79+
<p>
80+
Too bad!
81+
</p>
82+
</slide>
83+
</slide-box>
84+
</div>
85+
<script>
86+
angular.module('slideBoxTest', ['ionic'])
87+
88+
.controller('SlideCtrl', function($scope) {
89+
$scope.next = function() {
90+
console.log('NEXT');
91+
$scope.$broadcast('slideBox.nextSlide');
92+
};
93+
94+
var rightButtons = [
95+
{
96+
content: 'Next',
97+
type: 'button-positive button-clear',
98+
tap: function(e) {
99+
console.log('NEXT');
100+
$scope.next();
101+
}
102+
}
103+
];
104+
var leftButtons = [
105+
{
106+
content: 'Skip',
107+
type: 'button-positive button-clear',
108+
tap: function(e) {
109+
alert('Skipping');
110+
}
111+
}
112+
];
113+
114+
$scope.leftButtons = leftButtons;
115+
$scope.rightButtons = rightButtons;
116+
117+
118+
$scope.slideChanged = function(index) {
119+
console.log('Slide changed', index);
120+
121+
if(index > 0) {
122+
$scope.leftButtons = [
123+
{
124+
content: 'Back',
125+
type: 'button-positive button-clear',
126+
tap: function(e) {
127+
$scope.$broadcast('slideBox.prevSlide');
128+
}
129+
}
130+
];
131+
} else {
132+
$scope.leftButtons = leftButtons;
133+
}
134+
135+
if(index == 2) {
136+
$scope.rightButtons = [
137+
{
138+
content: 'Start using MyApp',
139+
type: 'button-positive button-clear',
140+
tap: function(e) {
141+
alert('Done!');
142+
}
143+
}
144+
];
145+
} else {
146+
$scope.rightButtons = rightButtons;
147+
}
148+
};
149+
});
150+
</script>
151+
</body>
152+
</html>
153+

0 commit comments

Comments
 (0)