From 9013bcc90866687a7ddd38dc8a6dfbb7c4679d8a Mon Sep 17 00:00:00 2001
From: Matt Enlow <matt@novaugust.net>
Date: Tue, 1 Jul 2014 12:56:02 -0600
Subject: [PATCH] Added fadeout to gh-popover

Closes #2868
- Uses jQuery's `.fadeOut` whenever a popover is closed.

- Reordered `gh-popover`'s code into something a bit more logical and, if
  I may, pretty
- Renamed `open` property into `isOpen`. `isOpen` should only be
  manipulated via `close()` and `open()`
- Added `closing` property to help track state in the case of rapid clicks
  on a popover's button, allowing us to abort
` Added `open()` function
---
 ghost/admin/components/gh-popover.js | 70 ++++++++++++++++++----------
 1 file changed, 46 insertions(+), 24 deletions(-)

diff --git a/ghost/admin/components/gh-popover.js b/ghost/admin/components/gh-popover.js
index 568aedfc28..e8e076d2a1 100644
--- a/ghost/admin/components/gh-popover.js
+++ b/ghost/admin/components/gh-popover.js
@@ -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;
\ No newline at end of file
+export default GhostPopover;