Merge pull request #17382 from nextcloud/refactor/accessibility/initialstate

Initial state for accessibility
This commit is contained in:
Roeland Jago Douma 2019-10-14 18:00:30 +02:00 committed by GitHub
commit c9d0bfbd30
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 202 additions and 142 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -26,30 +26,36 @@
<script>
import ItemPreview from './components/ItemPreview'
import axios from '@nextcloud/axios'
import { generateUrl, generateOcsUrl } 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
// 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)
} 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()
}
async selectItem(type, id) {
try {
await axios({
url: generateOcsUrl('apps/accessibility/api/v1/config', 2) + type,
method: id === '' ? 'DELETE' : 'POST',
data: {
value: id
}
})
.catch(err => {
console.error(err, err.response)
OC.Notification.showTemporary(t('accessibility', err.response.data.ocs.meta.message + '. Unable to apply the setting.'))
})
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 = 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 {
// 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.'))
}
}
}
}

View File

@ -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 : '')
}
}
}

View File

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

206
package-lock.json generated
View File

@ -19,6 +19,13 @@
"output-file-sync": "^2.0.0",
"slash": "^2.0.0",
"source-map": "^0.5.0"
},
"dependencies": {
"source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
}
}
},
"@babel/code-frame": {
@ -35,12 +42,8 @@
"integrity": "sha512-Rm0HGw101GY8FTzpWSyRbki/jzq+/PkNQJ+nSulrdY6gFGOsNseCqD6KHRYe2E+EdzuBdr2pxCp6s4Uk6eJ+XQ==",
"requires": {
"@babel/code-frame": "^7.5.5",
"@babel/generator": "^7.6.4",
"@babel/helpers": "^7.6.2",
"@babel/parser": "^7.6.4",
"@babel/template": "^7.6.0",
"@babel/traverse": "^7.6.3",
"@babel/types": "^7.6.3",
"convert-source-map": "^1.1.0",
"debug": "^4.1.0",
"json5": "^2.1.0",
@ -50,47 +53,10 @@
"source-map": "^0.5.0"
},
"dependencies": {
"@babel/generator": {
"version": "7.6.4",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.6.4.tgz",
"integrity": "sha512-jsBuXkFoZxk0yWLyGI9llT9oiQ2FeTASmRFE32U+aaDTfoE92t78eroO7PTpU/OrYq38hlcDM6vbfLDaOLy+7w==",
"requires": {
"@babel/types": "^7.6.3",
"jsesc": "^2.5.1",
"lodash": "^4.17.13",
"source-map": "^0.5.0"
}
},
"@babel/parser": {
"version": "7.6.4",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.6.4.tgz",
"integrity": "sha512-D8RHPW5qd0Vbyo3qb+YjO5nvUVRTXFLQ/FsDxJU2Nqz4uB5EnUN0ZQSEYpvTIbRuttig1XbHWU5oMeQwQSAA+A=="
},
"@babel/traverse": {
"version": "7.6.3",
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.6.3.tgz",
"integrity": "sha512-unn7P4LGsijIxaAJo/wpoU11zN+2IaClkQAxcJWBNCMS6cmVh802IyLHNkAjQ0iYnRS3nnxk5O3fuXW28IMxTw==",
"requires": {
"@babel/code-frame": "^7.5.5",
"@babel/generator": "^7.6.3",
"@babel/helper-function-name": "^7.1.0",
"@babel/helper-split-export-declaration": "^7.4.4",
"@babel/parser": "^7.6.3",
"@babel/types": "^7.6.3",
"debug": "^4.1.0",
"globals": "^11.1.0",
"lodash": "^4.17.13"
}
},
"@babel/types": {
"version": "7.6.3",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.6.3.tgz",
"integrity": "sha512-CqbcpTxMcpuQTMhjI37ZHVgjBkysg5icREQIEZ0eG1yCNwg3oy+5AaLiOKmjsCj6nqOsa6Hf0ObjRVwokb7srA==",
"requires": {
"esutils": "^2.0.2",
"lodash": "^4.17.13",
"to-fast-properties": "^2.0.0"
}
"version": "7.6.2",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.6.2.tgz",
"integrity": "sha512-mdFqWrSPCmikBoaBYMuBulzTIKuXVPtEISFbRRVNwMWpCms/hmE2kRq0bblUHaNRKrjRlmVbx1sDHmjmRgD2Xg=="
},
"debug": {
"version": "4.1.1",
@ -104,6 +70,11 @@
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
},
"source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
}
}
},
@ -116,6 +87,13 @@
"jsesc": "^2.5.1",
"lodash": "^4.17.13",
"source-map": "^0.5.0"
},
"dependencies": {
"source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
}
}
},
"@babel/helper-annotate-as-pure": {
@ -815,6 +793,13 @@
"@babel/code-frame": "^7.0.0",
"@babel/parser": "^7.6.0",
"@babel/types": "^7.6.0"
},
"dependencies": {
"@babel/parser": {
"version": "7.6.2",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.6.2.tgz",
"integrity": "sha512-mdFqWrSPCmikBoaBYMuBulzTIKuXVPtEISFbRRVNwMWpCms/hmE2kRq0bblUHaNRKrjRlmVbx1sDHmjmRgD2Xg=="
}
}
},
"@babel/traverse": {
@ -833,6 +818,11 @@
"lodash": "^4.17.13"
},
"dependencies": {
"@babel/parser": {
"version": "7.6.2",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.6.2.tgz",
"integrity": "sha512-mdFqWrSPCmikBoaBYMuBulzTIKuXVPtEISFbRRVNwMWpCms/hmE2kRq0bblUHaNRKrjRlmVbx1sDHmjmRgD2Xg=="
},
"debug": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@ -1576,6 +1566,17 @@
"@babel/types": "^7.0.0",
"eslint-visitor-keys": "^1.0.0",
"resolve": "^1.12.0"
},
"dependencies": {
"resolve": {
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz",
"integrity": "sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==",
"dev": true,
"requires": {
"path-parse": "^1.0.6"
}
}
}
},
"babel-loader": {
@ -2030,9 +2031,9 @@
}
},
"caniuse-lite": {
"version": "1.0.30000999",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000999.tgz",
"integrity": "sha512-1CUyKyecPeksKwXZvYw0tEoaMCo/RwBlXmEtN5vVnabvO0KPd9RQLcaAuR9/1F+KDMv6esmOFWlsXuzDk+8rxg=="
"version": "1.0.30000997",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000997.tgz",
"integrity": "sha512-BQLFPIdj2ntgBNWp9Q64LGUIEmvhKkzzHhUHR3CD5A9Lb7ZKF20/+sgadhFap69lk5XmK1fTUleDclaRFvgVUA=="
},
"caseless": {
"version": "0.12.0",
@ -2357,9 +2358,9 @@
"dev": true
},
"component-emitter": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
"integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
"integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY="
},
"concat-map": {
"version": "0.0.1",
@ -2915,9 +2916,9 @@
}
},
"electron-to-chromium": {
"version": "1.3.282",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.282.tgz",
"integrity": "sha512-irSaDeCGgfMu1OA30bhqIBr+dx+pDJjRbwCpob7YWqVZbzXblybNzPGklVnWqv4EXxbkEAzQYqiNCqNTgu00lQ=="
"version": "1.3.270",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.270.tgz",
"integrity": "sha512-426qbfgLn0hVE4pDxok2dcAhA3u5lwXlBg2+i6VWQJvnMZNgevkC6s/qr91YH/avVMKXKwxnR5iBznpivg210A=="
},
"elliptic": {
"version": "6.5.1",
@ -3283,6 +3284,15 @@
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
"dev": true
},
"resolve": {
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz",
"integrity": "sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==",
"dev": true,
"requires": {
"path-parse": "^1.0.6"
}
}
}
},
@ -3315,6 +3325,15 @@
"integrity": "sha512-MzbUSahkTW1u7JpKKjY7LCARd1fU5W2rLdxlM4kdkayuCwZImjkpluF9CM1aLewYJguPDqewLam18Y6AU69A8A==",
"dev": true
},
"resolve": {
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz",
"integrity": "sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==",
"dev": true,
"requires": {
"path-parse": "^1.0.6"
}
},
"semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@ -3462,6 +3481,14 @@
"to-regex": "^3.0.1"
},
"dependencies": {
"debug": {
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"requires": {
"ms": "2.0.0"
}
},
"define-property": {
"version": "0.2.5",
"resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
@ -3477,6 +3504,11 @@
"requires": {
"is-extendable": "^0.1.0"
}
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
}
}
},
@ -5334,9 +5366,9 @@
"dev": true
},
"isarray": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
"integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
},
"isexe": {
"version": "2.0.0",
@ -5523,9 +5555,9 @@
"dev": true
},
"json5": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.1.1.tgz",
"integrity": "sha512-l+3HXD0GEI3huGq1njuqtzYK8OYJyXMkOLtQ53pjWh89tvWS2h6l+1zMkYWqlb57+SiQodKZyvMEFb2X+KrFhQ==",
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.1.0.tgz",
"integrity": "sha512-8Mh9h6xViijj36g7Dxi+Y4S6hNGV96vcJZr/SrlHh1LR/pEn/8j/+qIBbs44YKl69Lrfctp4QD+AdWLTMqEZAQ==",
"requires": {
"minimist": "^1.2.0"
},
@ -6435,12 +6467,9 @@
}
},
"node-releases": {
"version": "1.1.35",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.35.tgz",
"integrity": "sha512-JGcM/wndCN/2elJlU0IGdVEJQQnJwsLbgPCFd2pY7V0mxf17bZ0Gb/lgOtL29ZQhvEX5shnVhxQyZz3ex94N8w==",
"requires": {
"semver": "^6.3.0"
},
"version": "1.1.33",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.33.tgz",
"integrity": "sha512-I0V30bWQEoHb+10W8oedVoUrdjW5wIkYm0w7vvcrPO95pZY738m1k77GF5sO0vKg5eXYg9oGtrMAETbgZGm11A==",
"dependencies": {
"semver": {
"version": "6.3.0",
@ -7156,9 +7185,9 @@
"dev": true
},
"process-nextick-args": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
"integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw=="
},
"progress": {
"version": "2.0.3",
@ -7252,6 +7281,13 @@
"isarray": "^2.0.1",
"pngjs": "^3.3.0",
"yargs": "^13.2.4"
},
"dependencies": {
"isarray": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
"integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
}
}
},
"qs": {
@ -7699,9 +7735,9 @@
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
},
"resolve": {
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz",
"integrity": "sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==",
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.10.0.tgz",
"integrity": "sha512-3sUr9aq5OfSg2S9pNtPA9hL1FVEAjvfOC4leW0SNf/mpnaakz2a9femSd6LqAww2RaFctwyf1lCqnTHuF1rxDg==",
"requires": {
"path-parse": "^1.0.6"
}
@ -8224,6 +8260,14 @@
"use": "^3.1.0"
},
"dependencies": {
"debug": {
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"requires": {
"ms": "2.0.0"
}
},
"define-property": {
"version": "0.2.5",
"resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
@ -8239,6 +8283,16 @@
"requires": {
"is-extendable": "^0.1.0"
}
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
},
"source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
}
}
},
@ -8332,11 +8386,6 @@
"integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==",
"dev": true
},
"source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
},
"source-map-resolve": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.2.tgz",
@ -9186,11 +9235,6 @@
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz",
"integrity": "sha1-bWHeldkd/Km5oCCJrThL/49it3E="
},
"isarray": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
}
}
},