Implemented directional animations

pirhoo · Sep 14, 2015 · 5674a31 · 5674a31
1 parent f0fcffc
commit 5674a31
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 17 deletions.
diff --git a/.jshintrc b/.jshintrc
@@ -21,6 +21,7 @@
   "validthis": true,
   "globals": {
     "angular": false,
-    "$": false
+    "$": false,
+    "jQuery": false
   }
 }
diff --git a/src/components/scaffolder/scaffolder.animation.js b/src/components/scaffolder/scaffolder.animation.js
@@ -1,24 +1,54 @@
 'use strict';
 
-console.log("ha");
+var SCAFFOLDER_IFRAME_CLS = 'scaffolder__container__iframe';
+// True if the given class is in the given class names
+var hasClass = function(names, cls) {
+  return names.indexOf(SCAFFOLDER_IFRAME_CLS + '--' + cls) > -1;
+};
 
 angular
   .module('iframeScaffolder')
-    .animation('.scaffolder-slide-horizontal', function() {
+    .animation('.' + SCAFFOLDER_IFRAME_CLS + '--anim-horizontal', function() {
       return {
         addClass: function (element, className, done) {
-          if (className === 'ng-hide') {
-            jQuery(element).stop().velocity({
-              translateX: '100%'
-            }, { duration: 'slow' });
-          } else { done(); }
-        },
-        removeClass: function (element, className, done) {
-          if (className === 'ng-hide') {
-            jQuery(element).stop().velocity({
-              translateX: '0%'
-            }, { duration: 'slow' });
+          // Reset position
+          $(element).velocity('stop').velocity({ translateY: '0%' }, 0);
+
+          if ( hasClass(className, 'was-before') ) {
+            $(element).velocity({ translateX: '-100%' }, 0)
+                      .velocity({ translateX:'0%' }, 600, done);
+          } else if ( hasClass(className, 'was-after') ) {
+            $(element).velocity({ translateX: '100%' }, 0)
+                      .velocity({ translateX:'0%' }, 600, done);
+          } else if ( hasClass(className, 'before') ) {
+            $(element).velocity({ translateX: '0%' }, 0)
+                      .velocity({ translateX:'-100%' }, 600, done);
+          } else if ( hasClass(className, 'after') ) {
+            $(element).velocity({ translateX: '0%' }, 0)
+                      .velocity({ translateX:'100%' }, 600, done);
           } else { done(); }
         }
       };
+    })
+    .animation('.' + SCAFFOLDER_IFRAME_CLS + '--anim-vertical', function() {
+      return {
+        addClass: function (element, className, done) {
+          // Reset position
+          $(element).velocity('stop').velocity({ translateX: '0%' }, 0);
+
+          if ( hasClass(className, 'was-before') ) {
+            $(element).velocity({ translateY: '-100%' }, 0)
+                      .velocity({ translateY:'0%' }, 600, done);
+          } else if ( hasClass(className, 'was-after') ) {
+            $(element).velocity({ translateY: '100%' }, 0)
+                      .velocity({ translateY:'0%' }, 600, done);
+          } else if ( hasClass(className, 'before') ) {
+            $(element).velocity({ translateY: '0%' }, 0)
+                      .velocity({ translateY:'-100%' }, 600, done);
+          } else if ( hasClass(className, 'after') ) {
+            $(element).velocity({ translateY: '0%' }, 0)
+                      .velocity({ translateY:'100%' }, 600, done);
+          } else {  done(); }
+        }
+      };
     });
diff --git a/src/components/scaffolder/scaffolder.controller.js b/src/components/scaffolder/scaffolder.controller.js
@@ -2,10 +2,14 @@
 
 angular.module('iframeScaffolder').controller('ScaffolderCtrl', function ($scope, $http, Scaffolder) {
 
+  var VERTICAL_LAYOUTS = ['menu'],
+    HORIZONTAL_LAYOUTS = ['tabs', 'narrative'];
+
   var options = $scope.options;
   $scope.scaffolder = new Scaffolder(options);
   $scope.shouldDisplaySharingPopup = false;
 
+
   $scope.toggleSharingPopup = function() {
     // Toggle popup state
     $scope.shouldDisplaySharingPopup = !$scope.shouldDisplaySharingPopup;
@@ -55,6 +59,30 @@ angular.module('iframeScaffolder').controller('ScaffolderCtrl', function ($scope
     }
   };
 
+  $scope.iframeClasses = function(index, first, last) {
+    // Is the given iframe active?
+    var active = index === $scope.active;
+    // Is the given iframe the last active one? Or is it a first-degree neighbor?
+    var edge = $scope.previous === index || Math.abs($scope.active - index) <= 1;
+    // Returns a large set of classes...
+    return {
+      'scaffolder__container__iframe--last'      : last,
+      'scaffolder__container__iframe--first'     : first,
+      'scaffolder__container__iframe--active'    : active,
+      // The iframe was before the last active one and is now active
+      'scaffolder__container__iframe--was-before': active && index < $scope.previous,
+      // The iframe was after the last active one and is now active
+      'scaffolder__container__iframe--was-after' : active && index > $scope.previous,
+      // The iframe is now before the current active one
+      'scaffolder__container__iframe--before'    : edge   && index < $scope.active,
+      // The iframe is now after the current active one
+      'scaffolder__container__iframe--after'     : edge   && index > $scope.active,
+      // Animation is not the same for every layout
+      'scaffolder__container__iframe--anim-vertical'  : VERTICAL_LAYOUTS.indexOf(options.layout) > -1,
+      'scaffolder__container__iframe--anim-horizontal': HORIZONTAL_LAYOUTS.indexOf(options.layout) > -1
+    };
+  };
+
   $scope.getViewIframe = function() {
     var url = $scope.scaffolder.viewUrl(),
       width = '100%',
@@ -78,7 +106,8 @@ angular.module('iframeScaffolder').controller('ScaffolderCtrl', function ($scope
   // New active slide
   $scope.$watch('scaffolder.active', function(current, previous) {
     // Save the last-active slide for directional transition
-    $scope.previousIndex = previous;
+    $scope.previous = previous;
+    $scope.active = current;
   });
 
   $scope.$watch('options', function() {

diff --git a/src/components/scaffolder/scaffolder.html b/src/components/scaffolder/scaffolder.html
@@ -14,10 +14,10 @@
       <h4 class="scaffolder__container__title">{{ scaffolder.getActive( 'Iframe ' + ($index + 1) ).label }}</h4>
     </aside>
     <iframe frameborder="0"
-            class="scaffolder__container__iframe scaffolder-slide-horizontal"
+            class="scaffolder__container__iframe scaffolder__container__iframe--anim-horizontal"
             width="{{iframeWidth($index, $first, $last)}}"
             height="{{iframeHeight($index, $first, $last)}}"
-            ng-class="{'scaffolder__container__iframe--last': $last, 'scaffolder__container__iframe--first': $first}"
+            ng-class="iframeClasses($index, $first, $last)"
             ng-src="{{scaffolder.url($index)}}"
             ng-show="scaffolder.isVisible($index, true)"
             ng-repeat="url in options.urls track by $index"></iframe>

diff --git a/src/components/scaffolder/scaffolder.less b/src/components/scaffolder/scaffolder.less
@@ -7,9 +7,14 @@
   &__container {
     width: 100%;
     position:relative;
+    background:inherit;
 
     &__menu {
 
+      background:inherit;
+      position: relative;
+      z-index:100;
+
       &__item {
         cursor: pointer;
 
@@ -30,6 +35,7 @@
 
   &--menu &__container__menu {
     width:25%;
+    height:100%;
     padding:5px;
   }
 
@@ -145,6 +151,7 @@
     font-size:0.9em;
     filter:grayscale(0.7);
     position:relative;
+    z-index:110;
     .transition(0.6s);
 
     &:hover {
@@ -163,6 +170,7 @@
   &__sharing-popup {
 
     position: absolute;
+    z-index:120;
     top:0;
     left:0;
     bottom:0;

diff --git a/src/components/scaffolder/scaffolder.service.js b/src/components/scaffolder/scaffolder.service.js
@@ -66,6 +66,10 @@ angular.module('iframeScaffolder').service('Scaffolder', function($state) {
     return !this.hasMenu() || this.isActive(index);
   };
 
+  Scaffolder.prototype.isEdge = function(index) {
+    return Math.abs(this.active - index) <= 1;
+  };
+
   Scaffolder.prototype.isPrevious = function(index) {
     return index === this.active - 1;
   };