[Libreoffice-commits] online.git: Branch 'distro/collabora/collabora-online-4' - 5 commits - loleaflet/html loleaflet/js loleaflet/Makefile.am loleaflet/src

Libreoffice Gerrit user logerrit at kemper.freedesktop.org
Tue May 14 13:50:51 UTC 2019


 loleaflet/Makefile.am            |   13 ++-
 loleaflet/html/loleaflet.html.m4 |   25 +++----
 loleaflet/js/global.js           |  137 +++++++++++++++++++++++++++------------
 loleaflet/js/main.js             |    3 
 loleaflet/src/core/Socket.js     |   15 +++-
 loleaflet/src/map/Map.js         |    4 -
 6 files changed, 133 insertions(+), 64 deletions(-)

New commits:
commit a5e3bcec43fa4e82639adfff15ec9f1fa11b32ff
Author:     Henry Castro <hcastro at collabora.com>
AuthorDate: Sun Jan 27 16:46:41 2019 -0400
Commit:     Jan Holesovsky <kendy at collabora.com>
CommitDate: Tue May 14 15:50:22 2019 +0200

    loleaflet: uglify global.js file
    
    Change-Id: Ibcc265830c10042a918784b350fe93566147993a

diff --git a/loleaflet/Makefile.am b/loleaflet/Makefile.am
index f0212d338..5054070fa 100644
--- a/loleaflet/Makefile.am
+++ b/loleaflet/Makefile.am
@@ -217,6 +217,10 @@ $(builddir)/dist/bundle.css: $(LOLEAFLET_CSS)
 	@echo "Uglify loleaflet css files..."
 	@NODE_PATH=$(abs_builddir)/node_modules $(NODE) node_modules/uglifycss/uglifycss $(LOLEAFLET_CSS) > $@
 
+$(builddir)/dist/global.js: $(srcdir)/js/global.js
+	@echo "Uglify global.js file..."
+	@NODE_PATH=$(abs_builddir)/node_modules $(NODE) node_modules/uglify-js/bin/uglifyjs $< --output $@
+
 $(builddir)/dist/bundle.js: $(NODE_MODULES_JS_SRC) \
 	$(LOLEAFLET_PREFIX)/dist/loleaflet-src.js \
 	$(builddir)/dist/global.js \
commit 18a4cd16da9e8d6708cd3c0ebbcd5b50e8cc5bbb
Author:     Henry Castro <hcastro at collabora.com>
AuthorDate: Sun Jan 27 14:04:26 2019 -0400
Commit:     Jan Holesovsky <kendy at collabora.com>
CommitDate: Tue May 14 15:50:22 2019 +0200

    loleaflet: improve early "websocket" connection
    
    Normally the "websocket" is created and start a connection when browser
    evaluate "bundle.js" after download it.
    So we create an early "websocket" connection after the browser parse
    "loleaflet.html" and start receiving tiles to improve load page
    performance
    
    Change-Id: I56fca7a2da39031222c1d43781825997221385a1

diff --git a/loleaflet/Makefile.am b/loleaflet/Makefile.am
index a952cac41..f0212d338 100644
--- a/loleaflet/Makefile.am
+++ b/loleaflet/Makefile.am
@@ -123,9 +123,6 @@ endif
 NODE_MODULES_JS_SRC = $(patsubst %.js,$(builddir)/%.js,$(NODE_MODULES_JS))
 NODE_MODULES_JS_DST = $(patsubst %.js,$(builddir)/dist/%.js,$(NODE_MODULES_JS))
 
-GLOBAL_JS =\
-	global.js
-
 LOLEAFLET_JS = $(strip $(shell NODE_PATH=$(abs_builddir)/node_modules $(NODE) -e "try {console.log(require('$(1)').getFiles().join(' '))} catch(e) {}"))
 LOPLUGIN_JS = $(strip $(shell NODE_PATH=$(abs_builddir)/node_modules $(NODE) -e "try {console.log(require('$(1)').deps.join(' '))} catch(e) {}"))
 
@@ -222,7 +219,7 @@ $(builddir)/dist/bundle.css: $(LOLEAFLET_CSS)
 
 $(builddir)/dist/bundle.js: $(NODE_MODULES_JS_SRC) \
 	$(LOLEAFLET_PREFIX)/dist/loleaflet-src.js \
