Create SCROLL_LOCK_DISABLE_HORIZONTAL_ATTR attribute

Author: marinaaisa

src/components/Filter/FilterInput.vue

@@ -37,7 +37,7 @@
         </button>
         <div
           :class="['filter__input-box-wrapper', { 'scrolling': isScrolling }]"
-          v-bind="{[SCROLL_LOCK_DISABLE_ATTR]: true}"
+          v-bind="{[SCROLL_LOCK_DISABLE_HORIZONTAL_ATTR]: true}"
           @scroll="handleScroll"
         >
           <TagList
@@ -129,7 +129,7 @@
 import ClearRoundedIcon from 'theme/components/Icons/ClearRoundedIcon.vue';
 import multipleSelection from 'docc-render/mixins/multipleSelection';
 import handleScrollbar from 'docc-render/mixins/handleScrollbar';
-import { SCROLL_LOCK_DISABLE_ATTR } from 'docc-render/utils/scroll-lock';
+import { SCROLL_LOCK_DISABLE_HORIZONTAL_ATTR } from 'docc-render/utils/scroll-lock';
 import FilterIcon from 'theme/components/Icons/FilterIcon.vue';
 import TagList from './TagList.vue';
 
@@ -227,7 +227,7 @@ export default {
       SuggestedTagsId,
       AXinputProperties,
       showSuggestedTags: false,
-      SCROLL_LOCK_DISABLE_ATTR,
+      SCROLL_LOCK_DISABLE_HORIZONTAL_ATTR,
     };
   },
   computed: {

src/components/Filter/TagList.vue

@@ -24,7 +24,7 @@
         role="listbox"
         :aria-multiselectable="areTagsRemovable ? 'true' : 'false'"
         aria-orientation="horizontal"
-        v-bind="{[SCROLL_LOCK_DISABLE_ATTR]: true}"
+        v-bind="{[SCROLL_LOCK_DISABLE_HORIZONTAL_ATTR]: true}"
         @keydown.left.capture.prevent="focusPrev"
         @keydown.right.capture.prevent="focusNext"
         @keydown.up.capture.prevent="focusPrev"
@@ -62,7 +62,7 @@
 import { isSingleCharacter } from 'docc-render/utils/input-helper';
 import handleScrollbar from 'docc-render/mixins/handleScrollbar';
 import keyboardNavigation from 'docc-render/mixins/keyboardNavigation';
-import { SCROLL_LOCK_DISABLE_ATTR } from 'docc-render/utils/scroll-lock';
+import { SCROLL_LOCK_DISABLE_HORIZONTAL_ATTR } from 'docc-render/utils/scroll-lock';
 import Tag from './Tag.vue';
 
 export default {
@@ -73,7 +73,7 @@ export default {
   ],
   data() {
     return {
-      SCROLL_LOCK_DISABLE_ATTR,
+      SCROLL_LOCK_DISABLE_HORIZONTAL_ATTR,
     };
   },
   props: {

src/utils/scroll-lock.js

@@ -12,8 +12,10 @@ let isLocked = false;
 let initialClientY = -1;
 let initialClientX = -1;
 let scrolledClientY = 0;
-// Adds this attribute to an inner scrollable element to allow it to scroll
+// Adds this attribute to an vertical scrollable element to allow it to scroll
 export const SCROLL_LOCK_DISABLE_ATTR = 'data-scroll-lock-disable';
+// Adds this attribute to an horizontal scrollable element to allow it to scroll
+export const SCROLL_LOCK_DISABLE_HORIZONTAL_ATTR = 'data-scroll-lock-horizontal-disable';
 
 const isIosDevice = () => window.navigator
   && window.navigator.platform
@@ -74,19 +76,17 @@ function advancedUnlock(targetElement) {
   document.removeEventListener('touchmove', preventDefault);
 }
 
-const isVerticalScroll = ({ scrollHeight, scrollWidth }) => scrollHeight > scrollWidth;
-
 /**
  * Handles the scrolling of the targetElement
  * @param {TouchEvent} event
  * @param {HTMLElement} targetElement
  * @return {boolean}
  */
-function handleScroll(event, target) {
+function handleScroll(event, target, isHorizontal) {
   const clientY = event.targetTouches[0].clientY - initialClientY;
   const clientX = event.targetTouches[0].clientX - initialClientX;
 
-  if (isVerticalScroll(target)) {
+  if (!isHorizontal) {
     if (target.scrollTop === 0 && clientY > 0) {
       // element is at the top of its scroll.
       return preventDefault(event);
@@ -110,7 +110,7 @@ function handleScroll(event, target) {
  * Advanced scroll locking for iOS devices.
  * @param targetElement
  */
-function advancedLock(targetElement) {
+function advancedLock(targetElement, isHorizontal = false) {
   // add a scroll listener to the body
   document.addEventListener('touchmove', preventDefault, { passive: false });
   if (!targetElement) return;
@@ -126,7 +126,7 @@ function advancedLock(targetElement) {
   targetElement.ontouchmove = (event) => {
     if (event.targetTouches.length === 1) {
       // detect single touch.
-      handleScroll(event, targetElement);
+      handleScroll(event, targetElement, isHorizontal);
     }
   };
 }
@@ -149,9 +149,12 @@ export default {
     } else {
       // lock everything but target element
       advancedLock(targetElement);
-      // lock everything but disabled targets
+      // lock everything but disabled targets with vertical scrolling
       const disabledTargets = document.querySelectorAll(`[${SCROLL_LOCK_DISABLE_ATTR}]`);
       disabledTargets.forEach(target => advancedLock(target));
+      // lock everything but disabled targets with horizontal scrolling
+      const disabledHorizontalTargets = document.querySelectorAll(`[${SCROLL_LOCK_DISABLE_HORIZONTAL_ATTR}]`);
+      disabledHorizontalTargets.forEach(target => advancedLock(target, true));
     }
     isLocked = true;
   },
@@ -167,7 +170,8 @@ export default {
       advancedUnlock(targetElement);
       // revert the old scroll position for disabled targets
       const disabledTargets = document.querySelectorAll(`[${SCROLL_LOCK_DISABLE_ATTR}]`);
-      disabledTargets.forEach(target => advancedUnlock(target));
+      const disabledHorizontalTargets = document.querySelectorAll(`[${SCROLL_LOCK_DISABLE_HORIZONTAL_ATTR}]`);
+      [...disabledTargets, ...disabledHorizontalTargets].forEach(target => advancedUnlock(target));
     } else {
       // remove all inline styles added by the `simpleLock` function
       document.body.style.removeProperty('overflow');

tests/unit/utils/scroll-lock.spec.js

@@ -8,7 +8,7 @@
  * See https://swift.org/CONTRIBUTORS.txt for Swift project authors
 */
 
-import scrollLock, { SCROLL_LOCK_DISABLE_ATTR } from 'docc-render/utils/scroll-lock';
+import scrollLock, { SCROLL_LOCK_DISABLE_ATTR, SCROLL_LOCK_DISABLE_HORIZONTAL_ATTR } from 'docc-render/utils/scroll-lock';
 import { createEvent, parseHTMLString } from '../../../test-utils';
 
 const { platform } = window.navigator;
@@ -32,6 +32,7 @@ describe('scroll-lock', () => {
       <div class="container">
         <div class="scrollable">long</div>
         <div ${SCROLL_LOCK_DISABLE_ATTR}="true" class="disabled-target"></div>
+        <div ${SCROLL_LOCK_DISABLE_HORIZONTAL_ATTR}="true" class="disabled-horizontal-target"></div>
       </div>
     `);
     document.body.appendChild(DOM);
@@ -90,23 +91,37 @@ describe('scroll-lock', () => {
 
     it('adds event listeners to the disabled targets too', () => {
       const disabledTarget = DOM.querySelector('.disabled-target');
+      const disabledHorizontalTarget = DOM.querySelector('.disabled-horizontal-target');
       // init the scroll lock
       scrollLock.lockScroll(container);
       // assert event listeners are attached
       expect(disabledTarget.ontouchstart).toEqual(expect.any(Function));
       expect(disabledTarget.ontouchmove).toEqual(expect.any(Function));
+      expect(disabledHorizontalTarget.ontouchstart).toEqual(expect.any(Function));
+      expect(disabledHorizontalTarget.ontouchmove).toEqual(expect.any(Function));
 
       scrollLock.unlockScroll(container);
       expect(disabledTarget.ontouchmove).toBeFalsy();
       expect(disabledTarget.ontouchstart).toBeFalsy();
+      expect(disabledHorizontalTarget.ontouchstart).toBeFalsy();
+      expect(disabledHorizontalTarget.ontouchmove).toBeFalsy();
     });
 
     it('prevent event if user tries to perform vertical scroll in an horizontal scrolling element', () => {
-      Object.defineProperty(container, 'scrollWidth', { value: 100, writable: true });
+      // set horizontal scrolling element only
+      DOM = parseHTMLString(`
+        <div class="container">
+          <div class="scrollable">long</div>
+          <div ${SCROLL_LOCK_DISABLE_HORIZONTAL_ATTR}="true" class="disabled-horizontal-target"></div>
+        </div>
+      `);
+      document.body.appendChild(DOM);
+      container = DOM.querySelector('.container');
 
       const touchStartEvent = {
         targetTouches: [{ clientY: 0, clientX: 0 }],
       };
+      // perform vertical scroll
       const touchMoveEvent = {
         targetTouches: [{ clientY: -10, clientX: 0 }],
         preventDefault,