How to call two magic methods inside a method?

[bparanj]

Currently my code looks like this:

<td class="py-3">
	<button class='flex items-center px-4 py-3 text-white bg-blue-500 hover:bg-blue-400' @click="$clipboard(item.command);$tooltip('Copied!')">
		Copy
	</button>
 </td>

Instead making two separate calls, how can I make it just one call to a method that calls these two magic methods in the right sequence?

[SimoTod]

The answer is in the question ;)
@click="myMethodDefinedInXDataThatCallsThisDotMagicInTheRightOrder()"

[bparanj]

	// Magic: $clipboard
	Alpine.magic('clipboard', () => {
	  return subject => navigator.clipboard.writeText(subject)
	})

  // Magic: $tooltip
  Alpine.magic('tooltip', el => message => {

    let instance = tippy(el, { content: message, trigger: 'manual' })

    instance.show()

    setTimeout(() => {
      instance.hide()

      setTimeout(() => instance.destroy(), 150)
    }, 2000)
  })

I am a newbie to javascript. These methods have different interface. How do I call these two methods from another method?

[ekwoka]

Like in your x-data?

this.$tooltip(); this.$clipboard()

[bparanj]

Like in your x-data?

this.$tooltip(); this.$clipboard()

I want only one call, not two calls separated by ;

[ekwoka]

Well, that's not possible in any programming language.

If you want to run 2 functions, you have to call both functions, ain't any way around that.

Even if you make a new single function that calls both of those functions, you still have to call both of those functions in that single function.

[bparanj]

I understand that. My question is how to define a function that I call once from the directive? How can this new function call the two functions internally, one after the other?

[ekwoka]

The same way we already said to.

{
  myMethod() { 
     this.$tooltip();
     this.$clipboard() 
  }
}

Do you know how objects work in javascript?

[bparanj]

I appreciate your help @ekwoka. I got it working with the following code:

import data from './ssh.json' assert {type: 'json'};

window.dataTable = function () {
  return {
    items: data,
    searchInput: '',
    search(value) {
      if (value.length > 1) {
        const options = {
          shouldSort: true,
          keys: ['name']
        }                
        const fuse = new Fuse(data, options)
        this.items = fuse.search(value).map(element => element.item)
      } else {
        this.items = data
      }
      // console.log(this.items.length)      
    },
		tooltip(message, el) {
		  let instance = tippy(el, { content: message, trigger: 'manual' })
	    instance.show()

	    setTimeout(() => {
	      instance.hide()

	      setTimeout(() => instance.destroy(), 150)
	    }, 2000)
		},
		copyToClipboard(subject, el) {
			navigator.clipboard.writeText(subject)
			.then(() => {
				this.tooltip("Copied!", el)
			})
			.catch(error => {
				console.error('Failed to copy to clipboard: ', error)
			})
		}
  }
}

document.addEventListener('alpine:init', () => {
	
	// Magic: $clipboard
	Alpine.magic('clipboard', () => {
	  return subject => navigator.clipboard.writeText(subject)
	})

  // Magic: $tooltip
  Alpine.magic('tooltip', el => message => {

    let instance = tippy(el, { content: message, trigger: 'manual' })

    instance.show()

    setTimeout(() => {
      instance.hide()

      setTimeout(() => instance.destroy(), 150)
    }, 2000)
  })

})

Any suggestions for refactoring is appreciated!