bedrock-samples/resource_pack/ui/pdp_screenshots_section.json

{
  "namespace": "pdp_screenshots",

  "banner_empty": {
    "type": "image",
    "texture": "textures/ui/BannersTransparent"
  },

  "screenshot_carousel": {
    "type": "panel",
    "size": [ "100%", "100%c" ],

    "$store_factory_collection_details|default": "none",
    "$store_factory_collection_prefix|default": "",
    "$store_factory_collection_name|default": "",

    "controls": [
      {
        "screenshot_carousel_content": {
          "type": "panel",
          "size": [ "100%", "100%cm" ],
          "clips_children": true,

          "$cycle_pack_button_factory_collection_details": "$store_factory_collection_details",
          "$cycle_pack_button_factory_collection_prefix": "$store_factory_collection_prefix",
          "$cycle_pack_button_factory_collection_name": "$store_factory_collection_name",

          "$ignore_cycle_buttons": false,

          "controls": [
            {
              "cycle_pack_left_button@common_store.cycle_pack_left_button": {
                "$pressed_button_name": "button.cycle_screenshots_left",
                "$cycle_pack_button_name_right": "button.cycle_screenshots_right",
                "$cycle_pack_button_name_left": "button.cycle_screenshots_left",
                "$cycle_pack_button_up_right_refusal": true,
                "$cycle_pack_button_enabled": "#cycle_screenshots_left_button_enabled",
                "$gamepad_helper_icon_size": [ 15, 15 ],
                "size": [ 20, "100%sm" ],
                "anchor_from": "top_left",
                "anchor_to": "top_left"
              }
            },
            {
              "screenshots_grid@pdp_screenshots.screenshots_grid": {}
            },
            {
              "cycle_pack_right_button@common_store.cycle_pack_right_button": {
                "$pressed_button_name": "button.cycle_screenshots_right",
                "$cycle_pack_button_name_right": "button.cycle_screenshots_right",
                "$cycle_pack_button_name_left": "button.cycle_screenshots_left",
                "$cycle_pack_button_up_right_refusal": true,
                "$cycle_pack_button_enabled": "#cycle_screenshots_right_button_enabled",
                "$gamepad_helper_icon_size": [ 15, 15 ],
                "size": [ 20, "100%sm" ],
                "anchor_from": "top_right",
                "anchor_to": "top_right"
              }
            }
          ]
        }
      }
    ]
  },

  "screenshots_grid": {
    "type": "stack_panel",
    "orientation": "horizontal",
    "anchor_from": "center",
    "anchor_to": "center",
    "size": [ "100%", "100%cm" ],
    "offset": [ "-40%", 0 ],

    "$screenshot_grid_collection_name|default": "screenshot_collection",
    "collection_name": "$screenshot_grid_collection_name",
    "controls": [
      {
        "left_image_panel@pdp_screenshots.screenshots_grid_item": {
          "collection_index": 0,
          "alpha": 0.4,
          "propagate_alpha": true
        }
      },
      {
        "middle_image_panel@pdp_screenshots.screenshots_grid_item": {
          "collection_index": 1,
          "$is_middle": true
        }
      },
      {
        "right_image_panel@pdp_screenshots.screenshots_grid_item": {
          "collection_index": 2,
          "alpha": 0.4,
          "propagate_alpha": true
        }
      }
    ]
  },

  "screenshots_grid_item": {
    "type": "panel",
    "size": [ "60%", "56.25%x + 0.675px" ],
    "controls": [
      {
        "frame@banner_empty": {
          "size": [ "100%", "100%" ],
          "layer": 2,
          "controls": [
            {
              "screenshot_button@common.button": {
                "$is_middle|default": false,
                "visible": "$is_middle",
                "layer": 4,
                "size": [ "100%", "100%" ],
                "focus_enabled": true,
                "focus_identifier": "screenshot_button_focus_id",
                "$focus_override_left_binding_type": "none",
                "$focus_override_left": "screenshot_interact_button",
                "$focus_override_right_binding_type": "none",
                "$focus_override_right": "screenshot_interact_button",
                "default_control": "",
                "hover_control": "hover",
                "pressed_control": "pressed",
                "button_mappings": [
                  {
                    "from_button_id": "button.menu_tab_right",
                    "to_button_id": "button.cycle_screenshots_right",
                    "mapping_type": "focused"
                  },
                  {
                    "from_button_id": "button.menu_tab_left",
                    "to_button_id": "button.cycle_screenshots_left",
                    "mapping_type": "focused"
                  }
                ],
                "bindings": [
                  {
                    "binding_type": "$store_factory_collection_details",
                    "binding_collection_name": "$store_factory_collection_name",
                    "binding_collection_prefix": "$store_factory_collection_prefix"
                  },
                  {
                    "binding_name": "#screenshot_focus_override_right",
                    "binding_name_override": "#focus_change_right"
                  }
                ],
                "controls": [
                  {
                    "hover@common.square_image_border_white": {
                    }
                  },
                  {
                    "pressed@common.square_image_border_white": {
                    }
                  }
                ]
              }
            }
          ]
        }
      },
      {
        "screenshot_image": {
          "type": "image",
          "layer": 1,
          "size": [ "100% - 2px", "100%" ],
          "bindings": [
            {
              "binding_type": "$store_factory_collection_details",
              "binding_collection_name": "$store_factory_collection_name",
              "binding_collection_prefix": "$store_factory_collection_prefix"
            },
            {
              "binding_type": "collection",
              "binding_collection_name": "$screenshot_grid_collection_name",
              "binding_name": "#screenshot_texture",
              "binding_name_override": "#texture"
            },
            {
              "binding_type": "collection",
              "binding_collection_name": "$screenshot_grid_collection_name",
              "binding_name": "#screenshot_texture_file_system",
              "binding_name_override": "#texture_file_system"
            }
          ]
        }
      },
      {
        "progress_loading@common_store.progress_loading": {
          "layer": 5,
          "$source_control_name": "screenshot_image",
          "$source_property_name": "(#texture = '')",
          "$use_sibling_scope": true,
          "$hide_failure_text": true
        }
      }
    ]
  }
}