-	$(srcdir)/js/global.js \
+	$(builddir)/dist/global.js \
 	$(srcdir)/js/jquery.mCustomScrollbar.js \
 	$(srcdir)/js/w2ui-1.5.rc1.js \
 	$(srcdir)/js/toolbar.js \
@@ -249,7 +246,8 @@ $(builddir)/dist/loleaflet.html: $(srcdir)/html/loleaflet.html.m4 $(LOLEAFLET_HT
 		-DMOBILEAPPNAME="$(APP_NAME)" \
 		-DLOLEAFLET_CSS="$(subst $(SPACE),$(COMMA),$(LOLEAFLET_CSS_M4))" \
 		-DBUNDLE_CSS="$(abs_builddir)/dist/bundle.css" \
-		-DLOLEAFLET_JS="$(subst $(SPACE),$(COMMA),$(GLOBAL_JS) $(NODE_MODULES_JS) \
+		-DGLOBAL_JS="$(abs_builddir)/dist/global.js" \
+		-DLOLEAFLET_JS="$(subst $(SPACE),$(COMMA),$(NODE_MODULES_JS) \
 		$(call LOLEAFLET_JS,$(srcdir)/build/build.js) \
 		$(patsubst %.js,plugins/draw-$(DRAW_VERSION)/%.js,$(call LOLEAFLET_JS,$(srcdir)/plugins/draw-$(DRAW_VERSION)/build/build.js)) \
 		$(patsubst %.js,plugins/path-transform/%.js,$(call LOPLUGIN_JS,$(srcdir)/plugins/path-transform/build/deps.js)) \
diff --git a/loleaflet/html/loleaflet.html.m4 b/loleaflet/html/loleaflet.html.m4
index 54dc9fb45..367ed3fe6 100644
--- a/loleaflet/html/loleaflet.html.m4
+++ b/loleaflet/html/loleaflet.html.m4
@@ -179,6 +179,7 @@ ifelse(MOBILEAPP,[true],
       window.outOfFocusTimeoutSecs = %OUT_OF_FOCUS_TIMEOUT_SECS%;
       window.idleTimeoutSecs = %IDLE_TIMEOUT_SECS%;
       window.tileSize = 256;])
+syscmd([cat ]GLOBAL_JS)dnl
     </script>
   <script defer>
 
diff --git a/loleaflet/js/global.js b/loleaflet/js/global.js
index 9b529af8b..1b7f07883 100644
--- a/loleaflet/js/global.js
+++ b/loleaflet/js/global.js
@@ -49,4 +49,59 @@
 		}
 	};
 
+	var docParams, wopiParams;
+	var filePath = global.getParameterByName('file_path');
+	var wopiSrc = global.getParameterByName('WOPISrc');
+	if (wopiSrc != '') {
+		global.docURL = decodeURIComponent(wopiSrc);
+		wopiSrc = '?WOPISrc=' + wopiSrc + '&compat=/ws';
+		if (global.accessToken !== '') {
+			wopiParams = { 'access_token': global.accessToken, 'access_token_ttl': global.accessTokenTTL };
+		}
+		else if (global.accessHeader !== '') {
+			wopiParams = { 'access_header': global.accessHeader };
+		}
+		docParams = Object.keys(wopiParams).map(function(key) {
+			return encodeURIComponent(key) + '=' + encodeURIComponent(wopiParams[key])
+		}).join('&');
+	} else {
+		global.docURL = filePath;
+	}
+
+	var websocketURI = global.host + global.serviceRoot + '/lool/' + encodeURIComponent(global.docURL + (docParams ? '?' + docParams : '')) + '/ws' + wopiSrc;
+
+	try {
+		global.socket = new WebSocket(websocketURI);
+	} catch (err) {
+		console.log(err);
+	}
+
+	global.queueMsg = [];
+	if (global.socket && global.socket.readyState !== 3) {
+		global.socket.onopen = function () {
+			if (global.socket.readyState === 1) {
+				var ProtocolVersionNumber = '0.1';
+				global.socket.send('loolclient ' + ProtocolVersionNumber);
+				global.socket.send('load url=' + encodeURIComponent(global.docURL));
+			}
+		}
+
+		global.socket.onerror = function (event) {
+			console.log(event);
+		}
+
+		global.socket.onclose = function (event) {
+			console.log(event);
+		}
+
+		global.socket.onmessage = function (event) {
+			if (global.L && global.socket instanceof global.L.Socket) {
+				global.socket._onMessage(event);
+			} else {
+				global.queueMsg.push(event.data);
+			}
+		}
+
+		global.socket.binaryType = 'arraybuffer';
+	}
 }(window));
