nano-buckets/resources/js/components/sidebar-button.riot

<app-sidebar-button>
    <button class="button m-bottom-0" type="button" onclick={ (event) => { handleClick(event) } }></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: []
            },

            /**
             *
             *
             */
            onBeforeMount() {

                // getting innerHtml before rendering component
                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')
                }
            },

            /**
             *
             *
             */
            onMounted() {
                this.state.element = document.querySelector(this.props.selector)

                // adding innerHtml to button
                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)
                this.state.element.dispatchEvent(customEvent, this.state.data)
            }

        }

    </script>
</app-sidebar-button>