1 files changed, 101 insertions, 0 deletions
diff --git a/apps/accessibility/src/App.vue b/apps/accessibility/src/App.vue
new file mode 100644
index 00000000000..37dcc41eb2c
--- /dev/null
+++ b/apps/accessibility/src/App.vue
@@ -0,0 +1,101 @@
+<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';
+import axios from 'axios';
+
+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
+			};
+		},
+		tokenHeaders() {
+			return { headers: { requesttoken: OC.requestToken } }
+		}
+	},
+	methods: {
+		selectTheme(id) {
+			this.selectItem('theme', id);
+		},
+		selectFont(id) {
+			this.selectItem('font', id);
+		},
+
+		/**
+		 * Commit a change and force reload css
+		 * Fetching the file again will trigger the server update
+		 *
+		 * @param {string} type type of the change (font or theme)
+		 * @param {string} id the data of the change
+		 */
+		selectItem(type, id) {
+			axios
+				.post(OC.linkToOCS('apps/accessibility/api/v1/config', 2) + type, {value: id}, this.tokenHeaders)
+				.then(response => {
+					this.serverData[type] = id;
+
+					// Remove old link
+					let link = document.querySelector('link[rel=stylesheet][href*=accessibility][href*=user-]');
+					if (!link) {
+						// insert new css
+						let link = document.createElement('link');
+						link.rel = 'stylesheet';
+						link.href = OC.generateUrl('/apps/accessibility/css/user-style.css');
+						document.head.appendChild(link)
+					} else {
+						// force update
+						link.href = link.href.split('?')[0] + '?v=' + new Date().getTime();
+					}
+				})
+				.catch(err => {
+					console.log(err, err.response);
+					OC.Notification.showTemporary(t('accessibility', err.response.data.ocs.meta.message + '. Unable to apply the setting.'));
+				});
+		}
+	}
+};
+</script>