8f312862ca
When .uno:ModifiedStatus is received, now Doc_ModifiedStatus is fired to inform the client of the modified state of the document. This is useful in case the integration needs to prompt the user to save before closing the document (which they can catch with the onunload or onbeforeunload events in the browser, as well as with our UI_Close when the default handler is disabled). Includes working sample and documentation. Change-Id: Ief30483e2f078b0aa9f3c006a1ecb4093375174c Reviewed-on: https://gerrit.libreoffice.org/74891 Reviewed-by: Jan Holesovsky <kendy@collabora.com> Tested-by: Jan Holesovsky <kendy@collabora.com>
157 lines
5.6 KiB
HTML
157 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<!-- Proof of concept of running loleaflet.html in an iframe. Also
|
|
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.
|
|
|
|
To test this, do 'make run', and then in your browser open the
|
|
equivalent of
|
|
http://snorken.local:9980/loleaflet/3304e9093/framed.doc.html if the
|
|
browser is running on a different machine, or
|
|
http://localhost:9980/loleaflet/3304e9093/framed.doc.html if running
|
|
on the same machine.
|
|
|
|
-->
|
|
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<title>Online Editor</title>
|
|
|
|
<script>
|
|
|
|
function post(msg) {
|
|
window.frames[0].postMessage(JSON.stringify(msg), '*');
|
|
}
|
|
|
|
function insertText(text) {
|
|
post({'MessageId': 'CallPythonScript',
|
|
'SendTime': Date.now(),
|
|
'ScriptFile': 'InsertText.py',
|
|
'Function': 'InsertText',
|
|
'Values': { 'text': {'type': 'string', 'value': text}}
|
|
});
|
|
}
|
|
|
|
function capitalize() {
|
|
post({'MessageId': 'CallPythonScript',
|
|
'SendTime': Date.now(),
|
|
'ScriptFile': 'Capitalise.py',
|
|
'Function': 'capitalisePython',
|
|
'Values': null
|
|
});
|
|
}
|
|
|
|
function save() {
|
|
post({'MessageId': 'Action_Save',
|
|
'Values': { 'Notify': true, 'ExtendedData': 'CustomFlag=CustomValue;AnotherFlag=AnotherValue' }
|
|
});
|
|
}
|
|
|
|
function closeDocument() {
|
|
post({'MessageId': 'Action_Close',
|
|
'Values': null
|
|
});
|
|
}
|
|
|
|
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, }
|
|
});
|
|
}
|
|
|
|
function disable_default_uiaction(action, disable) {
|
|
post({'MessageId': 'Disable_Default_UIAction',
|
|
'Values': { 'action': action, 'disable': disable }
|
|
});
|
|
}
|
|
|
|
// This function is invoked when the iframe posts a message back.
|
|
|
|
function receiveMessage(event) {
|
|
console.log('==== framed.doc.html receiveMessage: ' + event.data);
|
|
var msg = JSON.parse(event.data);
|
|
if (!msg) {
|
|
return;
|
|
}
|
|
if (msg.MessageId == 'App_LoadingStatus') {
|
|
if (msg.Values) {
|
|
if (msg.Values.Status == 'Document_Loaded') {
|
|
window.frames[0].postMessage(JSON.stringify({'MessageId': 'Host_PostmessageReady'}), '*');
|
|
}
|
|
}
|
|
} 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";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 'main' code of this <script> block, run when page is being
|
|
// 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>
|
|
|
|
<body style="user-select: none;">
|
|
|
|
<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:
|
|
<textarea name="source" value="" rows="10" cols="80"></textarea>
|
|
</form>
|
|
|
|
<form id="insert-text-form">
|
|
Click <button onclick="capitalize(); return false;">here</button> to capitalize selected text in the document.</br></br>
|
|
<button onclick="save(); return false;">Save</button>
|
|
<button onclick="closeDocument(); return false;">Close</button></br></br>
|
|
<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>
|
|
<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>
|
|
</form>
|
|
|
|
<p>Modified Status:
|
|
<span id="ModifiedStatus">Saved</span>
|
|
</p>
|
|
|
|
<!-- The hostname and pathnames below are obviously specific to my
|
|
personal environment and need to be changed appropriately. Also
|
|
the hex string needs to be changed of course, to the right one as
|
|
shown by 'make run'. -->
|
|
|
|
<iframe src="http://localhost:9980/loleaflet/ef3c798/loleaflet.html?file_path=file:///home/ash/prj/lo/online/test/data/empty.odt&NotWOPIButIframe=true" height="1000" width="1000"></iframe>
|
|
</body>
|
|
</html>
|