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.

81 lines
2.1 KiB

  1. <app-sidebar-button>
  2. <button class="button m-bottom-0" type="button" onclick={ (event) => { handleClick(event) } }>
  3. <slot />
  4. </button>
  5. <script>
  6. /**
  7. * button to create customEvent and dispatch to element
  8. *
  9. * <app-sidebar-button event="" selector="" data={ }>
  10. *
  11. * </app-sidebar-button>
  12. *
  13. * @author Björn Hase
  14. *
  15. */
  16. export default {
  17. state: {
  18. element: undefined,
  19. data: false
  20. },
  21. /**
  22. *
  23. *
  24. */
  25. onBeforeMount() {
  26. if (this.root.innerHTML) {
  27. this.content = this.root.innerHTML;
  28. this.root.innerHTML = '';
  29. }
  30. if (!this.props.event) {
  31. console.error('sidebar-button: attribute for name of custom event is missing')
  32. }
  33. if (!this.props.selector) {
  34. console.error('sidebar-button: attribute for selector to send custom event is missing')
  35. }
  36. if (this.props.data) {
  37. this.state.data = this.props.data
  38. }
  39. },
  40. /**
  41. *
  42. *
  43. */
  44. onMounted() {
  45. this.state.element = document.querySelector(this.props.selector)
  46. // adding innerHtml to button
  47. if (this.content) {
  48. this.$('button').innerHTML = this.content;
  49. }
  50. },
  51. /**
  52. * create custom event with props
  53. *
  54. * @param {[type]} event
  55. * @return {[type]}
  56. */
  57. handleClick(event) {
  58. event.preventDefault()
  59. const customEvent = new CustomEvent(this.props.event, {
  60. 'detail': {
  61. 'data': this.state.data
  62. }
  63. })
  64. this.state.element.dispatchEvent(customEvent)
  65. }
  66. }
  67. </script>
  68. </app-sidebar-button>