feat: add zoom right to left support

RedPlugDesign commented 2 years ago

@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:

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?

luqven commented 2 years ago

Hey @RedPlugDesign 👋🏼

Thanks for opening this issue! While I can't give you a time estimate, we'll look into this and get back to you.

In the meantime, any additional context about how the example "Default (LTR)" you provided differs from the "RTL" would be useful; IE are there any significant CSS/JS changes other than float: left vs float: right between the two implementations?

RedPlugDesign commented 2 years ago

Mainly just the floats, padding and text alignment. Aside from the column container, nothing specifically applied to the images or zoom container

luqven commented 2 years ago

Hey @RedPlugDesign,

I wanted to let you know that we had a chance to discuss this as a team and determined that we don't currently have the bandwidth to tackle RTL support right now. I'll leave this ticket open and we'll come back to it when we've had a chance to clear our backlog.

In the meantime, if anyone else would like to see support for this feature comment or react to this post. This will help us prioritize this task moving forward.

RedPlugDesign commented 2 years ago

Disappointing, but understandable.

Fisujon commented 1 year ago

@RedPlugDesign,

To enable RTL support for external zoom, simply include the following code.

/rtl:ignore/ .rtl { .drift-zoom-pane { img { left: 0; } } }

RedPlugDesign commented 1 year ago

Thanks for the follow-up, but this is not working for me. I am using the trl class in <body>, but this had no affect. Oddly enough, I cannot apply any styles to that image. Example, I tried to change the opacity for something obvious and it had to affect. I am using 1.4.1, but added the latest and tested with no affect.

I also tried this on the Demo CodePen with no results.

Is there a way to force the drift-zoom-pane div to always be present in order to troubleshoot this easier?

strawdynamics / drift

feat: add zoom right to left support #665