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

Michael Meeks (via logerrit) logerrit at kemper.freedesktop.org
Mon Jun 8 13:42:23 UTC 2020


 loleaflet/html/loleaflet.html.m4                    |    2 +
 loleaflet/src/control/Control.JSDialogBuilder.js    |   36 ++++++++++----------
 loleaflet/src/control/Control.NotebookbarBuilder.js |    2 -
 loleaflet/src/core/LOUtil.js                        |   19 ++++++++++
 loleaflet/src/layer/FormFieldButtonLayer.js         |    2 -
 loleaflet/src/layer/marker/Annotation.js            |    2 -
 loleaflet/src/layer/tile/TileLayer.js               |    2 -
 loleaflet/src/map/Map.js                            |    2 -
 8 files changed, 44 insertions(+), 23 deletions(-)

New commits:
commit 33ae2bec0fddd3f21ef2278ada0b8ac62252d87d
Author:     Michael Meeks <michael.meeks at collabora.com>
AuthorDate: Mon Jun 8 13:28:55 2020 +0100
Commit:     Michael Meeks <michael.meeks at collabora.com>
CommitDate: Mon Jun 8 15:42:04 2020 +0200

    Proxy: centralize URL building and use absolute URL for images.
    
    Fixes missing images on mobile.
    
    Change-Id: If5f858cec5fc81ea50c4679162b36eb000f6d872
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/95803
    Tested-by: Jenkins
    Reviewed-by: Michael Meeks <michael.meeks at collabora.com>

