Comply to eslint

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

Author: skjnldsv

apps/accessibility/.eslintrc.js

@@ -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>

apps/accessibility/js/accessibility.js

@@ -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>

apps/accessibility/js/accessibility.js.map

@@ -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)
-});
+})

apps/accessibility/src/App.vue apps/accessibility/src/Accessibility.vueapps/accessibility/src/App.vue renamed to apps/accessibility/src/Accessibility.vue

@@ -1,4 +1,4 @@
-/*
+/**
  * @author Joas Schilling <coding@schilljs.com>
  * Copyright (c) 2016
  *
@@ -18,18 +18,18 @@
 		 * @param {jQuery} $el jQuery handle for this activity
 		 * @param {string} view The view that displayes this activity
 		 */
-		prepareModelForDisplay: function (model, $el, view) {
+		prepareModelForDisplay: function(model, $el, view) {
 			if (model.get('app') !== 'comments' || model.get('type') !== 'comments') {
-				return;
+				return
 			}
 
 			if (view === 'ActivityTabView') {
-				$el.addClass('comment');
+				$el.addClass('comment')
 				if (model.get('message') && this._isLong(model.get('message'))) {
-					$el.addClass('collapsed');
-					var $overlay = $('<div>').addClass('message-overlay');
-					$el.find('.activitymessage').after($overlay);
-					$el.on('click', this._onClickCollapsedComment);
+					$el.addClass('collapsed')
+					var $overlay = $('<div>').addClass('message-overlay')
+					$el.find('.activitymessage').after($overlay)
+					$el.on('click', this._onClickCollapsedComment)
 				}
 			}
 		},
@@ -38,22 +38,21 @@
 		 * Copy of CommentsTabView._onClickComment()
 		 */
 		_onClickCollapsedComment: function(ev) {
-			var $row = $(ev.target);
+			var $row = $(ev.target)
 			if (!$row.is('.comment')) {
-				$row = $row.closest('.comment');
+				$row = $row.closest('.comment')
 			}
-			$row.removeClass('collapsed');
+			$row.removeClass('collapsed')
 		},
 
 		/*
 		 * Copy of CommentsTabView._isLong()
 		 */
 		_isLong: function(message) {
-			return message.length > 250 || (message.match(/\n/g) || []).length > 1;
+			return message.length > 250 || (message.match(/\n/g) || []).length > 1
 		}
-	};
+	}
 
+})()
 
-})();
-
-OC.Plugins.register('OCA.Activity.RenderingPlugins', OCA.Comments.ActivityTabViewPlugin);
+OC.Plugins.register('OCA.Activity.RenderingPlugins', OCA.Comments.ActivityTabViewPlugin)