From 932d63aad6c12b6d9e5caf0735b030a7bc2e14dd Mon Sep 17 00:00:00 2001 From: victor Date: Sun, 21 Jan 2024 11:29:19 +0100 Subject: [PATCH 1/5] Add toggle class feature --- src/index.ts | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/index.ts b/src/index.ts index 0dde6af..6244f0b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -4,16 +4,19 @@ interface Option { class?: string threshold?: number rootMargin?: string + toggle?: boolean } export default class extends Controller { classValue: string thresholdValue: number rootMarginValue: string + toggleValue: boolean class: string threshold: number rootMargin: string + toggle: boolean observer: IntersectionObserver itemTargets: HTMLElement[] @@ -22,7 +25,8 @@ export default class extends Controller { static values = { class: String, threshold: Number, - rootMargin: String + rootMargin: String, + toggle: Boolean } initialize (): void { @@ -33,6 +37,7 @@ export default class extends Controller { this.class = this.classValue || this.defaultOptions.class || 'in' this.threshold = this.thresholdValue || this.defaultOptions.threshold || 0.1 this.rootMargin = this.rootMarginValue || this.defaultOptions.rootMargin || '0px' + this.toggle = this.toggleValue || this.defaultOptions.toggle || false this.observer = new IntersectionObserver(this.intersectionObserverCallback, this.intersectionObserverOptions) this.itemTargets.forEach(item => this.observer.observe(item)) @@ -44,15 +49,21 @@ export default class extends Controller { intersectionObserverCallback (entries: IntersectionObserverEntry[], observer: IntersectionObserver): void { entries.forEach(entry => { + const target = entry.target as HTMLElement if (entry.intersectionRatio > this.threshold) { - const target = entry.target as HTMLElement target.classList.add(...this.class.split(' ')) if (target.dataset.delay) { target.style.transitionDelay = target.dataset.delay } - observer.unobserve(target) + if (!this.toggle) { + observer.unobserve(target) + } + } + + if (this.toggle && (entry.intersectionRatio < this.threshold || !entry.isIntersecting)) { + target.classList.remove(...this.class.split(' ')) } }) } From d0097a1fe09621453a3d94be381e14608eea39d7 Mon Sep 17 00:00:00 2001 From: victor Date: Sun, 21 Jan 2024 11:29:42 +0100 Subject: [PATCH 2/5] Use toggle value for the second example --- index.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index eeddbef..0506ded 100644 --- a/index.html +++ b/index.html @@ -136,7 +136,11 @@

-
+

With custom

options!

From e83ae43cd57a648db51148fa1d694f9211ec3f32 Mon Sep 17 00:00:00 2001 From: victor Date: Sun, 21 Jan 2024 11:31:24 +0100 Subject: [PATCH 3/5] Rolling back prettier-standard to 16.3.0 to fix `Parsing error: Unexpected token` error --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index d2f8ae1..8c82739 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "autoprefixer": "^10.4.14", "np": "^7.6.4", "postcss": "^8.4.21", - "prettier-standard": "16.4.1", + "prettier-standard": "16.3.0", "tailwindcss": "^3.2.7", "typescript": "^4.9.4", "vite": "^4.2.1" diff --git a/yarn.lock b/yarn.lock index 7179017..08159ee 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4432,10 +4432,10 @@ prepend-http@^2.0.0: resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897" integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc= -prettier-standard@16.4.1: - version "16.4.1" - resolved "https://registry.yarnpkg.com/prettier-standard/-/prettier-standard-16.4.1.tgz#964e7e3f3029427ab8e01bdffb72dea9a87f62c8" - integrity sha512-IW3Sct4GOdqc1s4+1HZjH2HegzLZQ6mDMl2xz6i6KHCac7kCM+obLbvm2e0zp8PytKkLQCdOpj0cWWa48Ruetw== +prettier-standard@16.3.0: + version "16.3.0" + resolved "https://registry.yarnpkg.com/prettier-standard/-/prettier-standard-16.3.0.tgz#0a00a85df14fffa73f947eb54cdf7cd73ccfad0a" + integrity sha512-6ijfydbY+K9E3hNiNeywqSR/3rlApCp7/dAEyfHeDG3nuDuWOCQsQtkWXWmsZ92s7q7UJqUNeFwkgIlioVK1Gw== dependencies: chalk "^2.4.2" diff "^4.0.2" From c3da3522cca94f88d0994304437bf15e0c66a02b Mon Sep 17 00:00:00 2001 From: Guillaume Briday Date: Fri, 22 Mar 2024 13:37:43 -0400 Subject: [PATCH 4/5] Updating config and move package to organization --- .babelrc | 5 +- .eslintrc.js | 10 +- .github/workflows/lint.yml | 9 +- .node-version | 2 +- .npmignore | 9 +- .prettierrc | 3 +- CHANGELOG.md | 12 +- LICENSE | 2 +- index.html | 102 +- package.json | 52 +- src/index.ts | 35 +- tailwind.config.js | 7 +- tsconfig.json | 7 +- vite.config.js | 26 - vite.config.mjs | 29 + yarn.lock | 6869 +++++++++++++++++++----------------- 16 files changed, 3833 insertions(+), 3346 deletions(-) delete mode 100644 vite.config.js create mode 100644 vite.config.mjs diff --git a/.babelrc b/.babelrc index fe8e0cf..1517d09 100644 --- a/.babelrc +++ b/.babelrc @@ -1,7 +1,4 @@ { - "presets": [ - "@babel/env", - "@babel/preset-typescript" - ], + "presets": ["@babel/env", "@babel/preset-typescript"], "plugins": ["@babel/plugin-transform-typescript"] } diff --git a/.eslintrc.js b/.eslintrc.js index 693b334..78c9c90 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,9 +1,15 @@ // https://eslint.org/docs/user-guide/configuring module.exports = { + root: true, + parser: "@typescript-eslint/parser", env: { browser: true, node: true, - es6: true - } + es6: true, + jest: true, + }, + // https://github.com/standard/standard/blob/master/docs/RULES-en.md + extends: ["standard", "prettier"], + plugins: ["@typescript-eslint"], } diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 46e2b19..6d91238 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -6,10 +6,11 @@ jobs: eslint: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v1 - - uses: actions/setup-node@v1 + - uses: actions/checkout@v2 + - uses: actions/setup-node@v2 with: - node-version: '14.x' + node-version-file: ".node-version" + cache: "yarn" - run: | - yarn install + yarn install --silent --non-interactive yarn lint diff --git a/.node-version b/.node-version index 3c03207..209e3ef 100644 --- a/.node-version +++ b/.node-version @@ -1 +1 @@ -18 +20 diff --git a/.npmignore b/.npmignore index a5a01c7..4d42642 100644 --- a/.npmignore +++ b/.npmignore @@ -1,15 +1,14 @@ .github +jest .babelrc +jest.config.js index.html netlify.toml .node-version .eslintrc.js -src -specs +spec tsconfig.json -vite.config.js +vite.config.mjs .prettierignore -.prettierrc -.eslintignore postcss.config.js tailwind.config.js diff --git a/.prettierrc b/.prettierrc index 963354f..a13b242 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,3 +1,4 @@ { - "printWidth": 120 + "printWidth": 120, + "semi": false } diff --git a/CHANGELOG.md b/CHANGELOG.md index a9f6863..b4011df 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,5 @@ # Changelog + All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), @@ -6,13 +7,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +## [4.0.0] - 2024-03-17 + +### Chore + +- Renaming the component from `stimulus-scroll-reveal` to `@stimulus-components/scroll-reveal` +- Upgrading dependencies +- Exporting Typescript Types +- Updating demo UI +- Add [Stimulus LSP](https://github.com/marcoroth/stimulus-lsp) compatibility + ## [3.2.0] - 2023-03-24 ### Added - Allow multiple `class` in `data-scroll-reveal-class-value`. Example: `data-scroll-reveal-class-value="in fade"`. - ## [3.1.0] - 2022-12-25 ### Added diff --git a/LICENSE b/LICENSE index 7fab72d..9f2b765 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2024 Guillaume Briday +Copyright (c) Guillaume Briday Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/index.html b/index.html index eeddbef..e130b42 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + @@ -8,62 +8,45 @@ Stimulus Scroll Reveal - -
-