Hi All
I have a widget that makes use of the state of the members of a group to render a scrolling animation based on the state of the members of the group. However if the state of one of the members changes once the text has been rendered, this does not update until the page is refreshed.
My widget is as follows:
uid: Test_Scrolling_Animation_Repeater-Fix_and_Cleanup
tags: []
props:
parameters:
- context: item
description: Partition State Group Item
label: Partition State Group Item
name: partitionStateGroup
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 31, 2022, 2:40:11 PM
component: f7-block
config: {}
slots:
default:
- component: f7-block
config:
style:
background: rgba(39,26,226,255)
border-radius: 5px
display: flex
height: 90px
left: 30px
overflow: hidden
position: absolute
top: 5%
width: 300px
stylesheet: >
.scroll_text {
display: block; /* Important to give the content a width */
width: 300px;
overflow: hidden;
position: relative;
transform: translateX(200%); /* Animation start out of the screen */
/* Add the animation */
animation: move 9s linear infinite /* infinite make reapeat the animation indefinitely */;
} /* Create the animation */ @keyframes move {
to { transform: translateX(-490%); }
}
slots:
default:
- component: oh-repeater
config:
for: PartitionState
fragment: true
groupItem: =props.partitionStateGroup
sourceType: itemsInGroup
slots:
default:
- component: oh-button
config:
class: scroll_text
large: true
raised: true
style:
background: white
color: rgba(6,192,232,255)
font-size: 30px
font-weight: 700
left: 300px
top: 40px
width: 420px
flex: 0 0 420px
text: =loop.PartitionState.label.slice(0, 11) + loop.PartitionState.label.slice(21, 27) +" - " + loop.PartitionState.state
Any suggestions on how I can get the update to be reflected without a page refresh?
I suspect this has something to do with the animation - The following snippet does reflect the changes - though does not use a group - the changed state is however updated:
- component: f7-block
config:
class:
- padding
style:
--f7-block-margin-horizontal: 0px
--f7-block-margin-vertical: 0px
--f7-block-padding-horizontal: 0px
--f7-block-padding-verticall: 0px
--f7-popup-tablet-width: 360px
left: 0px
position: absolute
top: 640px
width: 360px
z-index: 999
slots:
default:
- component: f7-row
config:
class: no-gap
slots:
default:
- component: oh-repeater
config:
for: partition
fragment: true
in:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
slots:
default:
- component: f7-row
config:
width: "10"
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: selectedPartitionP
actionVariableValue: ='Partition' + loop.partition
bgColor: '=(items["Partition" + loop.partition + "_PartitionState"].state === "-") ? "gray" : (items["Partition" + loop.partition + "_PartitionState"].state === "Armed") ? "red" : "green"'
disabled: '=(items["Partition" + loop.partition + "_PartitionState"].state === "-") ? true : false'
fill: true
raised: false
style:
border-radius: 12px
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
z-index: 999
text: =["P" + loop.partition]
textColor: white
tooltip: '=!(props.tooltipEnable) ? false : "Apply Partition to current run"'
tooltip-trigger: hover