diff --git a/.vscode/settings.json b/.vscode/settings.json index cefaaad3..ad7d4ccc 100644 --- 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 index 9298197c..f6f9ed01 100644 --- 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 index bc7aaf6f..ff1cf755 100644 --- 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 index 0b7200b3..e9b14415 100644 --- a/DragSelect/src/DragSelect.ts +++ b/DragSelect/src/DragSelect.ts @@ -74,7 +74,7 @@ class DragSelect { public SelectableSet: SelectableSet public SelectedSet: SelectedSet public Selection: Selection - private Drag: Drag + public Drag: Drag public DropZones: DropZones public Interaction: Interaction public stopped: boolean diff --git a/DragSelect/src/methods/scrollElement.ts b/DragSelect/src/methods/scrollElement.ts index 14f2a266..0ca69219 100644 --- a/DragSelect/src/methods/scrollElement.ts +++ b/DragSelect/src/methods/scrollElement.ts @@ -1,16 +1,28 @@ 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 = @@ -18,7 +30,7 @@ export const scrollElement = (element?: DSArea, directions?: DSEdges, multiplier 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 index 61966991..ca8e4c85 100644 --- 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 index 88841780..69808534 100644 --- 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: -| Browserstack | DigitalOcean | [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:thibault.beyer@gmail.com). | +### 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. + + + + + LambdaTest + + + +[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 + +Browserstack + +[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 + +DigitalOcean + +[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:thibault.beyer@gmail.com). + +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 index 58d2b093..afa69c26 100644 --- a/www/docs/info.mdx +++ b/www/docs/info.mdx @@ -104,11 +104,50 @@ Thank you :) ### Thanks to: -| Browserstack | DigitalOcean | [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:thibault.beyer@gmail.com). | +#### 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. + + LambdaTest + + +[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 + + + Browserstack + + +[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 + + + DigitalOcean + + +[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:thibault.beyer@gmail.com). + +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 index d555f910..9ac07dd0 100644 --- 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 Tibo and the open source community. Read more about it here. + Designed & Build with love in Bonn, Germany by Tibo and the open source community. Read more about it here.

Browser testing via

`, }, }), diff --git a/www/package.json b/www/package.json index 08bba48e..a7c4ba17 100644 --- 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 index cf3dd343..a684b7af 100644 --- 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<{}> = () => ( <> Licensing - {' '} - |{' '} + {" "} + |{" "} Github - {' '} - |{' '} + {" "} + |{" "} NPM - {' '} - |{' '} + {" "} + |{" "} Docs @@ -52,4 +52,4 @@ export const FooterLinks: React.FC<{}> = () => ( -) +); diff --git a/yarn.lock b/yarn.lock index 536b48de..ade86877 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5151,6 +5151,11 @@ dot-prop@^5.2.0: dependencies: is-obj "^2.0.0" +dragselect@3.0.6: + 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"