From e3f64e720caaef44d6cf2fff8351e289661e3d3a Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Thu, 27 May 2021 19:16:45 +0100
Subject: [PATCH] Use radio buttons for map list

---
 src/components/SvgIcon.vue               |  7 +--
 src/components/map/MapContextMenu.vue    |  2 +-
 src/components/sidebar/WorldList.vue     | 14 +++--
 src/components/sidebar/WorldListItem.vue | 69 +++++++++++-------------
 4 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/src/components/SvgIcon.vue b/src/components/SvgIcon.vue
index dbb1a59..5adcc1d 100644
--- a/src/components/SvgIcon.vue
+++ b/src/components/SvgIcon.vue
@@ -51,8 +51,9 @@ export default {
 
 <style>
   .svg-icon {
-    fill: currentColor;
-    height: 24px;
-    width: 24px;
+    pointer-events: none;
+	fill: currentColor;
+	height: 24px;
+	width: 24px;
   }
 </style>
diff --git a/src/components/map/MapContextMenu.vue b/src/components/map/MapContextMenu.vue
index eb59e49..39b0368 100644
--- a/src/components/map/MapContextMenu.vue
+++ b/src/components/map/MapContextMenu.vue
@@ -20,7 +20,7 @@
 			<li role="none">
 				<button type="button" role="menuitem" @click.prevent="pan">{{ messageCenterHere }}</button>
 			</li>
-			<WorldListItem v-if="currentWorld" :world="currentWorld"></WorldListItem>
+			<WorldListItem v-if="currentWorld" :world="currentWorld" name="context"></WorldListItem>
 		</ul>
 	</nav>
 </template>
diff --git a/src/components/sidebar/WorldList.vue b/src/components/sidebar/WorldList.vue
index d0ea95a..aea9f84 100644
--- a/src/components/sidebar/WorldList.vue
+++ b/src/components/sidebar/WorldList.vue
@@ -18,10 +18,10 @@
 	<CollapsibleSection name="maps">
 		<template v-slot:heading>{{ heading }}</template>
 		<template v-slot:default>
-			<ul class="section__content" role="listbox">
-				<WorldListItem :world="world" v-for="[name, world] in worlds" :key="name"></WorldListItem>
-				<li v-if="!worlds.size" class="section__skeleton">{{ skeletonWorlds }}</li>
-			</ul>
+			<RadioList class="section__content">
+				<WorldListItem :world="world" v-for="[name, world] in worlds" :key="`${prefix}_${currentServer.id}_${name}`"></WorldListItem>
+				<span v-if="!worlds.size" class="section__skeleton">{{ skeletonWorlds }}</span>
+			</RadioList>
 		</template>
 	</CollapsibleSection>
 </template>
@@ -31,10 +31,12 @@ import WorldListItem from './WorldListItem.vue';
 import {defineComponent} from 'vue';
 import {useStore} from "@/store";
 import CollapsibleSection from "@/components/sidebar/CollapsibleSection.vue";
+import RadioList from "@/components/util/RadioList.vue";
 
 export default defineComponent({
 	name: 'WorldList',
 	components: {
+		RadioList,
 		CollapsibleSection,
 		WorldListItem
 	},
@@ -50,6 +52,10 @@ export default defineComponent({
 
 		worlds() {
 			return useStore().state.worlds;
+		},
+
+		currentServer() {
+			return useStore().state.currentServer;
 		}
 	}
 });
diff --git a/src/components/sidebar/WorldListItem.vue b/src/components/sidebar/WorldListItem.vue
index 9bed318..c5a30ed 100644
--- a/src/components/sidebar/WorldListItem.vue
+++ b/src/components/sidebar/WorldListItem.vue
@@ -15,23 +15,22 @@
   -->
 
 <template>
-	<li class="world" role="none">
+	<div class="world">
 		<span class="world__name">{{ world.title }}</span>
-		<ul class="world__maps" role="menu">
-			<li :class="{'map': true, 'map--selected': map === currentMap}" v-for="[name, map] in world.maps" :key="name" role="none">
-				<button role="menuitemradio" type="button" :title="`${world.title} - ${map.title}`"
-				        @click="setCurrentMap(map.name)" :aria-label="`${world.title} - ${map.title}`"
-				        :aria-checked="map === currentMap">
+		<div class="world__maps menu">
+			<template v-for="[key, map] in world.maps" :key="`${world.name}_${key}`">
+				<input :id="`${name}-${world.name}-${key}`" type="radio" :name="name" v-bind:value="map" v-model="currentMap">
+				<label class="map" :for="`${name}-${world.name}-${key}`" :title="`${world.title} - ${map.title}`">
 					<SvgIcon :name="getMapIcon(map)"></SvgIcon>
-				</button>
-			</li>
-		</ul>
-	</li>
+				</label>
+			</template>
+		</div>
+	</div>
 </template>
 
 <script lang="ts">
 import {useStore} from "@/store";
-import {DynmapWorldMap, DynmapWorld} from "@/dynmap";
+import {DynmapWorld, DynmapWorldMap} from "@/dynmap";
 import {defineComponent} from 'vue';
 import {MutationTypes} from "@/store/mutation-types";
 import SvgIcon from "@/components/SvgIcon.vue";
@@ -54,13 +53,22 @@ export default defineComponent({
 		world: {
 			type: Object as () => DynmapWorld,
 			required: true
+		},
+		name: {
+			type: String,
+			default: 'map',
 		}
 	},
 
 	computed: {
-		currentMap(): DynmapWorldMap | undefined {
-			return useStore().state.currentMap;
-		},
+		currentMap: {
+			get() {
+				return useStore().state.currentMap;
+			},
+			set(value) {
+				useStore().commit(MutationTypes.SET_CURRENT_MAP, {worldName: this.world.name, mapName: value.name});
+			}
+		}
 	},
 
 	methods: {
@@ -80,12 +88,6 @@ export default defineComponent({
 			}
 
 			return `block_${worldType}_${mapType}`;
-		},
-		setCurrentMap(mapName: string) {
-			useStore().commit(MutationTypes.SET_CURRENT_MAP, {
-				worldName: this.world.name,
-				mapName
-			});
 		}
 	}
 });
@@ -96,6 +98,7 @@ export default defineComponent({
 		display: flex;
 		align-items: center;
 		margin-bottom:  .5rem;
+		padding-left: 0.8rem;
 
 		.world__name {
 			word-break: break-word;
@@ -116,27 +119,17 @@ export default defineComponent({
 		width: 3.2rem;
 		height: 3.2rem;
 
-		button {
-			display: block;
-			height: 100%;
-			width: 100%;
-			border-radius: 0.5rem;
-
-			.svg-icon {
-				top: 0.2rem;
-				right: 0.2rem;
-				bottom: 0.2rem;
-				left: 0.2rem;
-				width: calc(100% - 0.4rem);
-			}
+		.svg-icon {
+			top: 0.2rem !important;
+			right: 0.2rem !important;
+			bottom: 0.2rem !important;
+			left: 0.2rem !important;
+			width: calc(100% - 0.4rem) !important;
+			height: auto !important;
 		}
 
-		& + .map {
+		& ~ .map {
 			margin-left: 0.5rem;
 		}
-
-		&.map--selected button {
-			background-color: var(--background-hover);
-		}
 	}
 </style>