From caa6ae330e8579ee6aae6de94766dbfe6adbd8e6 Mon Sep 17 00:00:00 2001 From: Petter Kjelkenes Date: Tue, 18 Aug 2015 19:55:30 +0200 Subject: [PATCH] Upgrade to use ember-css-transitions instead of animate mixin. This does no longer depend on #138. --- addon/components/paper-toast.js | 8 +++--- addon/mixins/animate-mixin.js | 41 ----------------------------- package.json | 4 ++- tests/dummy/app/templates/toast.hbs | 6 ++--- 4 files changed, 11 insertions(+), 48 deletions(-) delete mode 100644 addon/mixins/animate-mixin.js diff --git a/addon/components/paper-toast.js b/addon/components/paper-toast.js index d333dd76c..b12120363 100644 --- a/addon/components/paper-toast.js +++ b/addon/components/paper-toast.js @@ -1,15 +1,17 @@ import Ember from 'ember'; -import AnimateMixin from 'ember-paper/mixins/animate-mixin'; +import TransitionMixin from 'ember-css-transitions/mixins/transition-mixin'; /*global Hammer*/ -export default Ember.Component.extend(AnimateMixin, { +export default Ember.Component.extend(TransitionMixin, { tagName: 'md-toast', classNames: ['md-default-theme'], classNameBindings: ['_right:md-right', '_left:md-left', '_bottom:md-bottom', '_top:md-top'], - animated: true, + 'align-fab': true, + transitionClass: 'ng', + // right,left,bottom and top should only be given once. Therefor we use a computed for each so that they can // never change once initially provided. _right: Ember.computed(function () { return this.get('right'); }), diff --git a/addon/mixins/animate-mixin.js b/addon/mixins/animate-mixin.js deleted file mode 100644 index 4b1e78e83..000000000 --- a/addon/mixins/animate-mixin.js +++ /dev/null @@ -1,41 +0,0 @@ -import Ember from 'ember'; - -export default Ember.Mixin.create({ - classNameBindings: ['animated:ng-enter'], - - /** - * Wait for redraw so we can add add animation classes - * See CSS redraw / repaint for more details. - */ - reDraw (element) { - return new Ember.RSVP.Promise(function (resolve) { - setTimeout(function() { - // These are just meant to be called so browser to a repaint. - /* jshint ignore:start */ - element[0].offsetHeight; - element[0].getComputedStyle; - /* jshint ignore:end */ - resolve(element); - },0); - }); - }, - - _animateOnInsert: Ember.on('didInsertElement', function () { - var _self = this; - this.reDraw(this.$()).then(function () { - _self.$().addClass('ng-enter-active'); - }); - }), - - _animateOnDestroy: Ember.on('willDestroyElement', function () { - var old = this.$().clone().addClass('ng-leave').removeClass('ng-enter ng-enter-active').appendTo(this.$().parent()); - this.reDraw(old).then(function () { - old.one('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function () { - old.remove(); - }); - old.addClass('ng-leave-active'); - }); - }) - - -}); diff --git a/package.json b/package.json index bdf8918b3..4f38b728c 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,9 @@ }, "dependencies": { "broccoli-autoprefixer": "^3.0.0", - "ember-cli-babel": "^5.1.3" + "ember-cli-babel": "^5.1.3", + "ember-css-transitions": "^0.1.0", + "ember-wormhole": "^0.3.4" }, "keywords": [ "ember-addon", diff --git a/tests/dummy/app/templates/toast.hbs b/tests/dummy/app/templates/toast.hbs index ac28d3554..fce8dc6bc 100644 --- a/tests/dummy/app/templates/toast.hbs +++ b/tests/dummy/app/templates/toast.hbs @@ -6,11 +6,11 @@ Toasts {{/paper-toolbar}} -{{#paper-content classNames="md-padding"}} +{{#paper-content class="md-padding"}}

Basic Usage

Toast can be dismissed with a swipe, a timer, or a button.

- {{#paper-button classNames="md-fab md-fab-top-right"}}FAB{{/paper-button}} + {{#paper-button class="md-fab md-fab-top-right"}}FAB{{/paper-button}} @@ -76,7 +76,7 @@ {{#paper-checkbox checked=top}}Top{{/paper-checkbox}} - {{#paper-button action="openFabBottom" primary=true classNames="md-fab md-fab-bottom-right"}}FAB{{/paper-button}} + {{#paper-button action="openFabBottom" primary=true class="md-fab md-fab-bottom-right"}}FAB{{/paper-button}}