1

I'm in a blazor/Maui project with JSInterop. My function is in a script in the index.html file, other functions are called correctly there. In the case of an instant discussion, I want the message bubble to ignore my messages if they are visible to the user. Conversely, if the messages are not directly visible on the user's screen, we increment the message so that the bubble updates the number of unread messages. My function : This function works, I created a POC on VS code.

function isElementInViewport(message) {
            try {
                var el = document.getElementById(message);
                if (!el) return false;
                var rect = el.getBoundingClientRect();
                var container = document.querySelector('.chatboxContainerInner');
                var containerRect = container.getBoundingClientRect();
                return (
                    rect.top >= containerRect.top &&
                    rect.left >= containerRect.left &&
                    rect.bottom <= containerRect.bottom &&
                    rect.right <= containerRect.right;
                );
            } catch (e) {
                return false;
            }
}

I use an eventCallBack and OnAfterRenderAsync so that the message is received by my "CallBackRenderMessage" method and the event is triggered. I call my method with :

    private async Task CallBackRenderMessage(Guid messageId)
    {
        try
        {
            var message = _channel.Messages.FirstOrDefault(m => m.Id == messageId);
            if (message == null)
                return;
            await Task.Delay(100);
            var visible = await _jsRuntime.InvokeAsync<bool>("isElementInViewport", $"message{message.Id}");
            if (visible)
            {
                message.IsRead = true;
                IsReadCallBack(message.Id);
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error invoking JS function: {ex.Message}");
        }
    }

I've tried a lot of things, but I can't get console.log to work. the errors I get are the following: [DOTNET] Error invoking JS function: Could not find 'isElementInViewport' ('isElementInViewport' was undefined). [DOTNET] Error: Could not find 'isElementInViewport' ('isElementInViewport' was undefined).

the function works as long as the return :

           return (

                rect.top >= containerRect.top &&

                rect.left >= containerRect.left &&

                rect.bottom <= containerRect.bottom &&

                rect.right <= containerRect.right;
            );

is commented out, but once I uncomment what's in the return I get an undefined

4
  • Where do you define isElementInViewport in your project? Have you tried cleaning your project? Commented Aug 2, 2024 at 10:38
  • After defining isElementInViewport, did you expose it to jsRuntime? If not, you can try jsRuntime.expose('isElementInViewport', isElementInViewport); Commented Aug 6, 2024 at 6:19
  • Have you ever tried defining a bool object, then assigning the result of ` rect.top >= containerRect.top && rect.left >= containerRect.left && rect.bottom <= containerRect.bottom && rect.right <= containerRect.right;` to it and return? Commented Aug 14, 2024 at 6:26
  • This is a test step, you can try setting a boolean value and then returning the result of the block in return( rect.top >= containerRect.top && rect.left >= containerRect.left && rect.bottom <= containerRect.bottom && rect.right <= containerRect.right; ) to check if the block works or not Commented Oct 10, 2024 at 7:16

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.