feat(slide-box): New slide box.

ionic-team · Dec 9, 2015 · a8f2366 · fredgalvao · Dec 9, 2015 · mlynch
1 parent 4ef9be5
commit a8f2366
Show file tree

Hide file tree

Showing 13 changed files with 4,993 additions and 8 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+js/views/slidesView.js
diff --git a/config/build.config.js b/config/build.config.js
@@ -60,6 +60,7 @@ module.exports = {
     'js/views/modalView.js',
     'js/views/sideMenuView.js',
     'js/views/sliderView.js',
+    'js/views/slidesView.js',
     'js/views/toggleView.js'
   ],
 

diff --git a/gulpfile.js b/gulpfile.js
@@ -141,7 +141,7 @@ gulp.task('eslint', function() {
   return gulp.src(['js/**/*.js'])
     .pipe(eslint())
     .pipe(eslint.format())
-    .pipe(eslint.failOnError());
+    .pipe(eslint.failAfterError());
 });
 
 gulp.task('ddescribe-iit', function() {

diff --git a/js/angular/directive/slideBox.js b/js/angular/directive/slideBox.js
@@ -3,6 +3,8 @@
  * @ngdoc directive
  * @name ionSlideBox
  * @module ionic
+ * @deprecated will be removed in the next Ionic release in favor of the new ion-slides component.
+ * Don't depend on the internal behavior of this widget.
  * @delegate ionic.service:$ionicSlideBoxDelegate
  * @restrict E
  * @description
@@ -187,7 +189,7 @@ function($animate, $timeout, $compile, $ionicSlideBoxDelegate, $ionicHistory, $i
 .directive('ionSlide', function() {
   return {
     restrict: 'E',
-    require: '^ionSlideBox',
+    require: '?^ionSlideBox',
     compile: function(element) {
       element.addClass('slider-slide');
     }

diff --git a/js/angular/directive/slides.js b/js/angular/directive/slides.js
@@ -0,0 +1,102 @@
+
+/**
+ * @ngdoc directive
+ * @name ionSlides
+ * @module ionic
+ * @delegate ionic.service:$ionicSlideBoxDelegate
+ * @restrict E
+ * @description
+ * The Slides component is a powerful multi-page container where each page can be swiped or dragged between.
+ *
+ * Note: this is a new version of the Ionic Slide Box based on the [Swiper](http://www.idangero.us/swiper/#.Vmc1J-ODFBc) widget from
+ * [idangerous](http://www.idangero.us/).
+ *
+ * ![SlideBox](http://ionicframework.com.s3.amazonaws.com/docs/controllers/slideBox.gif)
+ *
+ * @usage
+ * ```html
+ * <ion-slides on-slide-changed="slideHasChanged($index)">
+ *   <ion-slide>
+ *     <div class="box blue"><h1>BLUE</h1></div>
+ *   </ion-slide>
+ *   <ion-slide>
+ *     <div class="box yellow"><h1>YELLOW</h1></div>
+ *   </ion-slide>
+ *   <ion-slide>
+ *     <div class="box pink"><h1>PINK</h1></div>
+ *   </ion-slide>
+ * </ion-slides>
+ * ```
+ *
+ * @param {string=} delegate-handle The handle used to identify this slideBox
+ * with {@link ionic.service:$ionicSlideBoxDelegate}.
+ * @param {object=} options to pass to the widget. See the full ist here: [http://www.idangero.us/swiper/api/](http://www.idangero.us/swiper/api/)
+ */
+IonicModule
+.directive('ionSlides', [
+  '$animate',
+  '$timeout',
+function($animate, $timeout) {
+  return {
+    restrict: 'E',
+    transclude: true,
+    scope: {
+      options: '='
+    },
+    template: '<div class="swiper-container">' +
+      '<div class="swiper-wrapper" ng-transclude>' +
+      '</div>' +
+        '<div ng-hide="!showPager" class="swiper-pagination"></div>' +
+      '</div>',
+    controller: ['$scope', '$element', function($scope, $element) {
+      var _this = this;
+
+      this.update = function() {
+        $timeout(function() {
+          _this.__slider.update();
+
+          // Don't allow pager to show with > 10 slides
+          if (_this.__slider.slides.length > 10) {
+            $scope.showPager = false;
+          }
+        });
+      };
+
+      var options = $scope.options || {};
+
+      var newOptions = angular.extend({
+        pagination: '.swiper-pagination',
+        paginationClickable: true,
+        lazyLoading: true,
+        preloadImages: false
+      }, options);
+
+      $timeout(function() {
+        var slider = new ionic.views.Swiper($element.children()[0], newOptions);
+
+        _this.__slider = slider;
+
+        $scope.$on('$destroy', function() {
+          slider.destroy();
+        });
+      });
+
+    }],
+
+
+    link: function($scope, $element) {
+      $scope.showPager = true;
+      // Disable ngAnimate for slidebox and its children
+      $animate.enabled(false, $element);
+    }
+  };
+}])
+.directive('ionSlidePage', [function() {
+  return {
+    restrict: 'E',
+    require: '?^ionSlides',
+    transclude: true,
+    replace: true,
+    template: '<div class="swiper-slide" ng-transclude></div>'
+  };
+}]);
diff --git a/js/angular/directive/title.js b/js/angular/directive/title.js
@@ -0,0 +1,27 @@
+/**
+* @ngdoc directive
+* @name ionTitle
+* @module ionic
+* @restrict E
+*
+* Used for titles in header and nav bars. New in 1.2
+*
+* Identical to <div class="title"> but with future compatibility for Ionic 2
+*
+* @usage
+*
+* ```html
+* <ion-nav-bar>
+*   <ion-title>Hello</ion-title>
+* <ion-nav-bar>
+* ```
+*/
+IonicModule
+.directive('ionTitle', [function() {
+  return {
+    restrict: 'E',
+    compile: function(element) {
+      element.addClass('title');
+    }
+  };
+}]);