{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "b-blocks/image-hotspot",
  "version": "1.0.0",
  "title": "Image Hotspot",
  "category": "bBlocks",
  "description": "Image Hotspot allows you to add interactive hotspots to your images.",
  "keywords": [
    "image hotspot",
    "hotspot",
    "image"
  ],
  "textdomain": "b-blocks",
  "attributes": {
    "align": {
      "type": "string",
      "default": ""
    },
    "image": {
      "type": "object",
      "default": {
        "url": "",
        "desktop": {
          "height": "400px",
          "width": "100%"
        },
        "tablet": {
          "height": "400px",
          "width": "100%"
        },
        "mobile": {
          "height": "400px",
          "width": "100%"
        },
        "objectFit": "fill"
      }
    },
    "options": {
      "type": "object",
      "default": {
        "speed": 400,
        "delay": 200
      }
    },
    "preset": {
      "type": "string",
      "default": "default"
    },
    "spots": {
      "type": "object",
      "default": {
        "normal": {
          "color": {
            "bg": "#8a2be2",
            "icon": "#fff"
          },
          "border": {}
        },
        "hover": {
          "color": {
            "bg": "#8a2be2",
            "icon": "#fff"
          },
          "border": {}
        },
        "desktop": {
          "height": "40px",
          "width": "40px",
          "padding": {
            "top": "",
            "right": "",
            "bottom": "",
            "left": ""
          },
          "radius": {
            "left": "50px",
            "right": "50px",
            "top": "50px",
            "bottom": "50px"
          },
          "iconSize": "12px"
        },
        "tablet": {
          "height": "40px",
          "width": "40px",
          "padding": {
            "top": "",
            "right": "",
            "bottom": "",
            "left": ""
          },
          "radius": {
            "left": "50px",
            "right": "50px",
            "top": "50px",
            "bottom": "50px"
          },
          "iconSize": "12px"
        },
        "mobile": {
          "height": "40px",
          "width": "40px",
          "padding": {
            "top": "",
            "right": "",
            "bottom": "",
            "left": ""
          },
          "radius": {
            "left": "50px",
            "right": "50px",
            "top": "50px",
            "bottom": "50px"
          },
          "iconSize": "12px"
        }
      }
    },
    "tooltip": {
      "type": "object",
      "default": {
        "desktop": {
          "width": "200px",
          "padding": {
            "left": "5px",
            "right": "5px",
            "top": "5px",
            "bottom": "5px"
          },
          "radius": {
            "left": "3px",
            "right": "3px",
            "top": "3px",
            "bottom": "3px"
          }
        },
        "tablet": {
          "width": "",
          "padding": {},
          "radius": {}
        },
        "mobile": {
          "width": "",
          "padding": {},
          "radius": {}
        },
        "typo": {
          "fontSize": {
            "desktop": "15px"
          }
        },
        "textColor": "#fff",
        "bgColor": "#8a2be2",
        "border": {
          "width": "0px"
        },
        "shadow": [
          {
            "hOffset": "0px",
            "vOffset": "0px",
            "blur": "0px",
            "spreed": "0px",
            "color": "#7090b0",
            "isInset": false
          }
        ]
      }
    },
    "hotspot": {
      "type": "array",
      "default": [
        {
          "borderColor": "",
          "bgColor": "",
          "spotsSize": "",
          "option": "spot",
          "spotOption": "text",
          "spotText": "+",
          "icon": {
            "url": {
              "upload": "",
              "library": ""
            },
            "type": "library"
          },
          "image": "",
          "tooltip": "<p>Tooltip contents</p>",
          "tooltipPosition": "left",
          "position": {
            "desktop": {
              "x": 0,
              "y": 0
            },
            "tablet": {},
            "mobile": {}
          },
          "iconColor": "",
          "iconSize": "12px",
          "spotLink": "",
          "newWindow": false
        },
        {
          "borderColor": "",
          "bgColor": "",
          "spotsSize": "",
          "option": "spot",
          "spotOption": "text",
          "spotText": "+",
          "icon": {
            "url": {
              "upload": "",
              "library": ""
            },
            "type": "library"
          },
          "image": "",
          "tooltip": "<p>Tooltip contents</p>",
          "tooltipPosition": "left",
          "position": {
            "desktop": {
              "x": 30,
              "y": 40
            },
            "tablet": {},
            "mobile": {}
          },
          "iconColor": "",
          "iconSize": "12px",
          "spotLink": "",
          "newWindow": false
        }
      ]
    },
    "advanced": {
      "type": "object",
      "default": {
        "dimension": {
          "padding": {
            "desktop": {
              "top": "0px",
              "right": "0px",
              "bottom": "0px",
              "left": "0px"
            },
            "tablet": {
              "top": "0px",
              "right": "0px",
              "bottom": "0px",
              "left": "0px"
            },
            "mobile": {
              "top": "0px",
              "right": "0px",
              "bottom": "0px",
              "left": "0px"
            }
          }
        },
        "borderShadow": {
          "normal": {
            "radius": {
              "top": "0px",
              "right": "0px",
              "bottom": "0px",
              "left": "0px"
            },
            "shadow": [
              {
                "hOffset": "0px",
                "vOffset": "0px",
                "blur": "0px",
                "spreed": "0px",
                "color": "#7090b000",
                "isInset": false
              }
            ]
          }
        },
        "background": {
          "normal": {
            "type": "color",
            "color": "rgba(255, 255, 255, 1)",
            "gradient": {
              "type": "radial",
              "radialType": "ellipse",
              "colors": [
                {
                  "color": "rgba(58, 66, 222, 1)",
                  "position": "0"
                },
                {
                  "color": "rgba(176, 195, 235, 1)",
                  "position": "80"
                }
              ],
              "centerPositions": {
                "x": 50,
                "y": 50
              },
              "angel": 90
            },
            "img": {
              "url": "",
              "desktop": {
                "position": "center-center",
                "xPosition": 0,
                "yPosition": 0,
                "attachment": "",
                "repeat": "no-repeat",
                "size": "",
                "customSize": "0px"
              },
              "tablet": {
                "position": "center-center",
                "xPosition": 0,
                "yPosition": 0,
                "attachment": "",
                "repeat": "no-repeat",
                "size": "",
                "customSize": "0px"
              },
              "mobile": {
                "position": "center-center",
                "xPosition": 0,
                "yPosition": 0,
                "attachment": "",
                "repeat": "no-repeat",
                "size": "",
                "customSize": "0px"
              }
            },
            "transition": 0.3
          }
        },
        "transform": {
          "normal": {
            "rotate": {
              "desktop": {
                "z": "",
                "y": "",
                "x": ""
              },
              "tablet": {
                "z": "",
                "y": "",
                "x": ""
              },
              "mobile": {
                "z": "",
                "y": "",
                "x": ""
              },
              "threeDRotate": false
            },
            "offset": {
              "desktop": {
                "x": "",
                "y": ""
              },
              "tablet": {
                "x": "",
                "y": ""
              },
              "mobile": {
                "x": "",
                "y": ""
              }
            },
            "scale": {
              "isProportion": true,
              "desktop": {
                "x": "",
                "y": "",
                "scale": ""
              },
              "tablet": {
                "x": "",
                "y": "",
                "scale": ""
              },
              "mobile": {
                "x": "",
                "y": "",
                "scale": ""
              }
            },
            "skew": {
              "desktop": {
                "x": "",
                "y": ""
              },
              "tablet": {
                "x": "",
                "y": ""
              },
              "mobile": {
                "x": "",
                "y": ""
              }
            },
            "flipX": false,
            "flipY": false
          },
          "hover": {
            "rotate": {
              "desktop": {
                "z": "",
                "y": "",
                "x": ""
              },
              "tablet": {
                "z": "",
                "y": "",
                "x": ""
              },
              "mobile": {
                "z": "",
                "y": "",
                "x": ""
              },
              "threeDRotate": false
            },
            "offset": {
              "desktop": {
                "x": "",
                "y": ""
              },
              "tablet": {
                "x": "",
                "y": ""
              },
              "mobile": {
                "x": "",
                "y": ""
              }
            },
            "scale": {
              "isProportion": true,
              "desktop": {
                "x": "",
                "y": "",
                "scale": ""
              },
              "tablet": {
                "x": "",
                "y": "",
                "scale": ""
              },
              "mobile": {
                "x": "",
                "y": "",
                "scale": ""
              }
            },
            "skew": {
              "desktop": {
                "x": "",
                "y": ""
              },
              "tablet": {
                "x": "",
                "y": ""
              },
              "mobile": {
                "x": "",
                "y": ""
              }
            },
            "flipX": false,
            "flipY": false
          },
          "transition": 200
        }
      }
    }
  },
  "supports": {
    "align": [
      "wide",
      "full"
    ],
    "html": false
  },
  "example": {
    "attributes": {}
  },
  "editorScript": [
    "file:../index.js",
    "aos"
  ],
  "style": "file:./view.css",
  "render": "file:./render.php",
  "viewScript": "file:./view.js"
}