[Libreoffice-commits] online.git: 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 5f110789a108f4c75d162dd8e1afaa40fdafc4b7
Author:     Marco Cecchetti <marco.cecchetti at collabora.com>
AuthorDate: Mon Jul 20 18:53:18 2020 +0200
Commit:     Andras Timar <andras.timar at collabora.com>
CommitDate: Wed Jul 22 16:02:40 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 <jenkinscollaboraoffice at gmail.com>
    Reviewed-by: Andras Timar <andras.timar at collabora.com>

diff --git a/loleaflet/src/control/Control.DocumentNameInput.js b/loleaflet/src/control/Control.DocumentNameInput.js
index 7ccc5993d..730dd0383 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