{
  "name": "divitorque/compare-image",
  "d4Shortcode": "ba_image_compare",
  "moduleClassName": "dtq_compare_image",
  "moduleOrderClassName": "dtq_compare_image",
  "title": "Before & After Slider",
  "titles": "Before & After Sliders",
  "moduleIcon": "divitorque/compare-image",
  "category": "module",
  "attributes": {
    "module": {
      "type": "object",
      "selector": "{{selector}}",
      "default": {
        "advanced": {
          "beforeLabel": {
            "desktop": {
              "value": "Before"
            }
          },
          "beforeLabelBg": {
            "desktop": {
              "value": "#5b2cff"
            }
          },
          "afterLabel": {
            "desktop": {
              "value": "After"
            }
          },
          "afterLabelBg": {
            "desktop": {
              "value": "#5b2cff"
            }
          },
          "orientation": {
            "desktop": {
              "value": "horizontal"
            }
          },
          "offsetPct": {
            "desktop": {
              "value": "0.5"
            }
          },
          "moveOnHover": {
            "desktop": {
              "value": "off"
            }
          },
          "overlay": {
            "desktop": {
              "value": "on"
            }
          },
          "showLabel": {
            "desktop": {
              "value": "always"
            }
          },
          "labelPadding": {
            "desktop": {
              "value": "5px|20px|5px|20px"
            }
          },
          "handleStyle": {
            "desktop": {
              "value": "handle-1"
            }
          },
          "handleColor": {
            "desktop": {
              "value": "#ffffff"
            }
          },
          "arrowColor": {
            "desktop": {
              "value": "#ffffff"
            }
          }
        }
      },
      "settings": {
        "meta": {
          "adminLabel": {}
        },
        "advanced": {
          "htmlAttributes": {},
          "beforeLabel": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentBefore",
              "attrName": "module.advanced.beforeLabel",
              "label": "Before Label",
              "description": "Define before label text.",
              "priority": 20,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/text"
              }
            }
          },
          "beforeLabelBg": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentBefore",
              "attrName": "module.advanced.beforeLabelBg",
              "label": "Label Background",
              "description": "Here you can define a custom background for before label.",
              "priority": 30,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/color-picker",
                "props": {
                  "isAlpha": true
                }
              }
            }
          },
          "afterLabel": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentAfter",
              "attrName": "module.advanced.afterLabel",
              "label": "After Label",
              "description": "Define after label text.",
              "priority": 20,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/text"
              }
            }
          },
          "afterLabelBg": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentAfter",
              "attrName": "module.advanced.afterLabelBg",
              "label": "Label Background",
              "description": "Here you can define a custom background for after label.",
              "priority": 30,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/color-picker",
                "props": {
                  "isAlpha": true
                }
              }
            }
          },
          "orientation": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentSettings",
              "attrName": "module.advanced.orientation",
              "label": "Orientation",
              "description": "Select orientation.",
              "priority": 10,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "vertical": {
                      "label": "Vertical"
                    },
                    "horizontal": {
                      "label": "Horizontal"
                    }
                  }
                }
              }
            }
          },
          "offsetPct": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentSettings",
              "attrName": "module.advanced.offsetPct",
              "label": "Handle Initial Offset",
              "description": "Define handle initial offset.",
              "priority": 20,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "0.0": {
                      "label": "0.0"
                    },
                    "0.1": {
                      "label": "0.1"
                    },
                    "0.2": {
                      "label": "0.2"
                    },
                    "0.3": {
                      "label": "0.3"
                    },
                    "0.4": {
                      "label": "0.4"
                    },
                    "0.5": {
                      "label": "0.5"
                    },
                    "0.6": {
                      "label": "0.6"
                    },
                    "0.7": {
                      "label": "0.7"
                    },
                    "0.8": {
                      "label": "0.8"
                    },
                    "0.9": {
                      "label": "0.9"
                    }
                  }
                }
              }
            }
          },
          "moveOnHover": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentSettings",
              "attrName": "module.advanced.moveOnHover",
              "label": "Move on Hover",
              "description": "Here you can choose whether handle should be moved on hover.",
              "priority": 30,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/toggle"
              }
            }
          },
          "overlay": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentSettings",
              "attrName": "module.advanced.overlay",
              "label": "Use Overlay on Hover",
              "description": "Here you can choose whether overlay should be used on hover.",
              "priority": 40,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/toggle"
              }
            }
          },
          "showLabel": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentSettings",
              "attrName": "module.advanced.showLabel",
              "label": "Show Before/After Label",
              "description": "Here you can choose whether before/after label should be used.",
              "priority": 50,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "always": {
                      "label": "Always"
                    },
                    "on_hover": {
                      "label": "On Hover"
                    }
                  }
                }
              }
            }
          },
          "labelPadding": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designLabel",
              "attrName": "module.advanced.labelPadding",
              "label": "Padding",
              "description": "Here you can define a custom padding for the label.",
              "priority": 20,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": true,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/spacing"
              }
            }
          },
          "labelHeight": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designLabel",
              "attrName": "module.advanced.labelHeight",
              "label": "Height",
              "description": "Here you can define a custom label height.",
              "priority": 30,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": true,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": {
                  "min": 0,
                  "max": 200,
                  "step": 1,
                  "defaultUnit": "px"
                }
              }
            }
          },
          "labelWidth": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designLabel",
              "attrName": "module.advanced.labelWidth",
              "label": "Width",
              "description": "Here you can define a custom label width.",
              "priority": 40,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": true,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": {
                  "min": 0,
                  "max": 300,
                  "step": 1,
                  "defaultUnit": "px"
                }
              }
            }
          },
          "handleStyle": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designHandle",
              "attrName": "module.advanced.handleStyle",
              "label": "Handle Style",
              "description": "Here you can select a different handle type.",
              "priority": 10,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "handle-1": {
                      "label": "Style 1"
                    },
                    "handle-2": {
                      "label": "Style 2"
                    }
                  }
                }
              }
            }
          },
          "handleColor": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designHandle",
              "attrName": "module.advanced.handleColor",
              "label": "Handle Color",
              "description": "Here you can define a custom handle color.",
              "priority": 20,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/color-picker",
                "props": {
                  "isAlpha": true
                }
              }
            }
          },
          "arrowColor": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designHandle",
              "attrName": "module.advanced.arrowColor",
              "label": "Arrow Color",
              "description": "Here you can define a custom color for the arrows.",
              "priority": 30,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/color-picker",
                "props": {
                  "isAlpha": true
                }
              }
            }
          }
        },
        "decoration": {
          "animation": {},
          "layout": {},
          "background": {},
          "border": {},
          "boxShadow": {},
          "filters": {},
          "overflow": {},
          "position": {},
          "scroll": {},
          "spacing": {},
          "sizing": {},
          "sticky": {},
          "transform": {},
          "transition": {},
          "zIndex": {},
          "disabledOn": {}
        }
      }
    },
    "beforeImage": {
      "type": "object",
      "selector": "{{selector}} .dtq-before-img",
      "settings": {
        "innerContent": {
          "groupType": "group-item",
          "item": {
            "groupSlug": "contentBefore",
            "attrName": "beforeImage.innerContent",
            "label": "Image",
            "description": "Upload an image to display as before image.",
            "priority": 10,
            "render": true,
            "features": {
              "sticky": false,
              "responsive": false,
              "hover": false,
              "dynamicContent": true
            },
            "component": {
              "type": "field",
              "name": "divi/upload"
            }
          }
        }
      }
    },
    "afterImage": {
      "type": "object",
      "selector": "{{selector}} .dtq-after-img",
      "settings": {
        "innerContent": {
          "groupType": "group-item",
          "item": {
            "groupSlug": "contentAfter",
            "attrName": "afterImage.innerContent",
            "label": "Image",
            "description": "Upload an image to display as after image.",
            "priority": 10,
            "render": true,
            "features": {
              "sticky": false,
              "responsive": false,
              "hover": false,
              "dynamicContent": true
            },
            "component": {
              "type": "field",
              "name": "divi/upload"
            }
          }
        }
      }
    },
    "label": {
      "type": "object",
      "selector": "{{selector}} .twentytwenty-before-label:before, {{selector}} .twentytwenty-after-label:before",
      "settings": {
        "decoration": {
          "font": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designLabel",
              "priority": 10,
              "render": true,
              "component": {
                "name": "divi/font",
                "type": "group",
                "props": {
                  "grouped": false,
                  "fieldLabel": "Label",
                  "hideTextAlign": true
                }
              }
            }
          }
        }
      }
    },
    "labelBox": {
      "type": "object",
      "selector": "{{selector}} .twentytwenty-overlay div:before",
      "default": {
        "decoration": {
          "border": {
            "desktop": {
              "value": {
                "radius": {
                  "topLeft": "4px",
                  "topRight": "4px",
                  "bottomLeft": "4px",
                  "bottomRight": "4px"
                },
                "styles": {
                  "all": {
                    "width": "0px",
                    "color": "#333333",
                    "style": "solid"
                  }
                }
              }
            }
          }
        }
      },
      "settings": {
        "decoration": {
          "border": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designLabel",
              "priority": 50,
              "render": true,
              "component": {
                "name": "divi/border",
                "type": "group",
                "props": {
                  "grouped": false,
                  "fieldLabel": "Label"
                }
              }
            }
          }
        }
      }
    }
  },
  "customCssFields": {
    "beforeImg": {
      "subName": "beforeImg",
      "selectorSuffix": " .twentytwenty-before"
    },
    "afterImg": {
      "subName": "afterImg",
      "selectorSuffix": " .twentytwenty-after"
    },
    "beforeLabel": {
      "subName": "beforeLabel",
      "selectorSuffix": " .twentytwenty-before-label"
    },
    "afterLabel": {
      "subName": "afterLabel",
      "selectorSuffix": " .twentytwenty-after-label"
    }
  },
  "settings": {
    "content": "auto",
    "design": "auto",
    "advanced": "auto",
    "groups": {
      "contentBefore": {
        "panel": "content",
        "priority": 10,
        "groupName": "before",
        "component": {
          "name": "divi/composite",
          "props": {
            "groupLabel": "Before"
          }
        }
      },
      "contentAfter": {
        "panel": "content",
        "priority": 20,
        "groupName": "after",
        "component": {
          "name": "divi/composite",
          "props": {
            "groupLabel": "After"
          }
        }
      },
      "contentSettings": {
        "panel": "content",
        "priority": 30,
        "groupName": "settings",
        "component": {
          "name": "divi/composite",
          "props": {
            "groupLabel": "Settings"
          }
        }
      },
      "designLabel": {
        "panel": "design",
        "priority": 10,
        "groupName": "label",
        "multiElements": true,
        "component": {
          "name": "divi/composite",
          "props": {
            "groupLabel": "Label",
            "clipboardCategory": "style"
          }
        }
      },
      "designHandle": {
        "panel": "design",
        "priority": 20,
        "groupName": "handle",
        "component": {
          "name": "divi/composite",
          "props": {
            "groupLabel": "Handle"
          }
        }
      }
    }
  }
}