jsdialog: move helpers for scrollable bars to separate file

Signed-off-by: Szymon Kłos <szymon.klos@collabora.com>
Change-Id: I33454bc7d6a8f0c7e2346e36364fa39ba97f826c

browser/Makefile.am

@@ -336,6 +336,7 @@ COOL_JS_LST =\
 	src/control/jsdialog/Util.Events.ts \
 	src/control/jsdialog/Util.FocusCycle.js \
 	src/control/jsdialog/Util.ModalHelper.js \
+	src/control/jsdialog/Util.ScrollableBar.ts \
 	src/control/jsdialog/Util.StateChange.ts \
 	src/control/jsdialog/Widget.Calendar.js \
 	src/control/jsdialog/Widget.ColorPicker.ts \
@@ -796,6 +797,7 @@ pot:
 		src/control/jsdialog/Util.Events.ts \
 		src/control/jsdialog/Util.FocusCycle.js \
 		src/control/jsdialog/Util.ModalHelper.js \
+		src/control/jsdialog/Util.ScrollableBar.ts \
 		src/control/jsdialog/Util.StateChange.ts \
 		src/control/jsdialog/Widget.Calendar.js \
 		src/control/jsdialog/Widget.ColorPicker.ts \

browser/css/jsdialogs.css

@@ -1723,6 +1723,22 @@ input[type='number']:hover::-webkit-outer-spin-button {
 	filter: invert(.9)
 }
 
+/* scrollable content */
+.ui-scrollable-content {
+	overflow-x: scroll;
+	overflow-y: hidden;
+	scrollbar-width: none; /* Firefox >= 64 */
+	overflow: -moz-scrollbars-none; /* Firefox < 64 */
+	-ms-overflow-style: none;  /* Internet Explorer 10+ */
+	display: flex;
+	height: 72px;
+	align-items: center;
+}
+
+.ui-scrollable-content::-webkit-scrollbar { /* WebKit */
+	width: 0;
+	height: 0;
+}
 
 /* formulabar */
 #sc_input_window.formulabar {

browser/css/notebookbar.css

