[Libreoffice-commits] online.git: 4 commits - loleaflet/reference.html loleaflet/src

Pranav Kant pranavk at collabora.co.uk
Tue Jun 20 13:27:14 UTC 2017


 loleaflet/reference.html              |   85 +++++++++++++++++++++++++++++-----
 loleaflet/src/map/handler/Map.WOPI.js |   13 ++++-
 2 files changed, 85 insertions(+), 13 deletions(-)

New commits:
commit b36e79f173e128a985270aa58ad25533208f2fc5
Author: Pranav Kant <pranavk at collabora.co.uk>
Date:   Tue Jun 20 18:51:05 2017 +0530

    Document custom button API
    
    Change-Id: I67b29052ed9f140d82b8f93289fc9704892517c5

diff --git a/loleaflet/reference.html b/loleaflet/reference.html
index 6ed7ce6a..dcd0a977 100644
--- a/loleaflet/reference.html
+++ b/loleaflet/reference.html
@@ -73,6 +73,7 @@
 			<li><a href="#loleaflet-postmessage-query">Query API</a></li>
 			<li><a href="#loleaflet-postmessage-sessions">Session Management</a></li>
 			<li><a href="#loleaflet-postmessage-actions">Actions</a></li>
+			<li><a href="#loleaflet-postmessage-misc">Miscellaneous</a></li>
 		</ul>
 		<h4>UI Layers</h4>
 		<ul>
@@ -2721,13 +2722,7 @@ The <code>id</code> property of ErrorEvent can have the following values:
 <p>This API is mostly based
   on <a href="https://wopi.readthedocs.io/en/latest/scenarios/postmessage.html">WOPI
     specification</a> with few extensions/modifications. All messages sent are
-  in this form</p>
-
-<p>It is to be noted that as mentioned in WOPI specs, loleaflet frame will
-  ignore all post messages coming from the host frame
-  if <code>Host_PostmessageReady</code> has not been received. Further, no post
-  messages will be emitted if 'PostMessageOrigin' property is missing from
-  server response.</p>
+  in this form :
 
 <pre><code class="javascript">
 {
@@ -2738,11 +2733,18 @@ The <code>id</code> property of ErrorEvent can have the following values:
     }
 }
 </code></pre>
+SendTime is the timestamp returned by browsers' Date.now(). The post messages
+sent from the WOPI host should also be in same form.
+</p>
 
-SendTime is the timestamp returned by browsers' Date.now()
-
-<br/><br/>
-Similarly, message received should be in same form.
+<p>It is to be noted that as mentioned in WOPI specs, loleaflet frame will
+  ignore all post messages coming from the host frame
+  if <code>Host_PostmessageReady</code> has not been received. Further, since
+  for embedding LibreOffice Online as an iframe WOPI implementation is a must,
+  it is required that 'PostMessageOrigin' property is present in
+  WOPI host's CheckFileInfo response. Otherwise, no post messages will be
+  emitted.
+<br/>
 
 <h3 id="loleaflet-postmessage-initialization">Initialization</h3>
 Editor to WOPI host
@@ -2976,6 +2978,65 @@ Actions response
 	</tr>
 </table>
 
+<h3 id='loleaflet-postmessage-misc'>Miscellaneous</h3>
+WOPI host to editor
+<table data-id='postmessage-misc-to-editor'>
+	<tr>
+		<th>MessageId</th>
+		<th>Values</th>
+		<th>Description</th>
+	</tr>
+	<tr>
+		<td><code><b>Insert_Button</b></code></td>
+		<td><code>
+		    <nobr>id: <string></nobr><br/>
+		    <nobr>imgurl: <string></nobr>
+		    <nobr>hint: <string></nobr>
+		    <nobr>mobile: <boolean></nobr>
+		    <nobr>label: <string></nobr>
+		</code></td>
+		<td>
+		  Inserts the button to the left of the top toolbar. Only thing
+		  that it does is response to click events based on which hosts
+		  can act accordingly. It responds
+		  with <code>Clicked_Button</code> post message event.<br/>
+		  <code>id</code> parameter is a unique id of the toolbar
+		  button. It is recommended to prefix such ids given here with
+		  some host namespace so that it doesn't conflict with existing
+		  toolbar IDs. In case of conflict, button is not added.<br/>
+		  <code>imgurl</code> parameter is the link to the image that
+		  will be set as button image in the toolbar. The ideal size of
+		  the image is 24x24px. The image must be hosted on the host URL
+		  to not violate Content-Security-Policy.<br/>
+		  <code>hint</code> This is used as a tooltip of the
+		  button.<br/>
+		  <code>mobile</code> Whether the button should be shown when
+		  the interface switches to mobile mode.<br/>
+		  <code>label</code> When a readonly document is opened, we
+		  don't have the toolbar at all. In this case, this newly added
+		  button is present in file menubar. The text against this label
+		  is used as text of the menubar item.
+		</td>
+	</tr>
+</table>
+Editor to WOPI host
+<table data-id='postmessage-misc-to-host'>
+	<tr>
+		<th>MessageId</th>
+		<th>Values</th>
+		<th>Description</th>
+	</tr>
+	<tr>
+		<td><code><b>Clicked_Button</b></code></td>
+		<td><code>
+		    <nobr>id: <string></nobr>
+		</code></td>
+		<td>
+		  This event is emitted when the custom button added
+		  via <code>Insert_Button</code> API above is clicked.
+		</td>
+	</tr>
+</table>
 
 <h2 id="marker">Marker</h2>
 
