Remove latlng usage from ContentControl section.

Signed-off-by: Gökay Şatır <[email protected]>
Change-Id: Id450c65c52f28508381f2ea5f11f4300116cbd36

browser/Makefile.am

@@ -313,6 +313,7 @@ COOL_JS_LST =\
 	src/layer/tile/ImpressTileLayer.js \
 	src/layer/tile/CalcTileLayer.js \
 	src/canvas/sections/CursorHeaderSection.ts \
+	src/canvas/sections/ContentControlDropdownSubSection.ts \
 	src/canvas/sections/ContentControlSection.ts \
 	src/layer/marker/ProgressOverlay.js \
 	src/layer/marker/TextInput.js \

browser/css/writer.css

@@ -1,7 +1,5 @@
 .writer-drop-down-marker {
 	cursor: pointer;
-	margin-left: 3px !important;
-	margin-top: 1px !important;
 	min-width: 22px;
 	min-height: 22px;
 	background: url('images/unfold.svg') center/16px var(--color-background-lighter) no-repeat;

browser/src/canvas/sections/ContentControlDropdownSubSection.ts

@@ -0,0 +1,154 @@
+/* global Proxy _ */
+/*
+ * 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/.
+ */
+
+class ContentControlDropdownSubSection extends HTMLObjectSection {
+	constructor(
+		sectionName: string,
+		documentPosition: cool.SimplePoint,
+		visible: boolean = true,
+		dropdownMarkerWidth: number,
+		dropdownMarkerHeight: number,
+	) {
+		super(
+			sectionName,
+			dropdownMarkerWidth,
+			dropdownMarkerHeight,
+			documentPosition,
+			'writer-drop-down-marker',
+			visible,
+		);
+	}
+
+	private callback(
+		objectType: any,
+		eventType: any,
+		object: any,
+		data: any,
+		builder: any,
+	): void {
+		var fireEvent: string = 'jsdialog';
+		if ((<any>window).mode.isMobile()) {
+			fireEvent = 'mobilewizard';
+		}
+		var closeDropdownJson = {
+			jsontype: 'dialog',
+			type: 'modalpopup',
+			action: 'close',
+			id: builder.windowId,
+		};
+
+		if (eventType === 'close') {
+			app.map.fire(fireEvent, { data: closeDropdownJson, callback: undefined });
+		} else if (eventType === 'select') {
+			app.socket.sendMessage(
+				'contentcontrolevent type=drop-down selected=' + data,
+			);
+			app.map.fire(fireEvent, { data: closeDropdownJson, callback: undefined });
+		}
+	}
+
+	private showDatePicker(): void {
+		if ($('#datepicker').is(':visible')) {
+			$('#datepicker').hide();
+		} else {
+			var datePicker = document.getElementById('datepicker');
+			datePicker.style.left = this.position[0] + this.size[0] + 'px';
+			datePicker.style.top = this.position[1] + this.size[1] + 'px';
+			$('#datepicker').show();
+		}
+	}
+
+	private getDropdownJson(): any {
+		if (!this.sectionProperties.json.items) return;
+
+		const json: any = {
+			children: [
+				{
+					id: 'container-dropdown',
+					type: 'container',
+					text: '',
+					enabled: true,
+					children: [
+						{
+							id: 'contentControlList',
+							type: 'treelistbox',
+							text: '',
+							enabled: true,
+							singleclickactivate: true,
+						},
+					],
+					vertical: true,
+				},
+			],
+			jsontype: 'dialog',
+			type: 'modalpopup',
+			cancellable: true,
+			popupParent: '_POPOVER_',
+			clickToClose: '_POPOVER_',
+			id: 'contentControlModalpopup',
+			isPopupPartialScreen: true,
+		};
+
+		const entries = [];
+		const items = this.sectionProperties.json.items;
+
+		//add entries
+		for (var i in items) {
+			var entry = {
+				text: items[i],
+				columns: [
+					{
+						text: items[i],
+					},
+				],
+				row: i.toString(),
+			};
+			entries.push(entry);
+		}
+		json.children[0].children[0].entries = entries;
+
+		//add position
+		json.posx = this.position[0] + this.size[0];
+		json.posy = this.position[1] + this.size[1];
+
+		return json;
+	}
+
+	onMouseEnter(point: Array<number>, e: MouseEvent): void {
+		app.map.dontHandleMouse = true;
+	}
+
+	onMouseLeave(point: Array<number>, e: MouseEvent): void {
+		app.map.dontHandleMouse = false;
+	}
+
+	onClick(point: number[], e: MouseEvent): void {
+		e.preventDefault();
+		e.stopPropagation();
+		this.stopPropagating();
+
+		if (this.sectionProperties.datePicker) {
+			this.showDatePicker();
+		} else if (this.sectionProperties.json.items) {
+			var fireEvent: string = 'jsdialog';
+			if ((<any>window).mode.isMobile()) {
+				fireEvent = 'mobilewizard';
+			}
+			app.map.fire(fireEvent, {
+				data: this.getDropdownJson(),
+				callback: this.callback,
+			});
+		}
+	}
+}
+
+app.definitions.contentControlDropdownSubSection =
+	ContentControlDropdownSubSection;