Update simple_example demo to use latest slidescroll bower component

Author: net-funkyrobot

demos/simple_example/bower_components/funkyrobot-angular-slidescroll/.bower.json

@@ -1,6 +1,6 @@
 {
   "name": "funkyrobot-angular-slidescroll",
-  "version": "0.0.5",
+  "version": "0.0.10",
   "main": "angular-slidescroll.js",
   "ignore": [
     "**/.*",
@@ -10,14 +10,14 @@
     "angular": "~1.4.3"
   },
   "homepage": "https://github.com/net-funkyrobot/funkyrobot-angular-slidescroll",
-  "_release": "0.0.5",
+  "_release": "0.0.10",
   "_resolution": {
     "type": "version",
-    "tag": "0.0.5",
-    "commit": "d23371281d2f1caa1028eea91c79df8ed0addc00"
+    "tag": "0.0.10",
+    "commit": "45e3f478fc6abf7d72a15b1fec334b08c177740c"
   },
   "_source": "git://github.com/net-funkyrobot/funkyrobot-angular-slidescroll.git",
-  "_target": "~0.0.5",
+  "_target": "^0.0.10",
   "_originalSource": "net-funkyrobot/funkyrobot-angular-slidescroll",
   "_direct": true
 }

demos/simple_example/bower_components/funkyrobot-angular-slidescroll/angular-slidescroll.css

@@ -1,9 +1,9 @@
 body, html {
     margin: 0;
     overflow: hidden;
+    transition: opacity 400ms;
     -webkit-transition: opacity 400ms;
     -moz-transition: opacity 400ms;
-    transition: opacity 400ms;
 }
 
 body, .slidescroll-root, html {
@@ -16,6 +16,7 @@ body, .slidescroll-root, html {
 
 .slidescroll-root {
     position: relative;
+    transform-style: preserve-3d;
     -webkit-transform-style: preserve-3d;
 }
 

demos/simple_example/bower_components/funkyrobot-angular-slidescroll/angular-slidescroll.js

@@ -72,8 +72,12 @@ app.directive('slidescroll', ['$document', function($document) {
             var pos = toSlide * 100;
 
             // Transform to position with ease transition animation
+            $scope.viewFinderElement.css("transform", "translate3d(0, -" + pos + "%, 0)");
+            $scope.viewFinderElement.css("transition", "all 800ms ease");
             $scope.viewFinderElement.css("-webkit-transform", "translate3d(0, -" + pos + "%, 0)");
             $scope.viewFinderElement.css("-webkit-transition", "all 800ms ease");
+            $scope.viewFinderElement.css("-moz-transform", "translate3d(0, -" + pos + "%, 0)");
+            $scope.viewFinderElement.css("-moz-transition", "all 800ms ease");
         };
 
         this.addSlide = function(slideScope, slideElement) {
@@ -105,21 +109,26 @@ app.directive('slidescroll', ['$document', function($document) {
 
         var inTransition = false;
 
-        scope.$on('TransitionEvent', function(event, moveForward, numberSlides) {
-            // Check arguments
-            if (typeof moveForward !== 'boolean') {
-                return;
-            }
-            if (typeof numberSlides !== 'number') {
+        scope.$on('TransitionEvent', function(event, slideDelta) {
+            // Check argument
+            slideDelta = parseInt(slideDelta);
+            if (typeof slideDelta !== 'number') {
                 return;
             }
 
             // Move forward or backward by numberSlides
-            if (moveForward) {
-                controller.transformTo(scope.currentSlideIndex + numberSlides);
-            } else {
-                controller.transformTo(scope.currentSlideIndex - numberSlides);
+            controller.transformTo(scope.currentSlideIndex + slideDelta);
+        });
+
+        scope.$on('TransitionToEvent', function(event, slideIndex) {
+            // Check slideIndex argument
+            slideIndex = parseInt(slideIndex);
+            if (typeof slideIndex !== 'number') {
+                return;
             }
+
+            // Move controller to slideIndex
+            controller.transformTo(slideIndex);
         });
 
         // Bind keyboard events
@@ -132,37 +141,40 @@ app.directive('slidescroll', ['$document', function($document) {
 
             // Determine transition info
             var moveForward = true;
-            var numberSlides = 0;
+            var slideDelta = 0;
 
             switch (event.which) {
-                case 34: // Page down
+                case 33: // Page up
                 case 38: // Up key
 
-                    moveForward = false;
-                    numberSlides = 1;
+                    slideDelta = -1;
                     break;
 
-                case 33: // Page up
+                case 34: // Page down
                 case 32: // Spacebar
                 case 40: // Down arrow
 
-                    moveForward = true;
-                    numberSlides = 1;
+                    slideDelta = 1;
                     break;
 
                 case 36: // Home key
 
                     // Roll backward by the number of slides of the current slide index
-                    moveForward = false;
-                    numberSlides = scope.currentSlideIndex;
+                    slideDelta = scope.currentSlideIndex;
+                    break;
+
+                case 35: // End key
+
+                    // Roll forward by the number of slides of the current slide index
+                    slideDelta = (scope.numSlides - scope.currentSlideIndex) - 1;
                     break;
 
                 default:
                     return;
             }
 
             // Fire transition event to move
-            scope.$emit('TransitionEvent', moveForward, numberSlides);
+            scope.$emit('TransitionEvent', slideDelta);
 
         });
 
@@ -175,13 +187,12 @@ app.directive('slidescroll', ['$document', function($document) {
             if (!scope.inTransition && !scope.quietPeriod) {
 
                 // Determine if we're going forward or backward
-                var moveForward = true;
                 if (event.wheelDelta > 0) {
-                    moveForward = false;
+                    scope.$emit('TransitionEvent', -1);
+                } else {
+                    scope.$emit('TransitionEvent', 1);
                 }
 
-                scope.$emit('TransitionEvent', moveForward, 1);
-
             }
 
          });
@@ -211,17 +222,12 @@ app.directive('slide', function() {
         element.on('$destroy', function() {
             slidescrollController.removeSlide(scope.slideNum)
         });
-
-        element.css('background', 'url(' + scope.backgroundImage + ')');
     }
 
     return {
         require: "^slidescroll",
         transclude: true,
         link: link,
-        scope: {
-            backgroundImage: '=ssBackgroundImage'
-        },
         template: "<div ng-transclude></div>"
     }
 

demos/simple_example/bower_components/funkyrobot-angular-slidescroll/bower.json

@@ -1,6 +1,6 @@
 {
     "name": "funkyrobot-angular-slidescroll",
-    "version": "0.0.5",
+    "version": "0.0.9",
     "main": "angular-slidescroll.js",
     "ignore": [
         "**/.*",