2015-02-13 07:22:32 +03:00
|
|
|
import Ember from 'ember';
|
2016-05-24 15:06:59 +03:00
|
|
|
import DropdownMixin from 'ghost-admin/mixins/dropdown-mixin';
|
2014-04-07 02:11:22 +04:00
|
|
|
|
2016-01-19 16:03:27 +03:00
|
|
|
const {
|
|
|
|
Component,
|
|
|
|
computed,
|
|
|
|
inject: {service}
|
|
|
|
} = Ember;
|
2015-10-28 14:36:45 +03:00
|
|
|
|
|
|
|
export default Component.extend(DropdownMixin, {
|
2015-08-13 10:09:07 +03:00
|
|
|
classNames: 'dropdown',
|
2015-05-26 05:10:50 +03:00
|
|
|
classNameBindings: ['fadeIn:fade-in-scale:fade-out', 'isOpen:open:closed'],
|
|
|
|
|
2014-05-31 04:07:15 +04:00
|
|
|
name: null,
|
2014-08-06 18:32:10 +04:00
|
|
|
closeOnClick: false,
|
2014-10-25 01:09:50 +04:00
|
|
|
|
|
|
|
// Helps track the user re-opening the menu while it's fading out.
|
2014-08-06 18:32:10 +04:00
|
|
|
closing: false,
|
2014-10-25 01:09:50 +04:00
|
|
|
|
|
|
|
// Helps track whether the dropdown is open or closes, or in a transition to either
|
2014-09-24 17:36:20 +04:00
|
|
|
isOpen: false,
|
2014-10-25 01:09:50 +04:00
|
|
|
|
|
|
|
// Managed the toggle between the fade-in and fade-out classes
|
2015-10-28 14:36:45 +03:00
|
|
|
fadeIn: computed('isOpen', 'closing', function () {
|
2014-09-24 17:36:20 +04:00
|
|
|
return this.get('isOpen') && !this.get('closing');
|
|
|
|
}),
|
|
|
|
|
2016-01-19 16:03:27 +03:00
|
|
|
dropdown: service(),
|
2014-07-01 22:56:02 +04:00
|
|
|
|
2015-10-28 14:36:45 +03:00
|
|
|
open() {
|
2014-07-01 22:56:02 +04:00
|
|
|
this.set('isOpen', true);
|
2014-09-24 17:36:20 +04:00
|
|
|
this.set('closing', false);
|
2014-08-06 18:32:10 +04:00
|
|
|
this.set('button.isOpen', true);
|
2014-07-01 22:56:02 +04:00
|
|
|
},
|
2014-10-25 01:09:50 +04:00
|
|
|
|
2015-10-28 14:36:45 +03:00
|
|
|
close() {
|
2014-07-01 22:56:02 +04:00
|
|
|
this.set('closing', true);
|
2014-10-25 01:09:50 +04:00
|
|
|
|
2014-08-06 18:32:10 +04:00
|
|
|
if (this.get('button')) {
|
|
|
|
this.set('button.isOpen', false);
|
|
|
|
}
|
2015-10-28 14:36:45 +03:00
|
|
|
|
|
|
|
this.$().on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', (event) => {
|
2014-09-24 17:36:20 +04:00
|
|
|
if (event.originalEvent.animationName === 'fade-out') {
|
2015-10-28 14:36:45 +03:00
|
|
|
Ember.run(this, function () {
|
2015-10-15 15:03:26 +03:00
|
|
|
if (this.get('closing')) {
|
|
|
|
this.set('isOpen', false);
|
|
|
|
this.set('closing', false);
|
|
|
|
}
|
|
|
|
});
|
2014-07-01 22:56:02 +04:00
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
2014-10-25 01:09:50 +04:00
|
|
|
|
|
|
|
// Called by the dropdown service when any dropdown button is clicked.
|
2015-10-28 14:36:45 +03:00
|
|
|
toggle(options) {
|
|
|
|
let isClosing = this.get('closing');
|
|
|
|
let isOpen = this.get('isOpen');
|
|
|
|
let name = this.get('name');
|
|
|
|
let targetDropdownName = options.target;
|
|
|
|
let button = this.get('button');
|
2014-09-29 15:17:27 +04:00
|
|
|
|
2014-09-28 19:39:25 +04:00
|
|
|
if (name === targetDropdownName && (!isOpen || isClosing)) {
|
2014-08-06 18:32:10 +04:00
|
|
|
if (!button) {
|
|
|
|
button = options.button;
|
|
|
|
this.set('button', button);
|
|
|
|
}
|
2014-07-01 22:56:02 +04:00
|
|
|
this.open();
|
|
|
|
} else if (isOpen) {
|
|
|
|
this.close();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2015-10-28 14:36:45 +03:00
|
|
|
click(event) {
|
2014-07-01 22:56:02 +04:00
|
|
|
this._super(event);
|
2014-10-25 01:09:50 +04:00
|
|
|
|
2014-07-01 22:56:02 +04:00
|
|
|
if (this.get('closeOnClick')) {
|
|
|
|
return this.close();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2015-10-28 14:36:45 +03:00
|
|
|
didInsertElement() {
|
|
|
|
let dropdownService = this.get('dropdown');
|
2014-10-25 01:09:50 +04:00
|
|
|
|
2015-10-28 14:36:45 +03:00
|
|
|
this._super(...arguments);
|
2014-05-31 04:07:15 +04:00
|
|
|
|
2014-09-28 19:39:25 +04:00
|
|
|
dropdownService.on('close', this, this.close);
|
|
|
|
dropdownService.on('toggle', this, this.toggle);
|
2014-05-31 04:07:15 +04:00
|
|
|
},
|
2014-10-25 01:09:50 +04:00
|
|
|
|
2015-10-28 14:36:45 +03:00
|
|
|
willDestroyElement() {
|
|
|
|
let dropdownService = this.get('dropdown');
|
2014-10-25 01:09:50 +04:00
|
|
|
|
2015-10-28 14:36:45 +03:00
|
|
|
this._super(...arguments);
|
2014-05-31 04:07:15 +04:00
|
|
|
|
2014-09-28 19:39:25 +04:00
|
|
|
dropdownService.off('close', this, this.close);
|
|
|
|
dropdownService.off('toggle', this, this.toggle);
|
2014-05-31 04:07:15 +04:00
|
|
|
}
|
2014-04-07 02:11:22 +04:00
|
|
|
});
|