Merge pull request #284 from mailpoet/animations

Animations

assets/js/src/newsletter_editor/blocks/automatedLatestContent.js

@@ -70,8 +70,8 @@ define([
     fetchPosts: function() {
       var that = this;
       CommunicationComponent.getTransformedPosts(this.toJSON()).done(function(content) {
-        console.log('ALC fetched', arguments);
         that.get('_container').get('blocks').reset(content, {parse: true});
+        that.trigger('postsChanged');
       }).fail(function(error) {
         console.log('ALC fetchPosts error', arguments);
       });
@@ -100,6 +100,11 @@ define([
       toolsRegion: '.mailpoet_tools',
       postsRegion: '.mailpoet_automated_latest_content_block_posts',
     },
+    modelEvents: _.extend(
+      _.omit(base.BlockView.prototype.modelEvents, 'change'),
+      {
+        'postsChanged': 'render',
+      }),
     events: _.extend(base.BlockView.prototype.events, {
       'click .mailpoet_automated_latest_content_block_overlay': 'showSettings',
     }),

assets/js/src/newsletter_editor/blocks/base.js

@@ -128,24 +128,37 @@ define([
       }
     },
     deleteBlock: function() {
-      this.transitionOut().done(function() {
+      this.transitionOut().then(function() {
         this.model.destroy();
       }.bind(this));
     },
     transitionIn: function() {
-      return this._transition('mailpoet_block_transition_in');
+      return this._transition('slideDown', 'fadeIn', 'easeIn');
     },
     transitionOut: function() {
-      return this._transition('mailpoet_block_transition_out');
+      return this._transition('slideUp', 'fadeOut', 'easeOut');
     },
-    _transition: function(className) {
+    _transition: function(slideDirection, fadeDirection, easing) {
       var promise = jQuery.Deferred();
 
-      this.$el.addClass(className);
-      this.$el.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd animationend', function() {
-        this.$el.removeClass(className);
-        promise.resolve();
-      }.bind(this));
+      this.$el.velocity(
+        slideDirection,
+        {
+          duration: 250,
+          easing: easing,
+          complete: function() {
+            promise.resolve();
+          }.bind(this),
+        }
+      ).velocity(
+        fadeDirection,
+        {
+          duration: 250,
+          easing: easing,
+          queue: false, // Do not enqueue, trigger animation in parallel
+        }
+      );
+
       return promise;
     },
   });

assets/js/src/newsletter_editor/blocks/container.js

@@ -248,20 +248,32 @@ define([
       }.bind(this));
     },
     transitionIn: function() {
-      return this._transition('mailpoet_block_transition_in');
+      return this._transition('slideDown', 'fadeIn', 'easeIn');
     },
     transitionOut: function() {
-      return this._transition('mailpoet_block_transition_out');
+      return this._transition('slideUp', 'fadeOut', 'easeOut');
     },
-    _transition: function(className) {
-      var that = this,
-          promise = jQuery.Deferred();
+    _transition: function(slideDirection, fadeDirection, easing) {
+      var promise = jQuery.Deferred();
+
+      this.$el.velocity(
+        slideDirection,
+        {
+          duration: 250,
+          easing: easing,
+          complete: function() {
+            promise.resolve();
+          }.bind(this),
+        }
+      ).velocity(
+        fadeDirection,
+        {
+          duration: 250,
+          easing: easing,
+          queue: false, // Do not enqueue, trigger animation in parallel
+        }
+      );
 
-      this.$el.addClass(className);
-      this.$el.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd animationend', function() {
-        that.$el.removeClass(className);
-        promise.resolve();
-      });
       return promise;
     },
   });

assets/js/src/newsletter_editor/blocks/posts.js

@@ -97,7 +97,6 @@ define([
     fetchAvailablePosts: function() {
       var that = this;
       CommunicationComponent.getPosts(this.toJSON()).done(function(posts) {
-        console.log('Posts fetched', arguments);
         that.get('_availablePosts').reset(posts);
         that.get('_selectedPosts').reset(); // Empty out the collection
         that.trigger('change:_availablePosts');
@@ -117,7 +116,6 @@ define([
       }
 
       CommunicationComponent.getTransformedPosts(data).done(function(posts) {
-        console.log('Transformed posts fetched', arguments);
         that.get('_transformedPosts').get('blocks').reset(posts, {parse: true});
       }).fail(function() {
         console.log('Posts _refreshTransformedPosts error', arguments);
@@ -134,7 +132,6 @@ define([
       if (data.posts.length === 0) return;
 
       CommunicationComponent.getTransformedPosts(data).done(function(posts) {
-        console.log('Available posts fetched', arguments);
         collection.add(posts, { at: index });
       }).fail(function() {
         console.log('Posts fetchPosts error', arguments);

assets/js/src/newsletter_editor/blocks/social.js

@@ -208,20 +208,32 @@ define([
       }.bind(this));
     },
     transitionIn: function() {
-      return this._transition('mailpoet_block_transition_in');
+      return this._transition('slideDown', 'fadeIn', 'easeIn');
     },
     transitionOut: function() {
-      return this._transition('mailpoet_block_transition_out');
+      return this._transition('slideUp', 'fadeOut', 'easeOut');
     },
-    _transition: function(className) {
-      var that = this,
-          promise = jQuery.Deferred();
+    _transition: function(slideDirection, fadeDirection, easing) {
+      var promise = jQuery.Deferred();
+
+      this.$el.velocity(
+        slideDirection,
+        {
+          duration: 250,
+          easing: easing,
+          complete: function() {
+            promise.resolve();
+          }.bind(this),
+        }
+      ).velocity(
+        fadeDirection,
+        {
+          duration: 250,
+          easing: easing,
+          queue: false, // Do not enqueue, trigger animation in parallel
+        }
+      );
 
-      this.$el.addClass(className);
-      this.$el.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd animationend', function() {
-        that.$el.removeClass(className);
-        promise.resolve();
-      });
       return promise;
     },
   });

assets/js/src/newsletter_editor/components/sidebar.js

@@ -51,8 +51,33 @@ define([
     },
     events: {
       'click .mailpoet_sidebar_region h3, .mailpoet_sidebar_region .handlediv': function(event) {
-        this.$el.find('.mailpoet_sidebar_region').addClass('closed');
-        this.$el.find(event.target).parent().parent().removeClass('closed');
+        var $openRegion = this.$el.find('.mailpoet_sidebar_region:not(.closed)'),
+          $targetRegion = this.$el.find(event.target).closest('.mailpoet_sidebar_region');
+
+        if ($openRegion.get(0) === $targetRegion.get(0)) {
+          return;
+        }
+
+        $openRegion.find('.mailpoet_region_content').velocity(
+          'slideUp',
+          {
+            duration: 250,
+            easing: "easeOut",
+            complete: function() {
+              $openRegion.addClass('closed');
+            }.bind(this)
+          }
+        );
+        $targetRegion.find('.mailpoet_region_content').velocity(
+          'slideDown',
+          {
+            duration: 250,
+            easing: "easeIn",
+            complete: function() {
+              $targetRegion.removeClass('closed');
+            },
+          }
+        );
       },
     },
     initialize: function(options) {

assets/js/src/newsletter_editor/components/styles.js

@@ -17,7 +17,7 @@ define([
       },
       h1: {
         fontColor: '#111111',
-        fontFamily: 'Arial Black',
+        fontFamily: 'Arial',
         fontSize: '40px'
       },
       h2: {