{
  "name": "divitorque/scroll-image",
  "d4Shortcode": "ba_scroll_image",
  "moduleClassName": "dtq_scroll_image",
  "moduleOrderClassName": "dtq_scroll_image",
  "title": "Scroll Image",
  "titles": "Scroll Images",
  "moduleIcon": "divitorque/scroll-image",
  "category": "module",
  "attributes": {
    "module": {
      "type": "object",
      "selector": "{{selector}}",
      "default": {
        "advanced": {
          "showIcon": {
            "desktop": {
              "value": "off"
            }
          },
          "useImage": {
            "desktop": {
              "value": "off"
            }
          },
          "useIconAnim": {
            "desktop": {
              "value": "off"
            }
          },
          "scrollType": {
            "desktop": {
              "value": "on_hover"
            }
          },
          "scrollDirScroll": {
            "desktop": {
              "value": "vertical"
            }
          },
          "scrollDirHover": {
            "desktop": {
              "value": "Y_btt"
            }
          },
          "scrollSpeed": {
            "desktop": {
              "value": "500ms"
            }
          },
          "imgHeight": {
            "desktop": {
              "value": "200px"
            }
          },
          "useOverlay": {
            "desktop": {
              "value": "off"
            }
          },
          "iconColor": {
            "desktop": {
              "value": "#2EA3F2"
            }
          },
          "iconSize": {
            "desktop": {
              "value": "48px"
            }
          }
        }
      },
      "settings": {
        "meta": {
          "adminLabel": {}
        },
        "advanced": {
          "htmlAttributes": {},
          "showIcon": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentMain",
              "attrName": "module.advanced.showIcon",
              "label": "Show Direction Icon",
              "description": "Here you can choose whether direction icon should be displayed.",
              "priority": 30,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/toggle"
              }
            }
          },
          "icon": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentMain",
              "attrName": "module.advanced.icon",
              "label": "Select Icon",
              "description": "Here you can select the icon you would like to use.",
              "priority": 40,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/icon-picker"
              }
            }
          },
          "useImage": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentMain",
              "attrName": "module.advanced.useImage",
              "label": "Use Icon Image",
              "description": "Here you can choose whether icon image should be used.",
              "priority": 50,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/toggle"
              }
            }
          },
          "iconImage": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentMain",
              "attrName": "module.advanced.iconImage",
              "label": "Upload Icon",
              "description": "Icon image you would like to display.",
              "priority": 60,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false,
                "dynamicContent": true
              },
              "component": {
                "type": "field",
                "name": "divi/upload"
              }
            }
          },
          "useIconAnim": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentMain",
              "attrName": "module.advanced.useIconAnim",
              "label": "Icon Animation",
              "description": "Here you can choose whether icon animation should be used.",
              "priority": 70,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/toggle"
              }
            }
          },
          "scrollType": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentSettings",
              "attrName": "module.advanced.scrollType",
              "label": "Scroll Type",
              "description": "Here you can define scroll type.",
              "priority": 10,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "on_hover": {
                      "label": "On Mouse Hover"
                    },
                    "on_scroll": {
                      "label": "On Mouse Scroll"
                    }
                  }
                }
              }
            }
          },
          "scrollDirScroll": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentSettings",
              "attrName": "module.advanced.scrollDirScroll",
              "label": "Scroll Direction",
              "description": "Here you can define scroll direction.",
              "priority": 20,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "vertical": {
                      "label": "Vertical"
                    },
                    "horizontal": {
                      "label": "Horizontal"
                    }
                  }
                }
              }
            }
          },
          "scrollDirHover": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentSettings",
              "attrName": "module.advanced.scrollDirHover",
              "label": "Scroll Direction",
              "description": "Here you can define scroll direction.",
              "priority": 30,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "Y_btt": {
                      "label": "Bottom to Top"
                    },
                    "Y_ttb": {
                      "label": "Top to Bottom"
                    },
                    "X_ltr": {
                      "label": "Left to Right"
                    },
                    "X_rtl": {
                      "label": "Right to Left"
                    }
                  }
                }
              }
            }
          },
          "scrollSpeed": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentSettings",
              "attrName": "module.advanced.scrollSpeed",
              "label": "Scroll Speed",
              "description": "Define timing for the scroll event.",
              "priority": 40,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": {
                  "min": 50,
                  "max": 10000,
                  "step": 50,
                  "defaultUnit": "ms"
                }
              }
            }
          },
          "imgHeight": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designImage",
              "attrName": "module.advanced.imgHeight",
              "label": "Image Height",
              "description": "Define static height for the image.",
              "priority": 10,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": true,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": {
                  "min": 1,
                  "max": 800,
                  "step": 1,
                  "defaultUnit": "px"
                }
              }
            }
          },
          "useOverlay": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designOverlay",
              "attrName": "module.advanced.useOverlay",
              "label": "Use Image Overlay",
              "description": "Here you can choose whether image overlay should be used.",
              "priority": 10,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/toggle"
              }
            }
          },
          "iconColor": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designIcon",
              "attrName": "module.advanced.iconColor",
              "label": "Icon Color",
              "description": "Here you can define a custom color for your icon.",
              "priority": 10,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/color-picker",
                "props": {
                  "isAlpha": true
                }
              }
            }
          },
          "iconSize": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designIcon",
              "attrName": "module.advanced.iconSize",
              "label": "Icon Size",
              "description": "Here you can define the size of your icon.",
              "priority": 20,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": {
                  "min": 0,
                  "max": 200,
                  "step": 1,
                  "defaultUnit": "px"
                }
              }
            }
          }
        },
        "decoration": {
          "animation": {},
          "layout": {},
          "background": {},
          "border": {},
          "boxShadow": {},
          "filters": {},
          "overflow": {},
          "position": {},
          "scroll": {},
          "spacing": {},
          "sizing": {},
          "sticky": {},
          "transform": {},
          "transition": {},
          "zIndex": {},
          "disabledOn": {}
        }
      }
    },
    "image": {
      "type": "object",
      "selector": "{{selector}} .dtq-scroll-image img",
      "settings": {
        "innerContent": {
          "groupType": "group-item",
          "item": {
            "groupSlug": "contentMain",
            "attrName": "image.innerContent",
            "label": "Upload Image",
            "description": "Upload an image or type in the URL of the image you would like to display.",
            "priority": 10,
            "render": true,
            "features": {
              "sticky": false,
              "responsive": false,
              "hover": false,
              "dynamicContent": true
            },
            "component": {
              "type": "field",
              "name": "divi/upload"
            }
          }
        },
        "advanced": {
          "alt": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentMain",
              "attrName": "image.advanced.alt",
              "label": "Image Alt Text",
              "description": "Here you can input the alt text for your image.",
              "priority": 20,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/text"
              }
            }
          }
        }
      }
    },
    "overlay": {
      "type": "object",
      "selector": "{{selector}} .dtq-scroll-image-overlay",
      "default": {
        "decoration": {
          "background": {
            "desktop": {
              "value": {
                "color": "rgba(255,255,255,0.39)"
              }
            }
          }
        }
      },
      "settings": {
        "decoration": {
          "background": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designOverlay",
              "priority": 20,
              "render": true,
              "attrName": "overlay.decoration.background",
              "component": {
                "name": "divi/background",
                "type": "group",
                "props": {
                  "grouped": false,
                  "fieldLabel": "Overlay"
                }
              }
            }
          }
        }
      }
    },
    "icon": {
      "type": "object",
      "selector": "{{selector}} .dtq-scroll-image-icon-el",
      "settings": {
        "decoration": {
          "border": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designIcon",
              "priority": 30,
              "render": true,
              "attrName": "icon.decoration.border",
              "component": {
                "name": "divi/border",
                "type": "group",
                "props": {
                  "grouped": false,
                  "fieldLabel": "Icon"
                }
              }
            }
          }
        }
      }
    }
  },
  "customCssFields": {
    "image": {
      "subName": "image",
      "selectorSuffix": " .dtq-scroll-image img"
    },
    "icon": {
      "subName": "icon",
      "selectorSuffix": " .dtq-scroll-image-icon-el"
    }
  },
  "settings": {
    "content": "auto",
    "design": "auto",
    "advanced": "auto",
    "groups": {
      "contentMain": {
        "panel": "content",
        "priority": 10,
        "groupName": "main",
        "component": {
          "name": "divi/composite",
          "props": {
            "groupLabel": "Content"
          }
        }
      },
      "contentSettings": {
        "panel": "content",
        "priority": 20,
        "groupName": "settings",
        "component": {
          "name": "divi/composite",
          "props": {
            "groupLabel": "Settings"
          }
        }
      },
      "designImage": {
        "panel": "design",
        "priority": 10,
        "groupName": "image",
        "component": {
          "name": "divi/composite",
          "props": {
            "groupLabel": "Image"
          }
        }
      },
      "designOverlay": {
        "panel": "design",
        "priority": 20,
        "groupName": "overlay",
        "component": {
          "name": "divi/composite",
          "props": {
            "groupLabel": "Overlay"
          }
        }
      },
      "designIcon": {
        "panel": "design",
        "priority": 30,
        "groupName": "icon",
        "component": {
          "name": "divi/composite",
          "props": {
            "groupLabel": "Icon"
          }
        }
      }
    }
  }
}