From 2a73317a2a447717a03bd615597b647e160a1e54 Mon Sep 17 00:00:00 2001 From: Peter Banik Date: Mon, 31 Aug 2015 02:58:13 +0200 Subject: [PATCH 1/6] updated event listeners to use Marionette 2.4.x event names --- src/Marionette.AnimatedCollectionView.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Marionette.AnimatedCollectionView.js b/src/Marionette.AnimatedCollectionView.js index 204360b..fcdc535 100644 --- a/src/Marionette.AnimatedCollectionView.js +++ b/src/Marionette.AnimatedCollectionView.js @@ -32,7 +32,7 @@ callback(); return; } - + this._buffer.push(callback); this.run(); }; @@ -65,10 +65,10 @@ return View.extend({ initialize: function() { - this.listenTo(this, 'collection:rendered', function() { + this.listenTo(this, 'render:collection', function() { // bind before:item:added after the collection has been fully rendered, // otherwise the add animation would be triggered for everything - this.listenTo(this, 'before:item:added', this._animateAdd, this); + this.listenTo(this, 'before:add:child', this._animateAdd, this); }, this); this._animateSequence = new Sequence(o); @@ -116,4 +116,4 @@ }; return decorateAnimatedCollectionView; -})); \ No newline at end of file +})); From 2ba289913796e9f877f0db1f2cef893658d2fb04 Mon Sep 17 00:00:00 2001 From: Peter Banik Date: Mon, 31 Aug 2015 03:00:45 +0200 Subject: [PATCH 2/6] version # bump --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8e976c9..148e0a5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "marionette.animatedcollectionview", - "version": "0.1.5", + "version": "0.1.6", "description": "Allow animating insertion/removal of ItemViews in a Marionette CollectionView", "main": "src/Marionette.AnimatedCollectionView.js", "files": [ From 9a08749116556ab4318e43a3eb762bc245a1f75e Mon Sep 17 00:00:00 2001 From: Peter Banik Date: Mon, 31 Aug 2015 03:05:03 +0200 Subject: [PATCH 3/6] version # bump --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index a31b96e..8dca8fc 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "Marionette.AnimatedCollectionView", - "version": "0.1.5", + "version": "0.1.6", "homepage": "https://github.com/medialize/Marionette.AnimatedCollectionView", "description": "Allow animating insertion/removal of ItemViews in a Marionette CollectionView", "main": "src/Marionette.AnimatedCollectionView.js", From 99deb761c073874e9203e3a8397de8bd0db56d95 Mon Sep 17 00:00:00 2001 From: Peter Banik Date: Mon, 31 Aug 2015 03:08:15 +0200 Subject: [PATCH 4/6] version # bump --- src/Marionette.AnimatedCollectionView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Marionette.AnimatedCollectionView.js b/src/Marionette.AnimatedCollectionView.js index fcdc535..feded77 100644 --- a/src/Marionette.AnimatedCollectionView.js +++ b/src/Marionette.AnimatedCollectionView.js @@ -104,7 +104,7 @@ }); } - decorateAnimatedCollectionView.version = '0.1.5'; + decorateAnimatedCollectionView.version = '0.1.6'; decorateAnimatedCollectionView.defaults = { add: 'item-adding', remove: 'item-removing', From c45742eb29148fefbbd1ffeb8ebf097a0a473595 Mon Sep 17 00:00:00 2001 From: Peter Banik Date: Mon, 31 Aug 2015 03:32:58 +0200 Subject: [PATCH 5/6] after the animation ended, remove the CSS class from the element in order to avoid various artifacts occurring --- src/Marionette.AnimatedCollectionView.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/Marionette.AnimatedCollectionView.js b/src/Marionette.AnimatedCollectionView.js index feded77..56b24a9 100644 --- a/src/Marionette.AnimatedCollectionView.js +++ b/src/Marionette.AnimatedCollectionView.js @@ -68,7 +68,15 @@ this.listenTo(this, 'render:collection', function() { // bind before:item:added after the collection has been fully rendered, // otherwise the add animation would be triggered for everything - this.listenTo(this, 'before:add:child', this._animateAdd, this); + this.listenTo(this, 'before:add:child', function(_view){ + var view = _view; + this._animateAdd(_view) + .then(function(){ + // after the animation ended, remove the CSS class + // from the element to avoid various artifacts occuring + view.$el.removeClass(o.add); + }) + }, this); }, this); this._animateSequence = new Sequence(o); @@ -77,16 +85,19 @@ removeChildView: function(view) { this._animateRemove(view) - .then(_removeChildView.bind(this, view)); + .then(_removeChildView.bind(this, view)); }, _animateAdd: function(view) { + var promise = view.$el.animationEndPromise(o.promise); view.$el.addClass(o.add); view.$el.css('animation-play-state', 'paused'); this._animateSequence.push(function() { view.$el.css('animation-play-state', ''); }); + + return promise; }, _animateRemove: function(view) { From b757985cd8b1b80a8c7d12745f5b694d356daee0 Mon Sep 17 00:00:00 2001 From: Peter Banik Date: Sat, 26 Mar 2016 02:01:00 +0800 Subject: [PATCH 6/6] fixed loading with webpack --- package.json | 2 +- src/Marionette.AnimatedCollectionView.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 148e0a5..bab6dab 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "marionette.animatedcollectionview", - "version": "0.1.6", + "version": "0.1.7", "description": "Allow animating insertion/removal of ItemViews in a Marionette CollectionView", "main": "src/Marionette.AnimatedCollectionView.js", "files": [ diff --git a/src/Marionette.AnimatedCollectionView.js b/src/Marionette.AnimatedCollectionView.js index 56b24a9..fe55e89 100644 --- a/src/Marionette.AnimatedCollectionView.js +++ b/src/Marionette.AnimatedCollectionView.js @@ -8,7 +8,7 @@ // https://github.com/umdjs/umd/blob/master/returnExports.js if (typeof exports === 'object') { // Node - module.exports = factory(require('jquery', 'jQuery-transitionEndPromise')); + module.exports = factory(require('jquery'), require('jquery-transitioendpromise')); } else if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['jquery', 'jQuery-transitionEndPromise'], factory);