Commit c816f31a authored by Anton Koch's avatar Anton Koch

Refactor BrowserWarning and MarkdownDisplay into mbjs-quasar module

parent 8f645dcd
......@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Users need to explicitly click 'edit' to change an annotation in the post-annotator
- External titles stored as annotations are now retrieved within the metadata store module
- BrowserWarning and MarkdownDisplay components moved to [mbjs-quasar](https://gitlab.rlp.net/motionbank/mbjs/quasar)
- Readme info
- Updated Quasar CLI to v0.17.22
- Updated Quasar Framework to v0.17.18
......
......@@ -8606,9 +8606,13 @@
}
},
"mbjs-quasar": {
"version": "0.0.35",
"resolved": "https://registry.npmjs.org/mbjs-quasar/-/mbjs-quasar-0.0.35.tgz",
"integrity": "sha512-dZYeojKzXIJ+rPj6T1y70HOSzK9GI0U2K+nv9YMuDBHBTmJPPfPbKGwNrI2C70ppElSnlc4uyYhiUZSosv9nvQ=="
"version": "0.0.37",
"resolved": "https://registry.npmjs.org/mbjs-quasar/-/mbjs-quasar-0.0.37.tgz",
"integrity": "sha512-bDFGQRJ9QFoDwfXIWxa/jJFRFEnW0AqbC6juC8w7nKVCiaKJnO59l7JKgILdSMUOJjOSg6LrWLw0ZVoaZnGvkg==",
"requires": {
"marked": "^0.5.2",
"sanitize-html": "^1.19.2"
}
},
"mbjs-utils": {
"version": "0.0.6",
......
<template lang="pug">
div
.fixed-bottom.bg-warning.q-pa-sm.text-center(v-if="show")
q-btn.float-right(@click="hideWarning", icon="close", flat, dark, color="white")
span.text-white.link-white(v-html="$t('messages.browser_unsupported_warning')")
</template>
<script>
export default {
name: 'BrowserWarning',
data () {
return {
overrideShow: false
}
},
computed: {
show () {
return !this.overrideShow && !localStorage.getItem('hideBrowserWarning') && !this.isChrome()
}
},
methods: {
hideWarning () {
localStorage.setItem('hideBrowserWarning', '1')
this.overrideShow = true
},
isChrome () {
// Taken from https://stackoverflow.com/questions/4565112/javascript-how-to-find-out-if-the-user-browser-is-chrome/13348618#13348618
//
// please note,
// that IE11 now returns undefined again for window.chrome
// and new Opera 30 outputs true for window.chrome
// but needs to check if window.opr is not undefined
// and new IE Edge outputs to true now for window.chrome
// and if not iOS Chrome check
// so use the below updated condition
const isChromium = window.chrome
const winNav = window.navigator
const vendorName = winNav.vendor
const isOpera = typeof window.opr !== 'undefined'
const isIEedge = winNav.userAgent.indexOf('Edge') > -1
const isIOSChrome = winNav.userAgent.match('CriOS')
if (isIOSChrome) {
return true
}
else if (
isChromium !== null &&
typeof isChromium !== 'undefined' &&
vendorName === 'Google Inc.' &&
isOpera === false &&
isIEedge === false
) {
return true
}
return false
}
}
}
</script>
<style lang="stylus">
.link-white a
color: white
text-decoration: underline
</style>
<template lang="pug">
div.md-content(ref="content")
</template>
<script>
import marked from 'marked'
import sanitizeHtml from 'sanitize-html'
marked.setOptions({
sanitize: true,
sanitizer: data => {
return sanitizeHtml(data, {
allowedTags: ['b', 'i', 'em', 'strong', 'a', 'br', 'p'],
allowedAttributes: {
'a': ['href']
}
})
}
})
export default {
props: {
content: { type: String, default: '' }
},
name: 'MarkdownDisplay',
mounted () {
this.$refs.content.innerHTML = this.transformContent(this.content)
},
watch: {
content (val) {
this.$refs.content.innerHTML = this.transformContent(val)
}
},
methods: {
transformContent (val) {
val = this.parseLinks(val)
return marked(val)
},
parseLinks (val) {
return val.replace(/(\w(https?|http|ftp|file|mailto):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/ig, str => {
return ` [${str.trim()}](${str.trim()})`
})
}
}
}
</script>
<style lang="stylus">
.md-content
font-size: 1rem
line-height: 24px
</style>
import {
BrowserWarning,
BackButton,
ConfirmModal,
DataTable,
FullScreen,
MarkdownDisplay,
Uploader,
Username,
VideoPlayer,
VideoTitle
} from 'mbjs-quasar/src/components'
import BrowserWarning from '../components/shared/partials/BrowserWarning'
import MarkdownDisplay from '../components/shared/partials/MarkdownDisplay'
export default ({ Vue }) => {
Vue.component('back-button', BackButton)
Vue.component('confirm-modal', ConfirmModal)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment