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.
82 lines
2.1 KiB
82 lines
2.1 KiB
<app-sidebar-button>
|
|
<button class="button m-bottom-0" type="button" onclick={ (event) => { handleClick(event) } }>
|
|
<slot />
|
|
</button>
|
|
<script>
|
|
|
|
/**
|
|
* button to create customEvent and dispatch to element
|
|
*
|
|
* <app-sidebar-button event="" selector="" data={ }>
|
|
*
|
|
* </app-sidebar-button>
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
export default {
|
|
|
|
state: {
|
|
element: undefined,
|
|
data: false
|
|
},
|
|
|
|
/**
|
|
*
|
|
*
|
|
*/
|
|
onBeforeMount() {
|
|
if (this.root.innerHTML) {
|
|
this.content = this.root.innerHTML;
|
|
this.root.innerHTML = '';
|
|
}
|
|
|
|
if (!this.props.event) {
|
|
console.error('sidebar-button: attribute for name of custom event is missing')
|
|
}
|
|
|
|
if (!this.props.selector) {
|
|
console.error('sidebar-button: attribute for selector to send custom event is missing')
|
|
}
|
|
|
|
if (this.props.data) {
|
|
this.state.data = this.props.data
|
|
}
|
|
},
|
|
|
|
/**
|
|
*
|
|
*
|
|
*/
|
|
onMounted() {
|
|
this.state.element = document.querySelector(this.props.selector)
|
|
|
|
// adding innerHtml to button
|
|
if (this.content) {
|
|
this.$('button').innerHTML = this.content;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* create custom event with props
|
|
*
|
|
* @param {[type]} event
|
|
* @return {[type]}
|
|
*/
|
|
handleClick(event) {
|
|
event.preventDefault()
|
|
|
|
const customEvent = new CustomEvent(this.props.event, {
|
|
'detail': {
|
|
'data': this.state.data
|
|
}
|
|
})
|
|
|
|
this.state.element.dispatchEvent(customEvent)
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
</app-sidebar-button>
|