Comply to eslint

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

4 files changed, 104 insertions, 90 deletions

diff --git a/apps/accessibility/src/App.vue b/apps/accessibility/src/Accessibility.vue
index 7fdc54af664..56592103d56 100644
--- a/apps/accessibility/src/App.vue
+++ b/apps/accessibility/src/Accessibility.vue
@@ -1,60 +1,56 @@
 <template>
 	<div id="accessibility" class="section">
-		<h2>{{t('accessibility', 'Accessibility')}}</h2>
+		<h2>{{ t('accessibility', 'Accessibility') }}</h2>
 		<p v-html="description" />
 		<p v-html="descriptionDetail" />
 
 		<div class="preview-list">
-			<preview :preview="highcontrast"
-				 :key="highcontrast.id" :selected="selected.highcontrast"
-				 v-on:select="selectHighContrast"></preview>
-			<preview v-for="preview in themes" :preview="preview"
-				 :key="preview.id" :selected="selected.theme"
-				 v-on:select="selectTheme"></preview>
-			<preview v-for="preview in fonts" :preview="preview"
-				 :key="preview.id" :selected="selected.font"
-				 v-on:select="selectFont"></preview>
+			<ItemPreview :key="highcontrast.id"
+				:preview="highcontrast"
+				:selected="selected.highcontrast"
+				@select="selectHighContrast" />
+			<ItemPreview v-for="preview in themes"
+				:key="preview.id"
+				:preview="preview"
+				:selected="selected.theme"
+				@select="selectTheme" />
+			<ItemPreview v-for="preview in fonts"
+				:key="preview.id"
+				:preview="preview"
+				:selected="selected.font"
+				@select="selectFont" />
 		</div>
 	</div>
 </template>
 
 <script>
