TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-26 04:13:30 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #3178 from novaugust/popover-fadeout

Browse Source 
Added fadeout to gh-popover
This commit is contained in:
Hannah Wolfe 2014-07-04 23:17:29 +01:00
commit 4a965ed3c8
1 changed files with 46 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
core/client/components/gh-popover.js
View File

@ -2,12 +2,55 @@ import PopoverMixin from 'ghost/mixins/popover-mixin';
var GhostPopover = Ember.Component.extend(PopoverMixin, {
classNames: 'ghost-popover fade-in',
classNameBindings: ['open'],
classNameBindings: ['isOpen:open'],
name: null,
//Don't manipulate isOpen directly! Use open() and close()
isOpen: false,
open: function () {
this.set('closing', false);
this.set('isOpen', true);
},
//Helps us track if the menu was opened again right after
// it was closed.
closing: false,
close: function () {
var self = this;
this.set('closing', true);
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'),
targetPopoverName = options.target;
if (name === targetPopoverName && (!isOpen || isClosing)) {
this.open();
} else if (isOpen) {
this.close();
}
},
closeOnClick: false,
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);
@ -19,28 +62,7 @@ var GhostPopover = Ember.Component.extend(PopoverMixin, {
popoverService.off('close', this, this.close);
popoverService.off('toggle', this, this.toggle);
},
click: function (event) {
this._super(event);
if (this.get('closeOnClick')) {
return this.close();
}
},
close: function () {
return this.set('open', false);
},
toggle: function (options) {
/*
Close all popovers whose button was not clicked,
and toggle the actual target.
*/
var targetPopoverName = options.target;
if (this.get('name') === targetPopoverName) {
this.toggleProperty('open');
} else {
this.close();
}
}
});
export default GhostPopover;
export default GhostPopover;