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).