feat(AddToPlaylist): dropdown will close when a click occurs outside of its bounding box

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/src/main.js

@@ -207,6 +207,21 @@ router.beforeEach((to, from, next) => {
 	} else next();
 });
 
+Vue.directive("click-outside", {
+	bind(element, binding) {
+		window.handleOutsideClick = event => {
+			if (!(element === event.target || element.contains(event.target))) {
+				binding.value();
+			}
+		};
+
+		document.body.addEventListener("click", window.handleOutsideClick);
+	},
+	unbind() {
+		document.body.removeEventListener("click", window.handleOutsideClick);
+	}
+});
+
 // eslint-disable-next-line no-new
 new Vue({
 	router,

frontend/src/pages/Station/index.vue

@@ -193,7 +193,13 @@
 									</div>
 
 									<!-- Add Song To Playlist Button & Dropdown -->
-									<div id="add-song-to-playlist">
+									<div
+										id="add-song-to-playlist"
+										v-click-outside="
+											() =>
+												(this.showPlaylistDropdown = false)
+										"
+									>
 										<div class="control has-addons">
 											<button
 												class="button is-primary"