From cd7af11e893694c9702eebfd58f23b98f491246a Mon Sep 17 00:00:00 2001
From: Preston <freetubeapp@protonmail.com>
Date: Sun, 20 Sep 2020 19:15:59 -0400
Subject: [PATCH] Allow drop downs to hide when clicked away

---
 .../ft-icon-button/ft-icon-button.js          | 29 +++++++++++++++++--
 .../ft-icon-button/ft-icon-button.sass        |  4 +++
 .../ft-icon-button/ft-icon-button.vue         |  3 +-
 .../ft-share-button/ft-share-button.js        | 16 +++++-----
 4 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js
index c2d6b09c..38df01a2 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.js
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.js
@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import $ from 'jquery'
 
 export default Vue.extend({
   name: 'FtIconButton',
@@ -50,12 +51,34 @@ export default Vue.extend({
   },
   data: function () {
     return {
-      showDropdown: false
+      showDropdown: false,
+      id: ''
     }
   },
+  mounted: function () {
+    this.id = `iconButton${this._uid}`
+  },
   methods: {
     toggleDropdown: function () {
-      this.showDropdown = !this.showDropdown
+      $(`#${this.id}`)[0].style.display = 'inline'
+      $(`#${this.id}`).focus()
+
+      $(`#${this.id}`).focusout(() => {
+        const shareLinks = $(`#${this.id}`).find('.shareLinks')
+
+        if (shareLinks.length > 0) {
+          if (!shareLinks[0].parentNode.matches(':hover')) {
+            $(`#${this.id}`)[0].style.display = 'none'
+          }
+        } else {
+          $(`#${this.id}`)[0].style.display = 'none'
+        }
+      })
+    },
+
+    focusOut: function () {
+      $(`#${this.id}`).focusout()
+      $(`#${this.id}`)[0].style.display = 'none'
     },
 
     handleIconClick: function () {
@@ -67,8 +90,8 @@ export default Vue.extend({
     },
 
     handleDropdownClick: function (index) {
-      this.toggleDropdown()
       this.$emit('click', this.dropdownValues[index])
+      this.focusOut()
     }
   }
 })
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.sass b/src/renderer/components/ft-icon-button/ft-icon-button.sass
index 07cc0a6d..a0425509 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.sass
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.sass
@@ -46,6 +46,7 @@
       background-color: var(--accent-color-active)
 
 .iconDropdown
+  display: none
   position: absolute
   text-align: center
   list-style-type: none
@@ -57,6 +58,9 @@
   color: var(--secondary-text-color)
   user-select: none
 
+  &:focus
+    display: inline
+
   &.left
     right: calc(50% - 10px)
 
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue
index bafa0c6e..6c1534dc 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -17,7 +17,8 @@
       @click="handleIconClick"
     />
     <div
-      v-if="showDropdown"
+      tabindex="-1"
+      :id="id"
       class="iconDropdown"
       :class="{
         left: dropdownPositionX === 'left',
diff --git a/src/renderer/components/ft-share-button/ft-share-button.js b/src/renderer/components/ft-share-button/ft-share-button.js
index bc757c83..acc18088 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.js
+++ b/src/renderer/components/ft-share-button/ft-share-button.js
@@ -68,7 +68,7 @@ export default Vue.extend({
 
     openInvidious() {
       this.open(this.getFinalUrl(this.invidiousURL))
-      this.$refs.iconButton.toggleDropdown()
+      this.$refs.iconButton.focusOut()
     },
 
     copyInvidious() {
@@ -76,12 +76,12 @@ export default Vue.extend({
         message: this.$t('Share.Invidious URL copied to clipboard')
       })
       this.copy(this.getFinalUrl(this.invidiousURL))
-      this.$refs.iconButton.toggleDropdown()
+      this.$refs.iconButton.focusOut()
     },
 
     openYoutube() {
       this.open(this.getFinalUrl(this.youtubeURL))
-      this.$refs.iconButton.toggleDropdown()
+      this.$refs.iconButton.focusOut()
     },
 
     copyYoutube() {
@@ -89,12 +89,12 @@ export default Vue.extend({
         message: this.$t('Share.YouTube URL copied to clipboard')
       })
       this.copy(this.getFinalUrl(this.youtubeURL))
-      this.$refs.iconButton.toggleDropdown()
+      this.$refs.iconButton.focusOut()
     },
 
     openYoutubeEmbed() {
       this.open(this.getFinalUrl(this.youtubeEmbedURL))
-      this.$refs.iconButton.toggleDropdown()
+      this.$refs.iconButton.focusOut()
     },
 
     copyYoutubeEmbed() {
@@ -102,12 +102,12 @@ export default Vue.extend({
         message: this.$t('Share.YouTube Embed URL copied to clipboard')
       })
       this.copy(this.getFinalUrl(this.youtubeEmbedURL))
-      this.$refs.iconButton.toggleDropdown()
+      this.$refs.iconButton.focusOut()
     },
 
     openInvidiousEmbed() {
       this.open(this.getFinalUrl(this.invidiousEmbedURL))
-      this.$refs.iconButton.toggleDropdown()
+      this.$refs.iconButton.focusOut()
     },
 
     copyInvidiousEmbed() {
@@ -115,7 +115,7 @@ export default Vue.extend({
         message: this.$t('Share.Invidious Embed URL copied to clipboard')
       })
       this.copy(this.getFinalUrl(this.invidiousEmbedURL))
-      this.$refs.iconButton.toggleDropdown()
+      this.$refs.iconButton.focusOut()
     },
 
     updateincludeTimestamp() {