bedrock-samples/resource_pack/ui/csb_sections/csb_banner.json

{
  "namespace": "csb_banner",

  "csb_banner": {
    "type": "panel",
    "size": [ "100% -8px", "100%cm + 8px" ],
    "controls": [
      {
        "static_button@csb_banner.promo_banner_csb_button": {
          "offset": [ "4px", 0 ],
          "ignored": "$is_animated_banner"

        }
      },
      {
        "animated_button@csb_banner.animated_promo_banner_csb_button": {
          "offset": [ "4px", 0 ],
          "ignored": "(not $is_animated_banner)"
        }
      }
    ]
  },

  "promo_banner_csb_button@common.button": {
    "size": [ "100%", "8.08%x" ],
    "hover_control": "hover",
    "pressed_control": "hover",
    "default_control": "default",
    "$pressed_button_name": "button.promotion_page",
    "controls": [
      {
        "default@csb_banner.csb_banner_content": {
          "$banner_texture_name": "#banner_texture_name",
          "$banner_texture_filepath": "#banner_texture_filepath"
        }
      },
      {
        "hover@csb_banner.csb_banner_content": {
          "$banner_texture_name": "#banner_hover_texture_name",
          "$banner_texture_filepath": "#banner_hover_texture_filepath"
        }
      }
    ],
    "bindings": [
      {
        "binding_type": "$store_factory_collection_details",
        "binding_collection_name": "$store_factory_collection_name",
        "binding_collection_prefix": "$store_factory_collection_prefix"
      },
      {
        "binding_name": "#promo_page_is_ready",
        "binding_name_override": "#enabled"
      }
    ]
  },

  "csb_banner_content": {
    "type": "panel",
    "size": [ "100%", "100%" ],
    "controls": [
      {
        "banner": {
          "type": "image",
          "size": [ "100%", "100%" ],
          "keep_ratio": true,
          "bindings": [
            {
              "binding_type": "$store_factory_collection_details",
              "binding_collection_name": "$store_factory_collection_name",
              "binding_collection_prefix": "$store_factory_collection_prefix"
            },
            {
              "binding_name": "$banner_texture_name",
              "binding_name_override": "#texture"
            },
            {
              "binding_name": "$banner_texture_filepath",
              "binding_name_override": "#texture_file_system"
            }
          ]
        }
      },
      {
        "text": {
          "type": "stack_panel",
          "orientation": "horizontal",
          "size": [ "100% - 8px", "100%" ],
          "layer": 1,
          "controls": [
            {
              "logo_panel": {
                "type": "panel",
                "size": [ 90, "100%" ],
                "controls": [
                  {
                    "logo@common_csb.csb_header": {
                      "$font_scale_factor": 1.0,
                      "$font_size": "medium",
                      "offset": [ 0, -2 ]
                    }
                  }
                ]
              }
            },
            {
              "offer_panel": {
                "type": "panel",
                "size": [ "fill", "100%" ],
                "controls": [
                  {
                    "offer": {
                      "type": "label",
                      "ignored": "$pocket_screen",
                      "size": [ "100%", "default" ],
                      "max_size": [ "100%", "100%" ],
                      "anchor_from": "center",
                      "anchor_to": "center",
                      "color": "$store_white_text_color",
                      "font_scale_factor": 0.7,
                      "text": "store.csb.banner.offer"
                    }
                  }
                ]
              }
            },
            {
              "learn_more_panel": {
                "type": "panel",
                "size": [ "100%c", "100%" ],
                "anchor_from": "right_middle",
                "anchor_to": "right_middle",
                "controls": [
                  {
                    "learn_more": {
                      "type": "stack_panel",
                      "orientation": "horizontal",
                      "size": [ "100%c", "100%cm" ],
                      "controls": [
                        {
                          "more": {
                            "type": "label",
                            "color": "$store_csb_gold_text_color",
                            "font_scale_factor": 0.7,
                            "text": "store.csb.banner.learnMore"
                          }
                        },
                        {
                          "more_chevron": {
                            "type": "label",
                            "color": "$store_csb_gold_text_color",
                            "font_scale_factor": 0.7,
                            "tts_skip_message": true,
                            "text": " >"
                          }
                        }
                      ]
                    }
                  }
                ]
              }
            }
          ]
        }
      }
    ]
  },

  "animated_promo_banner_csb_button@common.button": {
    "size": [ "100%", "8.08%x" ],
    "hover_control": "hover",
    "pressed_control": "hover",
    "default_control": "default",
    "$pressed_button_name": "button.promotion_page",
    "controls": [
      {
        "default@csb_banner.animated_csb_banner_content": {
          "$banner_texture": "textures/ui/csb_animated_banner_default.png"
        }
      },
      {
        "hover@csb_banner.animated_csb_banner_content": {
          "$banner_texture": "textures/ui/csb_animated_banner_hover.png"
        }
      }
    ],
    "bindings": [
      {
        "binding_type": "$store_factory_collection_details",
        "binding_collection_name": "$store_factory_collection_name",
        "binding_collection_prefix": "$store_factory_collection_prefix"
      },
      {
        "binding_name": "#promo_page_is_ready",
        "binding_name_override": "#enabled"
      }
    ]
  },

  "animated_csb_banner_content": {
    "type": "panel",
    "size": [ "100%", "100%" ],
    "controls": [
      {
        "banner": {
          "type": "image",
          "layer": 1,
          "size": [ "100%", "100%" ],
          "texture": "$banner_texture",
          "uv_size": [ 396, 32 ],
          "uv": "@csb_banner.csb_banner_animation",
          "keep_ratio": true,
          "disable_anim_fast_forward": true
        }
      },
      {
        "text": {
          "type": "stack_panel",
          "orientation": "horizontal",
          "size": [ "100% - 8px", "100%" ],
          "layer": 1,
          "controls": [
            {
              "logo_panel": {
                "type": "panel",
                "size": [ 125, "100%" ],
                "controls": [
                  {
                    "logo@common_csb.csb_header": {
                      "$font_scale_factor": 1.4,
                      "$font_size": "medium",
                      "offset": [ 0, -2 ]
                    }
                  }
                ]
              }
            },
            {
              "offer_panel": {
                "type": "panel",
                "size": [ "fill", "100%" ],                
                "controls": [
                  {
                    "offer": {
                      "type": "label",
                      "ignored": "$pocket_screen",
                      "size": [ "100%", "default" ],
                      "max_size": [ "100%", "100%" ],
                      "anchor_from": "center",
                      "anchor_to": "center",
                      "color": "$store_white_text_color",
                      "font_scale_factor": 0.9,
                      "text": "store.csb.banner.offer"
                    }
                  }
                ]
              }
            },
            {
              "learn_more_panel": {
                "type": "panel",
                "size": [ "100%c", "100%" ],
                "anchor_from": "right_middle",
                "anchor_to": "right_middle",
                "controls": [
                  {
                    "learn_more": {
                      "type": "stack_panel",
                      "orientation": "horizontal",
                      "anchor_from": "right_middle",
                      "anchor_to": "right_middle",
                      "size": [ "100%c", "100%cm" ],
                      "controls": [
                        {
                          "more": {
                            "type": "label",
                            "anchor_from": "right_middle",
                            "anchor_to": "right_middle",
                            "color": "$store_csb_gold_text_color",
                            "font_scale_factor": 0.9,
                            "text": "store.csb.banner.learnMore"
                          }
                        },
                        {
                          "more_chevron": {
                            "type": "label",
                            "anchor_from": "right_middle",
                            "anchor_to": "right_middle",
                            "color": "$store_csb_gold_text_color",
                            "font_scale_factor": 0.9,
                            "tts_skip_message": true,
                            "text": " >"
                          }
                        }
                      ]
                    }
                  }
                ]
              }
            }
          ]
        }
      }
    ]
  },

  "csb_banner_animation": {
    "anim_type": "flip_book",
    "initial_uv": [ 0, 0 ],
    "frame_count": 30,
    "frame_step": 1,
    "fps": 10,
    "reversible": false,
    "orientation": "vertical"
  }
}