Moved floating box to its own file, generalized

frontend/src/components/modals/EditSong.vue

@@ -514,22 +514,8 @@
 				</button>
 			</div>
 		</modal>
-		<div
-			id="genre-helper-container"
-			:style="{
-				width: genreHelper.width + 'px',
-				height: genreHelper.height + 'px',
-				top: genreHelper.top + 'px',
-				left: genreHelper.left + 'px'
-			}"
-			v-if="genreHelper.shown"
-			@mousedown="onResizeGenreHelper"
-		>
-			<div
-				class="genre-helper-header"
-				@mousedown="onDragGenreHelper"
-			></div>
-			<div class="genre-helper-body">
+		<floating-box id="genreHelper" ref="genreHelper">
+			<template #body>
 				<span>Blues</span><span>Country</span><span>Disco</span
 				><span>Funk</span><span>Hip-Hop</span><span>Jazz</span
 				><span>Metal</span><span>Oldies</span><span>Other</span
@@ -542,8 +528,8 @@
 				><span>Drum & Bass</span><span>Club-House</span
 				><span>Indie</span><span>Heavy Metal</span
 				><span>Christian rock</span><span>Dubstep</span>
-			</div>
-		</div>
+			</template>
+		</floating-box>
 	</div>
 </template>
 
@@ -555,9 +541,10 @@ import io from "../../io";
 import keyboardShortcuts from "../../keyboardShortcuts";
 import validation from "../../validation";
 import Modal from "../Modal.vue";
