Verified Commit 6cfd0670 authored by Dave Long's avatar Dave Long
Browse files

Issue #2707291 by Utkarsh_33, lauriii, darvanen, samuel.mortenson, hooroomoo,... 

Issue #2707291 by Utkarsh_33, lauriii, darvanen, samuel.mortenson, hooroomoo, komalk, narendraR, Vidushi Mehta, sasanikolic, droplet, smustgrave, yoroy, Bcwald, kostyashupenko, penyaskito: Disable body-level scrolling when a dialog is open as a modal
parent 9a1ce8c4

core/.eslintrc.json

+2 −1
Original line number Diff line number Diff line
@@ -25,7 +25,8 @@ 
    "once": true,

    "CKEditor5": true,

    "tabbable": true,

    "slugify": true

    "slugify": true,

    "bodyScrollLock" : true

  },

  "rules": {

    "prettier/prettier": "error",

core/assets/vendor/tua-body-scroll-lock/tua-bsl.umd.min.js

0 → 100644
+6 −0
Original line number Diff line number Diff line 
/**

 * tua-body-scroll-lock v1.4.0

 * (c) 2023 Evinma, BuptStEve

 * @license MIT

 */

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).bodyScrollLock={})}(this,(function(e){"use strict";var t=function(){return"undefined"==typeof window},o=function(e){e=e||navigator.userAgent;var t=/(iPad).*OS\s([\d_]+)/.test(e);return{ios:!t&&/(iPhone\sOS)\s([\d_]+)/.test(e)||t,android:/(Android);?[\s/]+([\d.]+)?/.test(e)}};var n=0,i=0,r=0,s=null,l=!1,c=[],d=function(e){if(t())return!1;if(!e)throw new Error("options must be provided");var o=!1,n={get passive(){o=!0}},i=function(){},r="__TUA_BSL_TEST_PASSIVE__";window.addEventListener(r,i,n),window.removeEventListener(r,i,n);var s=e.capture;return o?e:void 0!==s&&s}({passive:!1}),u=!t()&&"scrollBehavior"in document.documentElement.style,f=function(e){e.cancelable&&e.preventDefault()};e.clearBodyLocks=function(){if(!t())if(n=0,o().ios||"function"!=typeof s){if(c.length)for(var e=c.pop();e;)e.ontouchmove=null,e.ontouchstart=null,e=c.pop();l&&(document.removeEventListener("touchmove",f,d),l=!1)}else s()},e.lock=function(e,a){if(!t()){if(o().ios){if(e)(Array.isArray(e)?e:[e]).forEach((function(e){e&&-1===c.indexOf(e)&&(e.ontouchstart=function(e){i=e.targetTouches[0].clientY,r=e.targetTouches[0].clientX},e.ontouchmove=function(t){1===t.targetTouches.length&&function(e,t){if(t){var o=t.scrollTop,n=t.scrollLeft,s=t.scrollWidth,l=t.scrollHeight,c=t.clientWidth,d=t.clientHeight,u=e.targetTouches[0].clientX-r,a=e.targetTouches[0].clientY-i,h=Math.abs(a)>Math.abs(u);if(h&&(a>0&&0===o||a<0&&o+d+1>=l)||!h&&(u>0&&0===n||u<0&&n+c+1>=s))return f(e)}e.stopPropagation()}(t,e)},c.push(e))}));l||(document.addEventListener("touchmove",f,d),l=!0)}else n<=0&&(s=o().android?function(e){var t=document.documentElement,o=document.body,n=t.scrollTop||o.scrollTop,i=Object.assign({},t.style),r=Object.assign({},o.style);return t.style.height="100%",t.style.overflow="hidden",o.style.top="-".concat(n,"px"),o.style.width="100%",o.style.height="auto",o.style.position="fixed",o.style.overflow=(null==e?void 0:e.overflowType)||"hidden",function(){t.style.height=i.height||"",t.style.overflow=i.overflow||"",["top","width","height","overflow","position"].forEach((function(e){o.style[e]=r[e]||""}));var e={top:n,behavior:"instant"};u?window.scrollTo(e):window.scrollTo(0,n)}}(a):(h=document.documentElement,v=Object.assign({},h.style),p=window.innerWidth-h.clientWidth,y=parseInt(window.getComputedStyle(h).paddingRight,10),h.style.overflow="hidden",h.style.boxSizing="border-box",h.style.paddingRight="".concat(p+y,"px"),function(){["overflow","boxSizing","paddingRight"].forEach((function(e){h.style[e]=v[e]||""}))}));var h,v,p,y;n+=1}},e.unlock=function(e){if(!(t()||(n-=1)>0))if(o().ios||"function"!=typeof s){if(e)(Array.isArray(e)?e:[e]).forEach((function(e){var t=c.indexOf(e);-1!==t&&(e.ontouchmove=null,e.ontouchstart=null,c.splice(t,1))}));l&&(document.removeEventListener("touchmove",f,d),l=!1)}else s()}}));

