Accessibility ♿

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

3 files changed, 111 insertions, 0 deletions

diff --git a/apps/accessibility/src/App.vue b/apps/accessibility/src/App.vue
new file mode 100644
index 00000000000..d83d72b36eb
--- /dev/null
+++ b/apps/accessibility/src/App.vue
@@ -0,0 +1,76 @@
+<template>
+	<div id="accessibility">
+		<div id="themes" class="section">
+			<h2>{{t('accessibility', 'Themes')}}</h2>
+			<div class="themes-list preview-list">
+				<preview v-for="preview in themes" :preview="preview"
+						 :key="preview.id" :selected="selected.theme"
+						 v-on:select="selectTheme"></preview>
+			</div>
+		</div>
+		<div id="fonts" class="section">
+			<h2>{{t('accessibility', 'Fonts')}}</h2>
+			<div class="fonts-list preview-list">
+				<preview v-for="preview in fonts" :preview="preview"
+						 :key="preview.id" :selected="selected.font"
+						 v-on:select="selectFont"></preview>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import preview from './components/itemPreview';
+
+export default {
+	name: 'app',
+	components: { preview },
+	beforeMount() {
+		// importing server data into the app
+		const serverDataElmt = document.getElementById('serverData');
+		if (serverDataElmt !== null) {
+			this.serverData = JSON.parse(
+				document.getElementById('serverData').dataset.server
+			);
+		}
+	},
+	data() {
+		return {
+			serverData: []
+		};
+	},
+	computed: {
+		themes() {
+			return this.serverData.themes;
+		},
+		fonts() {
+			return this.serverData.fonts;
+		},
+		selected() {
+			return {
+				theme: this.serverData.theme,
+				font: this.serverData.font
+			};
+		}
+	},
+	methods: {
+		selectTheme(id) {
+			this.selectItem('theme', id);
+		},
+		selectFont(id) {
+			this.selectItem('font', id);
+		},
+
+		/**
+		 * Commit a change
+		 *
+		 * @param {string} type type of the change (font or theme)
+		 * @param {string} id the data of the change
+		 */
+		selectItem(type, id) {
+			this.serverData[type] = id;
+			console.log(type, id);
+		}
+	}
+};
+</script>
diff --git a/apps/accessibility/src/components/itemPreview.vue b/apps/accessibility/src/components/itemPreview.vue
new file mode 100644
index 00000000000..79f3f0494eb
--- /dev/null
+++ b/apps/accessibility/src/components/itemPreview.vue
@@ -0,0 +1,24 @@
+<template>
+	<div :class="{preview: true, selected: preview.id === selected}"
+		 @click="selectItem">
+		<div class="preview-image" :style="{backgroundImage: 'url(' + preview.img + ')'}"></div>
+		<h3>{{preview.title}}</h3>
+		<p>{{preview.text}}</p>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'itemPreview',
+	props: ['preview', 'selected'],
+	methods: {
+		selectItem() {
+			this.$emit(
+				'select',
+				// if we clicked the already selected one: disable it
+				this.preview.id === this.selected ? false : this.preview.id
+			);
+		}
+	}
+};
+</script>
diff --git a/apps/accessibility/src/main.js b/apps/accessibility/src/main.js
new file mode 100644
index 00000000000..8782a4362b6
--- /dev/null
+++ b/apps/accessibility/src/main.js
@@ -0,0 +1,11 @@
+import Vue from 'vue';
+import App from './App.vue';
+
+/* global t */
+// bind to window
+Vue.prototype.t = t;
+
+new Vue({
+	el: '#accessibility',
+	render: h => h(App)
+});