+import FloatingBox from "../ui/FloatingBox.vue";
 
 export default {
-	components: { Modal },
+	components: { Modal, FloatingBox },
 	data() {
 		return {
 			focusedElementBefore: null,
@@ -583,17 +570,6 @@ export default {
 			keydownGenreInputTimeout: 0,
 			artistAutosuggestItems: [],
 			genreAutosuggestItems: [],
-			genreHelper: {
-				width: 200,
-				height: 200,
-				top: 0,
-				left: 0,
-				shown: false,
-				pos1: 0,
-				pos2: 0,
-				pos3: 0,
-				pos4: 0
-			},
 			genres: [
 				"Blues",
 				"Country",
@@ -1072,79 +1048,11 @@ export default {
 			ctx.fillStyle = currentDurationColor;
 			ctx.fillRect(widthCurrentTime, 0, 1, 20);
 		},
-		onDragGenreHelper(e) {
-			const e1 = e || window.event;
-			e1.preventDefault();
-
-			this.genreHelper.pos3 = e1.clientX;
-			this.genreHelper.pos4 = e1.clientY;
-
-			document.onmousemove = e => {
-				const e2 = e || window.event;
-				e2.preventDefault();
-				// calculate the new cursor position:
-				this.genreHelper.pos1 = this.genreHelper.pos3 - e.clientX;
-				this.genreHelper.pos2 = this.genreHelper.pos4 - e.clientY;
-				this.genreHelper.pos3 = e.clientX;
-				this.genreHelper.pos4 = e.clientY;
-				// set the element's new position:
-				this.genreHelper.top -= this.genreHelper.pos2;
-				this.genreHelper.left -= this.genreHelper.pos1;
-			};
-
-			document.onmouseup = () => {
-				document.onmouseup = null;
-				document.onmousemove = null;
-
-				this.saveGenreHelper();
-			};
-		},
-		onResizeGenreHelper(e) {
-			if (e.target.id !== "genre-helper-container") return;
-
-			document.onmouseup = () => {
-				document.onmouseup = null;
-
-				const { height, width } = e.target.style;
-
-				this.genreHelper.height = Number(
-					height
-						.split("")
-						.splice(0, height.length - 2)
-						.join("")
-				);
-				this.genreHelper.width = Number(
-					width
-						.split("")
-						.splice(0, width.length - 2)
-						.join("")
-				);
-
-				this.saveGenreHelper();
-			};
-		},
 		toggleGenreHelper() {
-			this.genreHelper.shown = !this.genreHelper.shown;
-			this.saveGenreHelper();
+			this.$refs.genreHelper.toggleBox();
 		},
 		resetGenreHelper() {
-			this.genreHelper.top = 0;
-			this.genreHelper.left = 0;
-			this.genreHelper.width = 200;
-			this.genreHelper.height = 200;
-			this.saveGenreHelper();
-		},
-		saveGenreHelper() {
-			localStorage.setItem(
-				"genreHelper",
-				JSON.stringify({
-					height: this.genreHelper.height,
-					width: this.genreHelper.width,
-					top: this.genreHelper.top,
-					left: this.genreHelper.left,
-					shown: this.genreHelper.shown
-				})
-			);
+			this.$refs.genreHelper.resetBox();
 		},
 		...mapActions("admin/songs", [
 			"stopVideo",
@@ -1165,15 +1073,6 @@ export default {
 		//   this.editing.song.skipDuration
 		// );
 
-		if (localStorage.genreHelper) {
-			const genreHelper = JSON.parse(localStorage.getItem("genreHelper"));
-			this.genreHelper.height = genreHelper.height;
-			this.genreHelper.width = genreHelper.width;
-			this.genreHelper.top = genreHelper.top;
-			this.genreHelper.left = genreHelper.left;
-			this.genreHelper.shown = genreHelper.shown;
-		}
-
 		this.discogsQuery = this.editing.song.title;
 
 		lofig.get("cookie.secure").then(useHTTPS => {
@@ -1486,37 +1385,6 @@ export default {
 <style lang="scss">
 @import "../../styles/global.scss";
 
-#genre-helper-container {
-	background-color: white;
-	position: fixed;
-	z-index: 10000000;
-	resize: both;
-	overflow: auto;
-	border: 1px solid #d3d3d3;
-	min-height: 50px !important;
-	min-width: 50px !important;
-
-	.genre-helper-header {
-		cursor: move;
-		z-index: 100000001;
-		background-color: $musare-blue;
-		padding: 10px;
-		display: block;
-		height: 10px;
-		width: 100%;
-	}
-
-	.genre-helper-body {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: space-evenly;
-
-		span {
-			padding: 3px 6px;
-		}
-	}
-}
-
 .song-modal {
 	.modal-card-title {
 		text-align: center;

frontend/src/components/ui/FloatingBox.vue

@@ -0,0 +1,163 @@
+<template>
+	<div
+		ref="box"
+		class="box"
+		:style="{
+			width: width + 'px',
+			height: height + 'px',
+			top: top + 'px',
+			left: left + 'px'
+		}"
+		@mousedown="onResizeBox"
+	>
+		<div class="box-header" @mousedown="onDragBox">
+			<slot name="header"></slot>
+		</div>
+		<div class="box-body">
+			<slot name="body"></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		id: { type: String, default: null }
+	},
+	data() {
+		return {
+			width: 200,
+			height: 200,
+			top: 0,
+			left: 0,
+			shown: false,
+			pos1: 0,
+			pos2: 0,
+			pos3: 0,
+			pos4: 0
+		};
+	},
+	methods: {
+		onDragBox(e) {
+			const e1 = e || window.event;
+			e1.preventDefault();
+
+			this.pos3 = e1.clientX;
+			this.pos4 = e1.clientY;
+
+			document.onmousemove = e => {
+				const e2 = e || window.event;
+				e2.preventDefault();
+				// calculate the new cursor position:
+				this.pos1 = this.pos3 - e.clientX;
+				this.pos2 = this.pos4 - e.clientY;
+				this.pos3 = e.clientX;
+				this.pos4 = e.clientY;
+				// set the element's new position:
+				this.top -= this.pos2;
+				this.left -= this.pos1;
+			};
+
+			document.onmouseup = () => {
+				document.onmouseup = null;
+				document.onmousemove = null;
+
+				this.saveBox();
+			};
+		},
+		onResizeBox(e) {
+			if (e.target !== this.$refs.box) return;
+
+			document.onmouseup = () => {
+				document.onmouseup = null;
+
+				const { height, width } = e.target.style;
+
+				this.height = Number(
+					height
+						.split("")
+						.splice(0, height.length - 2)
+						.join("")
+				);
+				this.width = Number(
+					width
+						.split("")
+						.splice(0, width.length - 2)
+						.join("")
+				);
+
+				this.saveBox();
+			};
+		},
+		toggleBox() {
+			this.shown = !this.shown;
+			this.saveBox();
+		},
+		resetBox() {
+			this.top = 0;
+			this.left = 0;
+			this.width = 200;
+			this.height = 200;
+			this.saveBox();
+		},
+		saveBox() {
+			if (this.id === null) return;
+			localStorage.setItem(
+				`box:${this.id}`,
+				JSON.stringify({
+					height: this.height,
+					width: this.width,
+					top: this.top,
+					left: this.left,
+					shown: this.shown
+				})
+			);
+		}
+	},
+	mounted() {
+		if (this.id !== null && localStorage[`box:${this.id}`]) {
+			const json = JSON.parse(localStorage.getItem(`box:${this.id}`));
+			this.height = json.height;
+			this.width = json.width;
+			this.top = json.top;
+			this.left = json.left;
+			this.shown = json.shown;
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/global.scss";
+
+.box {
+	background-color: white;
+	position: fixed;
+	z-index: 10000000;
+	resize: both;
+	overflow: auto;
+	border: 1px solid #d3d3d3;
+	min-height: 50px !important;
+	min-width: 50px !important;
+
+	.box-header {
+		cursor: move;
+		z-index: 100000001;
+		background-color: $musare-blue;
+		padding: 10px;
+		display: block;
+		height: 10px;
+		width: 100%;
+	}
+
+	.box-body {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-evenly;
+
+		span {
+			padding: 3px 6px;
+		}
+	}
+}
+</style>