diff --git a/loleaflet/js/main.js b/loleaflet/js/main.js
index 15e859606..801cf33b6 100644
--- a/loleaflet/js/main.js
+++ b/loleaflet/js/main.js
@@ -79,8 +79,9 @@ map.addControl(L.control.columnHeader());
 map.addControl(L.control.rowHeader());
 map.addControl(L.control.contextMenu());
 map.addControl(L.control.infobar());
-map.loadDocument();
+map.loadDocument(global.socket);
 
+global.socket = map._socket;
 window.addEventListener('beforeunload', function () {
 	if (map && map._socket) {
 		map._socket.close();
diff --git a/loleaflet/src/core/Socket.js b/loleaflet/src/core/Socket.js
index 884a0c8d2..290016fcd 100644
--- a/loleaflet/src/core/Socket.js
+++ b/loleaflet/src/core/Socket.js
@@ -50,7 +50,7 @@ L.Socket = L.Class.extend({
 		this._msgQueue = [];
 	},
 
-	connect: function() {
+	connect: function(socket) {
 		var map = this._map;
 		if (map.options.permission) {
 			map.options.docParams['permission'] = map.options.permission;
@@ -61,7 +61,9 @@ L.Socket = L.Class.extend({
 		if (window.ThisIsAMobileApp) {
 			this.socket = new FakeWebSocket();
 			window.TheFakeWebSocket = this.socket;
-		} else {
+		} else if (socket && (socket.readyState === 1 || socket.readyState === 0)) {
+			this.socket = socket;
+		} else	{
 			var wopiSrc = '';
 			if (map.options.wopiSrc != '') {
 				wopiSrc = '?WOPISrc=' + map.options.wopiSrc + '&compat=/ws';
@@ -105,6 +107,15 @@ L.Socket = L.Class.extend({
 			this._accessTokenExpireTimeout = setTimeout(L.bind(this._sessionExpiredWarning, this),
 			                                            parseInt(map.options.docParams.access_token_ttl) - Date.now() - tokenExpiryWarning);
 		}
+
+		// process messages for early socket connection
+		if (socket && ((socket.readyState === 1 || socket.readyState === 0)) &&
+			window.queueMsg && window.queueMsg.length > 0) {
+			for (var it = 0; it < window.queueMsg.length; it++) {
+				this._onMessage({data: window.queueMsg[it]});
+			}
+			window.queueMsg = [];
+		}
 	},
 
 	_sessionExpiredWarning: function() {
diff --git a/loleaflet/src/map/Map.js b/loleaflet/src/map/Map.js
index 9e25fbe04..c1413504b 100644
--- a/loleaflet/src/map/Map.js
+++ b/loleaflet/src/map/Map.js
@@ -254,8 +254,8 @@ L.Map = L.Evented.extend({
 		}, this);
 	},
 
-	loadDocument: function() {
-		this._socket.connect();
+	loadDocument: function(socket) {
+		this._socket.connect(socket);
 	},
 
 	sendInitUNOCommands: function() {
commit f1d49854c75fb9049ae18092cb85c4915f6a9242
Author:     Henry Castro <hcastro at collabora.com>
AuthorDate: Sun Jan 27 13:42:44 2019 -0400
Commit:     Jan Holesovsky <kendy at collabora.com>
CommitDate: Tue May 14 15:50:22 2019 +0200

    loleaflet: expand inline bundle.css style into html
    
    Change-Id: Id26180777a1b9838c3a9b5dc1e541023d0299595

diff --git a/loleaflet/Makefile.am b/loleaflet/Makefile.am
index 8b93f4a8e..a952cac41 100644
--- a/loleaflet/Makefile.am
+++ b/loleaflet/Makefile.am
@@ -248,6 +248,7 @@ $(builddir)/dist/loleaflet.html: $(srcdir)/html/loleaflet.html.m4 $(LOLEAFLET_HT
 		-DGTKAPP=$(ENABLE_GTKAPP) \
 		-DMOBILEAPPNAME="$(APP_NAME)" \
 		-DLOLEAFLET_CSS="$(subst $(SPACE),$(COMMA),$(LOLEAFLET_CSS_M4))" \
+		-DBUNDLE_CSS="$(abs_builddir)/dist/bundle.css" \
 		-DLOLEAFLET_JS="$(subst $(SPACE),$(COMMA),$(GLOBAL_JS) $(NODE_MODULES_JS) \
 		$(call LOLEAFLET_JS,$(srcdir)/build/build.js) \
 		$(patsubst %.js,plugins/draw-$(DRAW_VERSION)/%.js,$(call LOLEAFLET_JS,$(srcdir)/plugins/draw-$(DRAW_VERSION)/build/build.js)) \
diff --git a/loleaflet/html/loleaflet.html.m4 b/loleaflet/html/loleaflet.html.m4
index b0e1bd5c1..54dc9fb45 100644
--- a/loleaflet/html/loleaflet.html.m4
+++ b/loleaflet/html/loleaflet.html.m4
@@ -44,16 +44,16 @@ var Base64ToArrayBuffer = function(base64Str) {
 </script>
 
 ifelse(MOBILEAPP,[true],
-  ifelse(DEBUG,[true],
+  [ifelse(DEBUG,[true],
     foreachq([fileCSS],[LOLEAFLET_CSS],[<link rel="stylesheet" href="fileCSS" />
   ]),
-    [<link rel="stylesheet" href="bundle.css" />
-  ]),
-  ifelse(DEBUG,[true],
+    [<style>syscmd([cat ]BUNDLE_CSS)</style>
+  ])],
+  [ifelse(DEBUG,[true],
     foreachq([fileCSS],[LOLEAFLET_CSS],[<link rel="stylesheet" href="%SERVICE_ROOT%/loleaflet/%VERSION%/fileCSS" />
   ]),
-    [<link rel="stylesheet" href="%SERVICE_ROOT%/loleaflet/%VERSION%/bundle.css" />
-  ])dnl
+    [<style>syscmd([cat ]BUNDLE_CSS)</style>
+  ])]dnl
 )dnl
 <!--%BRANDING_CSS%--> <!-- add your logo here -->
 ifelse(IOSAPP,[true],
commit c3feda5e71eb0c414243aff396602ceffd0c21d4
Author:     Henry Castro <hcastro at collabora.com>
AuthorDate: Sun Jan 27 13:27:37 2019 -0400
Commit:     Jan Holesovsky <kendy at collabora.com>
CommitDate: Tue May 14 15:50:22 2019 +0200

    loleaflet: add defer attribute to the script tag
    
    A script that will not run until after the page has loaded
    
    Change-Id: I7a835138ba22e70150db4345629231c59b84973b

diff --git a/loleaflet/html/loleaflet.html.m4 b/loleaflet/html/loleaflet.html.m4
index 440454c5d..b0e1bd5c1 100644
--- a/loleaflet/html/loleaflet.html.m4
+++ b/loleaflet/html/loleaflet.html.m4
@@ -159,7 +159,7 @@ ifelse(MOBILEAPP,[true],
       <p>Copyright _YEAR_, Collabora Productivity Limited.</p>
     </div>
 
-    <script>
+    <script defer>
 ifelse(MOBILEAPP,[true],
      [window.host = '';
       window.serviceRoot = '';
@@ -180,7 +180,7 @@ ifelse(MOBILEAPP,[true],
       window.idleTimeoutSecs = %IDLE_TIMEOUT_SECS%;
       window.tileSize = 256;])
     </script>
-  <script>
+  <script defer>
 
 dnl# For use in conditionals in JS: window.ThisIsAMobileApp, window.ThisIsTheiOSApp,
 dnl# and window.ThisIsTheGtkApp
@@ -201,14 +201,14 @@ ifelse(GTKAPP,[true],
 
 ifelse(MOBILEAPP,[true],
   ifelse(DEBUG,[true],foreachq([fileJS],[LOLEAFLET_JS],
-  [    <script src="fileJS"></script>
+  [    <script src="fileJS" defer></script>
   ]),
-  [    <script src="bundle.js"></script>
+  [    <script src="bundle.js" defer></script>
   ]),
   ifelse(DEBUG,[true],foreachq([fileJS],[LOLEAFLET_JS],
-  [    <script src="%SERVICE_ROOT%/loleaflet/%VERSION%/fileJS"></script>
+  [    <script src="%SERVICE_ROOT%/loleaflet/%VERSION%/fileJS" defer></script>
   ]),
-  [    <script src="%SERVICE_ROOT%/loleaflet/%VERSION%/bundle.js"></script>
+  [    <script src="%SERVICE_ROOT%/loleaflet/%VERSION%/bundle.js" defer></script>
   ])
 )dnl
     <!--%BRANDING_JS%--> <!-- logo onclick handler -->
commit 33b248886d9d3fce1a908196398c2be910dd1bea
Author:     Henry Castro <hcastro at collabora.com>
AuthorDate: Sat Jan 26 17:21:48 2019 -0400
Commit:     Jan Holesovsky <kendy at collabora.com>
CommitDate: Tue May 14 15:50:22 2019 +0200

    loleaflet: indent global.js
    
    Change-Id: Ib04a18bcedb26ce267a80fd7990454f590de1a3d

diff --git a/loleaflet/js/global.js b/loleaflet/js/global.js
index c7fed9b39..9b529af8b 100644
--- a/loleaflet/js/global.js
+++ b/loleaflet/js/global.js
@@ -1,54 +1,52 @@
 /* -*- js-indent-level: 8 -*- */
-/* global loleafletLogging */
-/*eslint indent: [error, "tab", { "outerIIFEBody": 0 }]*/
 (function (global) {
 
-// If not debug, don't print anything on the console
-// except in tile debug mode (Ctrl-Shift-Alt-d)
-console.log2 = console.log;
-if (loleafletLogging !== 'true') {
-	var methods = ['warn', 'info', 'debug', 'trace', 'log', 'assert', 'time', 'timeEnd'];
-	for (var i = 0; i < methods.length; i++) {
-		console[methods[i]] = function() {};
+	// If not debug, don't print anything on the console
+	// except in tile debug mode (Ctrl-Shift-Alt-d)
+	console.log2 = console.log;
+	if (global.loleafletLogging !== 'true') {
+		var methods = ['warn', 'info', 'debug', 'trace', 'log', 'assert', 'time', 'timeEnd'];
+		for (var i = 0; i < methods.length; i++) {
+			console[methods[i]] = function() {};
+		}
 	}
-}
 
-// fix jquery-ui
-// var jQuery = require('jquery');
-global.require = function (path) {
-	if (path=='jquery') {
-		return global.jQuery;
-	}
-};
+	// fix jquery-ui
+	// var jQuery = require('jquery');
+	global.require = function (path) {
+		if (path=='jquery') {
+			return global.jQuery;
+		}
+	};
 
-global.getParameterByName = function (name) {
-	name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
-	var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
-	var results = regex.exec(location.search);
-	return results === null ? '' : results[1].replace(/\+/g, ' ');
-};
+	global.getParameterByName = function (name) {
+		name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
+		var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
+		var results = regex.exec(location.search);
+		return results === null ? '' : results[1].replace(/\+/g, ' ');
+	};
 
-global._ = function (string) {
-	// In the mobile app case we can't use the stuff from l10n-for-node, as that assumes HTTP.
-	if (window.ThisIsTheiOSApp) {
-		// We use another approach just for iOS for now.
-		if (window.LOCALIZATIONS.hasOwnProperty(string)) {
-			// window.webkit.messageHandlers.debug.postMessage('_(' + string + '): YES: ' + window.LOCALIZATIONS[string]);
-			var result = window.LOCALIZATIONS[string];
-			if (window.LANG === 'de-CH') {
-				result = result.replace(/ß/g, 'ss');
+	global._ = function (string) {
+		// In the mobile app case we can't use the stuff from l10n-for-node, as that assumes HTTP.
+		if (window.ThisIsTheiOSApp) {
+			// We use another approach just for iOS for now.
+			if (window.LOCALIZATIONS.hasOwnProperty(string)) {
+				// window.webkit.messageHandlers.debug.postMessage('_(' + string + '): YES: ' + window.LOCALIZATIONS[string]);
+				var result = window.LOCALIZATIONS[string];
+				if (window.LANG === 'de-CH') {
+					result = result.replace(/ß/g, 'ss');
+				}
+				return result;
+			} else {
+				// window.webkit.messageHandlers.debug.postMessage('_(' + string + '): NO');
+				return string;
 			}
-			return result;
+		} else if (window.ThisIsAMobileApp) {
+			// And bail out without translations on other mobile platforms.
+			return string.toLocaleString();
 		} else {
-			// window.webkit.messageHandlers.debug.postMessage('_(' + string + '): NO');
-			return string;
+			return string.toLocaleString();
 		}
-	} else if (window.ThisIsAMobileApp) {
-		// And bail out without translations on other mobile platforms.
-		return string;
-	} else {
-		return string.toLocaleString();
-	}
-};
+	};
 
 }(window));


More information about the Libreoffice-commits mailing list