diff options
Diffstat (limited to 'kvision-modules/kvision-bootstrap-datetime/src/main/kotlin/pl')
3 files changed, 649 insertions, 0 deletions
diff --git a/kvision-modules/kvision-bootstrap-datetime/src/main/kotlin/pl/treksoft/kvision/KVManagerDatetime.kt b/kvision-modules/kvision-bootstrap-datetime/src/main/kotlin/pl/treksoft/kvision/KVManagerDatetime.kt new file mode 100644 index 00000000..41f8620f --- /dev/null +++ b/kvision-modules/kvision-bootstrap-datetime/src/main/kotlin/pl/treksoft/kvision/KVManagerDatetime.kt @@ -0,0 +1,75 @@ +/* + * 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. + */ +internal object KVManagerDatetime { + init { + require("bootstrap-datetime-picker/css/bootstrap-datetimepicker.min.css") + 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") + } + + internal fun init() {} +} diff --git a/kvision-modules/kvision-bootstrap-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTime.kt b/kvision-modules/kvision-bootstrap-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTime.kt new file mode 100644 index 00000000..7fb35057 --- /dev/null +++ b/kvision-modules/kvision-bootstrap-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.DateFormControl +import pl.treksoft.kvision.form.FieldLabel +import pl.treksoft.kvision.form.InvalidFeedback +import pl.treksoft.kvision.panel.SimplePanel +import pl.treksoft.kvision.utils.SnOn +import kotlin.js.Date + +/** + * 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: Date? = null, name: String? = null, format: String = "YYYY-MM-DD HH:mm", label: String? = null, + rich: Boolean = false +) : SimplePanel(setOf("form-group")), DateFormControl { + + /** + * 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 invalidFeedback: InvalidFeedback = InvalidFeedback().apply { visible = false } + + init { + @Suppress("LeakingThis") + input.eventTarget = this + this.addInternal(flabel) + this.addInternal(input) + this.addInternal(invalidFeedback) + counter++ + } + + override fun getSnClass(): List<StringBoolPair> { + val cl = super.getSnClass().toMutableList() + if (validatorError != null) { + cl.add("text-danger" to true) + } + return cl + } + + @Suppress("UNCHECKED_CAST") + override fun <T : Widget> setEventListener(block: SnOn<T>.() -> Unit): Widget { + input.setEventListener(block) + return this + } + + override fun setEventListener(block: SnOn<Widget>.() -> 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: Date? = 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-bootstrap-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt b/kvision-modules/kvision-bootstrap-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt new file mode 100644 index 00000000..66cb6cc0 --- /dev/null +++ b/kvision-modules/kvision-bootstrap-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt @@ -0,0 +1,328 @@ +/* + * 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.form.ValidationStatus +import pl.treksoft.kvision.i18n.I18n +import pl.treksoft.kvision.types.toDateF +import pl.treksoft.kvision.types.toStringF +import pl.treksoft.kvision.utils.obj +import kotlin.js.Date + +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: Date? = null, format: String = "YYYY-MM-DD HH:mm", + classes: Set<String> = setOf() +) : Widget(classes + "form-control"), FormInput { + + private var initialized = false + + init { + this.setInternalEventListener<DateTimeInput> { + 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) { refresh(); checkDisabled() } + /** + * 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() + /** + * The validation status of the input. + */ + override var validationStatus: ValidationStatus? 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<Int>()) { 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<StringBoolPair> { + val cl = super.getSnClass().toMutableList() + validationStatus?.let { + cl.add(it.className to true) + } + size?.let { + cl.add(it.className to true) + } + return cl + } + + override fun getSnAttrs(): List<StringPair> { + 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 + } + + private fun checkDisabled() { + if (disabled) { + if (initialized) { + getElementJQueryD()?.datetimepicker("remove") + initialized = false + } + } else { + if (!initialized) { + this.initDateTimePicker() + this.initEventHandlers() + this.refreshState() + initialized = true + } + } + } + + @Suppress("UnsafeCastFromDynamic") + protected open fun refreshState() { + value?.let { + getElementJQueryD()?.datetimepicker("update", it) + } ?: 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.toDateF(format) + } else { + this.value = null + } + } + + /** + * Open date/time chooser popup. + */ + open fun showPopup() { + if (initialized) getElementJQueryD()?.datetimepicker("show") + } + + /** + * Hides date/time chooser popup. + */ + open fun hidePopup() { + if (initialized) getElementJQueryD()?.datetimepicker("hide") + } + + @Suppress("UnsafeCastFromDynamic") + override fun afterInsert(node: VNode) { + if (!this.disabled) { + this.initDateTimePicker() + this.initEventHandlers() + this.refreshState() + initialized = true + } + } + + override fun afterDestroy() { + if (initialized) { + getElementJQueryD()?.datetimepicker("remove") + initialized = false + } + } + + 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 + }) + } + + private fun initEventHandlers() { + this.getElementJQuery()?.on("changeDate") { e, _ -> + @Suppress("UnsafeCastFromDynamic") + this.dispatchEvent("change", obj { detail = e }) + } + this.getElementJQuery()?.on("show") { e, _ -> + @Suppress("UnsafeCastFromDynamic") + this.dispatchEvent("showBsDateTime", obj { detail = e }) + } + this.getElementJQuery()?.on("hide") { e, _ -> + @Suppress("UnsafeCastFromDynamic") + this.dispatchEvent("hideBsDateTime", obj { detail = e }) + } + } + + /** + * 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. + */ + override fun focus() { + getElementJQuery()?.focus() + } + + /** + * Makes the input element blur. + */ + override 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: Date? = null, format: String = "YYYY-MM-DD HH:mm", classes: Set<String> = setOf(), + init: (DateTimeInput.() -> Unit)? = null + ): DateTimeInput { + val dateTimeInput = DateTimeInput(value, format, classes).apply { init?.invoke(this) } + this.add(dateTimeInput) + return dateTimeInput + } + } +} |