|
|
- <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>
|