diff options
author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2018-06-13 14:16:49 +0300 |
---|---|---|
committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2018-06-25 18:12:26 +0300 |
commit | 77817797707238746490e069e789abf4c2327bc3 (patch) | |
tree | 9f20d6921ec476ac9e88181bb590f83996777aee /apps/accessibility/src | |
parent | ab266a7798b1a423f92fba74fa9003ccbe2554da (diff) |
Accessibility ♿
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'apps/accessibility/src')
-rw-r--r-- | apps/accessibility/src/App.vue | 76 | ||||
-rw-r--r-- | apps/accessibility/src/components/itemPreview.vue | 24 | ||||
-rw-r--r-- | apps/accessibility/src/main.js | 11 |
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) +}); |