widgets: Add a time field

Signed-off-by: Méven Car <meven.car@collabora.com>
Change-Id: I9e3e280db4a0b1f3e3a9df5fe8b6e0bfd97ddaa5

browser/Makefile.am

@@ -346,6 +346,7 @@ COOL_JS_LST =\
 	src/control/jsdialog/Widget.MultilineEdit.js \
 	src/control/jsdialog/Widget.Progressbar.js \
 	src/control/jsdialog/Widget.ScrolledWindow.js \
+	src/control/jsdialog/Widget.Timefield.js \
 	src/control/jsdialog/Widget.TreeView.js \
 	src/control/Control.JSDialog.js \
 	src/control/Control.JSDialogBuilder.js \

browser/css/jsdialogs.css

@@ -723,7 +723,8 @@ input[type='number']:hover::-webkit-outer-spin-button {
 }
 
 .ui-listbox,
-.ui-combobox {
+.ui-combobox,
+.ui-timefield  {
 	box-sizing: border-box;
 	-webkit-appearance: none;
 	-moz-appearance: none;
@@ -777,7 +778,8 @@ input[type='number']:hover::-webkit-outer-spin-button {
 }
 
 /* ui-combobox */
-.ui-combobox {
+.ui-combobox,
+.ui-timefield {
 	border: 1px solid var(--color-border);
 }
 
@@ -1907,3 +1909,8 @@ kbd,
 .jsdialog-container [id^='info-modal-label'] {
 	display: flex;
 }
+
+#DocumentPropertiesDialog #customprops input.ui-timefield {
+	margin-top: auto;
+	margin-bottom: auto;
+}

browser/src/control/Control.JSDialogBuilder.js

@@ -91,6 +91,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		this._controlHandlers['basespinfield'] = this.baseSpinField;
 		this._controlHandlers['spinfield'] = this._spinfieldControl;
 		this._controlHandlers['metricfield'] = this._metricfieldControl;
+		this._controlHandlers['time'] = JSDialog.timeField;
 		this._controlHandlers['formattedfield'] = this._formattedfieldControl;
 		this._controlHandlers['edit'] = this._editControl;
 		this._controlHandlers['formulabaredit'] = JSDialog.formulabarEdit;
@@ -3272,7 +3273,9 @@ L.Control.JSDialogBuilder = L.Control.extend({
 			&& data.type !== 'expander'
 			&& data.type !== 'panel'
 			&& data.type !== 'buttonbox'
-			&& data.type !== 'treelistbox')
+			&& data.type !== 'treelistbox'
+			&& data.type !== 'time'
+			)
 			control.setAttribute('tabIndex', '0');
 	},
 

browser/src/control/jsdialog/Widget.Timefield.js

@@ -0,0 +1,47 @@
+/* -*- 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.Timefield - input field for time data
+ *
+ * Example JSON:
+ * {
+ *     id: 'time',
+ *     type: 'time',
+ *     text: '01:01:01'
+ * }
+ */
+
+/* global JSDialog */
+
+JSDialog.timeField = function (parentContainer, data, builder) {
+	var inputTimeField = L.DomUtil.create('input', builder.options.cssClass + ' ui-timefield', parentContainer);
+	inputTimeField.setAttribute('type', 'time');
+	inputTimeField.setAttribute('step', 1); // forces the display of seconds
+	inputTimeField.setAttribute('id', data.id);
+	inputTimeField.value = data.text;
+
+	inputTimeField.addEventListener('change', function (event) {
+		var timefield = event.target;
+
+		var attrdisabled = timefield.getAttribute('disabled');
+		if (attrdisabled !== 'disabled') {
+			builder.callback('spinfield', 'change', timefield, timefield.value, builder);
+		}
+	});
+
+	var disabled = data.enabled === 'false' || data.enabled === false;
+	if (disabled) {
+		inputTimeField.disabled = true;
+	}
+
+	return false;
+};