Getting the window class using dom

Monkey Targets Forums/HTML5/Getting the window class using dom

ziggy

(Posted 2014) [#1]

Any way to do it?

It's easy to get the GameCanvas like this and set a desired width:

Local element:= document.getElementById("GameCanvas")
element.setAttribute("width", "200");

Now I want to be able to set the width to innerWidth and innerHeight from the window object. Anyone knows how to do this?

k.o.g.

(Posted 2014) [#2]

Pseudocode:
Like

Extern
Global window:DOMElement = "window"

Public

Im not sure, DOMElement , DOMHTMLElement or something else

skid	(Posted 2014) [#3]

check dom.monkey, it's declared as

Global window:Window

ziggy

(Posted 2014) [#4]

ups... I feel stupid...

ziggy

(Posted 2014) [#5]

Anyway innerWidth and innerHeight are not exposed in the dom window extern block. I supose them could be added to the github repo

skid	(Posted 2014) [#6]

That's because they are "Not part of any W3C technical specification or recommendation" and so were not listed in the IDL used to create the module.

ziggy

(Posted 2014) [#7]

Ok, I'm trying to enable a "full window" mode on HTML5 as I had it before the latest html5 changes on current experimental version.
I'm almost done with this code:

#If TARGET="html5"
	Import dom
	Extern Private
		Global win:windowExtended = "window"
		Class windowExtended Extends Window = "Window"
			Field innerWidth
			Field innerHeight
		End
	Public
#END

'--------
'Functions:

Function EnableAutoSize:Void(canvasName:String = "GameCanvas")
	#If TARGET="html5"
		
		Local console:= document.getElementById("GameConsole")
		If console <> Null Then
			console.setAttribute("height", "0");
		EndIf


		Local splitter:= document.getElementById("Splitter")
		If splitter <> Null Then
			splitter.setAttribute("style", "height: 8px;")
		EndIf

		'This is just ignored, so I *think* this is not the way to do it:
		document.execCommand("window.onresize=null;");
		
		Local elem:= document.getElementById(canvasName)
		If elem <> Null Then
			elem.setAttribute("width", win.innerWidth)
			elem.setAttribute("height", win.innerHeight)
			elem.setAttribute("style", "")
		EndIf
	#End
End

The problem is that everything works untill the window is resized. Not bad, but is there any way to make this and allow the resizing problem?

nikoniko

(Posted 2014) [#8]

ziggy wrote:

'This is just ignored, so I *think* this is not the way to do it: document.execCommand("window.onresize=null;");

Does that code not work?

ziggy

(Posted 2014) [#9]

It gets ignored. I think it's.not a command as it is not a function call. Haven't tested more

nikoniko

(Posted 2014) [#10]

ziggy wrote:

It gets ignored.

Yes. execCommand() has a limited list commands to call.

We have to call eval() function or addEventLinstener()/removeEventListener()
Easiest way is released that functional in Javascript

ziggy

(Posted 2014) [#11]

But there's no eval command in document or window, how can eval be called? It would be super sexy to be allowed to call eval from Monkey

ziggy

(Posted 2014) [#12]

Can I remove the event listener for canvas resize or window resize anyway?

nikoniko

(Posted 2014) [#13]

ziggy wrote:

how can eval be called? It would be super sexy to be allowed to call eval from Monkey

I don't know it yet except eval() is a window method.
I saw in the "dom.monkey" has <script> element... We can create it, put source code into then call this code.

ziggy wrote:

Can I remove the event listener for canvas resize or window resize anyway?

Sorry, I don't understand your idea.

ziggy

(Posted 2014) [#14]

Sorry, I don't understand your idea.

In the html file generated by Monkey, we find things like window.onresize = function .... etc. This is an EventListener, isn't it? I don't know how to refer to it using the dom, and remove it. I don't know how to reference it using Extern in Monkey...

ziggy

(Posted 2014) [#15]

Working version here:

#If TARGET="html5"
	Import dom
	Extern Private
		Global win:windowExtended = "window"
		Class windowExtended Extends Window = "Window"
			Field innerWidth
			Field innerHeight
			Method eval:Object(parameter:String) = "eval"
		End
	Public
#END

'--------
'Functions:

Function EnableAutoSize:Void(canvasName:String = "GameCanvas")
	#If TARGET="html5"
		Local elem:= document.getElementById(canvasName)
		If elem <> Null Then
			elem.setAttribute("style", "");
		EndIf
		win.eval("var canvas=document.getElementById( '" + canvasName + "' );canvas.onresize=null;");
		win.eval("window.onresize=function (e) {var canvas=document.getElementById( '" + canvasName + "' ); canvas.width = window.innerWidth; canvas.height = window.innerHeight; canvas.style='outline:initial;';} ;")
		win.eval("window.onresize()")
		
	#End
End

Had to create my own extern version of the window dom component, as there were missing elements in the official window representation of the window element into the dom modue. But it's a non issue.

nikoniko

(Posted 2014) [#16]

ziggy wrote:

I don't know how to refer to it using the dom, and remove it. I don't know how to reference it using Extern in Monkey...

Now I see.

I did some test for changed code (mentod eval() added)

#If TARGET="html5"
	Import dom
	Extern Private
		Global win:windowExtended = "window"
		Class windowExtended Extends Window = "Window"
			Field innerWidth
			Field innerHeight
			Method eval(code$)
		End
	Public
#END

Somewhere in main function test calling eval method (I use fasthtml5 code, but this is not matter)
Alert() is shown.

Function Main()
  
  'win.eval("alert('"+win.innerHeight+"')")
  win.eval("window.onresize=function(e){alert(window.innerWidth);return false;}")
	New demo
End