added image transitions through cat-transitions

the-catalin · Mar 7, 2017 · cff1fbe · cff1fbe
1 parent d1e4d9e
commit cff1fbe
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 52 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "cat-slider",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Displays a slider with different possible effects",
   "authors": [
     "Catalin Ungureanu <[email protected]>"
@@ -28,7 +28,7 @@
     "polymer": "^1.7.0",
     "cat-image": "the-catalin/cat-image#^0.8.4",
     "cat-decorators": "the-catalin/cat-decorators#^0.8.1",
-    "cat-animation": "the-catalin/cat-animation#^0.8.5"
+    "cat-transitions": "the-catalin/cat-transitions#^0.7.0"
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^1.1.7",

diff --git a/cat-slider.html b/cat-slider.html
@@ -4,10 +4,17 @@
 <link rel="import" href="../cat-decorators/decorators/cat-border.html">
 <link rel="import" href="../cat-decorators/decorators/cat-shadow.html">
 
-<link rel="import" href="../cat-animation/cat-animation-runner-behavior.html">
-<link rel="import" href="../cat-animation/animations/cat-fade-animation.html">
-<link rel="import" href="../cat-animation/animations/cat-slide-animation.html">
-<link rel="import" href="../cat-animation/animations/cat-scale-animation.html">
+<link rel="import" href="../cat-transitions/cat-transitions-runner-behavior.html">
+<link rel="import" href="../cat-transitions/transitions/slide-from-left.html">
+<link rel="import" href="../cat-transitions/transitions/slide-from-right.html">
+<link rel="import" href="../cat-transitions/transitions/slide-from-top.html">
+<link rel="import" href="../cat-transitions/transitions/slide-from-bottom.html">
+<link rel="import" href="../cat-transitions/transitions/scale-from-center.html">
+<link rel="import" href="../cat-transitions/transitions/scale-from-left.html">
+<link rel="import" href="../cat-transitions/transitions/scale-from-right.html">
+<link rel="import" href="../cat-transitions/transitions/scale-from-top.html">
+<link rel="import" href="../cat-transitions/transitions/scale-from-bottom.html">
+<link rel="import" href="../cat-transitions/transitions/fade-in.html">
 
 <dom-module id="cat-slider">
 <style>
@@ -125,12 +132,25 @@
     }
 }
 
