Move DropDownSection into its own file.

Signed-off-by: Gökay Şatır <gokaysatir@collabora.com>
Change-Id: I4cab2546f6828ab3c76ba8a4e06601904a06502e

browser/.beforeprettier

@@ -133,6 +133,7 @@
 /src/layer/tile/AutoFillMarkerSection.ts
 /src/layer/tile/CellCursorSection.ts
 /src/layer/tile/HTMLObjectSection.ts
+/src/layer/tile/CalcValidityDropDownSection.ts
 /src/layer/tile/TextSelectionHandleSection.ts
 /src/layer/tile/CalcTileLayer.js
 /src/layer/tile/CanvasSectionContainer.ts

browser/Makefile.am

@@ -226,6 +226,7 @@ COOL_JS_LST =\
 	src/layer/tile/AutoFillMarkerSection.ts \
 	src/layer/tile/CellCursorSection.ts \
 	src/layer/tile/HTMLObjectSection.ts \
+	src/layer/tile/CalcValidityDropDownSection.ts \
 	src/layer/tile/TextSelectionHandleSection.ts \
 	src/layer/vector/CEventsHandler.ts \
 	src/layer/vector/CPointSet.ts \

browser/src/layer/tile/CalcValidityDropDownSection.ts

@@ -0,0 +1,26 @@
+/* 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 CalcValidityDropDown extends HTMLObjectSection {
+
+	constructor (sectionName: string, documentPosition: cool.SimplePoint, visible: boolean = true) {
+		super(sectionName, 16, 16, documentPosition, 'spreadsheet-drop-down-marker', visible);
+	}
+
+    onClick(point: number[], e: MouseEvent): void {
+		this.stopPropagating();
+		if (app.map._docLayer._validatedCellAddress && app.calc.cellCursorVisible && app.map._docLayer._validatedCellAddress.equals(app.calc.cellAddress.toArray())) {
+			app.map.sendUnoCommand('.uno:DataSelect');
+		}
+    }
+}
+
+app.definitions.calcValidityDropDown = CalcValidityDropDown;

browser/src/layer/tile/CanvasTileLayer.js

@@ -4725,20 +4725,8 @@ L.CanvasTileLayer = L.Layer.extend({
 			if (!app.sectionContainer.getSectionWithName('DropDownArrow')) {
 				let position = new app.definitions.simplePoint(app.calc.cellCursorRectangle.x2, app.calc.cellCursorRectangle.y1);
 
-				let dropDownSection = new app.definitions.htmlObjectSection('DropDownArrow', 16, 16, position, 'spreadsheet-drop-down-marker'); // spreadsheet-drop-down-marker
+				let dropDownSection = new app.definitions.calcValidityDropDown('DropDownArrow', position);
 				app.sectionContainer.addSection(dropDownSection);
-
-				dropDownSection.onClick = function() {
-					dropDownSection.stopPropagating(); // This will be enough after we remove leaflet.
-					if (this._validatedCellAddress && app.calc.cellCursorVisible && this._validatedCellAddress.equals(app.calc.cellAddress.toArray())) {
-						this._map.sendUnoCommand('.uno:DataSelect');
-					}
-				}.bind(this);
-
-				dropDownSection.getHTMLObject().onclick = function(e) {
-					e.stopPropagation(); // We need this because leaflet can catch the event.
-					dropDownSection.onClick();
-				};
 			}
 			else {
 				app.sectionContainer.getSectionWithName('DropDownArrow').setPosition(app.calc.cellCursorRectangle.pX2, app.calc.cellCursorRectangle.pY1);

browser/src/layer/tile/HTMLObjectSection.ts

@@ -36,14 +36,25 @@ class HTMLObjectSection extends CanvasSectionObject {
 		this.sectionProperties.objectHeight = objectHeight;
 		this.sectionProperties.objectDiv = document.createElement('div');
 		this.sectionProperties.objectDiv.className = 'html-object-section';
-		this.sectionProperties.objectDiv.style.width = objectWidth;
-		this.sectionProperties.objectDiv.style.height = objectHeight;
+		this.sectionProperties.objectDiv.style.width = objectWidth + 'px';
+		this.sectionProperties.objectDiv.style.height = objectHeight + 'px';
 
 		if (extraClass)
 			this.sectionProperties.objectDiv.classList.add(extraClass);
 
-		// document-container and canvas overlap entirely. We can append the html object to document-container.
-		document.getElementById('document-container').appendChild(this.sectionProperties.objectDiv);
+		// canvas-container and canvas overlap entirely. We can append the html object to canvas-container.
+		const tempFunction = function(elementToAdd: any) {
+			const container = document.getElementById('canvas-container');
+			if (container) {
+				container.appendChild(elementToAdd);
+			}
+			else {
+				setTimeout(() => {
+					tempFunction(elementToAdd);
+				}, 100);
+			}
+		}
+		tempFunction(this.sectionProperties.objectDiv);
 
 		if (!visible)
 			this.sectionProperties.objectDiv.style.display = 'none';