HTML5 - JavaScript functions: Difference between revisions
Jump to navigation
Jump to search
m (Added 'MapTool.' to function names; added getUserData() example) |
m (Clarification and example techniques for accessing getUserData()) |
||
(One intermediate revision by the same user not shown) | |||
Line 6: | Line 6: | ||
==== Functions ==== | ==== Functions ==== | ||
* {{code|MapTool.log()}} - Anything passed to this method will be sent to the chat window, just like a {{func|broadcast}} to {{code|self}}. Additionally, {{code|console.log()}} will be redirected to the chat window. | |||
* {{code|MapTool.getName()}} - Returns the name of the panel. | * {{code|MapTool.getName()}} - Returns the name of the panel. | ||
* {{code|MapTool.getKind()}} - Returns the kind of panel the | * {{code|MapTool.getKind()}} - Returns the kind of panel the JavaScript is inside of: {{func|frame5}} or {{func|dialog5}}. | ||
* {{code|MapTool.getUserData()}} - Returns the data passed to the panel via the {{code|value}} option. | * {{code|MapTool.getUserData()}} - Returns a {{code|Promise}} representing the data passed to the panel via the {{code|value}} option. | ||
<syntaxhighlight | <syntaxhighlight lang="mtmacro"> | ||
[html.frame5("Example Dialog", | [html.frame5("Example Dialog", | ||
"lib://myAddon/index.html", | "lib://myAddon/index.html", | ||
Line 19: | Line 21: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
The variable {{code|value}} is injected into the JavaScript as a global variable (ie. as a property of the {{code|window}} object), such that it can be accessed as either {{code|window.value}} or just {{code|value}}. | The variable {{code|value}} is injected into the JavaScript as a global variable (ie. as a property of the {{code|window}} object), such that it can be accessed as either {{code|window.value}} or just {{code|value}} after the {{code|window}}'s {{code|load}} event is triggered. | ||
<syntaxhighlight | <syntaxhighlight lang="javascript" line> | ||
// | // MapTool creates an implied assignment to 'value' here, but | ||
// it doesn't resolve until the document is finished loading... | |||
// Technique #1 | |||
window.addEventListener("load", function() { | window.addEventListener("load", function() { | ||
MapTool.getUserData().then( | |||
v => console.log(`Method 1\n${MapTool.getKind()}, data: ${v}`) | |||
}) | ); | ||
}); | |||
// Technique #2 | |||
let v = await MapTool.getUserData(); | |||
console.log(`Method 2\n${MapTool.getKind()}, data: ${v}`) | |||
</syntaxhighlight> | </syntaxhighlight> | ||
It is not defined which resolves first, the {{code|Promise}} from {{code|getUserData()}} or the {{code|window}}'s {{code|load}} event. DO NOT rely on any particular order. | |||
[[Category:HTML5 JavaScript]] | [[Category:HTML5 JavaScript]] |
Latest revision as of 23:59, 23 April 2024
This article describes a feature or macro function that is experimental and may be subject to change.
A special class is available to JavaScript code running inside HTML5 pages. It allows access to a few values and functions.
The class itself is static and is called MapTool
.
Functions
MapTool.log()
- Anything passed to this method will be sent to the chat window, just like a broadcast() toself
. Additionally,console.log()
will be redirected to the chat window.
MapTool.getName()
- Returns the name of the panel.
MapTool.getUserData()
- Returns aPromise
representing the data passed to the panel via thevalue
option.
[html.frame5("Example Dialog",
"lib://myAddon/index.html",
'value={"key": "some arbitrary data"}')]
The variable value
is injected into the JavaScript as a global variable (ie. as a property of the window
object), such that it can be accessed as either window.value
or just value
after the window
's load
event is triggered.
// MapTool creates an implied assignment to 'value' here, but
// it doesn't resolve until the document is finished loading...
// Technique #1
window.addEventListener("load", function() {
MapTool.getUserData().then(
v => console.log(`Method 1\n${MapTool.getKind()}, data: ${v}`)
);
});
// Technique #2
let v = await MapTool.getUserData();
console.log(`Method 2\n${MapTool.getKind()}, data: ${v}`)
It is not defined which resolves first, the Promise
from getUserData()
or the window
's load
event. DO NOT rely on any particular order.