mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-13 22:41:32 -05:00
4fb3fe62a9
No issue - Changes Modals to use CSS-based animations - All modals have an animation, so the option is removed from the handlebars helper - Removes `animation` from the handlebars helper, as all had one anyway - Removed the `centered` style - All modals should be left-aligned - Buttons now default to being on the left - Cleans up some styles (modal body top spacing) which #4632 helped clean up
57 lines
1.9 KiB
JavaScript
57 lines
1.9 KiB
JavaScript
var ModalDialog = Ember.Component.extend({
|
|
didInsertElement: function () {
|
|
this.$('.js-modal-container, .js-modal-background').addClass('fade-in open');
|
|
this.$('.js-modal').addClass('open');
|
|
},
|
|
|
|
close: function () {
|
|
var self = this;
|
|
|
|
this.$('.js-modal, .js-modal-background').removeClass('fade-in').addClass('fade-out');
|
|
|
|
// The background should always be the last thing to fade out, so check on that instead of the content
|
|
this.$('.js-modal-background').on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function (event) {
|
|
if (event.originalEvent.animationName === 'fade-out') {
|
|
self.$('.js-modal, .js-modal-background').removeClass('open');
|
|
self.sendAction();
|
|
}
|
|
});
|
|
},
|
|
|
|
confirmaccept: 'confirmAccept',
|
|
confirmreject: 'confirmReject',
|
|
|
|
actions: {
|
|
closeModal: function () {
|
|
this.close();
|
|
},
|
|
confirm: function (type) {
|
|
this.sendAction('confirm' + type);
|
|
this.close();
|
|
}
|
|
},
|
|
|
|
klass: Ember.computed('type', 'style', function () {
|
|
var classNames = [];
|
|
|
|
classNames.push(this.get('type') ? 'modal-' + this.get('type') : 'modal');
|
|
|
|
if (this.get('style')) {
|
|
this.get('style').split(',').forEach(function (style) {
|
|
classNames.push('modal-style-' + style);
|
|
});
|
|
}
|
|
|
|
return classNames.join(' ');
|
|
}),
|
|
|
|
acceptButtonClass: Ember.computed('confirm.accept.buttonClass', function () {
|
|
return this.get('confirm.accept.buttonClass') ? this.get('confirm.accept.buttonClass') : 'btn btn-green';
|
|
}),
|
|
|
|
rejectButtonClass: Ember.computed('confirm.reject.buttonClass', function () {
|
|
return this.get('confirm.reject.buttonClass') ? this.get('confirm.reject.buttonClass') : 'btn btn-red';
|
|
})
|
|
});
|
|
|
|
export default ModalDialog;
|