How to disable a DesktopHTMLViewer?

In the IDE you can choose whether a DesktopHTMLViewer should be “Enabled” or not. Just like you can for the other controls. But it doesn’t seem to have any effect on the HTMLViewer. At least not the effect I expect :thinking:
When the DesktopHTMLViewer is “Disabled” in the IDE it is still active when the app is running.
Does “Enabled” work in a different way for the HTMLViewer than for other controls?

XOJO version 2021 Release 3
macOS Monterey version 12.1

The HtmlViewer always was a bit special. What do you want to show with an disabled HtmlViewer? You could show a custom html “No data to display” or something similar.

I recall the trick was to put a transparent rectangle in front of the htmlviewer
if you want to display it but prevent the user to clic on it.

@Beatrix Willius
I would like to show a local hosted html text editor (https://vuejs.org) which communicates with the App. And therefore should only be active when certain conditions are met.

@Jean-Yves Pochez
I’m just in the process of trying it.

Is the conclusion that I can’t use the "Enabled” button in the IDE for a DesktopHTMLViewer?

-Then why is it there?

you could fill a bug report for this one indeed.

1 Like

You can load “about:blank” as URL to get a blank one.

Yes, but then you will lose what is already written in the html text editor - if I understand you correctly

You can “disable it” by yourself…
Add a boolean isDisabled
Set it to true when needed
In all your events, test isDisabled and code accordingly (if True, ignore clicks / Event, …, else let the code be executed).

Done: 67114

How can I ignore mouse clicks?
I have tried both “Return True” and “Return False” in the “MouseDown” event for the Viewer. It makes no difference. The website responds to clicks no matter what

You could use JavaScript to stop mouse clicks.

And MouseUp.

I tend to do this with JavaScript. Put this method in a module:

Public Sub EnabledUsingOverlay(extends h as DesktopHTMLViewer, assigns value as Boolean)
  ' https://forum.xojo.com/t/how-to-disable-a-desktophtmlviewer/67576/12
  var exec() as String
  
  if value = false then
    exec.Add( "var overlay = document.createElement('div');" )
    exec.Add( "overlay.id = 'xojoDisabler';" )
    exec.Add( "overlay.style.position = 'absolute';" )
    exec.Add( "overlay.style.backgroundColor = 'black';" )
    exec.Add( "overlay.style.top = '0';" )
    exec.Add( "overlay.style.left = '0';" )
    exec.Add( "overlay.style.height = '100%';" )
    exec.Add( "overlay.style.width = '100%';" )
    exec.Add( "overlay.style.opacity = '0.8';" )
    exec.Add( "overlay.style.zIndex = '999999';" )
    exec.Add( "document.body.appendChild(overlay);" )
  else
    exec.Add( "var overlay = document.getElementById('xojoDisabler');" )
    exec.Add( "if (overlay) overlay.remove();" )
  end if
  
  h.ExecuteJavaScript( String.FromArray( exec, "" ) )
End Sub

Then call as:

HTMLViewer1.EnabledUsingOverlay = False

This code will create an overlay on the whole page, making clicks and selection impossible.

1 Like

It’s no good doing anything like that. You have to have a javascript event listener which will intercept and then ignore things that you want to have no effect.

Thank you all for your contributions. I greatly appreciate your help and Anthony even delivers a ready to go solution. Although it feels a bit wrong to solve a problem in XOJO with JavaScript I will probably use this solution.

A small note on the solution.
It is possible to run the method multiple times and add more overlays. It might be an idea to create a boolean to check if an overlay is already placed on the HTMLViewer.

Thanks

1 Like

Well, since the Enabled property doesn’t do anything anyway, this should work (untested, browser code):

Public Sub EnabledUsingOverlay(extends h as DesktopHTMLViewer, assigns value as Boolean)
  ' https://forum.xojo.com/t/how-to-disable-a-desktophtmlviewer/67576/12
  var exec() as String
  
  if h.Enabled = value then Return
  
  if value = false then
    exec.Add( "var overlay = document.createElement('div');" )
    exec.Add( "overlay.id = 'xojoDisabler';" )
    exec.Add( "overlay.style.position = 'absolute';" )
    exec.Add( "overlay.style.backgroundColor = 'black';" )
    exec.Add( "overlay.style.top = '0';" )
    exec.Add( "overlay.style.left = '0';" )
    exec.Add( "overlay.style.height = '100%';" )
    exec.Add( "overlay.style.width = '100%';" )
    exec.Add( "overlay.style.opacity = '0.8';" )
    exec.Add( "overlay.style.zIndex = '999999';" )
    exec.Add( "document.body.appendChild(overlay);" )
  else
    exec.Add( "var overlay = document.getElementById('xojoDisabler');" )
    exec.Add( "if (overlay) overlay.remove();" )
  end if
  
  h.ExecuteJavaScript( String.FromArray( exec, "" ) )
  
  h.Enabled = value
End Sub
1 Like