jsdialog: execute select action without rebuild

handle additional actions which doesn't retrigger building widgets select action was implemented for icon view Change-Id: I54f9d8553656e7ba85381482a53b4cbd39d70458 Signed-off-by: Szymon Kłos <[email protected]>
zsolt-beringer · Mar 4, 2021 · 809067e · 809067e
1 parent 8446eb4
commit 809067e
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 10 deletions.
diff --git a/loleaflet/src/control/Control.JSDialog.js b/loleaflet/src/control/Control.JSDialog.js
@@ -13,11 +13,13 @@ L.Control.JSDialog = L.Control.extend({
 
 		this.map.on('jsdialog', this.onJSDialog, this);
 		this.map.on('jsdialogupdate', this.onJSUpdate, this);
+		this.map.on('jsdialogaction', this.onJSAction, this);
 	},
 
 	onRemove: function() {
 		this.map.off('jsdialog', this.onJSDialog, this);
 		this.map.off('jsdialogupdate', this.onJSUpdate, this);
+		this.map.off('jsdialogaction', this.onJSAction, this);
 	},
 
 	hasDialogOpened: function() {
@@ -146,6 +148,23 @@ L.Control.JSDialog = L.Control.extend({
 		newControl.scrollTop = scrollTop;
 	},
 
+	onJSAction: function (e) {
+		var data = e.data;
+
+		if (data.jsontype !== 'dialog')
+			return;
+
+		var builder = this.dialogs[data.id] ? this.dialogs[data.id].builder : null;
+		if (!builder)
+			return;
+
+		var dialog = this.dialogs[data.id] ? this.dialogs[data.id].container : null;
+		if (!dialog)
+			return;
+
+		builder.executeAction(dialog, data.data);
+	},
+
 	onPan: function (ev) {
 		var target = this.draggingObject;
 		if (target) {

diff --git a/loleaflet/src/control/Control.JSDialogBuilder.js b/loleaflet/src/control/Control.JSDialogBuilder.js
@@ -1896,6 +1896,10 @@ L.Control.JSDialogBuilder = L.Control.extend({
 			builder._iconViewEntry(entry, data, data.entries[i], builder);
 		}
 
+		var firstSelected = $(container).children('.selected').get(0);
+		if (firstSelected)
+			firstSelected.scrollIntoView({behavior: 'smooth', block: 'center'});
+
 		return false;
 	},
 
@@ -2883,6 +2887,28 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		}
 	},
 
+	// executes actions like changing the selection without rebuilding the widget
+	executeAction: function(container, data) {
+		var control = container.querySelector('#' + data.control_id);
+		if (!control) {
+			console.warn('executeAction: not found control with id: "' + data.control_id + '"');
+			return;
+		}
+
+		switch (data.action_type) {
+		case 'select':
+			$(control).children('.selected').removeClass('selected');
+
+			var pos = parseInt(data.position);
+			var entry = $(control).children().eq(pos);
+
+			entry.addClass('selected');
+			$(entry).get(0).scrollIntoView({behavior: 'smooth', block: 'center'});
+
+			break;
+		}
+	},
+
 	setupStandardButtonHandler: function(button, response, builder) {
 		$(button).unbind('click');
 		$(button).click(function () {

diff --git a/loleaflet/src/control/Control.MobileWizard.js b/loleaflet/src/control/Control.MobileWizard.js
@@ -9,6 +9,7 @@ L.Control.MobileWizard = L.Control.extend({
 		maxHeight: '45%'
 	},
 
+	_builder: null,
 	_inMainMenu: true,
 	_isActive: false,
 	_inBuilding: false,
@@ -36,6 +37,7 @@ L.Control.MobileWizard = L.Control.extend({
 		map.on('mobilewizardback', this.goLevelUp, this);
 		map.on('resize', this._onResize, this);
 		map.on('jsdialogupdate', this.onJSUpdate, this);
+		map.on('jsdialogaction', this.onJSAction, this);
 
 		this._setupBackButton();
 	},
@@ -47,6 +49,7 @@ L.Control.MobileWizard = L.Control.extend({
 		this.map.off('mobilewizardback', this.goLevelUp, this);
 		this.map.off('resize', this._onResize, this);
 		this.map.off('jsdialogupdate', this.onJSUpdate, this);
+		this.map.off('jsdialogaction', this.onJSAction, this);
 	},
 
 	_reset: function() {
@@ -431,8 +434,8 @@ L.Control.MobileWizard = L.Control.extend({
 				history.pushState({context: 'mobile-wizard', level: 0}, 'mobile-wizard-level-0');
 			}
 
-			var builder = L.control.mobileWizardBuilder({mobileWizard: this, map: this.map, cssClass: 'mobile-wizard'});
-			builder.build(this.content.get(0), [data]);
+			this._builder = L.control.mobileWizardBuilder({windowId: data.id, mobileWizard: this, map: this.map, cssClass: 'mobile-wizard'});
+			this._builder.build(this.content.get(0), [data]);
 
 			this._mainTitle = data.text ? data.text : '';
 			this._setTitle(this._mainTitle);
@@ -574,13 +577,11 @@ L.Control.MobileWizard = L.Control.extend({
 		var scrollTop = control.scrollTop;
 
 		control.style.visibility = 'hidden';
-		var builder = new L.control.mobileWizardBuilder({windowId: data.id,
-			mobileWizard: this,
-			map: this.map,
-			cssClass: 'mobile-wizard'});
+		if (!this._builder)
+			return;
 
 		var temporaryParent = L.DomUtil.create('div');
-		builder.build(temporaryParent, [data.control], false);
+		this._builder.build(temporaryParent, [data.control], false);
 		parent.insertBefore(temporaryParent.firstChild, control.nextSibling);
 		L.DomUtil.remove(control);
 
@@ -590,6 +591,21 @@ L.Control.MobileWizard = L.Control.extend({
 		// avoid scrolling when adding new bigger elements to the view
 		$('#mobile-wizard-content').animate({ scrollTop: this._currentScrollPosition }, 0);
 	},
+
+	onJSAction: function (e) {
+		var data = e.data;
+
+		if (data.jsontype === 'notebookbar')
+			return;
+
+		if (!this._builder)
+			return;
+
+		if (!this.content.get(0))
+			return;
+
+		this._builder.executeAction(this.content.get(0), data.data);
+	},
 });
 
 L.control.mobileWizard = function (options) {

diff --git a/loleaflet/src/control/Control.Notebookbar.js b/loleaflet/src/control/Control.Notebookbar.js
@@ -37,6 +37,7 @@ L.Control.Notebookbar = L.Control.extend({
 		this.map.on('notebookbar', this.onNotebookbar, this);
 		this.map.on('updatepermission', this.onUpdatePermission, this);
 		this.map.on('jsdialogupdate', this.onJSUpdate, this);
+		this.map.on('jsdialogaction', this.onJSAction, this);
 
 		$('#toolbar-wrapper').addClass('hasnotebookbar');
 		$('.main-nav').addClass('hasnotebookbar');
@@ -68,6 +69,7 @@ L.Control.Notebookbar = L.Control.extend({
 		this.map.off('updatepermission', this.onUpdatePermission, this);
 		this.map.off('notebookbar');
 		this.map.off('jsdialogupdate', this.onJSUpdate, this);
+		this.map.off('jsdialogaction', this.onJSAction, this);
 		$('.main-nav #document-header').remove();
 		$('.main-nav').removeClass('hasnotebookbar');
 		$('#toolbar-wrapper').removeClass('hasnotebookbar');
@@ -110,6 +112,21 @@ L.Control.Notebookbar = L.Control.extend({
 		newControl.scrollTop = scrollTop;
 	},
 
+	onJSAction: function (e) {
+		var data = e.data;
+
+		if (data.jsontype !== 'notebookbar')
+			return;
+
+		if (!this.builder)
+			return;
+
+		if (!this.container)
+			return;
+
+		this.builder.executeAction(this.container, data.data);
+	},
+
 	onUpdatePermission: function(e) {
 		if (e.perm === 'edit') {
 			this._showNotebookbar = true;

diff --git a/loleaflet/src/core/Socket.js b/loleaflet/src/core/Socket.js
@@ -1086,9 +1086,16 @@ L.Socket = L.Class.extend({
 			return;
 		}
 
-		if (msgData.action && msgData.action === 'update') {
-			this._map.fire('jsdialogupdate', {data: msgData});
-			return;
+		if (msgData.action) {
+			switch (msgData.action) {
+			case 'update':
+				this._map.fire('jsdialogupdate', {data: msgData});
+				return;
+
+			case 'action':
+				this._map.fire('jsdialogaction', {data: msgData});
+				return;
+			}
 		}
 
 		// re/create