From 57da0d71e37adebb72d90292f850c06d4d969547 Mon Sep 17 00:00:00 2001 From: Robert Jaros Date: Tue, 27 Feb 2018 09:33:07 +0100 Subject: [PATCH] Various fixes for window component. --- .../kotlin/pl/treksoft/kvision/KVManager.kt | 2 +- .../pl/treksoft/kvision/window/Window.kt | 98 +++++++++++++------ src/main/resources/css/style.css | 4 + .../pl/treksoft/kvision/window/WindowSpec.kt | 5 +- 4 files changed, 76 insertions(+), 33 deletions(-) diff --git a/src/main/kotlin/pl/treksoft/kvision/KVManager.kt b/src/main/kotlin/pl/treksoft/kvision/KVManager.kt index 4ab7c1d016d..ab4f7e1366a 100644 --- a/src/main/kotlin/pl/treksoft/kvision/KVManager.kt +++ b/src/main/kotlin/pl/treksoft/kvision/KVManager.kt @@ -143,7 +143,7 @@ internal object KVManager { @Suppress("UnsafeCastFromDynamic") internal fun clearResizeEvent(component: Component) { - if (component.getElement().asDynamic().__resizeTrigger__.contentDocument != null) { + if (component.getElement()?.asDynamic()?.__resizeTrigger__?.contentDocument != null) { component.getElement()?.let { elementResizeEvent.unbind(it) } diff --git a/src/main/kotlin/pl/treksoft/kvision/window/Window.kt b/src/main/kotlin/pl/treksoft/kvision/window/Window.kt index f2ed2ec8ec7..79c31e8d2ea 100644 --- a/src/main/kotlin/pl/treksoft/kvision/window/Window.kt +++ b/src/main/kotlin/pl/treksoft/kvision/window/Window.kt @@ -99,7 +99,7 @@ open class Window( /** * Determines if the window is draggable. */ - var isDraggable by refreshOnUpdate(isDraggable, { checkIsDraggable(); }) + var isDraggable by refreshOnUpdate(isDraggable, { checkIsDraggable(); checkHeaderVisibility() }) /** * Determines if Close button is visible. */ @@ -126,11 +126,12 @@ open class Window( private var isResizeEvent = false init { + id = "kv_window_" + counter position = Position.ABSOLUTE overflow = Overflow.HIDDEN @Suppress("LeakingThis") width = contentWidth - zIndex = DEFAULT_Z_INDEX + zIndex = ++zIndexCounter closeIcon.visible = closeButton closeIcon.setEventListener { click = { @@ -148,7 +149,15 @@ open class Window( content.marginBottom = WINDOW_CONTENT_MARGIN_BOTTOM.px } @Suppress("LeakingThis") + setEventListener { + click = { + toFront() + focus() + } + } + @Suppress("LeakingThis") init?.invoke(this) + counter++ } private fun checkHeaderVisibility() { @@ -164,25 +173,27 @@ open class Window( if (isDraggable) { header.setEventListener { mousedown = { e -> - isDrag = true - val dragStartX = this@Window.getElementJQuery()?.position()?.left?.toInt() ?: 0 - val dragStartY = this@Window.getElementJQuery()?.position()?.top?.toInt() ?: 0 - val dragMouseX = e.pageX - val dragMouseY = e.pageY - val moveCallback = { me: Event -> - if (isDrag) { - this@Window.left = (dragStartX + (me as MouseEvent).pageX - dragMouseX).toInt().px - this@Window.top = (dragStartY + (me).pageY - dragMouseY).toInt().px + if (e.button.toInt() == 0) { + isDrag = true + val dragStartX = this@Window.getElementJQuery()?.position()?.left?.toInt() ?: 0 + val dragStartY = this@Window.getElementJQuery()?.position()?.top?.toInt() ?: 0 + val dragMouseX = e.pageX + val dragMouseY = e.pageY + val moveCallback = { me: Event -> + if (isDrag) { + this@Window.left = (dragStartX + (me as MouseEvent).pageX - dragMouseX).toInt().px + this@Window.top = (dragStartY + (me).pageY - dragMouseY).toInt().px + } } + kotlin.browser.window.addEventListener("mousemove", moveCallback) + var upCallback: ((Event) -> Unit)? = null + upCallback = { _ -> + isDrag = false + kotlin.browser.window.removeEventListener("mousemove", moveCallback) + kotlin.browser.window.removeEventListener("mouseup", upCallback) + } + kotlin.browser.window.addEventListener("mouseup", upCallback) } - kotlin.browser.window.addEventListener("mousemove", moveCallback) - var upCallback: ((Event) -> Unit)? = null - upCallback = { _ -> - isDrag = false - kotlin.browser.window.removeEventListener("mousemove", moveCallback) - kotlin.browser.window.removeEventListener("mouseup", upCallback) - } - kotlin.browser.window.addEventListener("mouseup", upCallback) } } } else { @@ -210,12 +221,15 @@ open class Window( if (isResizable) { isResizeEvent = true KVManager.setResizeEvent(this) { - val intWidth = (getElementJQuery()?.width()?.toInt() ?: 0) + 2 - val intHeight = (getElementJQuery()?.height()?.toInt() ?: 0) + 2 - width = intWidth.px - height = intHeight.px - content.width = (intWidth - 2).px - content.height = (intHeight - WINDOW_HEADER_HEIGHT - WINDOW_CONTENT_MARGIN_BOTTOM - 1 - 2).px + val eid = getElementJQuery()?.attr("id") + if (eid == id) { + val intWidth = (getElementJQuery()?.width()?.toInt() ?: 0) + 2 + val intHeight = (getElementJQuery()?.height()?.toInt() ?: 0) + 2 + width = intWidth.px + height = intHeight.px + content.width = (intWidth - 2).px + content.height = (intHeight - WINDOW_HEADER_HEIGHT - WINDOW_CONTENT_MARGIN_BOTTOM - 1 - 2).px + } } } else if (isResizeEvent) { KVManager.clearResizeEvent(this) @@ -250,7 +264,30 @@ open class Window( checkResizablEventHandler() } + override fun afterDestroy() { + if (isResizeEvent) { + KVManager.clearResizeEvent(this) + } + } + + /** + * Moves the current window to the front. + */ + open fun toFront() { + if ((zIndex ?: 0) < zIndexCounter) zIndex = ++zIndexCounter + } + + /** + * Makes the current window focused. + */ + open fun focus() { + getElementJQuery()?.focus() + } + companion object { + internal var counter = 0 + internal var zIndexCounter = DEFAULT_Z_INDEX + /** * DSL builder extension function. * @@ -258,15 +295,16 @@ open class Window( */ fun Container.window( caption: String? = null, - width: CssSize? = CssSize(0, UNIT.auto), - height: CssSize? = CssSize(0, UNIT.auto), - resizable: Boolean = true, - draggable: Boolean = true, + contentWidth: CssSize? = CssSize(0, UNIT.auto), + contentHeight: CssSize? = CssSize(0, UNIT.auto), + isResizable: Boolean = true, + isDraggable: Boolean = true, closeButton: Boolean = false, classes: Set = setOf(), init: (Window.() -> Unit)? = null ): Window { - val window = Window(caption, width, height, resizable, draggable, closeButton, classes, init) + val window = + Window(caption, contentWidth, contentHeight, isResizable, isDraggable, closeButton, classes, init) this.add(window) return window } diff --git a/src/main/resources/css/style.css b/src/main/resources/css/style.css index 295cf268f8e..851cbc536c4 100644 --- a/src/main/resources/css/style.css +++ b/src/main/resources/css/style.css @@ -127,3 +127,7 @@ trix-toolbar .trix-button-group { height: 40px; padding: 10px 15px 5px 15px; } + +.kv-window .modal-header .modal-title { + white-space: nowrap; +} diff --git a/src/test/kotlin/test/pl/treksoft/kvision/window/WindowSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/window/WindowSpec.kt index 698efd2a851..27de17de4f8 100644 --- a/src/test/kotlin/test/pl/treksoft/kvision/window/WindowSpec.kt +++ b/src/test/kotlin/test/pl/treksoft/kvision/window/WindowSpec.kt @@ -35,15 +35,16 @@ class WindowSpec : DomSpec { val root = Root("test") val window = Window("Window title", isResizable = false) root.add(window) + val id = window.id val element = document.getElementById("test") assertEqualsHtml( - "

Window title

", + "

Window title

", element?.innerHTML, "Should render floating window without resizable handler" ) window.isResizable = true assertEqualsHtml( - "

Window title

", + "

Window title

", element?.innerHTML, "Should render floating window with resizable handler" )