Add support for 'dropdown' controls in JSDialog

- Implemented `JSDialog.Dropdown` handler function to manage dropdown controls.
- Updated `JSDialogBuilder` to register the new dropdown handler.
- Modified color picker dropdown JSON to include `noDefaultKeyboardNavigation: true`.
- Removed redundant code handling dropdowns elsewhere.

Signed-off-by: Darshan-upadhyay1110 <darshan.upadhyay@collabora.com>
Change-Id: Idbcc5b2ac878cc71b3066b781eca062bc0b0aba8

browser/Makefile.am

@@ -380,6 +380,7 @@ COOL_JS_LST =\
 	src/control/jsdialog/Widget.ColorPicker.ts \
 	src/control/jsdialog/Widget.Combobox.js \
 	src/control/jsdialog/Widget.Containers.ts \
+	src/control/jsdialog/Widget.DropDown.ts \
 	src/control/jsdialog/Widget.DrawingArea.js \
 	src/control/jsdialog/Widget.FormulabarEdit.js \
 	src/control/jsdialog/Widget.Frame.js \

browser/src/control/Control.JSDialogBuilder.js

@@ -147,6 +147,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		this._controlHandlers['calendar'] = JSDialog.calendar;
 		this._controlHandlers['htmlcontent'] = JSDialog.htmlContent;
 		this._controlHandlers['colorpicker'] = JSDialog.colorPicker;
+		this._controlHandlers['dropdown'] = JSDialog.Dropdown;
 
 		this._controlHandlers['mainmenu'] = JSDialog.container;
 		this._controlHandlers['submenu'] = this._subMenuHandler;

browser/src/control/jsdialog/Util.Dropdown.js

@@ -28,6 +28,7 @@ JSDialog.OpenDropdown = function (id, popupParent, entries, innerCallback, popup
 		jsontype: 'dialog',
 		popupParent: popupParent,
 		popupAnchor: popupAnchor,
+		noDefaultKeyboardNavigation: false,
 		cancellable: true,
 		children: [
 			{
@@ -50,7 +51,6 @@ JSDialog.OpenDropdown = function (id, popupParent, entries, innerCallback, popup
 			return false;
 	};
 
-	var useListKeyboardNavigation = true;
 	for (var i in entries) {
 		var checkedValue = (entries[i].checked === undefined)
 			? undefined : (entries[i].uno && isChecked('.uno' + entries[i].uno));
@@ -70,7 +70,7 @@ JSDialog.OpenDropdown = function (id, popupParent, entries, innerCallback, popup
 			case 'colorpicker':
 				entry = entries[i];
 				// for color picker we have a "KeyboardGridNavigation" function defined separately to handle custom cases
-				useListKeyboardNavigation = false;
+				json.noDefaultKeyboardNavigation = true;
 			break;
 
 			case 'action':
@@ -152,14 +152,7 @@ JSDialog.OpenDropdown = function (id, popupParent, entries, innerCallback, popup
 				JSDialog.CloseDropdown(id);
 		};
 	};
-
 	L.Map.THIS.fire('jsdialog', {data: json, callback: generateCallback(entries)});
-	const listContainer = JSDialog.GetDropdown(id);
-	if(useListKeyboardNavigation && listContainer) {
-		// attach list keybinding for arrow-key navigation in entry list
-		JSDialog.KeyboardListNavigation(listContainer);
-	}
-
 };
 
 JSDialog.CloseDropdown = function (id) {

browser/src/control/jsdialog/Widget.DropDown.ts

@@ -0,0 +1,28 @@
+/* -*- 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.DropDown - build dropdown container with dynamic list
+ */
+
+declare var JSDialog: any;
+
+JSDialog.Dropdown = function (
+	parentContainer: HTMLElement,
+	data: any,
+	builder: any,
+) {
+	builder.build(parentContainer, data.children, data.vertical === true);
+
+	if (!data.noDefaultKeyboardNavigation)
+		JSDialog.KeyboardListNavigation(parentContainer);
+	return false;
+};