+var availableTransitions = [
+    "fade-in",
+    "slide-from-left",
+    "slide-from-right",
+    "slide-from-top",
+    "slide-from-bottom",
+    "scale-from-center",
+    "scale-from-left",
+    "scale-from-right",
+    "scale-from-top",
+    "scale-from-bottom"
+];
+
 Polymer({
     is: 'cat-slider',
 
     behaviors: [
         CatBehaviors.CatDecoratorRunnerBehavior,
-        CatBehaviors.CatAnimationRunnerBehavior
+        CatBehaviors.CatTransitionsRunnerBehavior
     ],
 
     properties: {
@@ -145,21 +165,18 @@
         // the chosen image to arrow.png
         // find a proper way to have a path relative to cat-slider path
         _arrows:                { type: String, value: 'arrow.png'},
+
         arrowsPadding:          { type: Number, value: 10},
 
         /**
          * Enable this in order to show the effects only when the mouse is over the image
          */
         showEffectsOnHover:     { type: Boolean, value: false },
 
-        /**
-         * Available options: fade, slide, scale (or combined, space delimited), random
-         */
-        imageTransitionType:     { type: String, value: 'random' },
-        /**
-         * Available options: center, left, right, top, bottom, random. 'center' is unavailable for imageTransitionType: slide
-         */
-        imageTransitionDirection:{ type: String, value: 'random' },
+        imageTransitionName:    { type: String, value: 'random'},
+
+        disableSecondaryAnimation: {type: Boolean, value: false},
+
         /**
          * Easing function. Available options: ease, linear, ease-in, ease-out, ease-in-out
          */
@@ -388,8 +405,6 @@
             this.$.prev.setAttribute('src', '../img/' + this._arrows);
         }
 
-        // var lis, catImages, i, len, border;
-
         if (this.useSliderBorder) {
             this.addDecorator({
                 name: 'cat-border',
@@ -451,18 +466,22 @@
     },
 
     goPrev: function() {
-        this.currentSlide--;
-        if (this.currentSlide === -1) {
-            this.currentSlide = this.numberOfSlides - 1;
+        if (!this.inTransitioning || this.disableSecondaryAnimation) {
+            this.currentSlide--;
+            if (this.currentSlide === -1) {
+                this.currentSlide = this.numberOfSlides - 1;
+            }
+            this.transitionToSlide(this.currentSlide);            
         }
-        this.transitionToSlide(this.currentSlide);
     },
     goNext: function() {
-        this.currentSlide++;
-        if (this.currentSlide === this.numberOfSlides) {
-            this.currentSlide = 0;
+        if (!this.inTransitioning || this.disableSecondaryAnimation) {
+            this.currentSlide++;
+            if (this.currentSlide === this.numberOfSlides) {
+                this.currentSlide = 0;
+            }
+            this.transitionToSlide(this.currentSlide);            
         }
-        this.transitionToSlide(this.currentSlide);
     },
 
     attached: function() {
@@ -476,26 +495,27 @@
     },
 
     transitionToSlide: function(toSlide) {
-        var transitionType;
-        if (this.imageTransitionType === 'random') {
-            transitionType = ['fade', 'slide', 'scale'][Math.floor(Math.random() * 3)];
-            transitionType = 'cat-' + transitionType + '-animation';
-        } else {
-            transitionType = 'cat-' + this.imageTransitionType + '-animation';
-        }
+
+        var previousBuffer = this.previousSlide;
 
-        this.clearAnimation('sliderAnimation');
+        this.inTransitioning = true;
 
-        this.addAnimation('sliderAnimation', {
-            name: transitionType,
-            node: this.lis[toSlide],
-            direction: this.imageTransitionDirection,
+        var transition;
+        if (this.imageTransitionName === 'random') {
+            transition = availableTransitions[Math.floor(Math.random() * availableTransitions.length)];
+        } else {
+            transition = this.imageTransitionName;
+        }
+
+        this.addTransition({
+            name: transition,
+            toNode: this.lis[toSlide],
+            fromNode: this.lis[this.previousSlide],
             function: this.imageTransitionFunction,
             duration: this.imageTransitionDuration,
-            reverse: false,
             done: function() {
 
-                var previousCatImage = this.lis[this.previousSlide].querySelector('cat-image'),
+                var previousCatImage = this.lis[previousBuffer].querySelector('cat-image'),
                     toCatImage = this.lis[toSlide].querySelector('cat-image');
 
                     previousCatImage.hideKenBurns();
@@ -505,18 +525,21 @@
                     toCatImage.showKenBurns();
                     toCatImage.showInfoText();
                 }
-
-                this.previousSlide = toSlide;
-            }
-        });
 
-        this.play('sliderAnimation');
+                this.inTransitioning = false;
+
+            },
+            secondaryAnimation: !this.disableSecondaryAnimation
+        });
+
+        this.previousSlide = toSlide;
 
         this.zIndex++;
         this.lis[toSlide].style.zIndex = this.zIndex;
 
         this.$.bullets.querySelector('.bullet.selected').classList.remove('selected');
         this.$.bullets.querySelectorAll('.bullet')[toSlide].className += ' selected';
+
     }
 });
 

diff --git a/cat-slider.json b/cat-slider.json
@@ -42,15 +42,27 @@
     }, {
         "subtabName": "Image Transition",
         "controls":[{
-            "name": "Transition Type",
-            "id": "imageTransitionType",
+            "name": "Transition",
+            "id": "imageTransitionName",
             "type": "dropdown",
-            "options": ["random", "fade", "scale", "slide"]
-        }, {
-            "name": "Transition Direction",
-            "id": "imageTransitionDirection",
-            "type": "dropdown",
-            "options": ["random", "center", "left", "right", "top", "bottom"]
+            "options": [
+                "random",
+                "fade-in",
+                "slide-from-left",
+                "slide-from-right",
+                "slide-from-top",
+                "slide-from-bottom",
+                "scale-from-center",
+                "scale-from-left",
+                "scale-from-right",
+                "scale-from-top",
+                "scale-from-bottom"
+            ]
+        }, {
+            "name": "Disable Secondary Animation",
+            "id": "disableSecondaryAnimation",
+            "type": "toggle",
+            "tip": "When available, disables the animation of the slide that goes out"
         }, {
             "name": "Transition Function",
             "id": "imageTransitionFunction",