How to stop the timer when toasted?

[Victor Nguyen]

Any demo on how to attached a mouse event to stop the timer and resume when it's toasted?

[Michael Currie]

Unfortunately, I don't believe that is possible through pure C#. You will have to write a bit of JavaScript to accomplish this. This is because SweetAlertService is a service and not a Blazor component. There's not Blazor component to bind mouse events to.
So basically, you'll want a function in JavaScript that you can call via JSInterop that sets up the bindings for you.

JavaScript

Add something like this to the same file that you're referencing "_content/CurrieTechnologies.Razor.SweetAlert2/sweetAlert2.min.js"

<script src="_content/CurrieTechnologies.Razor.SweetAlert2/sweetAlert2.min.js"></script>
<script>
    function bindSwalMouseOver() {
        var toast = Swal.getContainer();

        toast.removeEventListener('mouseover', Swal.stopTimer);
        toast.removeEventListener('mouseleave', Swal.resumeTimer);

        toast.addEventListener('mouseenter', Swal.stopTimer);
        toast.addEventListener('mouseleave', Swal.resumeTimer);
    }
</script>

Blazor

Inject IJSRuntime in the same file you're injecting SweetAlertService

@inject SweetAlertService Swal
@inject IJSRuntime jSRuntime

Add a function to set up these bindings

private async Task BindMouseOver()
    {
        await jSRuntime.InvokeVoidAsync("bindSwalMouseOver");
    }

Bind the mouseover events on DidOpen

private async Task MouseoverToast()
    {
        var result = await Swal.FireAsync(new SweetAlertOptions
        {
            Toast = true,
            Position = SweetAlertPosition.TopEnd,
            ShowConfirmButton = false,
            Timer = 3000,
            TimerProgressBar = true,
            DidOpen = new SweetAlertCallback(async () => { await BindMouseOver(); }, this),
            Icon = SweetAlertIcon.Success,
            Title = "Signed in successfully"
        });
    }

⚠This will achieve what you're looking for except currently the library isn't exposing the JavaScript Swal object on the DOM window. So, if you try to reference Swal.getContainer() in your JavaScript, it will not be able to find the Swal reference. This is an easy fix that I will implement and should have out in a couple hours.

[Victor Nguyen]

Hi, that’s a good idea but why don’t we provide it as an option on blazor just say PauseTimerOnMouseOver and implement everything in the javascript? Best regards, Victor On Nov 5, 2020, at 08:10, Michael J. Currie <[e-mail]> wrote:  Unfortunately, I don't believe that is possible through pure C#. You will have to write a bit of JavaScript to accomplish this. This is because SweetAlertService is a service and not a Blazor component. There's not Blazor component to bind mouse events to. So basically, you'll want a function in JavaScript that you can call via JSInterop that sets up the bindings for you. JavaScript Add something like this to the same file that you're referencing "_content/CurrieTechnologies.Razor.SweetAlert2/sweetAlert2.min.js" <script src="_content/CurrieTechnologies.Razor.SweetAlert2/sweetAlert2.min.js"></script> <script> function bindSwalMouseOver() { var toast = Swal.getContainer(); toast.removeEventListener('mouseover', Swal.stopTimer); toast.removeEventListener('mouseleave', Swal.resumeTimer); toast.addEventListener('mouseenter', Swal.stopTimer); toast.addEventListener('mouseleave', Swal.resumeTimer); } </script> Blazor Inject IJSRuntime in the same file you're injecting SweetAlertService @Inject SweetAlertService Swal @Inject IJSRuntime jSRuntime Add a function to set up these bindings private async Task BindMouseOver() { await jSRuntime.InvokeVoidAsync("bindSwalMouseOver"); } Bind the mouseover events on DidOpen private async Task MouseoverToast() { var result = await Swal.FireAsync(new SweetAlertOptions { Toast = true, Position = SweetAlertPosition.TopEnd, ShowConfirmButton = false, Timer = 3000, TimerProgressBar = true, DidOpen = new SweetAlertCallback(async () => { await BindMouseOver(); }, this), Icon = SweetAlertIcon.Success, Title = "Signed in successfully" }); } ⚠This will achieve what you're looking for except currently the library isn't exposing the JavaScript Swal object on the DOM window. So, if you try to reference Swal.getContainer() in your JavaScript, it will not be able to find the Swal reference. This is an easy fix that I will implement and should have out in a couple hours. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#1012 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ABNCK7XEYUPPUVPZ2HHPFDLSOK573ANCNFSM4TKRZT5A>.

[Michael Currie]

I can see how that would be useful, but this library does not intend to add custom functionality outside of theming. The SweetAlertOptions object is intended to mirror the JavaScript options as closely as possible. It currently falls short of being an exact duplication due to the limitations of C# and Blazor, but the intent is that someone coming from the JS library would be see a C# API that's as close as possible to the JS one they're used to. So, adding custom option properties is outside the intended scope of this library.

I wouldn't want to open the door to adding an option for any custom functionality that is requested, when the Blazor framework provides ways for individual users to extend the functionality as they see fit.