Ghost/core/client/components/gh-popover.js
Matt Enlow 1f608cf5ab Add open class to popover buttons
Ref#3603
- Popover Buttons now have an `open` class applied to them when their popover is open
- The open class is removed from the popover button at the start of the popover's fadeout
- Consolidated common code into popover-mixin
2014-08-06 18:23:03 -06:00

73 lines
2.1 KiB
JavaScript

import PopoverMixin from 'ghost/mixins/popover-mixin';
var GhostPopover = Ember.Component.extend(PopoverMixin, {
classNames: 'ghost-popover fade-in',
name: null,
closeOnClick: false,
//Helps track the user re-opening the menu while it's fading out.
closing: false,
open: function () {
this.set('closing', false);
this.set('isOpen', true);
this.set('button.isOpen', true);
},
close: function () {
var self = this;
this.set('closing', true);
if (this.get('button')) {
this.set('button.isOpen', false);
}
this.$().fadeOut(200, function () {
//Make sure this wasn't an aborted fadeout by
//checking `closing`.
if (self.get('closing')) {
self.set('isOpen', false);
self.set('closing', false);
}
});
},
//Called by the popover service when any popover button is clicked.
toggle: function (options) {
var isClosing = this.get('closing'),
isOpen = this.get('isOpen'),
name = this.get('name'),
button = this.get('button'),
targetPopoverName = options.target;
if (name === targetPopoverName && (!isOpen || isClosing)) {
if (!button) {
button = options.button;
this.set('button', button);
}
this.open();
} else if (isOpen) {
this.close();
}
},
click: function (event) {
this._super(event);
if (this.get('closeOnClick')) {
return this.close();
}
},
didInsertElement: function () {
this._super();
var popoverService = this.get('popover');
popoverService.on('close', this, this.close);
popoverService.on('toggle', this, this.toggle);
},
willDestroyElement: function () {
this._super();
var popoverService = this.get('popover');
popoverService.off('close', this, this.close);
popoverService.off('toggle', this, this.toggle);
}
});
export default GhostPopover;