Merge pull request #56 from xiel/feature/#55-RTL

Support RTL Direction (right to left)

docs/react/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@types/react": "^16.9.56",
     "@types/react-dom": "^16.9.9",
-    "embla-carousel": "^4.0.6",
+    "embla-carousel": "^4.1.0",
     "embla-carousel-wheel-gestures": "^1.0.6",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"

docs/vanilla/index.html

@@ -34,10 +34,7 @@
 
         <!-- Buttons -->
         <button class="embla__button embla__button--prev" type="button">
-          <svg
-            class="embla__button__svg"
-            viewBox="137.718 -1.001 366.563 643.999"
-          >
+          <svg class="embla__button__svg" viewBox="137.718 -1.001 366.563 643.999">
             <path
               d="M428.36 12.5c16.67-16.67 43.76-16.67 60.42 0 16.67 16.67 16.67 43.76 0 60.42L241.7 320c148.25 148.24 230.61 230.6 247.08 247.08 16.67 16.66 16.67 43.75 0 60.42-16.67 16.66-43.76 16.67-60.42 0-27.72-27.71-249.45-249.37-277.16-277.08a42.308 42.308 0 0 1-12.48-30.34c0-11.1 4.1-22.05 12.48-30.42C206.63 234.23 400.64 40.21 428.36 12.5z"
             ></path>
@@ -61,13 +58,7 @@
         true
       </label>
       <label class="radio__label">
-        <input
-          class="radio__input"
-          type="radio"
-          name="loop"
-          value="false"
-          checked
-        />
+        <input class="radio__input" type="radio" name="loop" value="false" checked />
         false
       </label>
     </div>
@@ -78,13 +69,7 @@
         true
       </label>
       <label class="radio__label">
-        <input
-          class="radio__input"
-          type="radio"
-          name="dragFree"
-          value="false"
-          checked
-        />
+        <input class="radio__input" type="radio" name="dragFree" value="false" checked />
         false
       </label>
     </div>

docs/vanilla/package.json

@@ -9,7 +9,7 @@
     "build": "parcel build index.html"
   },
   "dependencies": {
-    "embla-carousel": "^4.0.6",
+    "embla-carousel": "^4.1.0",
     "embla-carousel-wheel-gestures": "^1.0.6"
   },
   "devDependencies": {

docs/vanilla/src/css/embla.css

@@ -82,10 +82,22 @@
   left: 0.7rem;
 }
 
+.embla[dir="rtl"] .embla__button--prev {
+  right: 0.7rem;
+  left: auto;
+  transform: translateY(-50%) scaleX(-1);
+}
+
 .embla__button--next {
   right: 0.7rem;
 }
 
+.embla[dir="rtl"] .embla__button--next {
+  left: 0.7rem;
+  right: auto;
+  transform: translateY(-50%) scaleX(-1);
+}
+
 .embla__dots {
   position: absolute;
   margin-top: 1rem;

docs/vanilla/src/js/directionRTL.ts

@@ -0,0 +1,10 @@
+import { EmblaCarouselType } from 'embla-carousel'
+
+export function setupRTLDirectionIfNeeded(embla: EmblaCarouselType, emblaWrapper: HTMLElement) {
+  const isRTL = window.location.search.includes('rtl')
+
+  if (isRTL) {
+    emblaWrapper.dir = 'rtl'
+    embla.reInit({ direction: 'rtl' })
+  }
+}

docs/vanilla/src/js/index.ts

@@ -6,17 +6,19 @@ import '../css/radio.css'
 import EmblaCarousel from 'embla-carousel'
 import { setupWheelGestures } from 'embla-carousel-wheel-gestures'
 
+import { setupRTLDirectionIfNeeded } from './directionRTL'
 import { generateDotBtns, selectDotBtn, setupDotBtns } from './dotButtons'
 import { disablePrevNextBtns, setupPrevNextBtns } from './prevAndNextButtons'
 import { setupRadioButtons } from './radioButtons'
 
-const wrap = document.querySelector('.embla')!
+const wrap = document.documentElement.querySelector('.embla')! as HTMLElement
 const viewPort = wrap.querySelector('.embla__viewport')!
 const prevBtn = wrap.querySelector('.embla__button--prev')
 const nextBtn = wrap.querySelector('.embla__button--next')
 const dots = wrap.querySelector('.embla__dots')
 const radioButtons = document.querySelectorAll('.radio__input')
 const radioButtonsArray = [].slice.call(radioButtons)
+
 const embla = EmblaCarousel(viewPort as HTMLElement, {
   loop: false,
 })
@@ -28,6 +30,7 @@ const disablePrevAndNextBtns = disablePrevNextBtns(prevBtn, nextBtn, embla)
 setupPrevNextBtns(prevBtn, nextBtn, embla)
 setupDotBtns(dotsArray, embla)
 setupRadioButtons(radioButtonsArray, embla, disablePrevAndNextBtns)
+setupRTLDirectionIfNeeded(embla, wrap) // visit with query parameter (?rtl)
 
 // add support for wheel gestures
 setupWheelGestures(embla)

embla-carousel-wheel-gestures/package.json

@@ -48,7 +48,7 @@
   },
   "homepage": "https://github.com/xiel/embla-carousel-wheel-gestures#readme",
   "peerDependencies": {
-    "embla-carousel": "^4.0.6"
+    "embla-carousel": "^4.1.0"
   },
   "dependencies": {
     "wheel-gestures": "^2.2.1"
@@ -57,7 +57,7 @@
     "@testing-library/react": "^10.4.3",
     "@types/jest": "^26.0.3",
     "bundlewatch": "^0.3.1",
-    "embla-carousel": "^4.0.6",
+    "embla-carousel": "^4.1.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-app": "^6.2.2",

embla-carousel-wheel-gestures/src/setupWheelGestures.ts

@@ -21,6 +21,7 @@ export function setupWheelGestures(embla: TEmblaCarousel) {
 
     const wheelGestures = WheelGestures({
       preventWheelAction: engine.options.axis,
+      reverseSign: [engine.options.direction !== 'rtl', true, false],
     })
 
     const unobserveTargetNode = wheelGestures.observe(targetNode)

yarn.lock

@@ -3226,10 +3226,10 @@ elliptic@^6.0.0, elliptic@^6.5.2:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
-embla-carousel@^4.0.6:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/embla-carousel/-/embla-carousel-4.0.6.tgz#52dae0c0d2d47fa7cc055c9c0dbdd710d9f15d47"
-  integrity sha512-AJpyxQHom4gRwLFAcjf880OxbeshNd+K1neALdMJsyljUXadTPdTZaRdko6CwD+Z6XT/MzWZuF74bJh8sXM/Yw==
+embla-carousel@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/embla-carousel/-/embla-carousel-4.1.0.tgz#5838b01d474d8321b820362f557aa5b0c49e7fad"
+  integrity sha512-DO251gLGuOE5WQP4Rs5kkJ6MqcpUS1AfZo921JCfWPtTn2Hp6n38bcZSu+dlhsfNck5x/VoYASkqPkDaeCgLug==
 
 emoji-regex@^7.0.1, emoji-regex@^7.0.2:
   version "7.0.3"