diff --git a/dist/css/ionic.css b/dist/css/ionic.css index 24c398b7f4..312103f999 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -4408,8 +4408,7 @@ button.item-button-right:after { .slider { position: relative; overflow: hidden; - visibility: hidden; - background-color: #000; } + visibility: hidden; } .slider-slides { position: relative; } @@ -4420,8 +4419,9 @@ button.item-button-right:after { width: 100%; float: left; vertical-align: top; } - .slider-slide img { - width: 100%; } + +.slider-slide-image > img { + width: 100%; } .slider-pager { position: absolute; diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js index 7f9b15fc39..bda9b4ad77 100644 --- a/dist/js/ionic-angular.js +++ b/dist/js/ionic-angular.js @@ -507,7 +507,7 @@ angular.module('ionic.ui.header', ['ngAnimate']) transclude: true, template: '
\
\ - \
\

\ @@ -1818,6 +1818,7 @@ angular.module('ionic.ui.slideBox', []) replace: true, transclude: true, scope: { + doesContinue: '@', showPager: '@', onSlideChanged: '&' }, @@ -1826,20 +1827,34 @@ angular.module('ionic.ui.slideBox', []) var slider = new ionic.views.Slider({ el: $element[0], + continuous: $scope.$eval($scope.doesContinue) === true, slidesChanged: function() { $scope.currentSlide = slider.getPos(); - // Occasionally we need to trigger a digest + // Try to trigger a digest $timeout(function() {}); }, callback: function(slideIndex) { $scope.currentSlide = slideIndex; $scope.onSlideChanged({index:$scope.currentSlide}); $scope.$parent.$broadcast('slideBox.slideChanged', slideIndex); - $scope.$apply(); + + // Try to trigger a digest + $timeout(function() {}); } }); + $scope.$on('slideBox.nextSlide', function() { + slider.next(); + }); + + $scope.$on('slideBox.prevSlide', function() { + slider.prev(); + }); + + $scope.$on('slideBox.setSlide', function(e, index) { + slider.slide(index); + }); $scope.slider = slider; diff --git a/js/ext/angular/src/directive/ionicBar.js b/js/ext/angular/src/directive/ionicBar.js index 9c78edfa46..bb47afeb5a 100644 --- a/js/ext/angular/src/directive/ionicBar.js +++ b/js/ext/angular/src/directive/ionicBar.js @@ -11,7 +11,7 @@ angular.module('ionic.ui.header', ['ngAnimate']) transclude: true, template: '
\
\ - \
\

\ diff --git a/js/ext/angular/src/directive/ionicSlideBox.js b/js/ext/angular/src/directive/ionicSlideBox.js index acf98705a3..18a71f303e 100644 --- a/js/ext/angular/src/directive/ionicSlideBox.js +++ b/js/ext/angular/src/directive/ionicSlideBox.js @@ -21,6 +21,7 @@ angular.module('ionic.ui.slideBox', []) replace: true, transclude: true, scope: { + doesContinue: '@', showPager: '@', onSlideChanged: '&' }, @@ -29,20 +30,34 @@ angular.module('ionic.ui.slideBox', []) var slider = new ionic.views.Slider({ el: $element[0], + continuous: $scope.$eval($scope.doesContinue) === true, slidesChanged: function() { $scope.currentSlide = slider.getPos(); - // Occasionally we need to trigger a digest + // Try to trigger a digest $timeout(function() {}); }, callback: function(slideIndex) { $scope.currentSlide = slideIndex; $scope.onSlideChanged({index:$scope.currentSlide}); $scope.$parent.$broadcast('slideBox.slideChanged', slideIndex); - $scope.$apply(); + + // Try to trigger a digest + $timeout(function() {}); } }); + $scope.$on('slideBox.nextSlide', function() { + slider.next(); + }); + + $scope.$on('slideBox.prevSlide', function() { + slider.prev(); + }); + + $scope.$on('slideBox.setSlide', function(e, index) { + slider.slide(index); + }); $scope.slider = slider; diff --git a/js/ext/angular/test/app_icon.png b/js/ext/angular/test/app_icon.png new file mode 100644 index 0000000000..57c77bb4e8 Binary files /dev/null and b/js/ext/angular/test/app_icon.png differ diff --git a/js/ext/angular/test/slideBox.html b/js/ext/angular/test/slideBox.html index f7a3125f6f..338e628ccb 100644 --- a/js/ext/angular/test/slideBox.html +++ b/js/ext/angular/test/slideBox.html @@ -14,30 +14,38 @@ @@ -46,23 +54,34 @@ -
-

Thank you for choosing my app!

-

- We've worked super hard to make you happy. -

-

- But if you are angry, please contact us at support@example.com -

+

Thank you for choosing the Awesome App!

+ +

+ We've worked super hard to make you happy. +

+

+ But if you are angry, too bad. +

+ + +

Using Awesome

+ +
+
Just three steps:
+
    +
  1. Be awesome
    2. +
  2. Stay awesome
    3. +
  3. There is no step 3
    4. +
-
-
- - -
-
+

Any questions?

+

+ Too bad! +

@@ -71,46 +90,64 @@ .controller('SlideCtrl', function($scope) { $scope.next = function() { + console.log('NEXT'); + $scope.$broadcast('slideBox.nextSlide'); }; - $scope.rightButtons = [ + + var rightButtons = [ { content: 'Next', type: 'button-positive button-clear', - onTap: function(e) { + tap: function(e) { + console.log('NEXT'); $scope.next(); } } ]; - $scope.leftButtons = [ + var leftButtons = [ { content: 'Skip', type: 'button-positive button-clear', - onTap: function(e) { + tap: function(e) { + alert('Skipping'); } } ]; + + $scope.leftButtons = leftButtons; + $scope.rightButtons = rightButtons; + + $scope.slideChanged = function(index) { console.log('Slide changed', index); + + if(index > 0) { + $scope.leftButtons = [ + { + content: 'Back', + type: 'button-positive button-clear', + tap: function(e) { + $scope.$broadcast('slideBox.prevSlide'); + } + } + ]; + } else { + $scope.leftButtons = leftButtons; + } + if(index == 2) { $scope.rightButtons = [ { content: 'Start using MyApp', type: 'button-positive button-clear', - onTap: function(e) { + tap: function(e) { + alert('Done!'); } } ]; } else { - $scope.rightButtons = [ - { - content: 'Next', - type: 'button-positive button-clear', - onTap: function(e) { - } - } - ]; + $scope.rightButtons = rightButtons; } - $scope.$apply(); }; }); diff --git a/scss/_slide-box.scss b/scss/_slide-box.scss index 1c38f222e7..a13a24c4cd 100644 --- a/scss/_slide-box.scss +++ b/scss/_slide-box.scss @@ -9,7 +9,6 @@ // Make sure items don't scroll over ever overflow: hidden; visibility: hidden; - background-color: #000; } .slider-slides { position: relative; @@ -22,7 +21,10 @@ float: left; vertical-align: top; - img { +} + +.slider-slide-image { + > img { width: 100%; } }