For people who generate the links later with Livewire, give a JavaScript method to add event to the buttons.

[ronald2wing]

Since the JavaScript methods fired on Dom load, the buttons generated later will not have the functionality.
Please create a JavaScript method for people to add events to the buttons later.

[kudashevs]

Hi @ronald2wing,

Thank you for your suggestion. I need some time to think about how to implement it in a better way.
Meantime, could you please share the way how you generate the links with Livewire?

[ronald2wing]

I was going to try: https://laracasts.com/discuss/channels/livewire/how-to-call-alpine-js-method-from-livewire
The default behavior is enough for me right now.

[ronald2wing]

Another I will do is to use $wire.methods() to call the Livewire method in the frontend directly and then call the button update method. Thank you for looking into this.

[kudashevs]

Hello @ronald2wing,

I played around with Livewire 2/3 for a couple of days and I didn't discover any issues with "DOMContentLoaded" event. Even if I render the code of the buttons through the Livewire render() method, the JavaScript code of the buttons works perfectly and the buttons have the expected functionality.

Could you please provide more information about your issue?
Why do you need a separate method to add events if everything works out of the box?

[ronald2wing]

It could be related to using Alpine.js with Livewire. I will test it again on my local tonight. The Livewire was rerendered on the page after input changes. DOMContentLoaded is only loaded after the page is loaded, but some of my contents are loaded based on the input changes.

I am trying to share my code, but it looks like some text is being hidden in the editor:
`@if (Route::currentRouteName() === 'music-videos.show')
@section('title', $musicVideo['title'])
@endif

<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script> <script src="{{ asset('js/share-buttons.js') }}"></script>

Search

@foreach ($musicVideos as $mv)
• {{ $mv['title'] . ($mv['korean_title'] ? " ({$mv['korean_title']})" : '') }} / {{ $mv['artist'] }}

  {{ $mv['release_date'] }}

  {!! ShareButtons::page(route('music-videos.show', $mv['slug']), "{$mv['title']} by {$mv['artist']}", [ 'block_prefix' => '

  ', 'class' => 'mr-4', ]) ->copylink() ->mailto() ->facebook() ->twitter() ->pinterest() ->render(); !!}
@Endforeach

@if ($isDone)

The End of the List

@else

Loading...

@endif

/

`

[kudashevs]

Hello @ronald2wing,

Did you get a chance to test it again?

[ronald2wing]

@kudashevs
If you scroll down to lazyload next page and click one of the Twitter: https://popcreme.com/music-videos/shooting-star
The elements will not have JavaScript popup.

[kudashevs]

Hello @ronald2wing,

Now I see the issue. Thanks for sharing the link.
I'll extract a method and let you know :)

[kudashevs]

@ronald2wing here is a new version of vanilla share-buttons.js file with an extracted socialButtonClickHandler function. I've made it quite flexible, so it can be used not only directly, but also through bubbling. As an example of bubbling, it can be used like this:

document.addEventListener('click', function (e) {
    socialButtonClickHandler(e);
})

Could you please try to play around with it and let me know if it works?
If everything is OK, I'll include it in the future release with other improvements.

[ronald2wing]

Hello, the new changes do not work. Now even the default DOMContentLoaded does not set the events either. However, the events are registered in the element after inspection: popcreme.com

[kudashevs]

@ronald2wing I didn't take into account additional classes on links.
I changed the code in the share-buttons.js file and now it should work.

Could you please check it out?

[ronald2wing]

I think the socialButtonClickHandler is only available in the JS file because, after file compression, the function will be renamed.

[kudashevs]

@ronald2wing the compressed (minified) version works well. As I see, the issue is related with with app.js.

As you can see in the pictures, there is a click event listener handled by the app-b5a7b72e.js:5. If I manually remove it everything works fine. So, my guess is that this event listener handles a click event too and somehow prevents a preventDefault to happen in share-buttons.js, so the click continues to be processed.

[kudashevs]

@ronald2wing I added a prevention of other event listeners to the share-buttons.js file. Theoretically, this should do the trick.

Could you please check it out?

[ronald2wing]

Sure. Thank you. I will check tonight.

…

On Sat, Aug 12, 2023, 11:54 AM Sergey Kudashev ***@***.***> wrote: @ronald2wing <https://github.com/ronald2wing> I added a prevention of other event listeners to the share-buttons.js <https://github.com/kudashevs/laravel-share-buttons/blob/master/resources/assets/js/share-buttons.js> file. Theoretically, this should do the trick. Could you please check it out? — Reply to this email directly, view it on GitHub <#1 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AD7QPSOXIUSQP4R3KFY6GWLXU6RMLANCNFSM6AAAAAA3GDFIIM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[ronald2wing]

It works after applying the new changes and setting the function to the window because static file compression changed its name.

[kudashevs]

Nice. @ronald2wing I want to close the issue, but before closing it I have two questions:

• this new method is what you wanted or you have other suggestions?
• should I delete the images of your project or should I leave them?

[ronald2wing]

1) That's the new method I wanted. 2) You can leave them.

…

On Sun, Aug 13, 2023, 2:16 AM Sergey Kudashev ***@***.***> wrote: Nice. @ronald2wing <https://github.com/ronald2wing> I want to close the issue, but before closing it I have two questions: - this new method is what you wanted or you have other suggestions? - should I delete the images of your project of should I leave them? — Reply to this email directly, view it on GitHub <#1 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AD7QPSL7FQ5QGITRC4HFN43XVBWKJANCNFSM6AAAAAA3GDFIIM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[kudashevs]

The requested functionality was added in the v4.0.0 release.

@ronald2wing thank you for your contribution.

[ronald2wing]

Thank you as well.

…

On Mon, Aug 14, 2023 at 5:39 PM Sergey Kudashev ***@***.***> wrote: The requested functionality was added in the v4.0.0 <https://github.com/kudashevs/laravel-share-buttons/releases/tag/v4.0.0> release. @ronald2wing <https://github.com/ronald2wing> thank you for your contribution. — Reply to this email directly, view it on GitHub <#1 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AD7QPSI336TGVVVIOQ7CE73XVKLHRANCNFSM6AAAAAA3GDFIIM> . You are receiving this because you were mentioned.Message ID: ***@***.***>