-import preview from './components/itemPreview';
-import axios from 'nextcloud-axios';
+import ItemPreview from './components/ItemPreview'
+import axios from 'nextcloud-axios'
 
 export default {
 	name: 'Accessibility',
-	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
-			);
-		}
-	},
+	components: { ItemPreview },
 	data() {
 		return {
 			serverData: []
-		};
+		}
 	},
 	computed: {
 		themes() {
-			return this.serverData.themes;
+			return this.serverData.themes
 		},
 		highcontrast() {
-			return this.serverData.highcontrast;
+			return this.serverData.highcontrast
 		},
 		fonts() {
-			return this.serverData.fonts;
+			return this.serverData.fonts
 		},
 		selected() {
 			return {
 				theme: this.serverData.selected.theme,
 				highcontrast: this.serverData.selected.highcontrast,
 				font: this.serverData.selected.font
-			};
+			}
 		},
 		description() {
 			// using the `t` replace method escape html, we have to do it manually :/
@@ -66,7 +62,7 @@ export default {
 				We aim to be compliant with the {guidelines} 2.1 on AA level,
 				with the high contrast theme even on AAA level.`
 			)
-			.replace('{guidelines}', this.guidelinesLink)
+				.replace('{guidelines}', this.guidelinesLink)
 		},
 		guidelinesLink() {
 			return `<a target="_blank" href="https://www.w3.org/WAI/standards-guidelines/wcag/" rel="noreferrer nofollow">${t('accessibility', 'Web Content Accessibility Guidelines')}</a>`
@@ -77,8 +73,8 @@ export default {
 				`If you find any issues, don’t hesitate to report them on {issuetracker}.
 				And if you want to get involved, come join {designteam}!`
 			)
-			.replace('{issuetracker}', this.issuetrackerLink)
-			.replace('{designteam}', this.designteamLink)
+				.replace('{issuetracker}', this.issuetrackerLink)
+				.replace('{designteam}', this.designteamLink)
 		},
 		issuetrackerLink() {
 			return `<a target="_blank" href="https://github.com/nextcloud/server/issues/" rel="noreferrer nofollow">${t('accessibility', 'our issue tracker')}</a>`
@@ -87,19 +83,28 @@ export default {
 			return `<a target="_blank" href="https://nextcloud.com/design" rel="noreferrer nofollow">${t('accessibility', 'our design team')}</a>`
 		}
 	},
+	beforeMount() {
+		// importing server data into the app
+		const serverDataElmt = document.getElementById('serverData')
+		if (serverDataElmt !== null) {
+			this.serverData = JSON.parse(
+				document.getElementById('serverData').dataset.server
+			)
+		}
+	},
 	methods: {
 		selectHighContrast(id) {
-			this.selectItem('highcontrast', id);
+			this.selectItem('highcontrast', id)
 		},
 		selectTheme(id, idSelectedBefore) {
-			this.selectItem('theme', id);
-			document.body.classList.remove(idSelectedBefore);
+			this.selectItem('theme', id)
+			document.body.classList.remove(idSelectedBefore)
 			if (id) {
-				document.body.classList.add(id);
+				document.body.classList.add(id)
 			}
 		},
 		selectFont(id) {
-			this.selectItem('font', id);
+			this.selectItem('font', id)
 		},
 
 		/**
@@ -110,43 +115,40 @@ export default {
 		 * @param {string} id the data of the change
 		 */
 		selectItem(type, id) {
-			axios.post(
-					OC.linkToOCS('apps/accessibility/api/v1/config', 2) + type,
-					{ value: id }
-				)
+			axios.post(OC.linkToOCS('apps/accessibility/api/v1/config', 2) + type, { value: id })
 				.then(response => {
-					this.serverData.selected[type] = id;
+					this.serverData.selected[type] = id
 
 					// Remove old link
-					let link = document.querySelector('link[rel=stylesheet][href*=accessibility][href*=user-]');
+					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') + '?v=' + new Date().getTime();
-						document.head.appendChild(link);
+						let link = document.createElement('link')
+						link.rel = 'stylesheet'
+						link.href = OC.generateUrl('/apps/accessibility/css/user-style.css') + '?v=' + new Date().getTime()
+						document.head.appendChild(link)
 					} else {
 						// compare arrays
 						if (
-							JSON.stringify(Object.values(this.selected)) ===
-							JSON.stringify([false, false])
+							JSON.stringify(Object.values(this.selected))
+							=== JSON.stringify([false, false])
 						) {
 							// if nothing is selected, blindly remove the css
-							link.remove();
+							link.remove()
 						} else {
 							// force update
-							link.href =
-								link.href.split('?')[0] +
-								'?v=' +
-								new Date().getTime();
+							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.'));
-				});
+					console.error(err, err.response)
+					OC.Notification.showTemporary(t('accessibility', err.response.data.ocs.meta.message + '. Unable to apply the setting.'))
+				})
 		}
 	}
-};
+}
 </script>
diff --git a/apps/accessibility/src/components/ItemPreview.vue b/apps/accessibility/src/components/ItemPreview.vue
new file mode 100644
index 00000000000..66f751b37d7
--- /dev/null
+++ b/apps/accessibility/src/components/ItemPreview.vue
@@ -0,0 +1,40 @@
+<template>
+	<div :class="{preview: true}">
+		<div class="preview-image" :style="{backgroundImage: 'url(' + preview.img + ')'}" />
+		<div class="preview-description">
+			<h3>{{ preview.title }}</h3>
+			<p>{{ preview.text }}</p>
+			<input :id="'accessibility-' + preview.id"
+				v-model="checked"
+				type="checkbox"
+				class="checkbox">
+			<label :for="'accessibility-' + preview.id">{{ t('accessibility', 'Enable') }} {{ preview.title.toLowerCase() }}</label>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ItemPreview',
+	props: {
+		preview: {
+			type: Object,
+			required: true
+		},
+		selected: {
+			type: String,
+			default: null
+		}
+	},
+	computed: {
+		checked: {
+			get() {
+				return this.selected === this.preview.id
+			},
+			set(checked) {
+				this.$emit('select', checked ? this.preview.id : false,	this.selected)
+			}
+		}
+	}
+}
+</script>
diff --git a/apps/accessibility/src/components/itemPreview.vue b/apps/accessibility/src/components/itemPreview.vue
deleted file mode 100644
index 7f4e17b16f1..00000000000
--- a/apps/accessibility/src/components/itemPreview.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-	<div :class="{preview: true}">
-		<div class="preview-image" :style="{backgroundImage: 'url(' + preview.img + ')'}"></div>
-		<div class="preview-description">
-			<h3>{{preview.title}}</h3>
-			<p>{{preview.text}}</p>
-			<input type="checkbox" class="checkbox" :id="'accessibility-' + preview.id" v-model="checked" />
-			<label :for="'accessibility-' + preview.id">{{t('accessibility', 'Enable')}} {{preview.title.toLowerCase()}}</label>
-		</div>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'itemPreview',
-	props: ['preview', 'selected'],
-	computed: {
-		checked: {
-			get() {
-				return this.selected === this.preview.id;
-			},
-			set(checked) {
-				this.$emit('select', checked ? this.preview.id : false,	this.selected);
-			}
-		}
-    },
-};
-</script>
diff --git a/apps/accessibility/src/main.js b/apps/accessibility/src/main.js
index 5d9b2a2d0a8..618f4a7355f 100644
--- a/apps/accessibility/src/main.js
+++ b/apps/accessibility/src/main.js
@@ -1,12 +1,12 @@
-import Vue from 'vue';
-import App from './App.vue';
+import Vue from 'vue'
+import App from './Accessibility.vue'
 
 /* global t */
 // bind to window
-Vue.prototype.OC = OC;
-Vue.prototype.t = t;
+Vue.prototype.OC = OC
+Vue.prototype.t = t
 
-new Vue({
+export default new Vue({
 	el: '#accessibility',
 	render: h => h(App)
-});
+})