@@ -168,27 +168,11 @@ button.ui-tab.notebookbar {
 
 /* root container */
 
-.notebookbar-scroll-wrapper {
-	overflow-x: scroll;
-	overflow-y: hidden;
-	scrollbar-width: none; /* Firefox >= 64 */
-	overflow: -moz-scrollbars-none; /* Firefox < 64 */
-	-ms-overflow-style: none;  /* Internet Explorer 10+ */
-	display: flex;
-	height: 72px;
-	align-items: center;
-}
-
 .root-container.notebookbar {
 	display: table-cell;
 	vertical-align: middle;
 }
 
-.notebookbar-scroll-wrapper::-webkit-scrollbar { /* WebKit */
-	width: 0;
-	height: 0;
-}
-
 #toolbar-wrapper.hasnotebookbar {
 	background: var(--color-background-lighter);
 	position: relative;
@@ -356,11 +340,6 @@ button.ui-tab.notebookbar {
 	display: none;
 }
 
-/* comboboxes in readonly mode on mobile devices */
-.notebookbar-scroll-wrapper .select2-container {
-	z-index: auto !important;
-}
-
 /* Writer */
 
 /* File Tab */

browser/src/control/Control.Menubar.js

@@ -1617,12 +1617,12 @@ L.Control.Menubar = L.Control.extend({
 	// needed for smartmenus to work inside notebookbar
 	_setupOverflow: function() {
 		$('.main-nav.hasnotebookbar').css('overflow', 'visible');
-		$('.notebookbar-scroll-wrapper').css('overflow', 'visible');
+		$('.ui-scrollable-content').css('overflow', 'visible');
 	},
 
 	_resetOverflow: function() {
 		$('.main-nav').css('overflow', '');
-		$('.notebookbar-scroll-wrapper').css('overflow', '');
+		$('.ui-scrollable-content').css('overflow', '');
 	},
 
 	_onMouseOut: function(e) {

browser/src/control/Control.Notebookbar.js

@@ -13,7 +13,7 @@
  * L.Control.Notebookbar - container for tabbed menu on the top of application
  */
 
-/* global $ _ _UNO */
+/* global $ _ _UNO JSDialog */
 L.Control.Notebookbar = L.Control.extend({
 
 	_currentScrollPosition: 0,
@@ -38,18 +38,18 @@ L.Control.Notebookbar = L.Control.extend({
 			this._RTL = true;
 
 		this.builder = new L.control.notebookbarBuilder({windowId: -2, mobileWizard: this, map: map, cssClass: 'notebookbar', useSetTabs: true});
+
+		// remove old toolbar
 		var toolbar = L.DomUtil.get('toolbar-up');
-		// In case it contains garbage
 		if (toolbar)
-			toolbar.remove();
+			toolbar.outerHTML = '';
+
+		// create toolbar from template
 		$('#toolbar-logo').after(this.map.toolbarUpTemplate.cloneNode(true));
-		toolbar = $('#toolbar-up');
+		this.parentContainer = L.DomUtil.get('toolbar-up');
 
 		this.loadTab(this.getFullJSON(this.HOME_TAB_ID));
 
-		this.createScrollButtons();
-		this.setupResizeHandler();
-
 		this.map.on('contextchange', this.onContextChange, this);
 		this.map.on('notebookbar', this.onNotebookbar, this);
 		this.map.on('updatepermission', this.onUpdatePermission, this);
@@ -216,15 +216,16 @@ L.Control.Notebookbar = L.Control.extend({
 	clearNotebookbar: function() {
 		$('.root-container.notebookbar').remove();
 		$('.notebookbar-tabs-container').remove();
-		$('.notebookbar-scroll-wrapper').remove();
 		$('.notebookbar-shortcuts-bar').remove();
+		$(this.container).remove();
 	},
 
 	loadTab: function(tabJSON) {
 		this.clearNotebookbar();
 
-		var parent = $('#toolbar-up').get(0);
-		this.container = L.DomUtil.create('div', 'notebookbar-scroll-wrapper', parent);
+		this.container = L.DomUtil.create('div', 'notebookbar-scroll-wrapper', this.parentContainer);
+
+		JSDialog.MakeScrollable(this.parentContainer, this.container);
 
 		this.builder.build(this.container, [tabJSON]);
 
@@ -339,7 +340,7 @@ L.Control.Notebookbar = L.Control.extend({
 	},
 
 	showNotebookbarButton: function(buttonId, show) {
-		var button = $('.notebookbar-scroll-wrapper #' + buttonId);
+		var button = $(this.container).children('#' + buttonId);
 		if (show) {
 			button.show();
 		} else {
@@ -347,14 +348,14 @@ L.Control.Notebookbar = L.Control.extend({
 		}
 	},
 
-        showNotebookbarCommand: function(commandId, show) {
+    showNotebookbarCommand: function(commandId, show) {
 		var cssClass;
 		if (commandId.indexOf('.uno:') == 0) {
 			cssClass = 'uno' + commandId.substring(5);
 		} else {
 			cssClass = commandId;
 		}
-		var button = $('.notebookbar-scroll-wrapper div.' + cssClass);
+		var button = $(this.container).children('div.' + cssClass);
 		if (show) {
 			button.show();
 		} else {
@@ -363,75 +364,19 @@ L.Control.Notebookbar = L.Control.extend({
 	},
 
 	setCurrentScrollPosition: function() {
-		this._currentScrollPosition = $('.notebookbar-scroll-wrapper').scrollLeft();
+		this._currentScrollPosition = $(this.container).scrollLeft();
 	},
 
 	scrollToLastPositionIfNeeded: function() {
-		var rootContainer = $('.notebookbar-scroll-wrapper div').get(0);
+		var rootContainer = $(this.container).children('div').get(0);
 
 		if (this._currentScrollPosition && $(rootContainer).outerWidth() > $(window).width()) {
-			$('.notebookbar-scroll-wrapper').animate({ scrollLeft: this._currentScrollPosition }, 0);
+			$(this.container).animate({ scrollLeft: this._currentScrollPosition }, 0);
 		} else {
-			$(window).resize();
+			JSDialog.RefreshScrollables();
 		}
 	},
 
-	createScrollButtons: function() {
-		var parent = $('#toolbar-up').get(0);
-
-		var left = L.DomUtil.create('div', 'w2ui-scroll-left', parent);
-		var right = L.DomUtil.create('div', 'w2ui-scroll-right', parent);
-
-		$(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() {
-		var handler = function() {
-			var container = $('#toolbar-up').get(0);
-			var rootContainer = $('.notebookbar-scroll-wrapper div').get(0);
-
-			if ($(rootContainer).outerWidth() > $(window).width()) {
-				// we have overflowed content
-				var direction = this._RTL ? -1 : 1;
-				if (direction * $('.notebookbar-scroll-wrapper').scrollLeft() > 0) {
-					if (this._RTL)
-						$(container).find('.w2ui-scroll-right').show();
-					else
-						$(container).find('.w2ui-scroll-left').show();
-				} else if (this._RTL)
-					$(container).find('.w2ui-scroll-right').hide();
-				else
-					$(container).find('.w2ui-scroll-left').hide();
-
-				if (direction * $('.notebookbar-scroll-wrapper').scrollLeft() < $(rootContainer).outerWidth() - $(window).width() - 1) {
-					if (this._RTL)
-						$(container).find('.w2ui-scroll-left').show();
-					else
-						$(container).find('.w2ui-scroll-right').show();
-				} else if (this._RTL)
-					$(container).find('.w2ui-scroll-left').hide();
-				else
-					$(container).find('.w2ui-scroll-right').hide();
-			} else {
-				$(container).find('.w2ui-scroll-left').hide();
-				$(container).find('.w2ui-scroll-right').hide();
-			}
-		}.bind(this);
-
-		$(window).resize(handler);
-		$('.notebookbar-scroll-wrapper').scroll(handler);
-	},
-
 	onContextChange: function(event) {
 		if (event.appId !== event.oldAppId) {
 			var childrenArray = undefined; // Use buttons provided by specific Control.Notebookbar implementation by default

browser/src/control/jsdialog/Util.ScrollableBar.ts

@@ -0,0 +1,80 @@
+/* -*- js-indent-level: 8 -*- */
+/*
+ * Copyright the Collabora Online contributors.
+ *
+ * SPDX-License-Identifier: MPL-2.0
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/*
+ * JSDialog.ScrollableBar - helper for creating toolbars with scrolling left/right
+ */
+
+/* global JSDialog $ */
+
+declare var JSDialog: any;
+
+function createScrollButtons(parent: Element, scrollable: Element) {
+	const left = L.DomUtil.create('div', 'w2ui-scroll-left', parent);
+	const right = L.DomUtil.create('div', 'w2ui-scroll-right', parent);
+
+	$(left).click(function () {
+		const scroll = $(scrollable).scrollLeft() - 300;
+		$(scrollable).animate({ scrollLeft: scroll }, 300);
+		setTimeout(function () {
+			$(window).resize();
+		}, 350);
+	});
+
+	$(right).click(function () {
+		const scroll = $(scrollable).scrollLeft() + 300;
+		$(scrollable).animate({ scrollLeft: scroll }, 300);
+		setTimeout(function () {
+			$(window).resize();
+		}, 350);
+	});
+}
+
+function setupResizeHandler(container: Element, scrollable: Element) {
+	const handler = function () {
+		const rootContainer = $(scrollable).children('div').get(0);
+
+		if ($(rootContainer).outerWidth() > $(window).width()) {
+			// we have overflowed content
+			const direction = this._RTL ? -1 : 1;
+			if (direction * $(scrollable).scrollLeft() > 0) {
+				if (this._RTL) $(container).find('.w2ui-scroll-right').show();
+				else $(container).find('.w2ui-scroll-left').show();
+			} else if (this._RTL) $(container).find('.w2ui-scroll-right').hide();
+			else $(container).find('.w2ui-scroll-left').hide();
+
+			if (
+				direction * $(scrollable).scrollLeft() <
+				$(rootContainer).outerWidth() - $(window).width() - 1
+			) {
+				if (this._RTL) $(container).find('.w2ui-scroll-left').show();
+				else $(container).find('.w2ui-scroll-right').show();
+			} else if (this._RTL) $(container).find('.w2ui-scroll-left').hide();
+			else $(container).find('.w2ui-scroll-right').hide();
+		} else {
+			$(container).find('.w2ui-scroll-left').hide();
+			$(container).find('.w2ui-scroll-right').hide();
+		}
+	}.bind(this);
+
+	$(window).resize(handler);
+	$(scrollable).scroll(handler);
+}
+
+JSDialog.MakeScrollable = function (parent: Element, scrollable: Element) {
+	L.DomUtil.addClass(scrollable, 'ui-scrollable-content');
+	createScrollButtons(parent, scrollable);
+	setupResizeHandler(parent, scrollable);
+};
+
+JSDialog.RefreshScrollables = function () {
+	$(window).resize();
+};