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 8bfa1318b246d7c9df2b1d22d2e8094205a53acd
Author:     Michael Meeks <michael.me...@collabora.com>
AuthorDate: Mon Jun 8 13:28:55 2020 +0100
Commit:     Andras Timar <andras.ti...@collabora.com>
CommitDate: Mon Jun 8 22:12:39 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.me...@collabora.com>
    (cherry picked from commit 33ae2bec0fddd3f21ef2278ada0b8ac62252d87d)
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/95821
    Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoff...@gmail.com>
    Reviewed-by: Andras Timar <andras.ti...@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 5498d04dd..71bf67726 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);
@@ -1772,7 +1772,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');
@@ -1824,7 +1824,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 () {
@@ -1873,7 +1873,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) {
@@ -1987,9 +1987,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
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits

Reply via email to