commit 483f600f22305bd5b40e789b206c1e147a7eb6c3
Author: Pranav Kant <pranavk at collabora.co.uk>
Date:   Tue Jun 20 17:14:11 2017 +0530

    Its Host_PostmessageReady, not Host_PostMessageReady according to specs
    
    https://wopi.readthedocs.io/en/latest/scenarios/postmessage.html
    
    Change-Id: Id01b84417dbc8f9226cab05c08e0d566f0305534

diff --git a/loleaflet/reference.html b/loleaflet/reference.html
index fa08a3d6..6ed7ce6a 100644
--- a/loleaflet/reference.html
+++ b/loleaflet/reference.html
@@ -2725,7 +2725,7 @@ The <code>id</code> property of ErrorEvent can have the following values:
 
 <p>It is to be noted that as mentioned in WOPI specs, loleaflet frame will
   ignore all post messages coming from the host frame
-  if <code>Host_PostMessageReady</code> has not been received. Further, no post
+  if <code>Host_PostmessageReady</code> has not been received. Further, no post
   messages will be emitted if 'PostMessageOrigin' property is missing from
   server response.</p>
 
@@ -2776,7 +2776,7 @@ WOPI host to editor
 		<th>Description</th>
 	</tr>
 	<tr>
-		<td><code><b>Host_PostMessageReady</b></code></td>
+		<td><code><b>Host_PostmessageReady</b></code></td>
 		<td><code>
 		</code></td>
 		<td>
commit 2abf2421f3e984693b114e8597d2e88fd1430ba8
Author: Pranav Kant <pranavk at collabora.co.uk>
Date:   Tue Jun 20 17:12:43 2017 +0530

    Warn users if they try to use post message API incorrectly
    
    Change-Id: I09ce1a14587f558765e02fc8197030f4a5d2cee0

diff --git a/loleaflet/src/map/handler/Map.WOPI.js b/loleaflet/src/map/handler/Map.WOPI.js
index dd4ddb21..8e96efcc 100644
--- a/loleaflet/src/map/handler/Map.WOPI.js
+++ b/loleaflet/src/map/handler/Map.WOPI.js
@@ -100,6 +100,17 @@ L.Map.WOPI = L.Handler.extend({
 		}
 
 		var msg = JSON.parse(e.data);
+		if (msg.MessageId === 'Host_PostmessageReady') {
+			// We already have a listener for this in loleaflet.html, so ignore it here
+			return;
+		}
+
+		// For all other messages, warn if trying to interact before we are completely loaded
+		if (!this._appLoaded) {
+			console.error('LibreOffice Online not loaded yet. Listen for App_LoadingStatus (Document_Loaded) event before using PostMessage API. Ignoring post message \'' + msg.MessageId + '\'.');
+			return;
+		}
+
 		if (msg.MessageId === 'Insert_Button') {
 			if (msg.Values) {
 				if (msg.Values.id && !w2ui['toolbar-up'].get(msg.Values.id)
commit 8ca5efb6710c340f5ab53631f7a8edfceaa512c5
Author: Pranav Kant <pranavk at collabora.co.uk>
Date:   Tue Jun 20 16:38:28 2017 +0530

    Make this custom button's css consistent with other toolbar images
    
    Change-Id: I39158d634eb5fbe0ce54cb4e5f6be3d01982b074

diff --git a/loleaflet/src/map/handler/Map.WOPI.js b/loleaflet/src/map/handler/Map.WOPI.js
index 44f4917b..dd4ddb21 100644
--- a/loleaflet/src/map/handler/Map.WOPI.js
+++ b/loleaflet/src/map/handler/Map.WOPI.js
@@ -106,7 +106,7 @@ L.Map.WOPI = L.Handler.extend({
 				    && msg.Values.imgurl) {
 					if (this._map._permission === 'edit') {
 						// add the css rule for the image
-						$('html > head > style').append('.w2ui-icon.' + msg.Values.id + '{background: url(' + msg.Values.imgurl + ')}');
+						$('html > head > style').append('.w2ui-icon.' + msg.Values.id + '{background: url(' + msg.Values.imgurl + ') no-repeat center !important; }');
 
 						// add the item to the toolbar
 						w2ui['toolbar-up'].insert('save', [


More information about the Libreoffice-commits mailing list