Fixed ListView item height bug

This commit is contained in:
anoshenko 2021-11-11 13:23:41 +03:00
parent d9b33167be
commit f74fede3db
6 changed files with 183 additions and 51 deletions

View File

@ -609,7 +609,7 @@ function listItemClickEvent(element, event) {
selected = element.className.indexOf("ruiListItemFocused") >= 0 || element.className.indexOf("ruiListItemSelected") >= 0;
}
var list = element.parentNode
var list = element.parentNode.parentNode
if (list) {
if (!selected) {
selectListItem(list, element, true)
@ -705,6 +705,7 @@ function selectListItem(element, item, needSendMessage) {
}
function findRightListItem(list, x, y) {
list = list.childNodes[0];
var result;
var count = list.childNodes.length;
for (var i = 0; i < count; i++) {
@ -725,6 +726,7 @@ function findRightListItem(list, x, y) {
}
function findLeftListItem(list, x, y) {
list = list.childNodes[0];
var result;
var count = list.childNodes.length;
for (var i = 0; i < count; i++) {
@ -745,6 +747,7 @@ function findLeftListItem(list, x, y) {
}
function findTopListItem(list, x, y) {
list = list.childNodes[0];
var result;
var count = list.childNodes.length;
for (var i = 0; i < count; i++) {
@ -765,6 +768,7 @@ function findTopListItem(list, x, y) {
}
function findBottomListItem(list, x, y) {
list = list.childNodes[0];
var result;
var count = list.childNodes.length;
for (var i = 0; i < count; i++) {

View File

@ -98,8 +98,10 @@ body {
.ruiListView {
overflow: auto;
/*
display: flex;
align-content: stretch;
*/
}
/*
@media (prefers-color-scheme: light) {

View File

@ -125,11 +125,20 @@ func GetListOrientation(view View, subviewID string) int {
if subviewID != "" {
view = ViewByID(view, subviewID)
}
if view == nil {
return 0
if view != nil {
if orientation, ok := valueToOrientation(view.Get(Orientation), view.Session()); ok {
return orientation
}
if value, ok := valueFromStyle(view, Orientation); ok {
if orientation, ok := valueToOrientation(value, view.Session()); ok {
return orientation
}
}
}
orientation, _ := getOrientation(view, view.Session())
return orientation
return 0
}
// GetListWrap returns the wrap type of a ListLayout or ListView subview:
@ -140,7 +149,7 @@ func GetListWrap(view View, subviewID string) int {
view = ViewByID(view, subviewID)
}
if view != nil {
if result, ok := enumProperty(view, Wrap, view.Session(), 0); ok {
if result, ok := enumStyledProperty(view, Wrap, 0); ok {
return result
}
}

View File

@ -215,11 +215,8 @@ func (listView *listViewData) set(tag string, value interface{}) bool {
return true
}
case Orientation, Wrap:
if listView.viewData.set(tag, value) {
updateCSSStyle(listView.htmlID(), listView.session)
return true
}
case Orientation, Wrap, VerticalAlign, HorizontalAlign, Style, StyleDisabled:
result = listView.viewData.set(tag, value)
case ItemWidth, ItemHeight:
result = listView.setSizeProperty(tag, value)
@ -575,36 +572,6 @@ func (listView *listViewData) getItemFrames() []Frame {
return listView.itemFrame
}
func (listView *listViewData) htmlProperties(self View, buffer *strings.Builder) {
buffer.WriteString(`onfocus="listViewFocusEvent(this, event)" onblur="listViewBlurEvent(this, event)"`)
buffer.WriteString(` onkeydown="listViewKeyDownEvent(this, event)" data-focusitemstyle="`)
buffer.WriteString(listView.currentStyle())
buffer.WriteString(`" data-bluritemstyle="`)
buffer.WriteString(listView.currentInactiveStyle())
buffer.WriteString(`"`)
current := GetListViewCurrent(listView, "")
if listView.adapter != nil && current >= 0 && current < listView.adapter.ListSize() {
buffer.WriteString(` data-current="`)
buffer.WriteString(listView.htmlID())
buffer.WriteRune('-')
buffer.WriteString(strconv.Itoa(current))
buffer.WriteRune('"')
}
}
func (listView *listViewData) cssStyle(self View, builder cssBuilder) {
listView.viewData.cssStyle(self, builder)
if GetListWrap(listView, "") != WrapOff {
switch GetListOrientation(listView, "") {
case TopDownOrientation, BottomUpOrientation:
builder.add(`max-height`, `100%`)
default:
builder.add(`max-width`, `100%`)
}
}
}
func (listView *listViewData) itemAlign(self View, buffer *strings.Builder) {
values := enumProperties[ItemHorizontalAlign].cssValues
if hAlign := GetListItemHorizontalAlign(listView, ""); hAlign >= 0 && hAlign < len(values) {
@ -911,11 +878,40 @@ func (listView *listViewData) updateCheckboxItem(index int, checked bool) {
session.runScript(buffer.String())
}
func (listView *listViewData) htmlSubviews(self View, buffer *strings.Builder) {
if listView.adapter == nil {
return
func (listView *listViewData) htmlProperties(self View, buffer *strings.Builder) {
buffer.WriteString(`onfocus="listViewFocusEvent(this, event)" onblur="listViewBlurEvent(this, event)"`)
buffer.WriteString(` onkeydown="listViewKeyDownEvent(this, event)" data-focusitemstyle="`)
buffer.WriteString(listView.currentStyle())
buffer.WriteString(`" data-bluritemstyle="`)
buffer.WriteString(listView.currentInactiveStyle())
buffer.WriteString(`"`)
current := GetListViewCurrent(listView, "")
if listView.adapter != nil && current >= 0 && current < listView.adapter.ListSize() {
buffer.WriteString(` data-current="`)
buffer.WriteString(listView.htmlID())
buffer.WriteRune('-')
buffer.WriteString(strconv.Itoa(current))
buffer.WriteRune('"')
}
if listView.adapter.ListSize() == 0 {
}
/*
func (listView *listViewData) cssStyle(self View, builder cssBuilder) {
listView.viewData.cssStyle(self, builder)
if GetListWrap(listView, "") != WrapOff {
switch GetListOrientation(listView, "") {
case TopDownOrientation, BottomUpOrientation:
builder.add(`max-height`, `100%`)
default:
builder.add(`max-width`, `100%`)
}
}
}
*/
func (listView *listViewData) htmlSubviews(self View, buffer *strings.Builder) {
if listView.adapter == nil || listView.adapter.ListSize() == 0 {
return
}
@ -924,12 +920,129 @@ func (listView *listViewData) htmlSubviews(self View, buffer *strings.Builder) {
defer listView.session.setIgnoreViewUpdates(false)
}
buffer.WriteString(`<div style="display: flex; align-content: stretch;`)
wrap := GetListWrap(listView, "")
orientation := GetListOrientation(listView, "")
rows := (orientation == StartToEndOrientation || orientation == EndToStartOrientation)
if rows {
if wrap == WrapOff {
buffer.WriteString(` min-width: 100%; height: 100%;`)
} else {
buffer.WriteString(` width: 100%; min-height: 100%;`)
}
} else {
if wrap == WrapOff {
buffer.WriteString(` width: 100%; min-height: 100%;`)
} else {
buffer.WriteString(` min-width: 100%; height: 100%;`)
}
}
buffer.WriteString(` flex-flow: `)
buffer.WriteString(enumProperties[Orientation].cssValues[orientation])
switch wrap {
case WrapOn:
buffer.WriteString(` wrap;`)
case WrapReverse:
buffer.WriteString(` wrap-reverse;`)
default:
buffer.WriteString(`;`)
}
var hAlignTag, vAlignTag string
if rows {
hAlignTag = `justify-content`
vAlignTag = `align-items`
} else {
hAlignTag = `align-items`
vAlignTag = `justify-content`
}
value := ""
if align, ok := enumStyledProperty(listView, HorizontalAlign, LeftAlign); ok {
switch align {
case LeftAlign:
if (!rows && wrap == WrapReverse) || orientation == EndToStartOrientation {
value = `flex-end`
} else {
value = `flex-start`
}
case RightAlign:
if (!rows && wrap == WrapReverse) || orientation == EndToStartOrientation {
value = `flex-start`
} else {
value = `flex-end`
}
case CenterAlign:
value = `center`
case StretchAlign:
if rows {
value = `space-between`
} else {
value = `stretch`
}
}
}
if value != "" {
buffer.WriteRune(' ')
buffer.WriteString(hAlignTag)
buffer.WriteString(`: `)
buffer.WriteString(value)
buffer.WriteRune(';')
}
value = ""
if align, ok := enumStyledProperty(listView, VerticalAlign, TopAlign); ok {
switch align {
case TopAlign:
if (rows && wrap == WrapReverse) || orientation == BottomUpOrientation {
value = `flex-end`
} else {
value = `flex-start`
}
case BottomAlign:
if (rows && wrap == WrapReverse) || orientation == BottomUpOrientation {
value = `flex-start`
} else {
value = `flex-end`
}
case CenterAlign:
value = `center`
case StretchAlign:
if rows {
value = `stretch`
} else {
value = `space-between`
}
}
}
if value != "" {
buffer.WriteRune(' ')
buffer.WriteString(vAlignTag)
buffer.WriteString(`: `)
buffer.WriteString(value)
buffer.WriteRune(';')
}
buffer.WriteString(`">`)
checkbox := GetListViewCheckbox(listView, "")
if checkbox == NoneCheckbox {
listView.noneCheckboxSubviews(self, buffer)
} else {
listView.checkboxSubviews(self, buffer, checkbox)
}
buffer.WriteString(`</div>`)
}
func (listView *listViewData) handleCommand(self View, command string, data DataObject) bool {

View File

@ -291,7 +291,7 @@ func (style *viewStyle) cssViewStyle(builder cssBuilder, session Session) {
}
wrap, _ := enumProperty(style, Wrap, session, 0)
orientation, ok := getOrientation(style, session)
orientation, ok := valueToOrientation(style.Get(Orientation), session)
if ok || wrap > 0 {
cssText := enumProperties[Orientation].cssValues[orientation]
switch wrap {
@ -360,9 +360,9 @@ func (style *viewStyle) cssViewStyle(builder cssBuilder, session Session) {
case StretchAlign:
if rows {
builder.add(hAlignTag, `stretch`)
builder.add(vAlignTag, `stretch`)
} else {
builder.add(hAlignTag, `space-between`)
builder.add(vAlignTag, `space-between`)
}
}
}

View File

@ -4,8 +4,8 @@ import (
"strings"
)
func getOrientation(style Properties, session Session) (int, bool) {
if value := style.Get(Orientation); value != nil {
func valueToOrientation(value interface{}, session Session) (int, bool) {
if value != nil {
switch value := value.(type) {
case int:
return value, true
@ -30,10 +30,14 @@ func getOrientation(style Properties, session Session) (int, bool) {
}
}
}
return 0, false
}
/*
func getOrientation(style Properties, session Session) (int, bool) {
return valueToOrientation(style.Get(Orientation), session)
}
*/
func (style *viewStyle) Get(tag string) interface{} {
return style.get(strings.ToLower(tag))
}