feat: add zoom right to left support #665
Description
@paulstraw I have an issue with right to left language and my current set up. I believe it is from how the code calculates the 'right' positioning of the image, but I cannot verify.
Examples:
- Default (LTR): https://clothing-filter-theme.myshopify.com/collections/mens-t-shirts/products/avenue-demo-product
- RTL: https://clothing-filter-theme.myshopify.com/ar/collections/mens-t-shirts/products/avenue-demo-product
The default Javascript is used, and the only parameters are:
new Drift(e, { paneContainer: e.closest('.drift'), inlinePane: 1 });
CSS is fairly standard, and I have tried the default CSS & current JS also:
`.drift-zoom-pane.drift-inline {
position: absolute;
width: 150px;
height: 150px;
border-radius: 75px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.drift-zoom-pane.drift-open {
background: var(--white);
}
.drift-zoom-pane.drift-open.drift-loading {
background: none;
}
.drift-loading .drift-zoom-pane-loader {
background: rgba(255, 255, 255, 0.75);
content: '';
display: block;
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 100%;
z-index: 999;
}
.drift-zoom-pane-loader:after {
content: '';
animation: loader-rotate 1s linear infinite;
background: transparent;
border: 2px solid var(--button_color_25);
border-bottom-color: var(--button_color);
border-radius: 50%;
@include border-box();
height: calc(var(--master_spacing) * 2.5);
left: 50%;
margin-left: calc(-1 * var(--master_spacing) * 1.25);
margin-top: calc(-1 * var(--master_spacing) * 1.25);
opacity: 0.75;
filter: alpha(opacity=75);
padding: 0;
position: absolute;
top: 50%;
width: calc(var(--master_spacing) * 2.5);
z-index: 999;
}`
Most demo's use the separate window, and I havent been able to set up a proper RTL test. Has this been seen before or are there any suggestions?