2018-07-26 23:16:50 -05:00
<!DOCTYPE html>
2021-10-26 08:23:28 -05:00
<!-- Proof of concept of running cool.html in an iframe. Also
2018-07-26 23:16:50 -05:00
shows how to, from outside the iframe, invoke Python scripting in
the underlying LibreOffice instance that manipulates the document
being edited.
This demonstrates using the Python InsertText.py and Capitalise.py
scripts from javascript across iframes.
-->
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" >
< title > Online Editor< / title >
2020-11-14 09:03:16 -06:00
< style >
.alert {
font-size: large;
padding: 20px;
background-color: #f44336;
color: white;
margin-bottom: 15px;
}
< / style >
2018-07-26 23:16:50 -05:00
< script >
2019-06-16 12:28:58 -05:00
function post(msg) {
window.frames[0].postMessage(JSON.stringify(msg), '*');
}
2018-07-26 23:16:50 -05:00
function insertText(text) {
2019-06-16 12:28:58 -05:00
post({'MessageId': 'CallPythonScript',
'SendTime': Date.now(),
'ScriptFile': 'InsertText.py',
'Function': 'InsertText',
'Values': { 'text': {'type': 'string', 'value': text}}
});
2018-07-26 23:16:50 -05:00
}
function capitalize() {
2019-06-16 12:28:58 -05:00
post({'MessageId': 'CallPythonScript',
'SendTime': Date.now(),
'ScriptFile': 'Capitalise.py',
'Function': 'capitalisePython',
'Values': null
});
2018-07-26 23:16:50 -05:00
}
2019-06-15 19:56:28 -05:00
function save() {
post({'MessageId': 'Action_Save',
2019-11-16 10:59:39 -06:00
'Values': { 'Notify': true, 'ExtendedData': 'CustomFlag=Custom Value;AnotherFlag=AnotherValue' }
2019-06-15 19:56:28 -05:00
});
}
2019-06-15 19:58:49 -05:00
function closeDocument() {
post({'MessageId': 'Action_Close',
'Values': null
});
}
2019-06-15 19:56:28 -05:00
function hide_commands(id) {
post({'MessageId': 'Hide_Menu_Item',
'Values': { 'id': id, }
});
post({'MessageId': 'Hide_Button',
'Values': { 'id': id, }
});
}
function show_commands(id) {
post({'MessageId': 'Show_Menu_Item',
'Values': { 'id': id, }
});
post({'MessageId': 'Show_Button',
'Values': { 'id': id, }
});
}
2019-06-16 12:16:20 -05:00
function disable_default_uiaction(action, disable) {
post({'MessageId': 'Disable_Default_UIAction',
'Values': { 'action': action, 'disable': disable }
});
}
2020-01-14 10:54:08 -06:00
function ShowMenubar(visible) {
var messageId = visible ? 'Show_Menubar' : 'Hide_Menubar';
window.frames[0].postMessage(JSON.stringify({'MessageId': 'Host_PostmessageReady'}), '*');
window.frames[0].postMessage(JSON.stringify({'MessageId': messageId}), '*');
}
2021-02-27 10:37:24 -06:00
function ShowNotebookbar(notebookbar) {
var value = notebookbar ? 'notebookbar' : 'classic';
window.frames[0].postMessage(JSON.stringify({'MessageId': 'Host_PostmessageReady'}), '*');
window.frames[0].postMessage(JSON.stringify({'MessageId': 'Action_ChangeUIMode',
'Values': {'Mode': value}}), '*');
}
2018-07-26 23:16:50 -05:00
// This function is invoked when the iframe posts a message back.
function receiveMessage(event) {
2019-06-16 12:28:58 -05:00
console.log('==== framed.doc.html receiveMessage: ' + event.data);
2018-07-26 23:16:50 -05:00
var msg = JSON.parse(event.data);
2019-06-29 09:52:11 -05:00
if (!msg) {
return;
}
if (msg.MessageId == 'App_LoadingStatus') {
2019-06-16 12:28:58 -05:00
if (msg.Values) {
if (msg.Values.Status == 'Document_Loaded') {
window.frames[0].postMessage(JSON.stringify({'MessageId': 'Host_PostmessageReady'}), '*');
}
}
2019-06-29 09:52:11 -05:00
} else if (msg.MessageId == 'Doc_ModifiedStatus') {
if (msg.Values) {
if (msg.Values.Modified == true) {
document.getElementById("ModifiedStatus").innerHTML = "Modified";
}
else {
document.getElementById("ModifiedStatus").innerHTML = "Saved";
}
}
} else if (msg.MessageId == 'Action_Save_Resp') {
if (msg.Values) {
if (msg.Values.success == true) {
document.getElementById("ModifiedStatus").innerHTML = "Saved";
2020-05-19 04:45:04 -05:00
} else {
document.getElementById("ModifiedStatus").innerHTML = "Error during save";
2019-06-29 09:52:11 -05:00
}
}
2019-06-16 12:28:58 -05:00
}
2018-07-26 23:16:50 -05:00
}
// 'main' code of this < script > b l o c k , r u n w h e n p a g e i s b e i n g
// rendered. Install the message listener.
window.addEventListener("message", receiveMessage, false);
< / script >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< / head >
2020-11-14 09:03:16 -06:00
< body >
< div id = "usage" class = "alert" style = "display:none" >
< h2 > Usage< / h2 >
< p >
Load this page via https or http, depending on whether SSL is enabled or not, from the Online server directly.< / br >
The document to load must be given as a query parameter called file_path. The document can be any accessible URL, including on disk, via file://.
< / p >
< h4 > Example< / h4 >
< p >
2021-11-03 09:07:20 -05:00
http://localhost:9980/browser/dist/framed.doc.html?file_path=file:///path/to/document/hello-world.odt
2020-11-14 09:03:16 -06:00
< / p >
< / div >
2018-07-26 23:16:50 -05:00
2020-01-14 10:54:08 -06:00
< h3 > PostMessage test harness< / h3 >
< h4 > Run python InsertText.py script< / h4 >
2018-07-26 23:16:50 -05:00
< form id = "insert-text-form" >
Click < button onclick = "insertText(document.forms['insert-text-form'].elements['source'].value); return false;" > here< / button > to insert the following text into the document:
2019-11-16 10:59:39 -06:00
< textarea name = "source" value = "" rows = "5" cols = "50" > < / textarea >
2018-07-26 23:16:50 -05:00
< / form >
2020-01-14 10:54:08 -06:00
< h4 > Run Capitalize.py script< / h4 >
2018-07-26 23:16:50 -05:00
< form id = "insert-text-form" >
2019-06-15 19:56:28 -05:00
Click < button onclick = "capitalize(); return false;" > here< / button > to capitalize selected text in the document.< / br > < / br >
2020-01-14 10:54:08 -06:00
< / form >
< h4 > Various other messages to post< / h4 >
< form >
2019-06-15 19:58:49 -05:00
< button onclick = "save(); return false;" > Save< / button >
< button onclick = "closeDocument(); return false;" > Close< / button > < / br > < / br >
2019-06-15 19:56:28 -05:00
< button onclick = "hide_commands('save'); return false;" > Hide Save Commands< / button >
< button onclick = "show_commands('save'); return false;" > Show Save Commands< / button > < / br >
< button onclick = "hide_commands('print'); return false;" > Hide Print Commands< / button >
< button onclick = "show_commands('print'); return false;" > Show Print Commands< / button > < / br > < / br >
2019-06-16 12:16:20 -05:00
< button onclick = "disable_default_uiaction('UI_Save', true); return false;" > Disable default save action< / button > < / br >
< button onclick = "disable_default_uiaction('UI_Save', false); return false;" > Enable default save action< / button > < / br > < / br >
2018-07-26 23:16:50 -05:00
< / form >
2020-01-14 10:54:08 -06:00
< h3 > Modified Status: < span id = "ModifiedStatus" > Saved< / span > < / h3 >
< h3 > UI modification< / h3 >
< form id = "menubar-toggle" >
< button onclick = "ShowMenubar(false); return false;" > Hide Menubar< / button >
< button onclick = "ShowMenubar(true); return false;" > Show Menubar< / button >
2021-02-27 10:37:24 -06:00
< p >
< button onclick = "ShowNotebookbar(false); return false;" > Classic Toolbar< / button >
< button onclick = "ShowNotebookbar(true); return false;" > Notebookbar< / button >
2020-01-14 10:54:08 -06:00
< / form >
2019-06-29 09:52:11 -05:00
2020-01-14 10:54:08 -06:00
< h3 > Document frame< / h3 >
2020-01-14 11:48:26 -06:00
< h4 > If the frame fails to load click < a id = "link" > here and accept security bits< / a > < / h4 >
2020-02-10 15:47:08 -06:00
< h4 > If the frame still fails to load ensure you have < code > localhost:*< / code > included in your < code > net.frame_ancestors< / code > in loolwsd.xml< / h4 >
2020-01-14 10:54:08 -06:00
< iframe id = "frame" height = "1000" width = "1000" > < / iframe >
2018-07-26 23:16:50 -05:00
2020-01-14 10:54:08 -06:00
< script >
2020-11-14 09:03:16 -06:00
if (document.location.protocol == 'file:' || window.location.search == '') {
document.getElementById("usage").style.display = "block";
alert('Incorrect usage, please follow the instructions at the top of this page.');
}
var query = '?';
if (window.location.search !== '')
query = window.location.search + '&';
query += 'NotWOPIButIframe=true';
2021-10-26 08:23:28 -05:00
var path = window.location.pathname.substr(0, window.location.pathname.lastIndexOf('/') + 1) + 'cool.html';
2020-11-14 09:03:16 -06:00
var uriBase = window.location.protocol + '//' + window.location.host + path + query;
2020-01-14 10:54:08 -06:00
var iframe = document.getElementById("frame");
2020-11-14 09:03:16 -06:00
iframe.src = uriBase;
2020-01-14 11:48:26 -06:00
link.href = uriBase;
2020-01-14 10:54:08 -06:00
< / script >
2018-07-26 23:16:50 -05:00
< / body >
< / html >
