HTML5 - JavaScript functions: Difference between revisions

From RPTools Wiki
Jump to navigation Jump to search
m (Added 'MapTool.' to function names; added getUserData() example)
m (Clarification and example techniques for accessing getUserData())
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 JS is inside of: {{func|frame5}} or {{func|dialog5}}.
* {{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 language="mtmacro">
<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 language="javascript">
<syntaxhighlight lang="javascript" line>
// There's an implied assignment to 'value' here, prior to your JavaScript code
// 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() {
     console.log("Loaded");
     MapTool.getUserData().then(
    console.log(JSON.stringify(MapTool.getUserData()));
        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>


* {{code|MapTool.log()}} - Anything passed to this method will be sent to the chat window, just like a {{func|broadcast}} to {{code|self}}.
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.
 
Additionally, {{code|console.log()}} will be redirected to the chat window as well.  
[[Category:HTML5 JavaScript]]
[[Category:HTML5 JavaScript]]

Revision as of 04:19, 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() to self. Additionally, console.log() will be redirected to the chat window.
  • MapTool.getName() - Returns the name of the panel.
  • MapTool.getKind() - Returns the kind of panel the JavaScript is inside of: frame5() or dialog5().
  • MapTool.getUserData() - Returns a Promise representing the data passed to the panel via the value 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.