Close picker when clicking outside of it. Fixes #8

clarkwinkelmann · Aug 24, 2017 · 4661685 · 4661685
1 parent 82bfd71
commit 4661685
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 2 deletions.
diff --git a/js/forum/dist/extension.js b/js/forum/dist/extension.js
@@ -1251,7 +1251,7 @@ System.register("clarkwinkelmann/emojionearea/components/EmojiAreaButton", ["fla
                     }
                 }, {
                     key: "configArea",
-                    value: function configArea(element, isInitialized) {
+                    value: function configArea(element, isInitialized, context) {
                         var _this = this;
 
                         if (isInitialized) return;
@@ -1272,6 +1272,29 @@ System.register("clarkwinkelmann/emojionearea/components/EmojiAreaButton", ["fla
                                 }
                             }
                         });
+
+                        document.addEventListener('click', this.clickedOutside);
+
+                        context.onunload = function () {
+                            document.removeEventListener('click', _this.clickedOutside);
+                        };
+                    }
+                }, {
+                    key: "clickedOutside",
+                    value: function clickedOutside(event) {
+                        var $target = $(event.target);
+
+                        // If we clicked on the popup or its content we don't do anything
+                        if ($target.is('.Button-emojioneareaContainer') || $target.parents('.Button-emojioneareaContainer').size()) {
+                            return;
+                        }
+
+                        var $button = $('.Button-emojioneareaContainer .emojionearea-button');
+
+                        // If the popup is currently open we close it
+                        if ($button.is('.active')) {
+                            $button.trigger('click');
+                        }
                     }
                 }]);
                 return _default;

diff --git a/js/forum/src/components/EmojiAreaButton.js b/js/forum/src/components/EmojiAreaButton.js
@@ -24,7 +24,7 @@ export default class extends Component {
         ]);
     }
 
-    configArea(element, isInitialized) {
+    configArea(element, isInitialized, context) {
         if (isInitialized) return;
 
         const $container = $(element).find('.Button-emojioneareaContainer');
@@ -43,6 +43,28 @@ export default class extends Component {
                 },
             },
         });
+
+        document.addEventListener('click', this.clickedOutside);
+
+        context.onunload = () => {
+            document.removeEventListener('click', this.clickedOutside);
+        };
+    }
+
+    clickedOutside(event) {
+        const $target = $(event.target);
+
+        // If we clicked on the popup or its content we don't do anything
+        if ($target.is('.Button-emojioneareaContainer') || $target.parents('.Button-emojioneareaContainer').size()) {
+            return;
+        }
+
+        const $button = $('.Button-emojioneareaContainer .emojionearea-button');
+
+        // If the popup is currently open we close it
+        if ($button.is('.active')) {
+            $button.trigger('click');
+        }
     }
 
 }