Rank: Administration
Groups: Translators, Members, Administrators Joined: 1/11/2018(UTC) Posts: 1,294  Location: Tampa, FL Thanks: 28 times
Was thanked: 404 time(s) in 349 post(s)
|
Beginning with version 0.4.1.3, S+ installs the Microsoft WebView2 runtime (Evergreen, Edge Chrome rendering engine) and allows you to create your own custom HTML window which can display HTML and allow communication with scripts via callback. In the future, I am considering replacing the StrokesPlus.net user interface with HTML/CSS/JavaScript, so this also supports that possible initiative. Code:// This function is called when the HTML window is created, passing the ID and window Handle
// Example of JSON sent on window created:
// {
// "StrokesPlusHTMLWindow": {"ID" : "windowID", "Handle" : "123456"}
// }
// It is also how to pass messages to your S+ script from the HTML window via using
// window.chrome.webview.postMessage
function testWindowCallback(val)
{
let obj = JSON.parse(val);
if (obj.StrokesPlusHTMLWindow) {
// obj.StrokesPlusHTMLWindow.ID property is also available
var handle = new IntPtr(parseInt(obj.StrokesPlusHTMLWindow.Handle))
sp.StoreHandle("testWindowHandle",handle);
sp.WindowFromHandle(handle).Maximize();
}
else if (obj.action)
{
switch(obj.action) {
case "Close":
sp.WindowFromHandle(sp.GetStoredHandle("testWindowHandle")).SendClose();
break;
default:
sp.MessageBox(obj.action, "Callback Action");
break;
}
}
else
{
sp.MessageBox(obj, "Callback Value");
}
}
// Create new HTML window
// sp.HTMLWindow(title, HTML, callback, loadScript, windowId, includeBootstrapJQuery);
sp.HTMLWindow("Window Title",
`<div class="container mt-2">
<p>Test page content</p>
<button id="buttonOK" class="btn btn-primary">OK</button>
<button id="buttonString" class="btn btn-secondary">Send String</button>
<button class="btn btn-info" data-toggle="modal" data-target="#exampleModal">Show Modal</button>
<button id="buttonClose" class="btn btn-outline-danger">Close</button>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Content here</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$('#buttonOK').click(function (b) {
window.chrome.webview.postMessage({ action: 'OK', message: 'clicked OK'});
});
$('#buttonString').click(function (b) {
window.chrome.webview.postMessage("Test String");
});
$('#buttonClose').click(function (b) {
window.chrome.webview.postMessage({ action: 'Close', message: 'clicked Cancel'});
});
</script>`,
"testWindowCallback", // script callback (to process data from window.chrome.webview.postMessage)
"alert('testWindow Loaded');", // script (within scope of HTML) to be executed on HTML doc load
"", // window ID, if not supplied, will be a new GUID
true); // include Bootstrap 4, JQuery, document wrapper (your HTML will be inserted inside the <body> tag)
// false will not include any additional HTML beyond what is passed in from above
Use sp.HTMLWindowExecuteScriptAsync to execute JavaScript within the HTML window:Code:sp.HTMLWindowExecuteScriptAsync(sp.GetStoredHandle("testWindowHandle"), "alert('Hello!');");
Edited by user Monday, February 1, 2021 6:40:12 PM(UTC)
| Reason: Update script, add modal
|
 1 user thanked Rob for this useful post.
|
|
