[Libreoffice-commits] online.git: Branch 'distro/collabora/co-4-2' - loleaflet/src

[Marco Cecchetti (via logerrit)]

 loleaflet/src/control/Control.DocumentNameInput.js |   36 ++++++++++++++++-----
 loleaflet/src/core/Util.js                         |    9 +++++
 2 files changed, 37 insertions(+), 8 deletions(-)

New commits:
commit 9091114121aa52f4112625d2a66ec357eba58d6c
Author:     Marco Cecchetti <marco.cecche...@collabora.com>
AuthorDate: Mon Jul 20 18:53:18 2020 +0200
Commit:     Andras Timar <andras.ti...@collabora.com>
CommitDate: Wed Jul 29 10:17:49 2020 +0200

    leaflet: setup document name input field width
    
    Change-Id: I654bdea578c8768c62db08bd488613f983336d43
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/99140
    Tested-by: Jenkins
    Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoff...@gmail.com>
    Reviewed-by: Andras Timar <andras.ti...@collabora.com>
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/99512

diff --git a/loleaflet/src/control/Control.DocumentNameInput.js 
b/loleaflet/src/control/Control.DocumentNameInput.js
index a01a974f1..16dd68dbd 100644
--- a/loleaflet/src/control/Control.DocumentNameInput.js
+++ b/loleaflet/src/control/Control.DocumentNameInput.js
@@ -11,6 +11,7 @@ L.Control.DocumentNameInput = L.Control.extend({
 
                map.on('doclayerinit', this.onDocLayerInit, this);
                map.on('wopiprops', this.onWopiProps, this);
+               map.on('resize', this.onResize, this);
                $('#document-title-pencil').addClass('editable');
        },
 
@@ -42,11 +43,13 @@ L.Control.DocumentNameInput = L.Control.extend({
 
        documentNameCancel: function() {
                
$('#document-name-input').val(this.map['wopi'].BreadcrumbDocName);
+               this._setNameInputWidth();
                this.map._onGotFocus();
        },
 
        onDocumentNameKeyPress: function(e) {
-               
$('#document-name-input').css('width',(($('#document-name-input').val().length 
+ 1) * 10) + 'px');
+               var tail = (e.keyCode !== 13 && e.keyCode !== 27) ? 'X' : null;
+               this._setNameInputWidth(tail);
                if (e.keyCode === 13) { // Enter key
                        this.documentNameConfirm();
                } else if (e.keyCode === 27) { // Escape key
@@ -66,13 +69,7 @@ L.Control.DocumentNameInput = L.Control.extend({
        },
 
        onDocLayerInit: function() {
-               var value = $('#document-name-input').val();
-               if (value.length < 27) {
-                       $('#document-name-input').attr('size', value.length);
-               }
-               else {
-                       $('#document-name-input').attr('size', '25');
-               }
+               this._setNameInputWidth();
 
                // FIXME: Android app would display a temporary filename, not 
the actual filename
                if (window.ThisIsTheAndroidApp) {
@@ -114,6 +111,29 @@ L.Control.DocumentNameInput = L.Control.extend({
                        $('#document-title-pencil').removeClass('editable');
                        $('#document-name-input').off('keypress', 
this.onDocumentNameKeyPress);
                }
+       },
+
+       onResize: function() {
+               this._setNameInputWidth();
+       },
+
+       _getMaxAvailableWidth: function() {
+               var x = $('#document-titlebar').prop('offsetLeft') + 
$('.document-title').prop('offsetLeft') + 
$('#document-name-input').prop('offsetLeft');
+               var containerWidth = parseInt($('.main-nav').css('width'));
+               var maxWidth = Math.max(containerWidth - x - 30, 0);
+               maxWidth = Math.max(maxWidth, 300); // input field at least 
300px
+               return maxWidth;
+       },
+
+       _setNameInputWidth: function(tail) {
+               var documentNameInput = $('#document-name-input');
+               var content = (typeof tail === 'string') ? 
documentNameInput.val() + tail : documentNameInput.val();
+               var font = documentNameInput.css('font');
+               var textWidth = L.getTextWidth(content, font) + 10;
+               var maxWidth = this._getMaxAvailableWidth();
+               //console.log('_setNameInputWidth: textWidth: ' + textWidth + 
', maxWidth: ' + maxWidth);
+               textWidth = Math.min(textWidth, maxWidth);
+               documentNameInput.css('width', textWidth + 'px');
        }
 });
 
diff --git a/loleaflet/src/core/Util.js b/loleaflet/src/core/Util.js
index 0ea2b0ff6..596dfa756 100644
--- a/loleaflet/src/core/Util.js
+++ b/loleaflet/src/core/Util.js
@@ -199,6 +199,14 @@ L.Util = {
 
        mm100thToInch: function(mm) {
                return mm / 2540;
+       },
+
+       getTextWidth: function(text, font) {
+               var canvas = L.Util.getTextWidth._canvas || 
(L.Util.getTextWidth._canvas = document.createElement('canvas'));
+               var context = canvas.getContext('2d');
+               context.font = font;
+               var metrics = context.measureText(text);
+               return Math.floor(metrics.width);
        }
 };
 
@@ -261,3 +269,4 @@ L.getDpiScaleFactor = L.Util.getDpiScaleFactor;
 L.toggleFullScreen = L.Util.toggleFullScreen;
 L.isEmpty = L.Util.isEmpty;
 L.mm100thToInch = L.Util.mm100thToInch;
+L.getTextWidth = L.Util.getTextWidth;
\ No newline at end of file
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits