scene.yaml

uid: scene
tags: []
props:
  parameters:
    - label: Scene title
      name: title
      required: false
    - default: Підтвердити
      label: Scene description
      name: confirmText
      required: false
    - label: Background picture URL
      name: background
      required: false
    - label: Meterial icon
      name: icon
      required: false
    - label: Background color
      name: color
      required: false
    - default: "3"
      description: Confirmation countdown duration
      label: Duration (seconds)
      name: countdown
      required: false
      type: INTEGER
      groupName: otherConf
  parameterGroups:
    - name: buttonConf
      label: Button configuration options
    - name: confirmed
      context: action
      label: Action with confirmation
    - name: otherConf
      label: Other Configurations
timestamp: Jul 30, 2025, 11:50:50 PM
component: div
config:
  class:
    - card
    - card-outline
  key: =Math.random() + ((vars.countdown && vars.countdown.toString()) || '0')
  style: =props.style
slots:
  default:
    - component: div
      config:
        class:
          - cd-button
        style:
          --countdown-background: =props.color
          --countdown-bar-color: =props.barColor
          --countdown-duration: =`${(props.countdown || '3')}s`
          background: white
          cursor: pointer
          display: flex
          flex-direction: column
          height: 100%
          justify-content: center
          left: 0
          min-height: 150px
          position: relative
          top: 0
          width: 100%
        stylesheet: >
          .cd-fade {
            animation-name: count-down-fade;
            animation-duration: var(--countdown-duration);
            animation-timing-function: linear;
            background: none, linear-gradient(90deg, var(--countdown-bar-color, var(--f7-theme-color)) 50%, var(--countdown-background, var(--f7-button-bg-color)) 50%);
            background-size: 100% 90%, 200% 3%;
            background-position-y: 0%, 100%;
            background-color: var(--countdown-background, rgba(0, 0, 0, 0.2)) !important;
            background-repeat: no-repeat;
          }

          @keyframes count-down-fade {
            from {
              background-position-x: 0%, 0%;
              visibility: visible;
            }
            to {
              background-position-x: 0%, 100%;
              visibility: visible;
            }
          }

          .cd-hide {
            animation-name: count-down-hide;
            animation-duration: var(--countdown-duration);
            animation-timing-function: linear;
          }

          @keyframes count-down-hide {
            from {
              visibility: hidden;
            }
            to {
              visibility: hidden;
            }
          }
      slots:
        default:
          - component: oh-button
            config:
              actionPropsParameterGroup: confirmed
              class: =(vars.countdown && 'cd-fade')
              clearVariable:
                - countdown
              content: =items[props.item].displayState || items[props.item].state
              footer: =props.description
              icon2: =props.icon
              outline: true
              style:
                background-color: rgba(0, 0, 0, .25);
                color: black
                display: flex
                flex-direction: column
                height: 100%
                justify-content: center
                left: 0
                object-fit: cover
                opacity: 0.5;
                position: absolute
                top: 0
                visibility: hidden
                width: 100%
                z-index: 2
              text2: '=(props.title) ? props.title : ""'
              vertical: true
          - component: oh-image
            config:
              action: variable
              actionFeedback: Підтвердіть дію
              actionVariable: countdown
              actionVariableValue: =(vars.countdown || 0) + 1
              class: =(vars.countdown && 'cd-hide')
              content: =items[props.item].displayState || items[props.item].state
              lazy: false
              lazyFadeIn: true
              outline: true
              refreshInterval: "=props.background ? 10000 : 0"
              style:
                background: =props.color
                color: black
                display: flex
                flex-direction: column
                font-size: 24px
                height: 100%
                justify-content: center
                left: 0
                object-fit: cover
                position: absolute
                top: 0
                width: 100%
              url: '=props.background ? props.background+"?"+"r="+dayjs().unix() :
                "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="'
          - component: div
            config:
              content: =props.title
              style:
                background-color: rgba(0, 0, 0, .25)
                bottom: 0
                color: white
                display: block
                padding: 10px 0 10px 0
                pointer-events: none
                position: absolute
                right: 0px
                text-align: center
                visibility: hidden
                width: 100%
                z-index: 1
          - component: div
            config:
              class: =(vars.countdown && 'cd-hide')
              style:
                background-colore: rgba(0, 0, 0, 0)
                bottom: 0
                color: white
                display: block
                height: 100%
                margin: auto
                pointer-events: none
                position: absolute
                right: 0px
                text-align: center
                width: 100%
                z-index: 3
            slots:
              default:
                - component: f7-icon
                  config:
                    material: =props.icon
                    size: 35px
                    style:
                      display: block
                      height: 100%
                      justify-content: center
                      line-height: auto
                      margin: auto
                      pointer-events: none
                      position: absolute
                      right: 0px
                      top: 40%
                      width: 100%
                      z-index: 4
                - component: div
                  config:
                    content: =props.title
                    style:
                      background-color: rgba(0, 0, 0, .25)
                      bottom: 0
                      color: white
                      padding: 10px 0 10px 0
                      pointer-events: none
                      position: absolute
                      right: 0px
                      text-align: center
                      width: 100%
                      z-index: 15
          - component: div
            config:
              class: =(vars.countdown && 'cd-fade')
              style:
                background-colore: rgba(0, 0, 0, .25)
                bottom: 0
                color: white
                display: block
                height: 100%
                margin: auto
                pointer-events: none
                position: absolute
                right: 0px
                text-align: center
                visibility: hidden
                width: 100%
                z-index: 3
            slots:
              default:
                - component: f7-icon
                  config:
                    material: pan_tool_alt
                    size: 35px
                    style:
                      display: block
                      height: 100%
                      justify-content: center
                      line-height: auto
                      margin: auto
                      pointer-events: none
                      position: absolute
                      right: 0px
                      top: 40%
                      width: 100%
                      z-index: 4
                - component: div
                  config:
                    content: =props.confirmText || 'Підтвердити'
                    style:
                      background-color: rgba(0, 0, 0, .25)
                      bottom: 0
                      color: white
                      padding: 10px 0 10px 0
                      pointer-events: none
                      position: absolute
                      right: 0px
                      text-align: center
                      width: 100%
                      z-index: 15