From 0d3e7c87bf74948f83ce006a1d340b0f3f5e68b0 Mon Sep 17 00:00:00 2001 From: Robert Jaros Date: Mon, 8 Oct 2018 13:40:04 +0200 Subject: Refactoring to modules --- .../pl/treksoft/kvision/KVManagerDatetime.kt | 81 ++++++ .../pl/treksoft/kvision/form/time/DateTime.kt | 246 +++++++++++++++++ .../pl/treksoft/kvision/form/time/DateTimeInput.kt | 291 +++++++++++++++++++++ 3 files changed, 618 insertions(+) create mode 100644 kvision-modules/kvision-datetime/src/main/kotlin/pl/treksoft/kvision/KVManagerDatetime.kt create mode 100644 kvision-modules/kvision-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTime.kt create mode 100644 kvision-modules/kvision-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt (limited to 'kvision-modules/kvision-datetime/src/main/kotlin/pl') diff --git a/kvision-modules/kvision-datetime/src/main/kotlin/pl/treksoft/kvision/KVManagerDatetime.kt b/kvision-modules/kvision-datetime/src/main/kotlin/pl/treksoft/kvision/KVManagerDatetime.kt new file mode 100644 index 00000000..cde55b1e --- /dev/null +++ b/kvision-modules/kvision-datetime/src/main/kotlin/pl/treksoft/kvision/KVManagerDatetime.kt @@ -0,0 +1,81 @@ +/* + * Copyright (c) 2017-present Robert Jaros + * + * 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. + */ +package pl.treksoft.kvision + +internal val KVManagerDatetimeInit = KVManagerDatetime.init() + +/** + * Internal singleton object which initializes and configures KVision datetime module. + */ +@Suppress("EmptyCatchBlock", "TooGenericExceptionCaught") +internal object KVManagerDatetime { + fun init() {} + + private val bootstrapDateTimePickerCss = try { + require("bootstrap-datetime-picker/css/bootstrap-datetimepicker.min.css") + } catch (e: Throwable) { + } + private val bootstrapDateTimePicker = try { + require("bootstrap-datetime-picker/js/bootstrap-datetimepicker.min.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.ar.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.az.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.bg.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.bn.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.ca.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.cs.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.da.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.de.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.ee.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.el.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.es.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.fi.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.fr.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.he.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.hr.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.hu.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.hy.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.id.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.is.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.it.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.ja.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.ko.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.lt.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.lv.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.nl.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.no.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.pl.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.pt.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.ro.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.rs.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.ru.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.sk.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.sl.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.sv.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.th.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.tr.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.ua.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.uk.js") + require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.zh.js") + } catch (e: Throwable) { + } + +} diff --git a/kvision-modules/kvision-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTime.kt b/kvision-modules/kvision-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTime.kt new file mode 100644 index 00000000..9cdd0369 --- /dev/null +++ b/kvision-modules/kvision-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTime.kt @@ -0,0 +1,246 @@ +/* + * Copyright (c) 2017-present Robert Jaros + * + * 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. + */ +package pl.treksoft.kvision.form.time + +import pl.treksoft.kvision.core.Container +import pl.treksoft.kvision.core.StringBoolPair +import pl.treksoft.kvision.core.Widget +import pl.treksoft.kvision.form.FieldLabel +import pl.treksoft.kvision.form.HelpBlock +import pl.treksoft.kvision.form.KDateFormControl +import pl.treksoft.kvision.panel.SimplePanel +import pl.treksoft.kvision.types.KDate +import pl.treksoft.kvision.utils.SnOn + +/** + * Form field date/time chooser component. + * + * @constructor + * @param value date/time input value + * @param name the name attribute of the generated HTML input element + * @param format date/time format (default YYYY-MM-DD HH:mm) + * @param label label text bound to the input element + * @param rich determines if [label] can contain HTML code + */ +open class DateTime( + value: KDate? = null, name: String? = null, format: String = "YYYY-MM-DD HH:mm", label: String? = null, + rich: Boolean = false +) : SimplePanel(setOf("form-group")), KDateFormControl { + + /** + * Date/time input value. + */ + override var value + get() = input.value + set(value) { + input.value = value + } + /** + * Date/time format. + */ + var format + get() = input.format + set(value) { + input.format = value + } + /** + * The placeholder for the date/time input. + */ + var placeholder + get() = input.placeholder + set(value) { + input.placeholder = value + } + /** + * Determines if the date/time input is automatically focused. + */ + var autofocus + get() = input.autofocus + set(value) { + input.autofocus = value + } + /** + * Determines if the date/time input is read-only. + */ + var readonly + get() = input.readonly + set(value) { + input.readonly = value + } + /** + * Day of the week start. 0 (Sunday) to 6 (Saturday). + */ + var weekStart + get() = input.weekStart + set(value) { + input.weekStart = value + } + /** + * Days of the week that should be disabled. Multiple values should be comma separated. + */ + var daysOfWeekDisabled + get() = input.daysOfWeekDisabled + set(value) { + input.daysOfWeekDisabled = value + } + /** + * Determines if *Clear* button should be visible. + */ + var clearBtn + get() = input.clearBtn + set(value) { + input.clearBtn = value + } + /** + * Determines if *Today* button should be visible. + */ + var todayBtn + get() = input.todayBtn + set(value) { + input.todayBtn = value + } + /** + * Determines if the current day should be highlighted. + */ + var todayHighlight + get() = input.todayHighlight + set(value) { + input.todayHighlight = value + } + /** + * The increment used to build the hour view. + */ + var minuteStep + get() = input.minuteStep + set(value) { + input.minuteStep = value + } + /** + * Determines if meridian views are visible in day and hour views. + */ + var showMeridian + get() = input.showMeridian + set(value) { + input.showMeridian = value + } + /** + * The label text bound to the input element. + */ + var label + get() = flabel.content + set(value) { + flabel.content = value + } + /** + * Determines if [label] can contain HTML code. + */ + var rich + get() = flabel.rich + set(value) { + flabel.rich = value + } + + private val idc = "kv_form_time_$counter" + final override val input: DateTimeInput = DateTimeInput(value, format).apply { + this.id = idc + this.name = name + } + final override val flabel: FieldLabel = FieldLabel(idc, label, rich) + final override val validationInfo: HelpBlock = HelpBlock().apply { visible = false } + + init { + @Suppress("LeakingThis") + input.eventTarget = this + this.addInternal(flabel) + this.addInternal(input) + this.addInternal(validationInfo) + counter++ + } + + override fun getSnClass(): List { + val cl = super.getSnClass().toMutableList() + if (validatorError != null) { + cl.add("has-error" to true) + } + return cl + } + + @Suppress("UNCHECKED_CAST") + override fun setEventListener(block: SnOn.() -> Unit): Widget { + input.setEventListener(block) + return this + } + + override fun setEventListener(block: SnOn.() -> Unit): Widget { + input.setEventListener(block) + return this + } + + override fun removeEventListeners(): Widget { + input.removeEventListeners() + return this + } + + /** + * Open date/time chooser popup. + */ + open fun showPopup() { + input.showPopup() + } + + /** + * Hides date/time chooser popup. + */ + open fun hidePopup() { + input.hidePopup() + } + + override fun getValueAsString(): String? { + return input.getValueAsString() + } + + override fun focus() { + input.focus() + } + + override fun blur() { + input.blur() + } + + companion object { + internal var counter = 0 + + /** + * DSL builder extension function. + * + * It takes the same parameters as the constructor of the built component. + */ + fun Container.dateTime( + value: KDate? = null, name: String? = null, format: String = "YYYY-MM-DD HH:mm", label: String? = null, + rich: Boolean = false, init: (DateTime.() -> Unit)? = null + ): DateTime { + val dateTime = DateTime(value, name, format, label, rich).apply { init?.invoke(this) } + this.add(dateTime) + return dateTime + } + } +} diff --git a/kvision-modules/kvision-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt b/kvision-modules/kvision-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt new file mode 100644 index 00000000..1df8a082 --- /dev/null +++ b/kvision-modules/kvision-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt @@ -0,0 +1,291 @@ +/* + * Copyright (c) 2017-present Robert Jaros + * + * 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. + */ +package pl.treksoft.kvision.form.time + +import com.github.snabbdom.VNode +import pl.treksoft.kvision.core.Container +import pl.treksoft.kvision.core.StringBoolPair +import pl.treksoft.kvision.core.StringPair +import pl.treksoft.kvision.core.Widget +import pl.treksoft.kvision.form.FormInput +import pl.treksoft.kvision.form.InputSize +import pl.treksoft.kvision.i18n.I18n +import pl.treksoft.kvision.types.KDate +import pl.treksoft.kvision.types.toJS +import pl.treksoft.kvision.types.toKDateF +import pl.treksoft.kvision.types.toStringF +import pl.treksoft.kvision.utils.obj + +internal const val DEFAULT_MINUTE_STEP = 5 +internal const val MAX_VIEW = 4 + +/** + * Basic date/time chooser component. + * + * @constructor + * @param value date/time input value + * @param format date/time format (default YYYY-MM-DD HH:mm) + * @param classes a set of CSS class names + */ +@Suppress("TooManyFunctions") +open class DateTimeInput( + value: KDate? = null, format: String = "YYYY-MM-DD HH:mm", + classes: Set = setOf() +) : Widget(classes + "form-control"), FormInput { + + init { + this.setInternalEventListener { + change = { + self.changeValue() + } + } + } + + /** + * Date/time input value. + */ + var value by refreshOnUpdate(value, { refreshState() }) + /** + * Date/time format. + */ + var format by refreshOnUpdate(format, { refreshDatePicker() }) + /** + * The placeholder for the date/time input. + */ + var placeholder: String? by refreshOnUpdate() + /** + * The name attribute of the generated HTML input element. + */ + override var name: String? by refreshOnUpdate() + /** + * Determines if the field is disabled. + */ + override var disabled by refreshOnUpdate(false) + /** + * Determines if the text input is automatically focused. + */ + var autofocus: Boolean? by refreshOnUpdate() + /** + * Determines if the date/time input is read-only. + */ + var readonly: Boolean? by refreshOnUpdate() + /** + * The size of the input. + */ + override var size: InputSize? by refreshOnUpdate() + /** + * Day of the week start. 0 (Sunday) to 6 (Saturday). + */ + var weekStart by refreshOnUpdate(0, { refreshDatePicker() }) + /** + * Days of the week that should be disabled. Multiple values should be comma separated. + */ + var daysOfWeekDisabled by refreshOnUpdate(arrayOf(), { refreshDatePicker() }) + /** + * Determines if *Clear* button should be visible. + */ + var clearBtn by refreshOnUpdate(true, { refreshDatePicker() }) + /** + * Determines if *Today* button should be visible. + */ + var todayBtn by refreshOnUpdate(false, { refreshDatePicker() }) + /** + * Determines if the current day should be highlighted. + */ + var todayHighlight by refreshOnUpdate(false, { refreshDatePicker() }) + /** + * The increment used to build the hour view. + */ + var minuteStep by refreshOnUpdate(DEFAULT_MINUTE_STEP, { refreshDatePicker() }) + /** + * Determines if meridian views are visible in day and hour views. + */ + var showMeridian by refreshOnUpdate(false, { refreshDatePicker() }) + + override fun render(): VNode { + return render("input") + } + + override fun getSnClass(): List { + val cl = super.getSnClass().toMutableList() + size?.let { + cl.add(it.className to true) + } + return cl + } + + override fun getSnAttrs(): List { + val sn = super.getSnAttrs().toMutableList() + sn.add("type" to "text") + placeholder?.let { + sn.add("placeholder" to translate(it)) + } + name?.let { + sn.add("name" to it) + } + autofocus?.let { + if (it) { + sn.add("autofocus" to "autofocus") + } + } + readonly?.let { + if (it) { + sn.add("readonly" to "readonly") + } + } + if (disabled) { + sn.add("disabled" to "disabled") + value?.let { + sn.add("value" to it.toStringF(format)) + } + } + return sn + } + + @Suppress("UnsafeCastFromDynamic") + protected open fun refreshState() { + value?.let { + getElementJQueryD()?.datetimepicker("update", it.toJS()) + } ?: run { + getElementJQueryD()?.`val`(null) + getElementJQueryD()?.datetimepicker("update", null) + } + } + + protected open fun refreshDatePicker() { + getElementJQueryD()?.`val`(null) + getElementJQueryD()?.datetimepicker("remove") + initDateTimePicker() + refreshState() + } + + protected open fun changeValue() { + val v = getElementJQuery()?.`val`() as String? + if (v != null && v.isNotEmpty()) { + this.value = v.toKDateF(format) + } else { + this.value = null + } + } + + /** + * Open date/time chooser popup. + */ + open fun showPopup() { + getElementJQueryD()?.datetimepicker("show") + } + + /** + * Hides date/time chooser popup. + */ + open fun hidePopup() { + getElementJQueryD()?.datetimepicker("hide") + } + + @Suppress("UnsafeCastFromDynamic") + override fun afterInsert(node: VNode) { + if (!this.disabled) { + this.initDateTimePicker() + this.getElementJQuery()?.on("changeDate", { e, _ -> + this.dispatchEvent("change", obj { detail = e }) + }) + this.getElementJQuery()?.on("show", { e, _ -> + this.dispatchEvent("showBsDateTime", obj { detail = e }) + }) + this.getElementJQuery()?.on("hide", { e, _ -> + this.dispatchEvent("hideBsDateTime", obj { detail = e }) + }) + refreshState() + } + } + + override fun afterDestroy() { + getElementJQueryD()?.datetimepicker("remove") + } + + private fun initDateTimePicker() { + val datePickerFormat = format.toDatePickerFormat() + val minView = if (format.contains("HH") || format.contains("mm")) 0 else 2 + val maxView = if (format.contains("YY") || format.contains("M") || format.contains("D")) MAX_VIEW else 1 + val startView = if (maxView < 2) maxView else 2 + val language = I18n.language + getElementJQueryD()?.datetimepicker(obj { + this.format = datePickerFormat + this.startView = startView + this.minView = minView + this.maxView = maxView + this.minuteStep = minuteStep + this.todayHighlight = todayHighlight + this.clearBtn = clearBtn + this.todayBtn = todayBtn + this.weekStart = weekStart + this.showMeridian = showMeridian + this.daysOfWeekDisabled = daysOfWeekDisabled + this.autoclose = true + this.language = language + }) + } + + /** + * Get value of date/time input control as String + * @return value as a String + */ + fun getValueAsString(): String? { + return value?.toStringF(format) + } + + /** + * Makes the input element focused. + */ + open fun focus() { + getElementJQuery()?.focus() + } + + /** + * Makes the input element blur. + */ + open fun blur() { + getElementJQuery()?.blur() + } + + companion object { + private fun String.toDatePickerFormat(): String { + return this.replace("YY", "yy").replace("m", "i").replace("MMMM", "{----}").replace("MMM", "{---}") + .replace("M", "m").replace("{----}", "MM").replace("{---}", "M").replace("H", "{-}") + .replace("h", "H").replace("{-}", "h").replace("D", "d").replace("a", "p").replace("A", "P") + } + + /** + * DSL builder extension function. + * + * It takes the same parameters as the constructor of the built component. + */ + fun Container.dateTimeInput( + value: KDate? = null, format: String = "YYYY-MM-DD HH:mm", classes: Set = setOf(), + init: (DateTimeInput.() -> Unit)? = null + ): DateTimeInput { + val dateTimeInput = DateTimeInput(value, format, classes).apply { init?.invoke(this) } + this.add(dateTimeInput) + return dateTimeInput + } + } +} -- cgit