Added ability to close modals by pressing escape.

frontend/App.vue

@@ -119,6 +119,9 @@
 			'handleSocketConnection': function() {
 				this.socketConnected = window.socketConnected;
 				this.$broadcast('handleSocketConnection');
+			},
+			'closeModal': function() {
+				this.$broadcast('closeModal');
 			}
 		},
 		components: { Toast, WhatIsNew, LoginModal, RegisterModal, CreateCommunityStation }

frontend/components/Modals/AddSongToQueue.vue

@@ -92,6 +92,11 @@
 					clearInterval(socketInterval);
 				}
 			}, 100);
+		},
+		events: {
+			closeModal: function() {
+				this.$parent.toggleModal('addSongToQueue')
+			}
 		}
 	}
 </script>

frontend/components/Modals/CreateCommunityStation.vue

@@ -70,6 +70,11 @@
 				});
 				this.toggleModal();
 			}
+		},
+		events: {
+			closeModal: function() {
+				this.$dispatch('toggleModal', 'createCommunityStation');
+			}
 		}
 	}
 </script>

frontend/components/Modals/EditSong.vue

@@ -98,6 +98,25 @@
 	</div>
 </template>
 
+<script>
+	export default {
+		methods: {
+			toggleModal: function () {
+				this.$dispatch('toggleModal', 'login');
+			},
+			submitModal: function () {
+				this.$dispatch('login');
+				this.toggleModal();
+			}
+		},
+		events: {
+			closeModal: function() {
+				this.$parent.toggleModal()
+			}
+		}
+	}
+</script>
+
 <style type='scss' scoped>
 	input[type=range] {
 		-webkit-appearance: none;

frontend/components/Modals/EditStation.vue

@@ -94,6 +94,11 @@
 					clearInterval(socketInterval);
 				}
 			}, 100);
+		},
+		events: {
+			closeModal: function() {
+				this.$parent.toggleModal("editStation")
+			}
 		}
 	}
 </script>

frontend/components/Modals/Login.vue

@@ -38,6 +38,11 @@
 				this.$dispatch('login');
 				this.toggleModal();
 			}
+		},
+		events: {
+			closeModal: function() {
+				this.$dispatch('toggleModal', 'login');
+			}
 		}
 	}
 </script>

frontend/components/Modals/Playlists/Create.vue

@@ -49,6 +49,11 @@
 					clearInterval(socketInterval);
 				}
 			}, 100);
+		},
+		events: {
+			closeModal: function() {
+				this.$parent.toggleModal("createPlaylist");
+			}
 		}
 	}
 </script>

frontend/components/Modals/Playlists/Edit.vue

@@ -181,6 +181,11 @@
 					clearInterval(socketInterval);
 				}
 			}, 100);
+		},
+		events: {
+			closeModal: function() {
+				this.$parent.toggleModal("editPlaylist");
+			}
 		}
 	}
 </script>

frontend/components/Modals/Register.vue

@@ -56,6 +56,11 @@
 				this.$dispatch('register');
 				this.toggleModal();
 			}
+		},
+		events: {
+			closeModal: function() {
+				this.$dispatch('toggleModal', 'register');
+			}
 		}
 	}
 </script>

frontend/components/Modals/WhatIsNew.vue

@@ -77,6 +77,11 @@
 			formatDate: unix => {
 				return moment(unix).format('DD-MM-YYYY');
 			}
+		},
+		events: {
+			closeModal: function() {
+				this.isModalActive = false;
+			}
 		}
 	}
 </script>

frontend/main.js

@@ -34,6 +34,12 @@ lofig.get('serverDomain', function(res) {
 	}, 10000);
 });
 
+$(document).keydown(function(e) {
+	if (e.which === 27) {
+		router.app.$dispatch("closeModal");
+	}
+});
+
 router.beforeEach(transition => {
 	if (window.stationInterval) {
 		clearInterval(window.stationInterval);