TOBAGO-2011: Replace date-picker implementation with vaadin
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/context/DateTimeI18n.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/context/DateTimeI18n.java
index 8d01fbe..87375b7 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/context/DateTimeI18n.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/context/DateTimeI18n.java
@@ -19,9 +19,11 @@
package org.apache.myfaces.tobago.internal.context;
+import org.apache.myfaces.tobago.util.ResourceUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
+import javax.faces.context.FacesContext;
import java.lang.invoke.MethodHandles;
import java.text.SimpleDateFormat;
import java.util.Calendar;
@@ -41,6 +43,11 @@
private final String[] dayNamesShort = new String[7];
private final String[] dayNamesMin = new String[7];
private final int firstDay;
+ private final int minDays;
+ private final String today;
+ private final String cancel;
+ private final String clear;
+ private final String week;
private DateTimeI18n(final Locale locale) {
@@ -68,7 +75,14 @@
calendar.add(Calendar.DAY_OF_YEAR, 1);
}
- firstDay = calendar.getFirstDayOfWeek() - 1; // because Java: 1 = Sunday and jQuery UI DatePicker: 0 = Sunday
+ firstDay = calendar.getFirstDayOfWeek() - 1; // because Java: 1 = Sunday and JavaScript: 0 = Sunday
+ minDays = calendar.getMinimalDaysInFirstWeek();
+
+ FacesContext facesContext = FacesContext.getCurrentInstance();
+ today = ResourceUtils.getString(facesContext, "date.today");
+ cancel = ResourceUtils.getString(facesContext, "date.cancel");
+ clear = ResourceUtils.getString(facesContext, "date.clear");
+ week = ResourceUtils.getString(facesContext, "date.week");
}
public static synchronized DateTimeI18n valueOf(final Locale locale) {
@@ -104,4 +118,24 @@
public int getFirstDay() {
return firstDay;
}
+
+ public int getMinDays() {
+ return minDays;
+ }
+
+ public String getToday() {
+ return today;
+ }
+
+ public String getCancel() {
+ return cancel;
+ }
+
+ public String getClear() {
+ return clear;
+ }
+
+ public String getWeek() {
+ return week;
+ }
}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/DateRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/DateRenderer.java
index 11c0c3a..777923e 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/DateRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/DateRenderer.java
@@ -26,8 +26,10 @@
import org.apache.myfaces.tobago.internal.util.StringUtils;
import org.apache.myfaces.tobago.renderkit.css.BootstrapClass;
import org.apache.myfaces.tobago.renderkit.css.BootstrapDateTimePickerClass;
+import org.apache.myfaces.tobago.renderkit.css.CssItem;
import org.apache.myfaces.tobago.renderkit.css.Icons;
import org.apache.myfaces.tobago.renderkit.css.TobagoClass;
+import org.apache.myfaces.tobago.renderkit.css.VaadinClass;
import org.apache.myfaces.tobago.renderkit.html.DataAttributes;
import org.apache.myfaces.tobago.renderkit.html.HtmlAttributes;
import org.apache.myfaces.tobago.renderkit.html.HtmlButtonTypes;
@@ -131,7 +133,7 @@
}
@Override
- protected TobagoClass getRendererCssClass() {
- return null;
+ protected CssItem getRendererCssClass() {
+ return VaadinClass.INPUT;
}
}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/InRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/InRenderer.java
index 2b626fe..599688d 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/InRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/InRenderer.java
@@ -32,6 +32,7 @@
import org.apache.myfaces.tobago.internal.util.RenderUtils;
import org.apache.myfaces.tobago.internal.util.StringUtils;
import org.apache.myfaces.tobago.renderkit.css.BootstrapClass;
+import org.apache.myfaces.tobago.renderkit.css.CssItem;
import org.apache.myfaces.tobago.renderkit.css.TobagoClass;
import org.apache.myfaces.tobago.renderkit.html.HtmlAttributes;
import org.apache.myfaces.tobago.renderkit.html.HtmlElements;
@@ -137,10 +138,10 @@
writer.writeAttribute(HtmlAttributes.PLACEHOLDER, input.getPlaceholder(), true);
}
- final TobagoClass rendererCssClass = getRendererCssClass();
+ final CssItem rendererCssClass = getRendererCssClass();
writer.writeClassAttribute(
rendererCssClass,
- rendererCssClass != null ? rendererCssClass.createMarkup(markup) : null,
+// rendererCssClass != null ? rendererCssClass.createMarkup(markup) : null,
BootstrapClass.borderColor(ComponentUtils.getMaximumSeverity(input)),
BootstrapClass.FORM_CONTROL,
input.getCustomClass());
@@ -203,7 +204,7 @@
protected void encodeEndField(final FacesContext facesContext, final UIComponent component) throws IOException {
}
- protected TobagoClass getRendererCssClass() {
+ protected CssItem getRendererCssClass() {
return TobagoClass.IN;
}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/PageRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/PageRenderer.java
index 73eaf64..d66d746 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/PageRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/PageRenderer.java
@@ -42,6 +42,7 @@
import org.apache.myfaces.tobago.renderkit.RendererBase;
import org.apache.myfaces.tobago.renderkit.css.BootstrapClass;
import org.apache.myfaces.tobago.renderkit.css.TobagoClass;
+import org.apache.myfaces.tobago.renderkit.html.CustomAttributes;
import org.apache.myfaces.tobago.renderkit.html.DataAttributes;
import org.apache.myfaces.tobago.renderkit.html.HtmlAttributes;
import org.apache.myfaces.tobago.renderkit.html.HtmlElements;
@@ -164,9 +165,9 @@
final TobagoClass spread = markup != null && markup.contains(Markup.SPREAD) ? TobagoClass.SPREAD : null;
final String title = page.getLabel();
+ final Locale locale = viewRoot.getLocale();
if (!portlet) {
writer.startElement(HtmlElements.HTML);
- final Locale locale = viewRoot.getLocale();
if (locale != null) {
final String language = locale.getLanguage();
if (language != null) {
@@ -236,6 +237,7 @@
writer.startElement(HtmlElements.TOBAGO_PAGE);
+ writer.writeAttribute(CustomAttributes.LOCALE, locale.toString(), false);
writer.writeClassAttribute(
BootstrapClass.CONTAINER_FLUID,
TobagoClass.PAGE.createMarkup(portlet ? Markup.PORTLET.add(page.getMarkup()) : page.getMarkup()),
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/util/JsonUtils.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/util/JsonUtils.java
index 1cf85f6..cb4c23a 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/util/JsonUtils.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/util/JsonUtils.java
@@ -251,6 +251,11 @@
encode(builder, "dayNamesShort", dateTimeI18n.getDayNamesShort());
encode(builder, "dayNamesMin", dateTimeI18n.getDayNamesMin());
encode(builder, "firstDay", dateTimeI18n.getFirstDay());
+ encode(builder, "minDays", dateTimeI18n.getMinDays());
+ encode(builder, "today", dateTimeI18n.getToday());
+ encode(builder, "cancel", dateTimeI18n.getCancel());
+ encode(builder, "clear", dateTimeI18n.getClear());
+ encode(builder, "week", dateTimeI18n.getWeek());
if (builder.length() - initialLength > 0) {
assert builder.charAt(builder.length() - 1) == ',';
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/VaadinClass.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/VaadinClass.java
new file mode 100644
index 0000000..3a27e39
--- /dev/null
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/VaadinClass.java
@@ -0,0 +1,37 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package org.apache.myfaces.tobago.renderkit.css;
+
+public enum VaadinClass implements CssItem {
+
+ INPUT("input");
+
+ private final String name;
+
+ VaadinClass(final String name) {
+ this.name = name;
+ }
+
+ @Override
+ public String getName() {
+ return name;
+ }
+
+}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/CustomAttributes.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/CustomAttributes.java
index 4a975ce..d6a003d 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/CustomAttributes.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/CustomAttributes.java
@@ -37,6 +37,7 @@
* The index of the tab inside the tab group.
*/
INDEX("index"),
+ LOCALE("locale"),
LOCAL_MENU("local-menu"),
MAX_ITEMS("max-items"),
MIN_CHARS("min-chars"),
diff --git a/tobago-core/src/main/resources/org/apache/myfaces/tobago/context/TobagoResourceBundle.properties b/tobago-core/src/main/resources/org/apache/myfaces/tobago/context/TobagoResourceBundle.properties
index c89fdd5..9559e30 100644
--- a/tobago-core/src/main/resources/org/apache/myfaces/tobago/context/TobagoResourceBundle.properties
+++ b/tobago-core/src/main/resources/org/apache/myfaces/tobago/context/TobagoResourceBundle.properties
@@ -37,3 +37,7 @@
sheet.toPage=Page {0}
file.selected={} files selected
help.title=Help
+date.today=Today
+date.cancel=Cancel
+date.clear=Clear
+date.week=Week
diff --git a/tobago-core/src/main/resources/org/apache/myfaces/tobago/context/TobagoResourceBundle_de.properties b/tobago-core/src/main/resources/org/apache/myfaces/tobago/context/TobagoResourceBundle_de.properties
index bbdb4b6..64a0486 100644
--- a/tobago-core/src/main/resources/org/apache/myfaces/tobago/context/TobagoResourceBundle_de.properties
+++ b/tobago-core/src/main/resources/org/apache/myfaces/tobago/context/TobagoResourceBundle_de.properties
@@ -37,3 +37,7 @@
sheet.toPage=Seite {0}
file.selected={} Dateien ausgew\u00E4hlt
help.title=Hilfe
+date.today=Heute
+date.cancel=Abbrechen
+date.clear=L\u00F6schen
+date.week=Woche
diff --git a/tobago-core/src/main/resources/org/apache/myfaces/tobago/context/TobagoResourceBundle_es.properties b/tobago-core/src/main/resources/org/apache/myfaces/tobago/context/TobagoResourceBundle_es.properties
index fcb8f7a..c755b82 100644
--- a/tobago-core/src/main/resources/org/apache/myfaces/tobago/context/TobagoResourceBundle_es.properties
+++ b/tobago-core/src/main/resources/org/apache/myfaces/tobago/context/TobagoResourceBundle_es.properties
@@ -37,3 +37,7 @@
sheet.toPage=P\u00E1gina {0}
file.selected={} archivos seleccionados
help.title=Ayudar
+date.today=Hoy
+date.cancel=Cancelar
+date.clear=Borrar
+date.week=Semana
diff --git a/tobago-core/src/main/resources/scss/_tobago.scss b/tobago-core/src/main/resources/scss/_tobago.scss
index 323c02d..95017c9 100644
--- a/tobago-core/src/main/resources/scss/_tobago.scss
+++ b/tobago-core/src/main/resources/scss/_tobago.scss
@@ -231,6 +231,10 @@
margin-left: .3em;
}
+vaadin-date-picker-light {
+ display: block;
+}
+
/*
XXX workaround for Bootstrap with datetimepicker needed for popups
*/
diff --git a/tobago-core/src/test/java/org/apache/myfaces/tobago/internal/util/JsonUtilsUnitTest.java b/tobago-core/src/test/java/org/apache/myfaces/tobago/internal/util/JsonUtilsUnitTest.java
index cf8029f..c9e4ffd 100644
--- a/tobago-core/src/test/java/org/apache/myfaces/tobago/internal/util/JsonUtilsUnitTest.java
+++ b/tobago-core/src/test/java/org/apache/myfaces/tobago/internal/util/JsonUtilsUnitTest.java
@@ -50,7 +50,7 @@
final CommandMap map = new CommandMap();
Assertions.assertEquals("{}", JsonUtils.encode(map));
- Assertions.assertEquals(null, JsonUtils.encode((CommandMap) null));
+ Assertions.assertNull(JsonUtils.encode((CommandMap) null));
}
@Test
@@ -137,7 +137,8 @@
+ dayNamesShort[3] + "','" + dayNamesShort[4] + "','" + dayNamesShort[5] + "','" + dayNamesShort[6] + "'],"
+ "'dayNamesMin':['" + dayNamesMin[0] + "','" + dayNamesMin[1] + "','" + dayNamesMin[2] + "','"
+ dayNamesMin[3] + "','" + dayNamesMin[4] + "','" + dayNamesMin[5] + "','" + dayNamesMin[6] + "'],"
- + "'firstDay':1}").replaceAll("'", "\"");
+ + "'firstDay':1,'minDays':4,'today':'Today','cancel':'Cancel','clear':'Clear','week':'Week'}")
+ .replaceAll("'", "\"");
Assertions.assertEquals(expected, JsonUtils.encode(dateTimeI18n));
}
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/1050-date-vaadin/Date_Vaadin.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/1050-date-vaadin/Date_Vaadin.xhtml
index bd3da47..539e6db 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/1050-date-vaadin/Date_Vaadin.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/1050-date-vaadin/Date_Vaadin.xhtml
@@ -29,8 +29,8 @@
<hr/>
Plain light:
- <vaadin-date-picker-light value="" attr-for-value="value" id="v1">
- <input value="2019-11-11" type="text" id="v2"/>
+ <vaadin-date-picker-light attr-for-value="value" id="v1">
+ <input value="2019-11-11" id="v2" class="input"/>
</vaadin-date-picker-light>
<hr/>
@@ -41,14 +41,6 @@
</tc:date>
<hr/>
- Tobago:
- <vaadin-date-picker-light>
- <tc:date value="#{dateController.submitDate}" id="vaadin-light">
- <f:convertDateTime pattern="yyyy-MM-dd"/>
- </tc:date>
- </vaadin-date-picker-light>
-
- <hr/>
Tobago input:
<tc:in readonly="true" value="#{dateController.submitDate}" id="classic"/>
diff --git a/tobago-theme/tobago-theme-standard/pom.xml b/tobago-theme/tobago-theme-standard/pom.xml
index 615c348..4f56119 100644
--- a/tobago-theme/tobago-theme-standard/pom.xml
+++ b/tobago-theme/tobago-theme-standard/pom.xml
@@ -82,7 +82,7 @@
<dependency>
<groupId>org.webjars</groupId>
<artifactId>momentjs</artifactId>
- <version>2.22.2</version>
+ <version>2.24.0</version>
</dependency>
<dependency>
<groupId>org.webjars.npm</groupId>
@@ -94,11 +94,6 @@
<artifactId>tobago-pack-typeahead</artifactId>
<version>${project.version}</version>
</dependency>
- <dependency>
- <groupId>org.webjars</groupId>
- <artifactId>Eonasdan-bootstrap-datetimepicker</artifactId>
- <version>4.17.47</version>
- </dependency>
</dependencies>
</project>
diff --git a/tobago-theme/tobago-theme-standard/src/main/appended-resources/META-INF/LICENSE b/tobago-theme/tobago-theme-standard/src/main/appended-resources/META-INF/LICENSE
index a3bc379..7023daf 100644
--- a/tobago-theme/tobago-theme-standard/src/main/appended-resources/META-INF/LICENSE
+++ b/tobago-theme/tobago-theme-standard/src/main/appended-resources/META-INF/LICENSE
@@ -177,32 +177,6 @@
THE SOFTWARE.
------------------------------------------------------------------------------
-For Bootstrap-DateTimePicker:
-------------------------------------------------------------------------------
-
-The MIT License (MIT)
-
-Copyright (c) 2015 Jonathan Peterson (@Eonasdan)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
-------------------------------------------------------------------------------
For Momentum:
------------------------------------------------------------------------------
@@ -260,3 +234,21 @@
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
+
+------------------------------------------------------------------------------
+For Vaadin:
+------------------------------------------------------------------------------
+
+Copyright (c) by Vaadin Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
diff --git a/tobago-theme/tobago-theme-standard/src/main/appended-resources/META-INF/NOTICE b/tobago-theme/tobago-theme-standard/src/main/appended-resources/META-INF/NOTICE
index 9ba3265..79e9fd3 100644
--- a/tobago-theme/tobago-theme-standard/src/main/appended-resources/META-INF/NOTICE
+++ b/tobago-theme/tobago-theme-standard/src/main/appended-resources/META-INF/NOTICE
@@ -20,10 +20,10 @@
HubSpot, Inc. (http://github.hubspot.com/tether/)
This product includes software developed by
-Jonathan Peterson (@Eonasdan)
-
-This product includes software developed by
Tim Wood, Iskren Chernev, Moment.js contributors
This product includes software developed by
Federico Zivolo and contributors (PopperJS)
+
+This product includes software developed by
+Vaadin Ltd.
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/package.json b/tobago-theme/tobago-theme-standard/src/main/npm/package.json
index 6f3eeb8..d79929c 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/package.json
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/package.json
@@ -49,6 +49,7 @@
"eslint-plugin-compat": "^3.1.1",
"jest": "24.8.0",
"jquery": "^3.4.1",
+ "moment": "^2.24.0",
"node-sass": "^4.12.0",
"npm-run-all": "^4.1.5",
"popper.js": "^1.15.0",
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/rollup.config.js b/tobago-theme/tobago-theme-standard/src/main/npm/rollup.config.js
index d59e238..478be89 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/rollup.config.js
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/rollup.config.js
@@ -21,7 +21,7 @@
input: 'js/tobago-all.js',
output: {
file: 'js/tobago-bundle.js',
- format: 'iife',
+ format: 'umd', /* tbd: check if "iife" is better? */
sourcemap: true,
name: 'tobago'
},
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/declare.d.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/declare.d.ts
index 11457f4..152dc7e 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/declare.d.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/declare.d.ts
@@ -15,7 +15,6 @@
* limitations under the License.
*/
-declare var moment;
declare var jsf;
interface JQuery {
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-all.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-all.ts
index 04b7144..e9f78c5 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-all.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-all.ts
@@ -19,7 +19,12 @@
import "./tobago-listener";
import "./tobago-core";
import "./tobago-dropdown";
-import "@vaadin/vaadin-date-picker";
+// import "@vaadin/vaadin-date-picker";
+import "@vaadin/vaadin-date-picker/vaadin-date-picker-light.js";
+// import "@vaadin/vaadin-date-time-picker";
+// import "@vaadin/vaadin-time-picker";
+// import "@vaadin/vaadin-combo-box";
+// import "moment"; //XXX moment seems not to work with rollup.js, need to re-check
import "./tobago-date";
import "./tobago-command";
import "./tobago-file";
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-date.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-date.ts
index 86f6e01..11fe889 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-date.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-date.ts
@@ -15,234 +15,58 @@
* limitations under the License.
*/
-import {DatePickerLightElement} from "@vaadin/vaadin-date-picker";
-import {DomUtils} from "./tobago-utils";
+import {DatePickerLightElement} from "@vaadin/vaadin-date-picker/vaadin-date-picker-light";
+// @ts-ignore
+import moment = require("moment");
+import {Page} from "./tobago-page";
-class DateTime extends HTMLElement {
+interface VaadinDate {
+ day: number;
+ month: number;
+ year: number;
+}
- static addPastClass(date: HTMLInputElement): void {
- let today = date.dataset.tobagoToday;
- if (today.length === 10) {
- const todayArray = today.split("-");
- if (todayArray.length === 3) {
- const year = todayArray[0];
- const month = todayArray[1];
- const day = todayArray[2];
- const todayTimestamp = new Date(month + "/" + day + "/" + year).getTime();
+interface VaadinDatePickerI18n {
+ week: string;
+ calendar?: string;
+ clear: string;
+ today: string;
+ cancel: string;
+ firstDayOfWeek: number;
+ monthNames: string[];
+ weekdays: string[];
+ weekdaysShort: string[];
+ formatDate: (date: VaadinDate) => string;
+ formatTitle: (monthName: string, fullYear: string) => string;
+ parseDate: (dateString: string) => VaadinDate;
+}
- const days = document.querySelectorAll(".bootstrap-datetimepicker-widget .datepicker-days td.day[data-day]");
- for (const day of days) {
- const currentTimestamp = new Date(day.getAttribute("data-day")).getTime();
- if (currentTimestamp < todayTimestamp) {
- day.classList.add("past");
- }
- }
- }
- }
- }
+class DatePicker extends HTMLElement {
constructor() {
super();
}
connectedCallback(): void {
+ let vaadinDatePicker = document.createElement("vaadin-date-picker-light") as DatePickerLightElement;
+ vaadinDatePicker.setAttribute("attr-for-value", "value");
+ let input = this.inputElement;
+ const i18n = input.dataset.tobagoDateTimeI18n ? JSON.parse(input.dataset.tobagoDateTimeI18n) : undefined;
+ vaadinDatePicker.i18n = this.createVaadinI18n(i18n);
+ vaadinDatePicker.readonly = input.hasAttribute("readonly"); // todo make attribute
+ vaadinDatePicker.showWeekNumbers = true; // tbd
- const date = this.inputElement;
-
- if (date.readOnly || date.disabled) {
- return;
+ while (this.childNodes.length) {
+ vaadinDatePicker.appendChild(this.firstChild);
}
-
- const analyzed = this.analyzePattern();
- const options = {
- format: analyzed,
- showTodayButton: date.dataset.tobagoTodayButton === "data-tobago-today-button",
- icons: {
- time: "fa fa-clock-o",
- date: "fa fa-calendar",
- up: "fa fa-chevron-up",
- down: "fa fa-chevron-down",
- previous: "fa fa-chevron-left",
- next: "fa fa-chevron-right",
- today: "fa fa-calendar-check-o",
- clear: "fa fa-trash",
- close: "fa fa-times"
- },
- keyBinds: {
- left: function ($widget): void {
- const widget: HTMLDivElement = $widget[0] as HTMLDivElement;
- if (widget === undefined) {
- if (date.selectionStart === date.selectionEnd) {
- if (date.selectionStart > 0 || date.selectionStart > 0) {
- date.selectionStart--;
- date.selectionEnd--;
- }
- } else {
- date.selectionEnd = date.selectionStart;
- }
- } else if (DomUtils.isVisible(widget.querySelector(".datepicker"))) {
- this.date(this.date().clone().subtract(1, "d"));
- }
- },
- right: function ($widget): void {
- const widget: HTMLDivElement = $widget[0] as HTMLDivElement;
- if (widget === undefined) {
- if (date.selectionStart === date.selectionEnd) {
- if (date.selectionStart > 0 || date.selectionStart < date.value.length) {
- date.selectionEnd++;
- date.selectionStart++;
- }
- } else {
- date.selectionStart = date.selectionEnd;
- }
- } else if (DomUtils.isVisible(widget.querySelector(".datepicker"))) {
- this.date(this.date().clone().add(1, "d"));
- }
- },
- enter: function ($widget): void {
- const widget: HTMLDivElement = $widget[0] as HTMLDivElement;
- if (widget !== undefined && DomUtils.isVisible(widget.querySelector(".datepicker"))) {
- this.hide();
- fixKey(13);
- } else {
- //jQuery because used by datetimepicker
- jQuery(date).trigger(jQuery.Event("keypress", {
- which: 13,
- target: date
- }));
- }
- },
- escape: function ($widget): void {
- const widget: HTMLDivElement = $widget[0] as HTMLDivElement;
- if (widget !== undefined && DomUtils.isVisible(widget.querySelector(".datepicker"))) {
- this.hide();
- fixKey(27);
- }
- },
- "delete": function (): void {
- if (date.selectionStart < date.value.length) {
- const selectionStart = date.selectionStart;
- let selectionEnd = date.selectionEnd;
-
- if (selectionStart === selectionEnd && selectionStart < date.value.length) {
- selectionEnd++;
- }
- date.value = date.value.substr(0, selectionStart)
- + date.value.substr(selectionEnd, date.value.length);
-
- date.selectionEnd = selectionStart;
- date.selectionStart = selectionStart;
- }
- }
- },
- widgetParent: ".tobago-page-menuStore"
- };
-
- /**
- * After ESC or ENTER is pressed we need to fire the keyup event manually.
- * see: https://github.com/tempusdominus/bootstrap-4/issues/159
- */
- function fixKey(keyCode): void {
- let keyupEvent = jQuery.Event("keyup");
- keyupEvent.which = keyCode;
- jQuery(date).trigger(keyupEvent);
- }
-
- const i18n = date.dataset.tobagoDateTimeI18n ? JSON.parse(date.dataset.tobagoDateTimeI18n) : undefined;
- if (i18n) {
- const monthNames = i18n.monthNames;
- if (monthNames) {
- moment.localeData()._months = monthNames;
- }
- const monthNamesShort = i18n.monthNamesShort;
- if (monthNamesShort) {
- moment.localeData()._monthsShort = monthNamesShort;
- }
- const dayNames = i18n.dayNames;
- if (dayNames) {
- moment.localeData()._weekdays = dayNames;
- }
- const dayNamesShort = i18n.dayNamesShort;
- if (dayNamesShort) {
- moment.localeData()._weekdaysShort = dayNamesShort;
- }
- const dayNamesMin = i18n.dayNamesMin;
- if (dayNamesMin) {
- moment.localeData()._weekdaysMin = dayNamesMin;
- }
- const firstDay = i18n.firstDay;
- if (firstDay) {
- moment.localeData()._week.dow = firstDay;
- }
- }
-
- let $dateParent = jQuery(date).parent(); //use jQuery because required for datetimepicker
- $dateParent.datetimepicker(options);
-
- // we need to add the change listener here, because
- // in line 1307 of bootstrap-datetimepicker.js
- // the 'stopImmediatePropagation()' stops the change-event
- // execution of line 686 in tobago.js
-
- $dateParent.on("dp.change", function (event: Event): void {
- event.target.dispatchEvent(new Event("change", {bubbles: true}));
- });
-
- // set position
- $dateParent.on("dp.show", function (): void {
- let datepicker: HTMLDivElement = document.querySelector(".bootstrap-datetimepicker-widget");
- let div: HTMLDivElement = this;
- let top, left;
- if (datepicker.classList.contains("bottom")) {
- top = DomUtils.offset(div).top + div.offsetHeight;
- left = DomUtils.offset(div).left;
- datepicker.style.top = top + "px";
- datepicker.style.bottom = "auto";
- datepicker.style.left = left + "px";
- } else if (datepicker.classList.contains("top")) {
- top = DomUtils.offset(div).top - datepicker.offsetHeight;
- left = DomUtils.offset(div).left;
- datepicker.style.top = top + "px";
- datepicker.style.bottom = "auto";
- datepicker.style.left = left + "px";
- }
- DateTime.addPastClass(date);
- });
-
- // set css class in update - like changing the month
- $dateParent.on("dp.update", function (): void {
- DateTime.addPastClass(date);
- });
-
- // fix for bootstrap-datetimepicker v4.17.45
- $dateParent.on("dp.show", function (): void {
- const collapseIn = document.querySelector(".bootstrap-datetimepicker-widget .collapse.in");
- const pickerSwitch = document.querySelector(".bootstrap-datetimepicker-widget .picker-switch a");
-
- if (collapseIn !== null) {
- collapseIn.classList.add("show");
- }
- if (pickerSwitch !== null) {
- pickerSwitch.addEventListener(
- "click", function (): void {
- // the click is executed before togglePicker() function
- let datetimepicker: HTMLDivElement = document.querySelector(".bootstrap-datetimepicker-widget");
- datetimepicker.querySelector(".collapse.in").classList.remove("in");
- datetimepicker.querySelector(".collapse.show").classList.add("in");
- });
- }
- });
- }
-
- get inputElement(): HTMLInputElement {
- return this.querySelector("input") as HTMLInputElement;
+ this.appendChild(vaadinDatePicker);
}
/*
- Get the pattern from the "Java world" (http://docs.oracle.com/javase/8/docs/api/java/text/SimpleDateFormat.html)
- and convert it to 'moment.js'.
- Attention: Not every pattern char is supported.
- */
+Get the pattern from the "Java world" (http://docs.oracle.com/javase/8/docs/api/java/text/SimpleDateFormat.html)
+and convert it to 'moment.js'.
+Attention: Not every pattern char is supported.
+*/
analyzePattern(): string {
const originalPattern = this.inputElement.dataset.tobagoPattern;
@@ -366,33 +190,61 @@
return pattern;
}
-}
+ createVaadinI18n(i18n: any): VaadinDatePickerI18n {
-// XXX switched off
-document.addEventListener("DOMContentLoaded", function (event: Event): void {
- window.customElements.define("tobago-date", DateTime);
-});
+ const pattern = this.analyzePattern();
+ const locale = Page.page().locale;
-class VaadinDatePicker extends HTMLElement {
+ moment.updateLocale(locale, {
+ months: i18n.monthNames,
+ monthsShort: i18n.monthNamesShort,
+ weekdays: i18n.dayNames,
+ weekdaysShort: i18n.dayNamesShort,
+ weekdaysMin: i18n.dayNamesMin,
+ week: {
+ dow: i18n.firstDay,
+ doy: 7 + i18n.firstDay - i18n.minDays // XXX seems not to be supported by VaadinDatePicker: may file an issue!
+ }
+ });
- constructor() {
- super();
+ const localeData = moment.localeData(locale);
+ return {
+
+ cancel: i18n.cancel,
+ clear: i18n.clear,
+ firstDayOfWeek: localeData.firstDayOfWeek(),
+ monthNames: localeData.months(),
+ today: i18n.today,
+ week: i18n.week,
+ weekdays: localeData.weekdays(),
+ weekdaysShort: localeData.weekdaysShort(),
+ formatDate: (date: VaadinDate) => {
+ return moment({
+ date: date.day,
+ month: date.month,
+ year: date.year,
+ })
+ .locale(locale!)
+ .format(pattern);
+ },
+ formatTitle: (monthName: string, fullYear: string) => `${monthName} ${fullYear}`,
+ parseDate: (dateString: string) => {
+ const date = moment(dateString, pattern, locale);
+ return {
+ day: date.date(),
+ month: date.month(),
+ year: date.year(),
+ };
+ },
+ };
}
- connectedCallback(): void {
- let outer = this.querySelector(".tobago-input-group-outer");
- let vaadinDatePicker = document.createElement("vaadin-date-picker-light") as HTMLElement;
- vaadinDatePicker.setAttribute("attr-for-value", "value");
- // vaadinDatePicker.addEventListener("change", (event) => {
- // input.value = vaadinDatePicker.value;
- // });
- this.appendChild(vaadinDatePicker);
- vaadinDatePicker.appendChild(outer);
- // input.classList.add("d-none");
+ get inputElement(): HTMLInputElement {
+ return this.querySelector(".input") as HTMLInputElement;
}
}
// XXX switched on
-// document.addEventListener("DOMContentLoaded", function (event: Event): void {
-// window.customElements.define("tobago-date", VaadinDatePicker);
-// });
+document.addEventListener("DOMContentLoaded", function (event: Event): void {
+ window.customElements.define("tobago-date", DatePicker);
+});
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-page.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-page.ts
index 931fe6b..7c335ba 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-page.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-page.ts
@@ -23,13 +23,13 @@
/**
* The Tobago root element
*/
- static page(): HTMLElement {
+ static page(): Page {
const pages = document.getElementsByTagName("tobago-page");
if (pages.length > 0) {
if (pages.length >= 2) {
console.warn("Found more than one tobago page!");
}
- return pages.item(0) as HTMLElement;
+ return pages.item(0) as Page;
}
console.warn("Found no tobago page!");
return null;
@@ -72,6 +72,14 @@
}
});
}
+
+ get locale(): string {
+ let locale = this.getAttribute("locale");
+ if (!locale) {
+ locale = document.documentElement.lang;
+ }
+ return locale;
+ }
}
document.addEventListener("DOMContentLoaded", function (event: Event): void {
diff --git a/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/tobago-config.xml b/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/tobago-config.xml
index c1436ff..27eadcd 100644
--- a/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/tobago-config.xml
+++ b/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/tobago-config.xml
@@ -43,8 +43,7 @@
<script name="/webjars/tether/1.4.0/js/tether.min.js"/>
<script name="/webjars/popper.js/1.14.3/umd/popper.min.js"/>
<script name="/webjars/bootstrap/4.3.1/js/bootstrap.min.js"/>
- <script name="/webjars/momentjs/2.22.2/min/moment-with-locales.min.js"/>
- <script name="/webjars/Eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"/>
+ <script name="/webjars/momentjs/2.24.0/min/moment-with-locales.min.js"/>
<!-- <script name="/tobago/standard/tobago-bootstrap/${project.version}/node_modules/@babel/polyfill/dist/polyfill.js"/>-->
<script name="/tobago/standard/tobago-bootstrap/${project.version}/js/tobago-polyfill.js"/>
<script name="/tobago/standard/tobago-bootstrap/${project.version}/js/tobago.min.js"/>
@@ -52,7 +51,6 @@
<style name="/webjars/tether/1.4.0/css/tether.min.css"/>
<style name="/tobago/standard/tobago-bootstrap/${project.version}/css/tobago.min.css"/>
<style name="/webjars/font-awesome/4.7.0/css/font-awesome.min.css"/>
- <style name="/webjars/Eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css"/>
</includes>
</resources>
<resources production="false">
@@ -62,8 +60,7 @@
<script name="/webjars/tether/1.4.0/js/tether.js"/>
<script name="/webjars/popper.js/1.14.3/umd/popper.js"/>
<script name="/webjars/bootstrap/4.3.1/js/bootstrap.js"/>
- <script name="/webjars/momentjs/2.22.2/min/moment-with-locales.js"/>
- <script name="/webjars/Eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.js"/>
+ <script name="/webjars/momentjs/2.24.0/min/moment-with-locales.js"/>
<script name="/tobago/standard/tobago-bootstrap/${project.version}/js/tobago-myfaces.js"/>
<script name="/tobago/standard/tobago-bootstrap/${project.version}/js/tobago-deltaspike.js"/>
<!-- <script name="/tobago/standard/tobago-bootstrap/${project.version}/node_modules/@babel/polyfill/dist/polyfill.js"/>-->
@@ -101,7 +98,6 @@
<style name="/webjars/tether/1.4.0/css/tether.css"/>
<style name="/tobago/standard/tobago-bootstrap/${project.version}/css/tobago.css"/>
<style name="/webjars/font-awesome/4.7.0/css/font-awesome.css"/>
- <style name="/webjars/Eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css"/>
</includes>
</resources>
</theme-definition>
