You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
2.1 KiB
79 lines
2.1 KiB
<app-file-index>
|
|
<div class="view m-top-4">
|
|
<div class="file">
|
|
<div class="panel">
|
|
<div class="bar">
|
|
<div class="tabs tabs--contrast">
|
|
<a class="{ tabClasses(type) }" onclick={ (event) => { handleTabClick(event, type) } } each={ type in state.types }>
|
|
{ type }
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<app-file-files hub-id={ props.hubId } if={ state.view === 'files' }></app-file-files>
|
|
<app-file-audio hub-id={ props.hubId } if={ state.view === 'video' }></app-file-audio>
|
|
<app-file-video hub-id={ props.hubId } if={ state.view === 'audio' }></app-file-video>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
/**
|
|
* handle open and close of form for tasks
|
|
*
|
|
*
|
|
* @author Björn Hase, <me@herr-hase.wtf>
|
|
*
|
|
*/
|
|
|
|
export default {
|
|
|
|
state: {
|
|
view: 'files',
|
|
types: [
|
|
'files',
|
|
'audio',
|
|
'video',
|
|
'image',
|
|
'document'
|
|
]
|
|
},
|
|
|
|
/**
|
|
* add selected-class if type match
|
|
*
|
|
* @param {string} type
|
|
* @return {string}
|
|
*
|
|
*/
|
|
tabClasses(type) {
|
|
const classes = [
|
|
'tabs__item'
|
|
]
|
|
|
|
if (type === this.state.view) {
|
|
classes.push('tabs__item--selected')
|
|
}
|
|
|
|
return classes.join(' ')
|
|
},
|
|
|
|
/**
|
|
* change type
|
|
*
|
|
* @param {object} event
|
|
* @param {string} type
|
|
* @return {string}
|
|
*
|
|
*/
|
|
handleTabClick(event, type) {
|
|
this.state.view = type
|
|
this.update()
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
</app-file-index> |