From 01e2e2e00b01f1688e46378adc6f1d780613d6e3 Mon Sep 17 00:00:00 2001
From: anoshenko <anoshenko@gmail.com>
Date: Tue, 3 Jan 2023 14:56:57 +0300
Subject: [PATCH] Added "column-span-all" property

---
 CHANGELOG.md    |  4 ++--
 README-ru.md    | 14 ++++++++++++++
 README.md       | 14 ++++++++++++++
 app_scripts.js  |  1 +
 columnLayout.go | 10 ++++++++++
 propertySet.go  |  1 +
 view.go         |  8 ++++++++
 viewStyle.go    |  8 ++++++++
 8 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 509f8e4..f80f85e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,7 @@
 # v.11.0
 
-* Added "tabindex", "order", "column-fill", "background-blend-mode", and "mix-blend-mode" properties 
-* Added GetTabIndex, GetOrder, GetColumnFill, GetBackgroundBlendMode, and GetMixBlendMode functions
+* Added "tabindex", "order", "column-fill", "column-span-all", "background-blend-mode", and "mix-blend-mode" properties 
+* Added GetTabIndex, GetOrder, GetColumnFill, IsColumnSpanAll, GetBackgroundBlendMode, and GetMixBlendMode functions
 * ClientItem, SetClientItem, and RemoveAllClientItems method added to Session interface
 * PropertyWithTag method of DataObject interface renamed to PropertyByTag
 
diff --git a/README-ru.md b/README-ru.md
index 8aa6399..c427cad 100644
--- a/README-ru.md
+++ b/README-ru.md
@@ -2603,6 +2603,20 @@ ViewBorder описана как
 
 	func GetAvoidBreak(view View, subviewID ...string) bool
 
+### Свойство "column-span-all"
+
+Свойство "column-span-all" (константа ColumnSpanAll) типа bool устанавливается для View помещенных в ColumnLayout.
+Если данное свойство установлено в true, то View расширяется на всю ширину ColumnLayout, занимая все колонки.
+Такое View будет как бы разрывать контейнер. 
+
+Обычно данное свойство используется для заголовков.
+
+Значение по умолчанию "false".
+
+Получить значение данного свойства можно с помощью функции
+
+	func IsColumnSpanAll(view View, subviewID ...string) bool
+
 ## StackLayout
 
 StackLayout является контейнером, реализующим интерфейс ViewsContainer. Все дочерние View
diff --git a/README.md b/README.md
index 3d0bcc6..8f8fae6 100644
--- a/README.md
+++ b/README.md
@@ -2579,6 +2579,20 @@ You can get the value of this property using the function
 
 	func GetAvoidBreak(view View, subviewID ...string) bool
 
+### "column-span-all" property
+
+The "column-span-all" bool property (ColumnSpanAll constant) is set for Views placed in the ColumnLayout.
+If this property is set to true, then the View expands to the full width of the ColumnLayout, covering all columns.
+Such a View will, as it were, break the container.
+
+Typically, this property is used for headers.
+
+The default value is "false".
+
+You can get the value of this property using the function
+
+	func IsColumnSpanAll(view View, subviewID ...string) bool
+
 ## StackLayout
 
 StackLayout is a container that implements the ViewsContainer interface. 
diff --git a/app_scripts.js b/app_scripts.js
index a9ff7a7..2b39533 100644
--- a/app_scripts.js
+++ b/app_scripts.js
@@ -426,6 +426,7 @@ function mouseOutEvent(element, event) {
 function clickEvent(element, event) {
 	mouseEvent(element, event, "click-event")
 	event.preventDefault();
+	event.stopPropagation();
 }
 
 function doubleClickEvent(element, event) {
diff --git a/columnLayout.go b/columnLayout.go
index 7dd4b6a..1a883f7 100644
--- a/columnLayout.go
+++ b/columnLayout.go
@@ -46,6 +46,10 @@ const (
 	// * ColumnFillBalance (0) - Content is equally divided between columns (default value);
 	// * ColumnFillAuto (1) - Columns are filled sequentially. Content takes up only the room it needs, possibly resulting in some columns remaining empty.
 	ColumnFill = "column-fill"
+
+	// ColumnSpanAll is the constant for the "column-span-all" property tag.
+	// The "column-span-all" bool property makes it possible for a view to span across all columns when its value is set to true.
+	ColumnSpanAll = "column-span-all"
 )
 
 // ColumnLayout - grid-container of View
@@ -226,3 +230,9 @@ func GetColumnSeparatorColor(view View, subviewID ...string) Color {
 func GetColumnFill(view View, subviewID ...string) int {
 	return enumStyledProperty(view, subviewID, ColumnFill, ColumnFillBalance, true)
 }
+
+// IsColumnSpanAll returns a "column-span-all" property value of the subview.
+// If the second argument (subviewID) is not specified or it is "" then a value from the first argument (view) is returned.
+func IsColumnSpanAll(view View, subviewID ...string) bool {
+	return boolStyledProperty(view, subviewID, ColumnSpanAll, false)
+}
diff --git a/propertySet.go b/propertySet.go
index 607a98c..0df23ce 100644
--- a/propertySet.go
+++ b/propertySet.go
@@ -63,6 +63,7 @@ var boolProperties = []string{
 	TabCloseButton,
 	Repeating,
 	UserSelect,
+	ColumnSpanAll,
 }
 
 var intProperties = []string{
diff --git a/view.go b/view.go
index 8a251fe..ebd7dd7 100644
--- a/view.go
+++ b/view.go
@@ -626,6 +626,14 @@ func viewPropertyChanged(view *viewData, tag string) {
 			session.updateCSSProperty(htmlID, "user-select", "")
 		}
 		return
+
+	case ColumnSpanAll:
+		if spanAll, ok := boolProperty(view, ColumnSpanAll, session); ok && spanAll {
+			session.updateCSSProperty(htmlID, `column-span`, `all`)
+		} else {
+			session.updateCSSProperty(htmlID, `column-span`, `none`)
+		}
+		return
 	}
 
 	if cssTag, ok := sizeProperties[tag]; ok {
diff --git a/viewStyle.go b/viewStyle.go
index 789537b..98895e2 100644
--- a/viewStyle.go
+++ b/viewStyle.go
@@ -453,6 +453,14 @@ func (style *viewStyle) cssViewStyle(builder cssBuilder, session Session) {
 			builder.add(`animation-play-state`, `running`)
 		}
 	}
+
+	if spanAll, ok := boolProperty(style, ColumnSpanAll, session); ok {
+		if spanAll {
+			builder.add(`column-span`, `all`)
+		} else {
+			builder.add(`column-span`, `none`)
+		}
+	}
 }
 
 func valueToOrientation(value any, session Session) (int, bool) {