From 6b53324c97bfc80ed14dfca6a5dbc879950715b9 Mon Sep 17 00:00:00 2001 From: Robert Jaros Date: Thu, 3 Oct 2019 19:03:21 +0200 Subject: Upgrade to Bootstrap 4. Upgrade to Font Awesome 5. Restructure modules. --- .../pl/treksoft/kvision/KVManagerDatetime.kt | 81 ------ .../pl/treksoft/kvision/form/time/DateTime.kt | 246 ---------------- .../pl/treksoft/kvision/form/time/DateTimeInput.kt | 320 --------------------- 3 files changed, 647 deletions(-) delete mode 100644 kvision-modules/kvision-datetime/src/main/kotlin/pl/treksoft/kvision/KVManagerDatetime.kt delete mode 100644 kvision-modules/kvision-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTime.kt delete 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 deleted file mode 100644 index 4cc71c8b..00000000 --- a/kvision-modules/kvision-datetime/src/main/kotlin/pl/treksoft/kvision/KVManagerDatetime.kt +++ /dev/null @@ -1,81 +0,0 @@ -/* - * 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 deleted file mode 100644 index 3d32fd8c..00000000 --- a/kvision-modules/kvision-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTime.kt +++ /dev/null @@ -1,246 +0,0 @@ -/* - * 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.HelpBlock -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 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: 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-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 deleted file mode 100644 index a375ef35..00000000 --- a/kvision-modules/kvision-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt +++ /dev/null @@ -1,320 +0,0 @@ -/* - * 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.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 = setOf() -) : Widget(classes + "form-control"), FormInput { - - private var initialized = false - - 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) { 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() - /** - * 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 - } - - 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 = setOf(), - init: (DateTimeInput.() -> Unit)? = null - ): DateTimeInput { - val dateTimeInput = DateTimeInput(value, format, classes).apply { init?.invoke(this) } - this.add(dateTimeInput) - return dateTimeInput - } - } -} -- cgit