Merge branch 'main' into dependabot/npm_and_yarn/follow-redirects-1.15.6

ThibaultJanBeyer · Jul 14, 2024 · db1afdc · db1afdc
2 parents d048388 + 3ff9cb1
commit db1afdc
Show file tree

Hide file tree

Showing 12 changed files with 148 additions and 50 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -10,6 +10,7 @@
     "prestart",
     "quicktest",
     "selectables",
+    "srcset",
     "Thibault",
     "typecheck",
     "vanillajs",

diff --git a/DragSelect/CHANGELOG.md b/DragSelect/CHANGELOG.md
@@ -1,3 +1,11 @@
+# 3.0.7
+
+- Fix an issue with scrolling bottom if there is no area defined and the document.element is used
+
+# 3.0.6
+
+- Expose the Drag class publicly, solves [#224](https://github.com/ThibaultJanBeyer/DragSelect/issues/224)
+
 # 3.0.5
 
 - Fix type issue during build bug [#212](https://github.com/ThibaultJanBeyer/DragSelect/issues/212)

diff --git a/DragSelect/package.json b/DragSelect/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dragselect",
-  "version": "3.0.5",
+  "version": "3.0.7",
   "description": "Easy JavaScript library for selecting and moving elements. With no dependencies. Drag-Select & Drag-And-Drop.",
   "main": "./dist/DragSelect.js",
   "module": "./dist/DragSelect.esm.js",

diff --git a/DragSelect/src/DragSelect.ts b/DragSelect/src/DragSelect.ts
@@ -74,7 +74,7 @@ class DragSelect<E extends DSInputElement = DSInputElement> {
   public SelectableSet: SelectableSet<E>
   public SelectedSet: SelectedSet<E>
   public Selection: Selection<E>
-  private Drag: Drag<E>
+  public Drag: Drag<E>
   public DropZones: DropZones<E>
   public Interaction: Interaction<E>
   public stopped: boolean

diff --git a/DragSelect/src/methods/scrollElement.ts b/DragSelect/src/methods/scrollElement.ts
@@ -1,24 +1,36 @@
 import { DSArea, DSEdges } from "../types"
 
+let DOC_ELEMENT: HTMLElement; // we store this in the module cache as it is highly unlikely the user to change document
+
 /** Scroll the element in the specified direction */
 export const scrollElement = (element?: DSArea, directions?: DSEdges, multiplier: number = 1) => {
   if (!directions?.length || !element) return
-
-  const docEl =
-    document &&
-    document.documentElement &&
-    document.documentElement.scrollTop &&
-    document.documentElement
-  const _element =
-    element instanceof Document ? docEl || document.body : element
+
+  let _element = element as HTMLElement | SVGElement; // we are typecasting because if it's of type Document we grab the corresponding HTMLElement anyhow
+  if(element instanceof Document) {
+    if(DOC_ELEMENT) _element = DOC_ELEMENT; // cached
+    // either the document is scrollable or the body is scrollable
+    if(Number.isFinite(document?.documentElement?.scrollTop)) {
+      const prev = document.documentElement.scrollTop;
+      document.documentElement.scrollTop += 1
+      if (document.documentElement.scrollTop === prev) {
+        _element = document.body;
+        DOC_ELEMENT = document.body;
+      } else {
+        document.documentElement.scrollTop = prev;
+        _element = document.documentElement;
+        DOC_ELEMENT = document.documentElement;
+      }
+    }
+  }
 
   const scrollTop = directions.includes('top') && _element.scrollTop > 0
   const scrollBot =
     directions.includes('bottom') && _element.scrollTop < _element.scrollHeight
   const scrollLeft = directions.includes('left') && _element.scrollLeft > 0
   const scrollRight =
     directions.includes('right') && _element.scrollLeft < _element.scrollWidth
-
+  
   if (scrollTop) _element.scrollTop -= 1 * multiplier
   if (scrollBot) _element.scrollTop += 1 * multiplier
   if (scrollLeft) _element.scrollLeft -= 1 * multiplier

diff --git a/DragSelect/src/types.ts b/DragSelect/src/types.ts
@@ -1,6 +1,5 @@
 import {
   type DSPublicPublishAdditionalEventData,
-  type DSPublicPublish,
 } from './methods/subscriberAliases'
 import { DSAreaPublishEventData, DSAreaPublishEventNames } from './modules/Area'
 import {

diff --git a/README.md b/README.md
@@ -81,11 +81,47 @@ If you're too poor or broke you can still support us with your time instead by [
 
 ## Thanks To:
 
-| <a href="https://www.browserstack.com/"><img src="https://cdn.worldvectorlogo.com/logos/browserstack.svg" alt="Browserstack" width="100px" /></a>                                                             | <a href="https://www.digitalocean.com/"><img src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/SVG/DO_Logo_vertical_blue.svg" alt="DigitalOcean" width="150px" /></a>                       | [You?](https://github.com/sponsors/ThibaultJanBeyer)                                                                                                                                                                                                                                                                                |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [BrowserStack](https://www.browserstack.com/) is a service for cross-browser testing. They support this open source projects by providing us with a [free account](https://www.browserstack.com/open-source)! | [DigitalOcean](https://www.digitalocean.com/) is a cloud hosting service. They support this open source projects by providing us with [free credits](https://www.digitalocean.com/open-source/credits-for-projects)! | Thank and support us by making a [Direct Donation to DragSelect](https://www.blockchain.com/btc/address/1LdweSpjgSeJC8XxX3swrohBMBLUzg6cmC) (via Bitcoin: `1LdweSpjgSeJC8XxX3swrohBMBLUzg6cmC`). Or sponsor via [GitHub Sponsors](https://github.com/sponsors/ThibaultJanBeyer) or [Get in touch](mailto:[email protected]). |
+### LambdaTest
 
-Donations are distributed with all project contributors proportionally to their involvement. We are grateful for any amount: we have more than ![npm downloads count](https://img.shields.io/npm/dt/dragselect.svg), imagine how much we'd have if everyone would have had donated only 1$ 🤩 (unfortunately this did not happen). If you donate, we can display your logo here if you want, which will give you fame, fortune and help you recruit great talent and boosting your SEO.
+<a href="https://www.lambdatest.com/" target="_blank">
+  <picture>
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://www.lambdatest.com/support/img/logo.svg"
+    />
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://www.lambdatest.com/resources/images/logo-white.svg"
+    />
+    <img
+      alt="LambdaTest"
+      width="147"
+      src="https://www.lambdatest.com/support/img/logo.svg"
+    />
+  </picture>
+</a>
+
+[LambdaTest](https://www.lambdatest.com/) is a Next-Generation Mobile App and Cross Browser Testing Cloud. They support this open source projects by providing us with a free account and with a generous donation!
+
+### BrowserStack
+
+<a href="https://www.browserstack.com/"><img src="https://cdn.worldvectorlogo.com/logos/browserstack.svg" alt="Browserstack" width="100px" /></a>
+
+[BrowserStack](https://www.browserstack.com/) is a service for cross-browser testing. They support this open source projects by providing us with a [free account](https://www.browserstack.com/open-source)!
+
+### DigitalOcean
+
+<a href="https://www.digitalocean.com/"><img src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/SVG/DO_Logo_vertical_blue.svg" alt="DigitalOcean" width="150px" /></a>
+
+[DigitalOcean](https://www.digitalocean.com/) is a cloud hosting service. They support this open source projects by providing us with [free credits](https://www.digitalocean.com/open-source/credits-for-projects)!
+
+### You?
+
+[You?](https://github.com/sponsors/ThibaultJanBeyer)
+
+Show your appreciation and support with a donation! [Direct Donation to DragSelect](https://www.blockchain.com/btc/address/1LdweSpjgSeJC8XxX3swrohBMBLUzg6cmC) (via Bitcoin: `1LdweSpjgSeJC8XxX3swrohBMBLUzg6cmC`). Or sponsor via [GitHub Sponsors](https://github.com/sponsors/ThibaultJanBeyer) or [Get in touch](mailto:[email protected]).
+
+Donations are distributed with all project contributors proportionally to their involvement. We are grateful for any amount: we have more than ![npm downloads count](https://img.shields.io/npm/dt/dragselect.svg), imagine how much we'd have if everyone would have had donated only 1$ 🤩 (unfortunately this is just a dream). If you donate, we can display your logo here if you want, which will give you infinite fame, fortune and help you recruit great talent.
 
 # Installation
 

diff --git a/www/docs/info.mdx b/www/docs/info.mdx
@@ -104,11 +104,50 @@ Thank you :)
 
 ### Thanks to:
 
-| <a href="https://www.browserstack.com/"><img src="https://cdn.worldvectorlogo.com/logos/browserstack.svg" alt="Browserstack" width="150px" /></a>                                                             | <a href="https://www.digitalocean.com/"><img src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/SVG/DO_Logo_vertical_blue.svg" alt="DigitalOcean" width="150px" /></a>                       | [You?](https://github.com/sponsors/ThibaultJanBeyer)                                                                                                                                                                                                                                                                                |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [BrowserStack](https://www.browserstack.com/) is a service for cross-browser testing. They support this open source projects by providing us with a [free account](https://www.browserstack.com/open-source)! | [DigitalOcean](https://www.digitalocean.com/) is a cloud hosting service. They support this open source projects by providing us with [free credits](https://www.digitalocean.com/open-source/credits-for-projects)! | Thank and support us by making a [Direct Donation to DragSelect](https://www.blockchain.com/btc/address/1LdweSpjgSeJC8XxX3swrohBMBLUzg6cmC) (via Bitcoin: `1LdweSpjgSeJC8XxX3swrohBMBLUzg6cmC`). Or sponsor via [GitHub Sponsors](https://github.com/sponsors/ThibaultJanBeyer) or [Get in touch](mailto:[email protected]). |
+#### LambdaTest
 
-Donations are distributed with all project contributors proportionally to their involvement. We are grateful for any amount: we have more than ![npm downloads count](https://img.shields.io/npm/dt/dragselect.svg), imagine how much we'd have if everyone would have had donated only 1$ 🤩 (unfortunately this did not happen). If you donate, we can display your logo here if you want, which will give you fame, fortune and help you recruit great talent and boosting your SEO.
+<a href="https://www.lambdatest.com/">
+  <img
+    src="https://www.lambdatest.com/support/img/logo.svg"
+    alt="LambdaTest"
+    width="147"
+    style={{ filter: "brightness(0) invert(1)" }}
+  />
+</a>
+
+[LambdaTest](https://www.lambdatest.com/) is a Next-Generation Mobile App and Cross Browser Testing Cloud. They support this open source projects by providing us with a free account and with a generous donation!
+
+#### BrowserStack
+
+<a href="https://www.browserstack.com/">
+  <img
+    src="https://cdn.worldvectorlogo.com/logos/browserstack.svg"
+    alt="Browserstack"
+    width="100px"
+  />
+</a>
+
+[BrowserStack](https://www.browserstack.com/) is a service for cross-browser testing. They support this open source projects by providing us with a [free account](https://www.browserstack.com/open-source)!
+
+#### DigitalOcean
+
+<a href="https://www.digitalocean.com/">
+  <img
+    src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/SVG/DO_Logo_vertical_blue.svg"
+    alt="DigitalOcean"
+    width="150px"
+  />
+</a>
+
+[DigitalOcean](https://www.digitalocean.com/) is a cloud hosting service. They support this open source projects by providing us with [free credits](https://www.digitalocean.com/open-source/credits-for-projects)!
+
+#### You?
+
+[You?](https://github.com/sponsors/ThibaultJanBeyer)
+
+Show your appreciation and support with a donation! [Direct Donation to DragSelect](https://www.blockchain.com/btc/address/1LdweSpjgSeJC8XxX3swrohBMBLUzg6cmC) (via Bitcoin: `1LdweSpjgSeJC8XxX3swrohBMBLUzg6cmC`). Or sponsor via [GitHub Sponsors](https://github.com/sponsors/ThibaultJanBeyer) or [Get in touch](mailto:[email protected]).
+
+Donations are distributed with all project contributors proportionally to their involvement. We are grateful for any amount: we have more than ![npm downloads count](https://img.shields.io/npm/dt/dragselect.svg), imagine how much we'd have if everyone would have had donated only 1$ 🤩 (unfortunately this is just a dream). If you donate, we can display your logo here if you want, which will give you infinite fame, fortune and help you recruit great talent.
 
 ### Licenses
 

diff --git a/www/docusaurus.config.js b/www/docusaurus.config.js
@@ -3,16 +3,14 @@
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: 'DragSelect',
-  tagline: 'Easy javascript Drag-Select & Drop functionality done right.',
-  url: 'https://DragSelect.com/',
-  baseUrl: '/',
-  onBrokenLinks: 'throw',
-  onBrokenMarkdownLinks: 'warn',
-  favicon: 'img/favicon.ico',
-  scripts: [
-    'https://assets.lemonsqueezy.com/lemon.js'
-  ],
+  title: "DragSelect",
+  tagline: "Easy javascript Drag-Select & Drop functionality done right.",
+  url: "https://DragSelect.com/",
+  baseUrl: "/",
+  onBrokenLinks: "throw",
+  onBrokenMarkdownLinks: "warn",
+  favicon: "img/favicon.ico",
+  scripts: ["https://assets.lemonsqueezy.com/lemon.js"],
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
@@ -44,7 +42,7 @@ const config = {
   ],
   themes: ["@docusaurus/theme-live-codeblock"],
   stylesheets: [
-    'https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;500;900&display=swap',
+    "https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;500;900&display=swap",
   ],
 
   presets: [
@@ -99,15 +97,15 @@ const config = {
         },
         items: [
           {
-            href: '/licenses',
-            position: 'left',
-            label: 'Pricing',
+            href: "/licenses",
+            position: "left",
+            label: "Pricing",
           },
           {
-            type: 'doc',
-            docId: 'intro',
-            position: 'left',
-            label: 'Getting Started',
+            type: "doc",
+            docId: "intro",
+            position: "left",
+            label: "Getting Started",
           },
           {
             href: "https://github.com/ThibaultJanBeyer/DragSelect",
@@ -119,7 +117,7 @@ const config = {
       footer: {
         style: "dark",
         copyright: `
-        Designed & Build with love in Bonn, Germany by <a href="https://thibaultjanbeyer.com">Tibo</a> and the <a href="https://github.com/ThibaultJanBeyer/DragSelect">open source</a> community. <a href="/docs/info">Read more about it here</a>.
+        Designed & Build with love in Bonn, Germany by <a href="https://thibaultjanbeyer.com">Tibo</a> and the <a href="https://github.com/ThibaultJanBeyer/DragSelect">open source</a> community. <a href="/docs/info">Read more about it here</a>. <p>Browser testing via <a href="https://www.lambdatest.com/" target="_blank"><img src="https://www.lambdatest.com/support/img/logo.svg" style="filter:brightness(0) invert(1); vertical-align: middle;margin-left:5px" width="147" /></a></p>
         `,
       },
     }),

diff --git a/www/package.json b/www/package.json
@@ -26,7 +26,7 @@
     "beautiful-web-animations": "^0.1.37",
     "clsx": "^2.0.0",
     "docusaurus-plugin-sass": "^0.2.5",
-    "dragselect": "3.0.5",
+    "dragselect": "3.0.6",
     "postcss": "^8.4.31",
     "prism-react-renderer": "^2.0.6",
     "react": "^18.2.0",

diff --git a/www/src/components/sections/FooterLinks.tsx b/www/src/components/sections/FooterLinks.tsx
@@ -1,25 +1,25 @@
-import React from 'react'
-import GitHubButton from 'react-github-btn'
+import React from "react";
+import GitHubButton from "react-github-btn";
 
-import { baseDocsUrl, basePricingUrl } from '../../constants'
+import { baseDocsUrl, basePricingUrl } from "../../constants";
 
 export const FooterLinks: React.FC<{}> = () => (
   <>
     <a href={basePricingUrl} className="metalink">
       Licensing
-    </a>{' '}
-    |{' '}
+    </a>{" "}
+    |{" "}
     <a
       href="https://github.com/ThibaultJanBeyer/DragSelect"
       className="metalink"
     >
       Github
-    </a>{' '}
-    |{' '}
+    </a>{" "}
+    |{" "}
     <a href="https://www.npmjs.com/package/dragselect" className="metalink">
       NPM
-    </a>{' '}
-    |{' '}
+    </a>{" "}
+    |{" "}
     <a href={baseDocsUrl} className="metalink">
       Docs
     </a>
@@ -52,4 +52,4 @@ export const FooterLinks: React.FC<{}> = () => (
       </div>
     </div>
   </>
-)
+);
diff --git a/yarn.lock b/yarn.lock
@@ -5151,6 +5151,11 @@ dot-prop@^5.2.0:
   dependencies:
     is-obj "^2.0.0"
 
+[email protected]:
+  version "3.0.6"
+  resolved "https://registry.npmjs.org/dragselect/-/dragselect-3.0.6.tgz"
+  integrity sha512-hHRklLpc8Ev+DP4mcD1p2XND35gXwin5nT/BURAukklhrngNVst4Quo3xwB87gJjPkm/nx8OkJ43/1/xScCw9Q==
+
 duplexer3@^0.1.4:
   version "0.1.5"
   resolved "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.5.tgz"