2018-06-13 14:16:49 +03:00
|
|
|
|
<template>
|
2019-01-24 19:02:44 +03:00
|
|
|
|
<div id="accessibility" class="section">
|
2019-09-25 19:19:42 +03:00
|
|
|
|
<h2>{{ t('accessibility', 'Accessibility') }}</h2>
|
2019-02-21 13:57:54 +03:00
|
|
|
|
<p v-html="description" />
|
|
|
|
|
<p v-html="descriptionDetail" />
|
2019-01-24 19:02:44 +03:00
|
|
|
|
|
2019-01-24 20:55:58 +03:00
|
|
|
|
<div class="preview-list">
|
2019-09-25 19:19:42 +03:00
|
|
|
|
<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" />
|
2018-06-13 14:16:49 +03:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
2019-09-25 19:19:42 +03:00
|
|
|
|
import ItemPreview from './components/ItemPreview'
|
2019-10-04 13:17:09 +03:00
|
|
|
|
import axios from '@nextcloud/axios'
|
2019-10-03 11:19:50 +03:00
|
|
|
|
import { generateUrl } from '@nextcloud/router'
|
2018-06-13 14:16:49 +03:00
|
|
|
|
|
|
|
|
|
export default {
|
2018-10-02 10:46:05 +03:00
|
|
|
|
name: 'Accessibility',
|
2019-09-25 19:19:42 +03:00
|
|
|
|
components: { ItemPreview },
|
2019-10-03 11:19:50 +03:00
|
|
|
|
props: {
|
|
|
|
|
availableConfig: {
|
|
|
|
|
type: Object,
|
|
|
|
|
required: true
|
|
|
|
|
},
|
|
|
|
|
userConfig: {
|
|
|
|
|
type: Object,
|
|
|
|
|
required: true
|
2019-09-25 19:19:42 +03:00
|
|
|
|
}
|
2018-06-13 14:16:49 +03:00
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
themes() {
|
2019-10-03 11:19:50 +03:00
|
|
|
|
return this.availableConfig.themes
|
2018-06-13 14:16:49 +03:00
|
|
|
|
},
|
2019-08-30 12:23:09 +03:00
|
|
|
|
highcontrast() {
|
2019-10-03 11:19:50 +03:00
|
|
|
|
return this.availableConfig.highcontrast
|
2019-08-30 12:23:09 +03:00
|
|
|
|
},
|
2018-06-13 14:16:49 +03:00
|
|
|
|
fonts() {
|
2019-10-03 11:19:50 +03:00
|
|
|
|
return this.availableConfig.fonts
|
2018-06-13 14:16:49 +03:00
|
|
|
|
},
|
|
|
|
|
selected() {
|
|
|
|
|
return {
|
2019-10-03 11:19:50 +03:00
|
|
|
|
theme: this.userConfig.theme,
|
|
|
|
|
highcontrast: this.userConfig.highcontrast,
|
|
|
|
|
font: this.userConfig.font
|
2019-09-25 19:19:42 +03:00
|
|
|
|
}
|
2019-02-21 13:57:54 +03:00
|
|
|
|
},
|
|
|
|
|
description() {
|
2019-02-21 18:31:50 +03:00
|
|
|
|
// using the `t` replace method escape html, we have to do it manually :/
|
|
|
|
|
return t(
|
|
|
|
|
'accessibility',
|
|
|
|
|
`Universal access is very important to us. We follow web standards
|
|
|
|
|
and check to make everything usable also without mouse,
|
|
|
|
|
and assistive software such as screenreaders.
|
|
|
|
|
We aim to be compliant with the {guidelines} 2.1 on AA level,
|
|
|
|
|
with the high contrast theme even on AAA level.`
|
|
|
|
|
)
|
2019-09-25 19:19:42 +03:00
|
|
|
|
.replace('{guidelines}', this.guidelinesLink)
|
2019-02-21 13:57:54 +03:00
|
|
|
|
},
|
|
|
|
|
guidelinesLink() {
|
|
|
|
|
return `<a target="_blank" href="https://www.w3.org/WAI/standards-guidelines/wcag/" rel="noreferrer nofollow">${t('accessibility', 'Web Content Accessibility Guidelines')}</a>`
|
|
|
|
|
},
|
|
|
|
|
descriptionDetail() {
|
2019-02-21 18:31:50 +03:00
|
|
|
|
return t(
|
|
|
|
|
'accessibility',
|
|
|
|
|
`If you find any issues, don’t hesitate to report them on {issuetracker}.
|
|
|
|
|
And if you want to get involved, come join {designteam}!`
|
|
|
|
|
)
|
2019-09-25 19:19:42 +03:00
|
|
|
|
.replace('{issuetracker}', this.issuetrackerLink)
|
|
|
|
|
.replace('{designteam}', this.designteamLink)
|
2019-02-21 13:57:54 +03:00
|
|
|
|
},
|
|
|
|
|
issuetrackerLink() {
|
|
|
|
|
return `<a target="_blank" href="https://github.com/nextcloud/server/issues/" rel="noreferrer nofollow">${t('accessibility', 'our issue tracker')}</a>`
|
|
|
|
|
},
|
|
|
|
|
designteamLink() {
|
|
|
|
|
return `<a target="_blank" href="https://nextcloud.com/design" rel="noreferrer nofollow">${t('accessibility', 'our design team')}</a>`
|
2018-06-13 14:16:49 +03:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
2019-10-03 11:19:50 +03:00
|
|
|
|
// SELECT handlers
|
2019-08-30 12:23:09 +03:00
|
|
|
|
selectHighContrast(id) {
|
2019-09-25 19:19:42 +03:00
|
|
|
|
this.selectItem('highcontrast', id)
|
2019-08-30 12:23:09 +03:00
|
|
|
|
},
|
2019-10-03 11:19:50 +03:00
|
|
|
|
selectTheme(id) {
|
|
|
|
|
const previous = this.selected.theme
|
|
|
|
|
if (previous) {
|
|
|
|
|
document.body.classList.remove(previous)
|
|
|
|
|
}
|
2019-09-02 21:27:12 +03:00
|
|
|
|
if (id) {
|
2019-09-25 19:19:42 +03:00
|
|
|
|
document.body.classList.add(id)
|
2019-09-02 21:27:12 +03:00
|
|
|
|
}
|
2019-10-03 11:19:50 +03:00
|
|
|
|
|
|
|
|
|
this.selectItem('theme', id)
|
2018-06-13 14:16:49 +03:00
|
|
|
|
},
|
|
|
|
|
selectFont(id) {
|
2019-09-25 19:19:42 +03:00
|
|
|
|
this.selectItem('font', id)
|
2018-06-13 14:16:49 +03:00
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
2018-06-14 16:27:57 +03:00
|
|
|
|
* Commit a change and force reload css
|
|
|
|
|
* Fetching the file again will trigger the server update
|
2018-06-13 14:16:49 +03:00
|
|
|
|
*
|
2019-08-30 12:23:09 +03:00
|
|
|
|
* @param {string} type type of the change (font, highcontrast or theme)
|
2018-06-13 14:16:49 +03:00
|
|
|
|
* @param {string} id the data of the change
|
|
|
|
|
*/
|
2019-10-03 11:19:50 +03:00
|
|
|
|
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
|
2018-06-21 09:27:38 +03:00
|
|
|
|
|
2019-10-03 11:19:50 +03:00
|
|
|
|
// 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()
|
2018-06-21 10:28:28 +03:00
|
|
|
|
} else {
|
2019-10-03 11:19:50 +03:00
|
|
|
|
// force update
|
|
|
|
|
link.href
|
|
|
|
|
= link.href.split('?')[0]
|
|
|
|
|
+ '?v='
|
|
|
|
|
+ new Date().getTime()
|
2018-06-21 09:27:38 +03:00
|
|
|
|
}
|
2019-10-03 11:19:50 +03:00
|
|
|
|
}
|
|
|
|
|
} catch (err) {
|
|
|
|
|
console.error(err, err.response)
|
|
|
|
|
OC.Notification.showTemporary(t('accessibility', err.response.data.ocs.meta.message + '. Unable to apply the setting.'))
|
|
|
|
|
}
|
2018-06-13 14:16:49 +03:00
|
|
|
|
}
|
|
|
|
|
}
|
2019-09-25 19:19:42 +03:00
|
|
|
|
}
|
2018-06-13 14:16:49 +03:00
|
|
|
|
</script>
|