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

[Szymon KÅ‚os (via logerrit)]

 loleaflet/css/notebookbar.css                |   18 +++++++-
 loleaflet/src/control/Control.Notebookbar.js |   55 ++++++++++++++++++++++++++-
 2 files changed, 70 insertions(+), 3 deletions(-)

New commits:
commit 878ecc8ab04e2a55040c31dbbf79e48bdb1ad006
Author:     Szymon Kłos <szymon.klos at collabora.com>
AuthorDate: Mon Apr 27 17:01:43 2020 +0200
Commit:     Szymon Kłos <szymon.klos at collabora.com>
CommitDate: Fri May 1 18:27:51 2020 +0200

    notebookbar: handle resize
    
    Change-Id: Ife1be7147b9f11098ec7ed6264dd0b4a1e47c354
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/93282
    Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
    Reviewed-by: Szymon Kłos <szymon.klos at collabora.com>

diff --git a/loleaflet/css/notebookbar.css b/loleaflet/css/notebookbar.css
index 82cffd524..3d0ec5c4b 100644
--- a/loleaflet/css/notebookbar.css
+++ b/loleaflet/css/notebookbar.css
@@ -29,9 +29,23 @@
 
 /* root container */
 
-.root-container.notebookbar {
+.notebookbar-scroll-wrapper ~ .w2ui-scroll-left, .notebookbar-scroll-wrapper ~ .w2ui-scroll-right {
 	position: fixed;
-	top: 20px;
+	top: 37px;
+}
+
+.notebookbar-scroll-wrapper {
+	position: fixed;
+	left: 0px;
+	right: 0px;
+	top: 40px;
+
+	overflow-x: scroll;
+
+	margin-top: -25px;
+
+	/* be sure no scrollbar is visible on the bottom */
+	min-height: 130px;
 }
 
 /* unobuttons */
diff --git a/loleaflet/src/control/Control.Notebookbar.js b/loleaflet/src/control/Control.Notebookbar.js
index 43a680834..90a077692 100644
--- a/loleaflet/src/control/Control.Notebookbar.js
+++ b/loleaflet/src/control/Control.Notebookbar.js
@@ -13,18 +13,26 @@ L.Control.Notebookbar = L.Control.extend({
 		this.map = map;
 
 		this.loadTab(this.getHomeTab());
+
+		this.createScrollButtons();
+		this.setupResizeHandler();
 	},
 
 	clearNotebookbar: function() {
 		$('.root-container.notebookbar').remove();
 		$('.ui-tabs.notebookbar').remove();
+		$('.notebookbar-scroll-wrapper').remove();
 	},
 
 	loadTab: function(tabJSON) {
 		this.clearNotebookbar();
 		tabJSON = JSON.parse(tabJSON);
 		var builder = new L.control.notebookbarBuilder({mobileWizard: this, map: this.map, cssClass: 'notebookbar'});
-		builder.build($('#toolbar-wrapper').get(0), [tabJSON]);
+
+		var parent = $('#toolbar-wrapper').get(0);
+		var container = L.DomUtil.create('div', 'notebookbar-scroll-wrapper', parent);
+
+		builder.build(container, [tabJSON]);
 	},
 
 	setTabs: function(tabs) {
@@ -59,6 +67,51 @@ L.Control.Notebookbar = L.Control.extend({
 	// required, called by builder, not needed in this container
 	setCurrentScrollPosition: function() {},
 
+	createScrollButtons: function() {
+		var parent = $('#toolbar-wrapper').get(0);
+
+		var left = L.DomUtil.create('div', 'w2ui-scroll-left', parent);
+		var right = L.DomUtil.create('div', 'w2ui-scroll-right', parent);
+
+		$(left).css({'height': '80px'});
+		$(right).css({'height': '80px'});
+
+		$(left).click(function () {
+			var scroll = $('.notebookbar-scroll-wrapper').scrollLeft() - 300;
+			$('.notebookbar-scroll-wrapper').animate({ scrollLeft: scroll }, 300);
+			setTimeout(function () { $(window).resize(); }, 350);
+		});
+
+		$(right).click(function () {
+			var scroll = $('.notebookbar-scroll-wrapper').scrollLeft() + 300;
+			$('.notebookbar-scroll-wrapper').animate({ scrollLeft: scroll }, 300);
+			setTimeout(function () { $(window).resize(); }, 350);
+		});
+	},
+
+	setupResizeHandler: function() {
+		$(window).resize(function() {
+			var container = $('#toolbar-wrapper').get(0);
+			var rootContainer = $('.notebookbar-scroll-wrapper table').get(0);
+
+			if ($(rootContainer).outerWidth() > $(window).width()) {
+				// we have overflowed content
+				if ($('.notebookbar-scroll-wrapper').scrollLeft() > 0)
+					$(container).find('.w2ui-scroll-left').show();
+				else
+					$(container).find('.w2ui-scroll-left').hide();
+
+				if ($('.notebookbar-scroll-wrapper').scrollLeft() < $(rootContainer).outerWidth() - $(window).width() - 1)
+					$(container).find('.w2ui-scroll-right').show();
+				else
+				$(container).find('.w2ui-scroll-right').hide();
+			} else {
+				$(container).find('.w2ui-scroll-left').hide();
+				$(container).find('.w2ui-scroll-right').hide();
+			}
+		});
+	},
+
 	getHomeTab: function() {
 		return '';
 	},