feature: add rn-carousel-swipe boolean attribute

- controls the carousel swipe-ability dynamically
revolunet · Jan 21, 2014 · 9d53957 · 9d53957
1 parent 46b021d
commit 9d53957
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -70,7 +70,7 @@ <h3>Standard carousel with thumbs navigation </h3>
 
         <h3>buffered ngRepeat carousel with custom controls</h3>
         <div class="details">Custom controls demo, just update the rn-carousel-index index binding</div>
-        <ul rn-carousel rn-carousel-buffered rn-carousel-indicator rn-carousel-index="slideIndex" class="my-slider ng-cloak">
+        <ul rn-carousel rn-carousel-buffered rn-carousel-indicator rn-carousel-index="slideIndex" rn-carousel-swipe="{{swipe}}" class="my-slider ng-cloak">
             <li ng-repeat="slide in slides4" ng-style="{'background-image': 'url(' + slide.img + ')'}">
                 <div class="debug">
                     {{ slide.label }} / {{ slides4.length }}
@@ -85,6 +85,7 @@ <h3>buffered ngRepeat carousel with custom controls</h3>
             <span>{{ slideIndex + 1 }} / {{ slides4.length }}</span>
             <button class="button grey" ng-click="next()" ng-disabled="slideIndex==slides4.length-1" >next</button>
             <button class="button grey" ng-click="pushSlide()">add 3 slides</button>
+            <button class="button grey" ng-click="toggleSwipe()">toggle swipe ({{ swipe?'on':'off' }})</button>
         </div>
 
         <h3>object-based ngRepeat carousel with indicators</h3>
@@ -112,9 +113,13 @@ <h3>Other demos</h3>
         </ul>
         <br><br>
     </body>
-    <script src="//code.angularjs.org/1.2.7/angular.min.js"></script>
-    <script src="//code.angularjs.org/1.2.7/angular-touch.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-touch.min.js"></script>
     <script src="./dist/angular-carousel.js"></script>
+    <!--<script src="./src/angular-carousel.js"></script>
+    <script src="./src/directives/rn-carousel.js"></script>
+    <script src="./src/directives/rn-carousel-indicators.js"></script>
+    <script src="./src/directives/sliceFilter.js"></script>-->
     <script>
         angular.module('DemoApp', [
             'angular-carousel'
@@ -161,6 +166,10 @@ <h3>Other demos</h3>
             $scope.next = function() {
                 $scope.slideIndex++;
             }
+            $scope.swipe = true;
+            $scope.toggleSwipe = function() {
+                $scope.swipe = !$scope.swipe;
+            }
 
             // 4rd demo, object based iterable
             $scope.slideIndex3 = 2;

diff --git a/src/directives/rn-carousel.js b/src/directives/rn-carousel.js
@@ -131,11 +131,12 @@
                         });
                     } else {
                         slidesCount = iElement.children().length;
+                        updateIndicatorArray();
                         updateContainerWidth();
                     }
 
                     function updateIndicatorArray() {
-                        // generate an arrat to be used by the indicators
+                        // generate an array to be used by the indicators
                         var items = [];
                         for (var i = 0; i < slidesCount; i++) items[i] = i;
                         scope.carouselIndicatorArray = items;
@@ -327,12 +328,20 @@
                         return false;
                     }
 
-                    $swipe.bind(carousel, {
-                        start: swipeStart,
-                        move: swipeMove,
-                        end: swipeEnd,
-                        cancel: function(event) {
-                          swipeEnd({}, event);
+                    iAttributes.$observe('rnCarouselSwipe', function(newValue, oldValue) {
+                        // only bind swipe when it's not switched off
+                        if(newValue !== 'false' && newValue !== 'off') {
+                            $swipe.bind(carousel, {
+                                start: swipeStart,
+                                move: swipeMove,
+                                end: swipeEnd,
+                                cancel: function(event) {
+                                  swipeEnd({}, event);
+                                }
+                            });
+                        } else {
+                            // unbind swipe when it's switched off
+                            carousel.unbind();
                         }
                     });