diff --git a/loleaflet/html/loleaflet.html.m4 b/loleaflet/html/loleaflet.html.m4
index 547c603c5..d3c3e21de 100644
--- a/loleaflet/html/loleaflet.html.m4
+++ b/loleaflet/html/loleaflet.html.m4
@@ -231,6 +231,7 @@ m4_ifelse(MOBILEAPP,[true],
 m4_ifelse(MOBILEAPP,[true],
      [window.host = '';
       window.serviceRoot = '';
+      window.versionPath = '%VERSION%';
       window.accessToken = '';
       window.accessTokenTTL = '';
       window.accessHeader = '';
@@ -246,6 +247,7 @@ m4_ifelse(MOBILEAPP,[true],
       window.tileSize = 256;],
      [window.host = '%HOST%';
       window.serviceRoot = '%SERVICE_ROOT%';
+      window.versionPath = '%VERSION%';
       window.accessToken = '%ACCESS_TOKEN%';
       window.accessTokenTTL = '%ACCESS_TOKEN_TTL%';
       window.accessHeader = '%ACCESS_HEADER%';
diff --git a/loleaflet/src/control/Control.JSDialogBuilder.js b/loleaflet/src/control/Control.JSDialogBuilder.js
index 265261177..debd6739a 100644
--- a/loleaflet/src/control/Control.JSDialogBuilder.js
+++ b/loleaflet/src/control/Control.JSDialogBuilder.js
@@ -53,7 +53,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 			var commandName = data.id ? data.id.substring('.uno:'.length) : data.id;
 			if (commandName && commandName.length && L.LOUtil.existsIconForCommand(commandName, builder.map.getDocType())) {
 				var image = L.DomUtil.create('img', 'spinfieldimage', div);
-				var icon = builder._createIconPath(data.id);
+				var icon = builder._createIconURL(data.id);
 				image.src = icon;
 				icon.alt = '';
 			}
@@ -396,7 +396,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		}
 	},
 
-	_explorableEntry: function(parentContainer, data, content, builder, valueNode, iconPath, updateCallback) {
+	_explorableEntry: function(parentContainer, data, content, builder, valueNode, iconURL, updateCallback) {
 		var sectionTitle = L.DomUtil.create('div', 'ui-header level-' + builder._currentDepth + ' ' + builder.options.cssClass + ' ui-widget', parentContainer);
 		$(sectionTitle).css('justify-content', 'space-between');
 		if (data && data.id)
@@ -409,10 +409,10 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		var titleClass = '';
 		console.debug('sectionTitle.id' + sectionTitle.id);
 		if (sectionTitle.id === 'paperformat' || sectionTitle.id === 'orientation' || sectionTitle.id === 'masterslide' || sectionTitle.id === 'SdTableDesignPanel')
-			iconPath = 'images/lc_'+ sectionTitle.id.toLowerCase() +'.svg';
-		if (iconPath) {
+			iconURL = L.LOUtil.getImageURL('lc_'+ sectionTitle.id.toLowerCase() +'.svg');
+		if (iconURL) {
 			var icon = L.DomUtil.create('img', 'menu-entry-icon', leftDiv);
-			icon.src = iconPath;
+			icon.src = iconURL;
 			icon.alt = '';
 			titleClass = 'menu-entry-with-icon';
 		}
@@ -567,9 +567,9 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		if (commandName && commandName.length && L.LOUtil.existsIconForCommand(commandName, builder.map.getDocType())) {
 			var iconName = builder._generateMenuIconName(commandName);
 			var iconSpan = L.DomUtil.create('span', 'menu-entry-icon ' + iconName, sectionTitle);
-			var iconPath = 'images/lc_' + iconName + '.svg';
+			var iconURL = L.LOUtil.getImageURL('images/lc_' + iconName + '.svg');
 			icon = L.DomUtil.create('img', '', iconSpan);
-			icon.src = iconPath;
+			icon.src = iconURL;
 			icon.alt = '';
 			icon.addEventListener('error', function() {
 				icon.style.display = 'none';
@@ -627,7 +627,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		if (contentNode) {
 			var entryId = contentNode.id;
 			if (entryId && entryId.length) {
-				iconPath = builder._createIconPath(entryId);
+				iconPath = builder._createIconURL(entryId);
 			}
 		}
 
@@ -1453,7 +1453,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 
 		var iconPath = null;
 		if (data.command)
-			iconPath = builder._createIconPath(data.command);
+			iconPath = builder._createIconURL(data.command);
 
 		builder._explorableEntry(parentContainer, data, contentNode, builder, valueNode, iconPath);
 
@@ -1475,7 +1475,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 			if (image) {
 				image = image.substr(0, image.lastIndexOf('.'));
 				image = image.substr(image.lastIndexOf('/') + 1);
-				image = 'url("images/' + image + '.svg")';
+				image = 'url("' + L.LOUtil.getImageURL(image + '.svg') + '")';
 			}
 
 			if (image64) {
@@ -1548,7 +1548,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		return false;
 	},
 
-	_createIconPath: function(name) {
+	_createIconURL: function(name) {
 		if (!name)
 			return '';
 
@@ -1557,7 +1557,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		if (name.substr(0, prefixLength) == '.uno:')
 			cleanName = name.substr(prefixLength);
 		cleanName = encodeURIComponent(cleanName).replace(/\%/g, '');
-		return 'images/lc_' + cleanName.toLowerCase() + '.svg';
+		return L.LOUtil.getImageURL('lc_' + cleanName.toLowerCase() + '.svg');
 	},
 
 	// make a class identifier from parent's id by walking up the tree
@@ -1589,7 +1589,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 			var id = encodeURIComponent(data.command.substr('.uno:'.length)).replace(/\%/g, '');
 			div.id = id;
 
-			var icon = builder._createIconPath(data.command);
+			var icon = builder._createIconURL(data.command);
 			var buttonId = id + 'img';
 
 			button = L.DomUtil.create('img', 'ui-content unobutton', div);
@@ -1782,7 +1782,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 	},
 
 	_clearFormattingControl: function(parentContainer, data, builder) {
-		var iconPath = builder._createIconPath(data.command);
+		var iconPath = builder._createIconURL(data.command);
 		var sectionTitle = L.DomUtil.create('div', 'ui-header ' + builder.options.cssClass + ' level-' + builder._currentDepth + ' mobile-wizard-widebutton ui-widget', parentContainer);
 		sectionTitle.id = 'clearFormatting';
 		$(sectionTitle).css('justify-content', 'space-between');
@@ -1834,7 +1834,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 
 		var buttonId = 'border-' + i;
 		button = L.DomUtil.create('img', 'ui-content borderbutton', div);
-		button.src = 'images/fr0' + i + '.svg';
+		button.src = L.LOUtil.getImageURL('fr0' + i + '.svg');
 		button.id = buttonId;
 
 		$(div).click(function () {
@@ -1883,7 +1883,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 
 		updateFunction(null);
 
-		var iconPath = builder._createIconPath(data.command);
+		var iconPath = builder._createIconURL(data.command);
 		var noColorControl = (data.command !== '.uno:FontColor' && data.command !== '.uno:Color');
 
 		var callback = function(color) {
@@ -1997,9 +1997,9 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		if (commandName && commandName.length && L.LOUtil.existsIconForCommand(commandName, builder.map.getDocType())) {
 			var iconName = builder._generateMenuIconName(commandName);
 			var iconSpan = L.DomUtil.create('span', 'menu-entry-icon ' + iconName, menuEntry);
-			var iconPath = 'images/lc_' + iconName + '.svg';
+			var iconURL = L.LOUtil.getImageURL('lc_' + iconName + '.svg');
 			icon = L.DomUtil.create('img', '', iconSpan);
-			icon.src = iconPath;
+			icon.src = iconURL;
 			icon.alt = '';
 			icon.addEventListener('error', function() {
 				icon.style.display = 'none';
diff --git a/loleaflet/src/control/Control.NotebookbarBuilder.js b/loleaflet/src/control/Control.NotebookbarBuilder.js
index 809af3c35..65edcd7ef 100644
--- a/loleaflet/src/control/Control.NotebookbarBuilder.js
+++ b/loleaflet/src/control/Control.NotebookbarBuilder.js
@@ -218,7 +218,7 @@ L.Control.NotebookbarBuilder = L.Control.JSDialogBuilder.extend({
 			div.title = data.text;
 			$(div).tooltip();
 
-			var icon = builder._createIconPath(data.command);
+			var icon = builder._createIconURL(data.command);
 			var buttonId = id + 'img';
 
 			var button = L.DomUtil.create('img', 'ui-content unobutton', div);
diff --git a/loleaflet/src/core/LOUtil.js b/loleaflet/src/core/LOUtil.js
index 4d144cfc0..617d66433 100644
--- a/loleaflet/src/core/LOUtil.js
+++ b/loleaflet/src/core/LOUtil.js
@@ -82,6 +82,25 @@ L.LOUtil = {
 		return rectangles;
 	},
 
+	/// unwind things to get a good absolute URL
+	getURL: function(path) {
+		if (path === '')
+			return '';
+		if (window.host === '' && window.serviceRoot === '')
+			return path; // mobile
+
+		var realHost = window.host.replace(/^ws/i, 'http');
+		var url = realHost + window.serviceRoot + '/loleaflet/' + window.versionPath;
+		if (path.substr(0,1) !== '/')
+			url += '/';
+		url += path;
+		return url;
+	},
+
+	getImageURL: function(imgName) {
+		return this.getURL('images/' + imgName);
+	},
+
 	/// oldFileName = Example.odt, suffix = new
 	/// returns: Example_new.odt
 	generateNewFileName: function(oldFileName, suffix) {
diff --git a/loleaflet/src/layer/FormFieldButtonLayer.js b/loleaflet/src/layer/FormFieldButtonLayer.js
index 9db313c36..2f55988e4 100644
--- a/loleaflet/src/layer/FormFieldButtonLayer.js
+++ b/loleaflet/src/layer/FormFieldButtonLayer.js
@@ -90,7 +90,7 @@ L.FormFieldButton = L.Layer.extend({
 		button.style.width = container.style.height;
 
 		var image = L.DomUtil.create('img', 'form-field-button-image', button);
-		image.src = 'images/unfold.svg';
+		image.src = L.LOUtil.getImageURL('unfold.svg');
 
 		button.addEventListener('click', this._onClickDropDown);
 
diff --git a/loleaflet/src/layer/marker/Annotation.js b/loleaflet/src/layer/marker/Annotation.js
index 7029fe35e..4766687a3 100644
--- a/loleaflet/src/layer/marker/Annotation.js
+++ b/loleaflet/src/layer/marker/Annotation.js
@@ -203,7 +203,7 @@ L.Annotation = L.Layer.extend({
 		var tdImg = L.DomUtil.create(tagTd, 'loleaflet-annotation-img', tr);
 		var tdAuthor = L.DomUtil.create(tagTd, 'loleaflet-annotation-author', tr);
 		var imgAuthor = L.DomUtil.create('img', 'avatar-img', tdImg);
-		imgAuthor.setAttribute('src', 'images/user.png');
+		imgAuthor.setAttribute('src', L.LOUtil.getImageURL('user.svg'));
 		imgAuthor.setAttribute('width', this.options.imgSize.x);
 		imgAuthor.setAttribute('height', this.options.imgSize.y);
 		this._authorAvatarImg = imgAuthor;
diff --git a/loleaflet/src/layer/tile/TileLayer.js b/loleaflet/src/layer/tile/TileLayer.js
index ded1b572c..fc54013c1 100644
--- a/loleaflet/src/layer/tile/TileLayer.js
+++ b/loleaflet/src/layer/tile/TileLayer.js
@@ -431,7 +431,7 @@ L.TileLayer = L.GridLayer.extend({
 		var tdImg = L.DomUtil.create(tagTd, 'loleaflet-annotation-img', tr);
 		var tdAuthor = L.DomUtil.create(tagTd, 'loleaflet-annotation-author', tr);
 		var imgAuthor = L.DomUtil.create('img', 'avatar-img', tdImg);
-		imgAuthor.setAttribute('src', 'images/user.png');
+		imgAuthor.setAttribute('src', L.LOUtil.getImageURL('user.svg'));
 		imgAuthor.setAttribute('width', 32);
 		imgAuthor.setAttribute('height', 32);
 		this._authorAvatarImg = imgAuthor;
diff --git a/loleaflet/src/map/Map.js b/loleaflet/src/map/Map.js
index 670e625c7..67bac9bfd 100644
--- a/loleaflet/src/map/Map.js
+++ b/loleaflet/src/map/Map.js
@@ -41,7 +41,7 @@ L.Map = L.Evented.extend({
 		tileHeightTwips: window.tileSize * 15,
 		urlPrefix: 'lool',
 		wopiSrc: '',
-		cursorURL: 'images/cursors'
+		cursorURL: L.LOUtil.getURL('cursors')
 	},
 
 	// Control.UIManager instance, set in main.js


More information about the Libreoffice-commits mailing list