diff options
author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2019-10-03 11:19:50 +0300 |
---|---|---|
committer | Roeland Jago Douma <roeland@famdouma.nl> | 2019-10-14 11:11:06 +0300 |
commit | 0df5e0b0dbef2cb45080e85d61076753415d8510 (patch) | |
tree | b52daae9669cf78e95ef992979bfa6183ef2da44 /apps/accessibility/src | |
parent | 9d6a58e6aef035dc99fd5dedddc8353b5d888491 (diff) |
Initial state for accessibility
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Signed-off-by: npmbuildbot[bot] <npmbuildbot[bot]@users.noreply.github.com>
Diffstat (limited to 'apps/accessibility/src')
-rw-r--r-- | apps/accessibility/src/Accessibility.vue | 112 | ||||
-rw-r--r-- | apps/accessibility/src/components/ItemPreview.vue | 2 | ||||
-rw-r--r-- | apps/accessibility/src/main.js | 14 |
3 files changed, 72 insertions, 56 deletions
diff --git a/apps/accessibility/src/Accessibility.vue b/apps/accessibility/src/Accessibility.vue index 1bf366d60db..590ecf60d60 100644 --- a/apps/accessibility/src/Accessibility.vue +++ b/apps/accessibility/src/Accessibility.vue @@ -26,30 +26,36 @@ <script> import ItemPreview from './components/ItemPreview' import axios from '@nextcloud/axios' +import { generateUrl } from '@nextcloud/router' export default { name: 'Accessibility', components: { ItemPreview }, - data() { - return { - serverData: [] + props: { + availableConfig: { + type: Object, + required: true + }, + userConfig: { + type: Object, + required: true } }, computed: { themes() { - return this.serverData.themes + return this.availableConfig.themes }, highcontrast() { - return this.serverData.highcontrast + return this.availableConfig.highcontrast }, fonts() { - return this.serverData.fonts + return this.availableConfig.fonts }, selected() { return { - theme: this.serverData.selected.theme, - highcontrast: this.serverData.selected.highcontrast, - font: this.serverData.selected.font + theme: this.userConfig.theme, + highcontrast: this.userConfig.highcontrast, + font: this.userConfig.font } }, description() { @@ -83,25 +89,21 @@ 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: { + // SELECT handlers selectHighContrast(id) { this.selectItem('highcontrast', id) }, - selectTheme(id, idSelectedBefore) { - this.selectItem('theme', id) - document.body.classList.remove(idSelectedBefore) + selectTheme(id) { + const previous = this.selected.theme + if (previous) { + document.body.classList.remove(previous) + } if (id) { document.body.classList.add(id) } + + this.selectItem('theme', id) }, selectFont(id) { this.selectItem('font', id) @@ -114,40 +116,46 @@ export default { * @param {string} type type of the change (font, highcontrast 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 }) - .then(response => { - this.serverData.selected[type] = id + async selectItem(type, id) { + try { + await axios({ + url: OC.linkToOCS('apps/accessibility/api/v1/config', 2) + type, + method: id === '' ? 'DELETE' : 'POST', + data: { + value: id + } + }) + + this.userConfig[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') + '?v=' + new Date().getTime() - document.head.appendChild(link) + // 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 = 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]) + ) { + // if nothing is selected, blindly remove the css + link.remove() } else { - // compare arrays - if ( - JSON.stringify(Object.values(this.selected)) - === JSON.stringify([false, false]) - ) { - // if nothing is selected, blindly remove the css - link.remove() - } else { - // force update - link.href - = link.href.split('?')[0] - + '?v=' - + new Date().getTime() - } + // force update + link.href + = link.href.split('?')[0] + + '?v=' + + new Date().getTime() } - }) - .catch(err => { - console.error(err, err.response) - OC.Notification.showTemporary(t('accessibility', err.response.data.ocs.meta.message + '. Unable to apply the setting.')) - }) + } + } catch (err) { + console.error(err, err.response) + OC.Notification.showTemporary(t('accessibility', err.response.data.ocs.meta.message + '. Unable to apply the setting.')) + } } } } diff --git a/apps/accessibility/src/components/ItemPreview.vue b/apps/accessibility/src/components/ItemPreview.vue index 66f751b37d7..c0e52cc0513 100644 --- a/apps/accessibility/src/components/ItemPreview.vue +++ b/apps/accessibility/src/components/ItemPreview.vue @@ -32,7 +32,7 @@ export default { return this.selected === this.preview.id }, set(checked) { - this.$emit('select', checked ? this.preview.id : false, this.selected) + this.$emit('select', checked ? this.preview.id : '') } } } diff --git a/apps/accessibility/src/main.js b/apps/accessibility/src/main.js index 618f4a7355f..0cb5952234b 100644 --- a/apps/accessibility/src/main.js +++ b/apps/accessibility/src/main.js @@ -1,4 +1,5 @@ import Vue from 'vue' +import { loadState } from '@nextcloud/initial-state' import App from './Accessibility.vue' /* global t */ @@ -6,7 +7,14 @@ import App from './Accessibility.vue' Vue.prototype.OC = OC Vue.prototype.t = t -export default new Vue({ - el: '#accessibility', - render: h => h(App) +const availableConfig = loadState('accessibility', 'available-config') +const userConfig = loadState('accessibility', 'user-config') + +const View = Vue.extend(App) +const accessibility = new View({ + propsData: { + availableConfig, + userConfig + } }) +accessibility.$mount('#accessibility') |