From c2d9e3f65efae4eb09e15eb2f0e5abee07e1bc42 Mon Sep 17 00:00:00 2001
From: Pooria Morovati <pooria.morovati@gmail.com>
Date: Tue, 25 Feb 2020 15:41:12 +0330
Subject: [PATCH 1/4] enable or disable dragging based on overflow

---
 js/drag.js         |  3 +++
 sandbox/basic.html | 12 ++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/js/drag.js b/js/drag.js
index ad199001..3d61d7db 100644
--- a/js/drag.js
+++ b/js/drag.js
@@ -84,6 +84,9 @@ proto.updateDraggable = function() {
   // disable dragging if less than 2 slides. #278
   if ( this.options.draggable == '>1' ) {
     this.isDraggable = this.slides.length > 1;
+  } else if (this.options.draggable === 'onOverflow') {
+    var viewport = this.element.querySelector('.flickity-viewport');
+    this.isDraggable = viewport.scrollWidth > viewport.offsetWidth;
   } else {
     this.isDraggable = this.options.draggable;
   }
diff --git a/sandbox/basic.html b/sandbox/basic.html
index c520ca59..2c0b2c84 100644
--- a/sandbox/basic.html
+++ b/sandbox/basic.html
@@ -141,6 +141,18 @@ <h2>contain, few</h2>
     <!-- <div class="cell n3">3</div> -->
   </div>
 
+  <h2>contain, only draggable if overflow</h2>
+
+  <div class="container variable-width js-flickity"
+       data-flickity-options='{ "contain": true, "cellAlign": "left", "draggable": "onOverflow" }'>
+    <div class="cell n1">1</div>
+    <div class="cell n2">2</div>
+    <div class="cell n3">3</div>
+    <div class="cell n4">4</div>
+    <div class="cell n5">5</div>
+    <div class="cell n6">6</div>
+  </div>
+
   <h2>watch, activate >900px</h2>
 
   <div id="gallery5" class="container variable-width js-flickity"

From 937164ab51fbe19d9291403522ff82fc67c57658 Mon Sep 17 00:00:00 2001
From: Pooria Morovati <pooria.morovati@gmail.com>
Date: Tue, 25 Feb 2020 18:17:01 +0330
Subject: [PATCH 2/4] use this.viewport directly

---
 js/drag.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/js/drag.js b/js/drag.js
index 3d61d7db..3f55ad81 100644
--- a/js/drag.js
+++ b/js/drag.js
@@ -85,8 +85,7 @@ proto.updateDraggable = function() {
   if ( this.options.draggable == '>1' ) {
     this.isDraggable = this.slides.length > 1;
   } else if (this.options.draggable === 'onOverflow') {
-    var viewport = this.element.querySelector('.flickity-viewport');
-    this.isDraggable = viewport.scrollWidth > viewport.offsetWidth;
+    this.isDraggable = this.viewport.scrollWidth > this.viewport.offsetWidth;
   } else {
     this.isDraggable = this.options.draggable;
   }

From 5adc1fdfdad389e473ef5c40fda2ea872c27d258 Mon Sep 17 00:00:00 2001
From: Pooria Morovati <pooria.morovati@gmail.com>
Date: Tue, 25 Feb 2020 19:53:25 +0330
Subject: [PATCH 3/4] check visibility by adding a proper className

---
 js/animate.js  |  2 ++
 js/drag.js     |  2 ++
 js/flickity.js | 19 +++++++++++++++++++
 js/slide.js    |  2 ++
 4 files changed, 25 insertions(+)

diff --git a/js/animate.js b/js/animate.js
index e3dcafde..2fb9bd0f 100644
--- a/js/animate.js
+++ b/js/animate.js
@@ -126,6 +126,8 @@ proto.settle = function( previousX ) {
     this.positionSlider();
     this.dispatchEvent( 'settle', null, [ this.selectedIndex ] );
   }
+
+  this.checkVisibility();
 };
 
 proto.shiftWrapCells = function( x ) {
diff --git a/js/drag.js b/js/drag.js
index 3f55ad81..a2c033ac 100644
--- a/js/drag.js
+++ b/js/drag.js
@@ -241,6 +241,8 @@ proto.dragMove = function( event, pointer, moveVector ) {
 
   this.dragMoveTime = new Date();
   this.dispatchEvent( 'dragMove', event, [ pointer, moveVector ] );
+
+  this.checkVisibility();
 };
 
 proto.dragEnd = function( event, pointer ) {
diff --git a/js/flickity.js b/js/flickity.js
index d06387be..b26b5c5c 100644
--- a/js/flickity.js
+++ b/js/flickity.js
@@ -752,6 +752,25 @@ proto.queryCell = function( selector ) {
   return this.getCell( selector );
 };
 
+proto.checkVisibility = function() {
+  var viewportX = this.viewport.getBoundingClientRect().x;
+  var viewportWidth = this.viewport.offsetWidth;
+
+  this.cells.forEach(function (cell) {
+    var cellX = cell.element.getBoundingClientRect().x - viewportX;
+    var isVisible = (
+        (cellX + cell.size.innerWidth > viewportX) && (cellX + cell.size.innerWidth < viewportWidth) ||
+        (cellX > viewportX) && (cellX < viewportWidth)
+    );
+
+    if (isVisible) {
+      cell.element.classList.add('is-visible');
+    } else {
+      cell.element.classList.remove('is-visible');
+    }
+  });
+};
+
 // -------------------------- events -------------------------- //
 
 proto.uiChange = function() {
diff --git a/js/slide.js b/js/slide.js
index eb6fb954..bf083cb3 100644
--- a/js/slide.js
+++ b/js/slide.js
@@ -52,6 +52,8 @@ proto.getLastCell = function() {
 };
 
 proto.select = function() {
+  this.parent.checkVisibility();
+
   this.cells.forEach( function( cell ) {
     cell.select();
   });

From 993fce26eb663cfbd828f90e02d5fb6d35de83f2 Mon Sep 17 00:00:00 2001
From: Pooria <pooria.morovati@gmail.com>
Date: Mon, 2 Nov 2020 12:27:33 +0330
Subject: [PATCH 4/4] Added `aria-hiden` support

---
 js/flickity.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/js/flickity.js b/js/flickity.js
index b26b5c5c..d7a84815 100644
--- a/js/flickity.js
+++ b/js/flickity.js
@@ -765,8 +765,10 @@ proto.checkVisibility = function() {
 
     if (isVisible) {
       cell.element.classList.add('is-visible');
+      cell.element.removeAttribute('aria-hidden');
     } else {
       cell.element.classList.remove('is-visible');
+      cell.element.setAttribute('aria-hidden', true);
     }
   });
 };