core/core.libraries.yml

+1 −0
Original line number Diff line number Diff line
@@ -534,6 +534,7 @@ drupal.dialog: 
    assets/vendor/jquery.ui/ui/safe-blur-min.js: { weight: -11.8, minified: true }

    assets/vendor/jquery.ui/ui/widget-min.js: { weight: -11.8, minified: true }

    assets/vendor/jquery.ui/ui/version-min.js: { weight: -11.9, minified: true }

    assets/vendor/tua-body-scroll-lock/tua-bsl.umd.min.js: { weight: -1,  minified: true }

  # All CSS assets previously came from core/jquery.ui, a deprecated library.

  # @todo replace with solution found in https://drupal.org/node/2158943

  css:

core/misc/dialog/dialog.js

+12 −2
Original line number Diff line number Diff line
@@ -5,7 +5,7 @@ 
 * @see http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#the-dialog-element

 */



(function ($, Drupal, drupalSettings) {

(function ($, Drupal, drupalSettings, bodyScrollLock) {

  /**

   * Default dialog options.

   *
@@ -73,11 +73,21 @@ 
      $(window).trigger('dialog:beforecreate', [dialog, $element, settings]);

      $element.dialog(settings);

      dialog.open = true;



      // Locks the body scroll only when it opens in modal.

      if (settings.modal) {

        // Locks the body when the dialog opens.

        bodyScrollLock.lock($element.get(0));

      }



      $(window).trigger('dialog:aftercreate', [dialog, $element, settings]);

    }



    function closeDialog(value) {

      $(window).trigger('dialog:beforeclose', [dialog, $element]);

      // Unlocks the body when the dialog closes.

      bodyScrollLock.unlock($element.get(0));



      $element.dialog('close');

      dialog.returnValue = value;

      dialog.open = false;
@@ -94,4 +104,4 @@ 


    return dialog;

  };

})(jQuery, Drupal, drupalSettings);
 
})(jQuery, Drupal, drupalSettings, bodyScrollLock);

core/modules/block/tests/src/FunctionalJavascript/BlockFilterTest.php

+16 −3
Original line number Diff line number Diff line
@@ -61,7 +61,7 @@ public function testBlockFilter() { 


    // Test Drupal.announce() message when multiple matches are expected.

    $expected_message = count($visible_rows) . ' blocks are available in the modified list.';

    $assertSession->elementTextContains('css', '#drupal-live-announce', $expected_message);

    $this->assertAnnounceContains($expected_message);



    // Test Drupal.announce() message when only one match is expected.

    $filter->setValue('Powered by');
@@ -69,7 +69,7 @@ public function testBlockFilter() { 
    $visible_rows = $this->filterVisibleElements($block_rows);

    $this->assertCount(1, $visible_rows);

    $expected_message = '1 block is available in the modified list.';

    $assertSession->elementTextContains('css', '#drupal-live-announce', $expected_message);

    $this->assertAnnounceContains($expected_message);



    // Test Drupal.announce() message when no matches are expected.

    $filter->setValue('Pan-Galactic Gargle Blaster');
@@ -77,7 +77,7 @@ public function testBlockFilter() { 
    $visible_rows = $this->filterVisibleElements($block_rows);

    $this->assertCount(0, $visible_rows);

    $expected_message = '0 blocks are available in the modified list.';

    $assertSession->elementTextContains('css', '#drupal-live-announce', $expected_message);

    $this->assertAnnounceContains($expected_message);

  }



  /**
@@ -95,4 +95,17 @@ protected function filterVisibleElements(array $elements) { 
    return $elements;

  }



  /**

   * Checks for inclusion of text in #drupal-live-announce.

   *

   * @param string $expected_message

   *   The text expected to be present in #drupal-live-announce.

   *

   * @internal

   */

  protected function assertAnnounceContains(string $expected_message): void {

    $assert_session = $this->assertSession();

    $this->assertNotEmpty($assert_session->waitForElement('css', "#drupal-live-announce:contains('$expected_message')"));

  }



}