├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── config.yml │ ├── feature.yml │ └── bug.yml ├── SECURITY.md ├── PULL_REQUEST_TEMPLATE.md ├── workflows │ ├── markdown-normalize.yml │ ├── update-changelog.yml │ └── dependabot-auto-merge.yml ├── dependabot.yml └── CONTRIBUTING.md ├── bin ├── build.sh └── setup.sh ├── docs ├── usage │ ├── _index.md │ ├── configuration.md │ ├── x-ripple-focus.md │ ├── global-customization.md │ └── x-ripple.md ├── _index.md ├── changelog.md ├── requirements.md ├── questions-and-issues.md ├── introduction.md └── installation.md ├── .npmignore ├── .gitignore ├── .editorconfig ├── src ├── js │ ├── utils │ │ ├── keydown.js │ │ ├── will-have-mouse-up-event.js │ │ ├── attributes.js │ │ ├── to-styles.js │ │ ├── index.js │ │ ├── config.js │ │ ├── modifiers.js │ │ └── ripple.js │ ├── ripple.js │ └── directives │ │ ├── focus.js │ │ └── click.js └── css │ └── styles.css ├── rollup.config.js ├── dist ├── alpine-ripple.css ├── alpine-ripple.js └── alpine-ripple.js.map ├── package.json ├── LICENSE.md ├── CHANGELOG.md └── README.md /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: rawilk 2 | -------------------------------------------------------------------------------- /bin/build.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | npm run build 4 | -------------------------------------------------------------------------------- /bin/setup.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | npm install 4 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: true 2 | -------------------------------------------------------------------------------- /docs/usage/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Usage 3 | sort: 1 4 | --- 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .editorconfig 2 | .github/ 3 | .idea 4 | bin/ 5 | docs/ 6 | rollup.config.js 7 | -------------------------------------------------------------------------------- /.github/SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | If you discover any security related issues, please email randall@randallwilk.dev instead of using the issue tracker. 4 | -------------------------------------------------------------------------------- /docs/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: v1 3 | slogan: Ripple effect (materialize) for Alpine.js. 4 | githubUrl: https://github.com/rawilk/alpine-ripple 5 | branch: main 6 | --- 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules/ 3 | *.log 4 | 5 | # OS generated files 6 | .DS_Store 7 | .DS_Store? 8 | ._* 9 | .Spotlight-V100 10 | .Trashes 11 | ehthumbs.db 12 | Thumbs.db 13 | -------------------------------------------------------------------------------- /docs/changelog.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Changelog 3 | sort: 5 4 | --- 5 | 6 | All notable changes for laravel-form-components are documented [on GitHub](https://github.com/rawilk/alpine-ripple/blob/main/CHANGELOG.md). 7 | -------------------------------------------------------------------------------- /docs/requirements.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Requirements 3 | sort: 2 4 | --- 5 | 6 | ## General Requirements 7 | 8 | - Alpine.js `v3.x` 9 | - Tailwind CSS (only required if you want to use custom color classes on the directive) 10 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_size = 4 6 | indent_style = space 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /src/js/utils/keydown.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Check if the keydown event is the enter key or the space bar. 3 | * 4 | * @param {KeyboardEvent} event 5 | * @returns {boolean} 6 | */ 7 | export const isEnterOrSpace = event => event.key === 'Enter' || event.key === ' '; 8 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 1️⃣ Is this something that is wanted/needed? Did you create an issue / discussion about it first? 2 | 3 | 2️⃣ Does it contain multiple, unrelated changes? Please separate the PRs out. 4 | 5 | 3️⃣ Does it include tests, if possible? (Not a deal-breaker, just a nice-to-have) 6 | 7 | 4️⃣ Please include a thorough description of the improvement and reasons why it's useful. 8 | 9 | 5️⃣ Thanks for contributing! 🙌 10 | -------------------------------------------------------------------------------- /src/js/utils/will-have-mouse-up-event.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Some events, such as a right click or ctrl + left click won't trigger a mouseup event, 3 | * so we need to prevent the ripple from being added in those cases. 4 | * 5 | * @param {MouseEvent} event 6 | * @returns {boolean} 7 | */ 8 | export default event => { 9 | if (event.ctrlKey) { 10 | return false; 11 | } 12 | 13 | return event.button === 0 || event.button === 1; 14 | }; 15 | -------------------------------------------------------------------------------- /src/js/utils/attributes.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Get an attribute from an element that starts with a string. 3 | * 4 | * @param {HTMLElement} el 5 | * @param {string} startsWith 6 | * @returns {object|null} 7 | */ 8 | export const getAttributeThatStartsWith = (el, startsWith) => { 9 | for (const attr of el.attributes) { 10 | if (attr.name.startsWith(startsWith)) { 11 | return attr; 12 | } 13 | } 14 | 15 | return null; 16 | }; 17 | -------------------------------------------------------------------------------- /src/js/utils/to-styles.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Convert an object of style properties to a string of CSS. 3 | * 4 | * @param {object} styles 5 | * @returns {string} 6 | */ 7 | export default styles => Object.entries(styles).map(([key, value]) => `${formatStyleKey(key)}: ${value}`).join(';'); 8 | 9 | /** 10 | * convert a style key to a css property. 11 | * 12 | * @param {string} key 13 | * @returns {string} 14 | */ 15 | const formatStyleKey = key => key.replace(/([A-Z])/g, '-$1').toLowerCase(); 16 | -------------------------------------------------------------------------------- /docs/questions-and-issues.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Questions & Issues 3 | sort: 4 4 | --- 5 | 6 | Find yourself stuck using this package? Found a bug? Do you have general questions or suggestions for improving this package? 7 | Feel free to [create an issue on GitHub](https://github.com/rawilk/alpine-ripple/issues), and I'll try to address it as soon as possible. 8 | 9 | > {note} If you've found a bug regarding security please email [randall@randallwilk.dev](mailto:randall@randallwilk.dev) instead of using the issue tracker. 10 | -------------------------------------------------------------------------------- /.github/workflows/markdown-normalize.yml: -------------------------------------------------------------------------------- 1 | name: Normalize Markdown 2 | 3 | on: 4 | push: 5 | paths: 6 | - "*.md" 7 | 8 | jobs: 9 | normalize: 10 | timeout-minutes: 1 11 | runs-on: ubuntu-latest 12 | steps: 13 | - name: Git checkout 14 | uses: actions/checkout@v4 15 | 16 | - name: Prettify markdown 17 | uses: creyD/prettier_action@v4.6 18 | with: 19 | prettier_options: --write **/*.md 20 | -------------------------------------------------------------------------------- /src/js/utils/index.js: -------------------------------------------------------------------------------- 1 | export { getAttributeThatStartsWith } from './attributes'; 2 | export { addConfigClassToElement, configClassToSelector, removeConfigClassFromElement } from './config'; 3 | export { isEnterOrSpace } from './keydown'; 4 | export { getCustomColorFromModifiers } from './modifiers'; 5 | export { getCustomRadiusFromModifiers } from './modifiers'; 6 | export { startRipple } from './ripple'; 7 | export { default as toStyles } from './to-styles'; 8 | export { default as willHaveAMouseUpEvent } from './will-have-mouse-up-event'; 9 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | # Please see the documentation for all configuration options: 2 | # https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates 3 | 4 | version: 2 5 | updates: 6 | 7 | - package-ecosystem: "github-actions" 8 | directory: "/" 9 | schedule: 10 | interval: "weekly" 11 | labels: 12 | - "dependencies" 13 | 14 | - package-ecosystem: "npm" 15 | directory: "/" 16 | schedule: 17 | interval: "weekly" 18 | commit-message: 19 | prefix: "NPM" 20 | labels: 21 | - "dependencies" 22 | - "npm" 23 | -------------------------------------------------------------------------------- /docs/introduction.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Introduction 3 | sort: 1 4 | --- 5 | 6 | ## Introduction 7 | 8 | `alpine-ripple` is a simple Alpine.js plugin that adds a ripple effect to any element with an alpine directive `x-ripple`. The most common use case 9 | is adding a ripple effect to a button when it is clicked on. 10 | 11 | ```html 12 | 13 | ``` 14 | 15 | ## Alternatives 16 | 17 | Currently, there doesn't seem to be many alternatives, however more can be added here if they are found. 18 | 19 | - [alHasandev/tailwind-button](https://github.com/alHasandev/tailwind-button) 20 | 21 | ## Disclaimer 22 | 23 | This package is not affiliated with, maintained, authorized, endorsed or sponsored by Alpine.js or Tailwind CSS or any of its affiliates. 24 | -------------------------------------------------------------------------------- /src/js/utils/config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Convert a space separated class string to a valid css selector. 3 | * 4 | * @param {string} configClass 5 | * @returns {string} 6 | */ 7 | export const configClassToSelector = configClass => `.${configClass.replace(' ', '.')}`; 8 | 9 | /** 10 | * Add a space separated class string to an element. 11 | * 12 | * @param {HTMLElement} el 13 | * @param {string} configClass 14 | */ 15 | export const addConfigClassToElement = (el, configClass) => configClass.split(' ').forEach(c => el.classList.add(c)); 16 | 17 | /** 18 | * Remove a space separated class string from an element. 19 | * 20 | * @param {HTMLElement} el 21 | * @param {string} configClass 22 | */ 23 | export const removeConfigClassFromElement = (el, configClass) => configClass.split(' ').forEach(c => el.classList.remove(c)); 24 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature.yml: -------------------------------------------------------------------------------- 1 | name: Feature Request 2 | description: Propose a new feature for laravel-settings 3 | title: "[Feature Request]: " 4 | labels: [feature request] 5 | body: 6 | - type: markdown 7 | attributes: 8 | value: | 9 | Thanks for proposing a new feature for alpine-ripple! 10 | - type: textarea 11 | id: feature-description 12 | attributes: 13 | label: Feature Description 14 | description: How should this feature look like? 15 | validations: 16 | required: true 17 | - type: textarea 18 | id: valuable 19 | attributes: 20 | label: Is this feature valuable for other users as well and why? 21 | description: We want to build software that provides a great experience for all of us. 22 | -------------------------------------------------------------------------------- /.github/workflows/update-changelog.yml: -------------------------------------------------------------------------------- 1 | name: "Update Changelog" 2 | 3 | on: 4 | release: 5 | types: [released] 6 | 7 | jobs: 8 | update: 9 | runs-on: ubuntu-latest 10 | 11 | steps: 12 | - name: Checkout code 13 | uses: actions/checkout@v4 14 | with: 15 | ref: main 16 | 17 | - name: Update Changelog 18 | uses: stefanzweifel/changelog-updater-action@v1 19 | with: 20 | latest-version: ${{ github.event.release.name }} 21 | release-notes: ${{ github.event.release.body }} 22 | 23 | - name: Commit updated CHANGELOG 24 | uses: stefanzweifel/git-auto-commit-action@v5 25 | with: 26 | branch: main 27 | commit_message: Update CHANGELOG 28 | file_pattern: CHANGELOG.md 29 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import babel from 'rollup-plugin-babel'; 2 | import filesize from 'rollup-plugin-filesize'; 3 | import { nodeResolve } from '@rollup/plugin-node-resolve'; 4 | import css from 'rollup-plugin-import-css'; 5 | 6 | export default { 7 | input: 'builds/cdn.js', 8 | output: [ 9 | { 10 | name: 'AlpineRipple', 11 | file: 'dist/alpine-ripple.js', 12 | format: 'umd', 13 | sourcemap: true, 14 | compact: true, 15 | minifyInternalExports: true, 16 | } 17 | ], 18 | plugins: [ 19 | nodeResolve(), 20 | filesize(), 21 | css({ 22 | minify: true, 23 | }), 24 | babel({ 25 | babelrc: false, 26 | exclude: 'node_modules/**', 27 | presets: [ 28 | [ 29 | '@babel/preset-env', 30 | { 31 | targets: { 32 | node: 'current', 33 | }, 34 | }, 35 | ], 36 | ], 37 | }), 38 | ], 39 | }; 40 | -------------------------------------------------------------------------------- /docs/installation.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Installation 3 | sort: 3 4 | --- 5 | 6 | ## Installation 7 | 8 | The package can be installed through npm or by using a CDN. 9 | 10 | ### NPM 11 | 12 | ```bash 13 | npm i -S @wilkr/alpine-ripple 14 | ``` 15 | 16 | Add the `x-ripple` and `x-ripple-focus` directives to your project by importing the package. 17 | 18 | ```js 19 | import Alpine from "alpinejs"; 20 | import Ripple from "@wilkr/alpine-ripple"; 21 | 22 | Alpine.plugin(Ripple); 23 | 24 | window.Alpine = Alpine; 25 | window.Alpine.start(); 26 | ``` 27 | 28 | Import the package styles into your CSS. 29 | 30 | ```css 31 | @import "@wilkr/alpine-ripple/dist/alpine-ripple.css"; 32 | ``` 33 | 34 | ### CDN 35 | 36 | If CDNs are more your thing, you can include the following ` 47 | ``` 48 | -------------------------------------------------------------------------------- /dist/alpine-ripple.css: -------------------------------------------------------------------------------- 1 | :root{--ripple-color:#fff;--ripple-radius:9999px;--ripple-duration:600ms;--ripple-timing-function:linear;--ripple-focus-duration:2500ms;--ripple-focus-timing-function:ease-in-out;--ripple-focus-delay:200ms;}.ripple{position:absolute;top:0;left:0;bottom:0;right:0;overflow:hidden;pointer-events:none;border-radius:inherit;}.ripple span{position:absolute;border-radius:var(--ripple-radius);opacity:0.5;background:var(--ripple-color);transform:scale(0);animation:ripple var(--ripple-duration) var(--ripple-timing-function);}.ripple-focus{overflow:hidden;pointer-events:none;position:absolute;z-index:0;border-radius:inherit;inset:0;}.ripple-focus-child{position:absolute;opacity:0.3;border-radius:50%;background:var(--ripple-focus-color,var(--ripple-color));transform:scale(1);animation:ripple-pulsate var(--ripple-focus-duration) var(--ripple-focus-timing-function) infinite var(--ripple-focus-delay);}.ripple-focus-child > span{position:absolute;top:0;left:0;display:block;width:100%;height:100%;border-radius:50%;}@keyframes ripple{to{transform:scale(4);opacity:0;}}@keyframes ripple-pulsate{0%{transform:scale(1);}50%{transform:scale(.92);}100%{transform:scale(1);}} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wilkr/alpine-ripple", 3 | "version": "1.1.2", 4 | "description": "Ripple effect (materialize) for Alpine.js.", 5 | "main": "src/js/ripple.js", 6 | "scripts": { 7 | "build": "rollup -c", 8 | "watch": "rollup -c -w" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/rawilk/alpine-ripple.git" 13 | }, 14 | "author": "Randall Wilk ", 15 | "license": "MIT", 16 | "bugs": { 17 | "url": "https://github.com/rawilk/alpine-ripple/issues" 18 | }, 19 | "homepage": "https://github.com/rawilk/alpine-ripple#readme", 20 | "keywords": [ 21 | "Alpine.js", 22 | "Alpine", 23 | "ripple", 24 | "materialize" 25 | ], 26 | "devDependencies": { 27 | "@babel/core": "^7.20.5", 28 | "@babel/preset-env": "^7.20.2", 29 | "@rollup/plugin-node-resolve": "^16.0.1", 30 | "rollup": "^4.36.0", 31 | "rollup-plugin-babel": "^4.4.0", 32 | "rollup-plugin-filesize": "^10.0.0", 33 | "rollup-plugin-import-css": "^3.1.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) Randall Wilk 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/usage/configuration.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Configuration 3 | sort: 4 4 | --- 5 | 6 | ## Introduction 7 | 8 | If you are using the [npm installation](/docs/alpine-ripple/{version}/installation#user-content-npm) method for this package, you can use the `Ripple.configure()` method to set configuration options for the package. 9 | In the example below, we will show the configuration options you may set, separated out by directive. 10 | 11 | ```js 12 | import Ripple from "@wilkr/alpine-ripple"; 13 | 14 | Alpine.plugin( 15 | Ripple.configure({ 16 | /** 17 | * x-ripple 18 | */ 19 | 20 | // Specify your own class(es) for the ripple element. 21 | class: "ripple", 22 | 23 | // Specify how long the ripple element should remain on the page 24 | // after the animation has finished. 25 | removeTimeout: 1000, 26 | 27 | /** 28 | * x-ripple-focus 29 | */ 30 | 31 | // Specify your own class(es) for the ripple focus element. 32 | focusClass: "ripple-focus", 33 | 34 | // Specify your own class(es) for the root element when it is focused. 35 | // The directive will use this class to determine when the element is focused. 36 | focusedClass: "ripple-focus-active", 37 | }) 38 | ); 39 | ``` 40 | -------------------------------------------------------------------------------- /.github/workflows/dependabot-auto-merge.yml: -------------------------------------------------------------------------------- 1 | name: dependabot-auto-merge 2 | on: pull_request_target 3 | 4 | permissions: 5 | pull-requests: write 6 | contents: write 7 | 8 | jobs: 9 | dependabot: 10 | runs-on: ubuntu-latest 11 | if: ${{ github.actor == 'dependabot[bot]' }} 12 | steps: 13 | 14 | - name: Dependabot metadata 15 | id: metadata 16 | uses: dependabot/fetch-metadata@v2.4.0 17 | with: 18 | github-token: "${{ secrets.GITHUB_TOKEN }}" 19 | 20 | - name: Auto-merge Dependabot PRs for semver-minor updates 21 | if: ${{ steps.metadata.outputs.update-type == 'version-update:semver-minor' }} 22 | run: gh pr merge --auto --merge "$PR_URL" 23 | env: 24 | PR_URL: ${{ github.event.pull_request.html_url }} 25 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 26 | 27 | - name: Auto-merge Dependabot PRs for semver-patch updates 28 | if: ${{ steps.metadata.outputs.update-type == 'version-update:semver-patch' }} 29 | run: gh pr merge --auto --merge "$PR_URL" 30 | env: 31 | PR_URL: ${{ github.event.pull_request.html_url }} 32 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 33 | -------------------------------------------------------------------------------- /src/js/ripple.js: -------------------------------------------------------------------------------- 1 | import rippleClick from './directives/click'; 2 | import rippleFocus from './directives/focus'; 3 | 4 | /** 5 | * Configuration options for the ripple directives. 6 | * 7 | * @type {{rippleClass: string, removeTimeout: number, focusClass: string, focusedClass: string}} 8 | */ 9 | const rippleConfig = { 10 | rippleClass: 'ripple', 11 | removeTimeout: 1000, 12 | focusClass: 'ripple-focus', 13 | focusedClass: 'ripple-focus-active', 14 | }; 15 | 16 | function Ripple(Alpine) { 17 | rippleClick(Alpine, rippleConfig); 18 | rippleFocus(Alpine, rippleConfig); 19 | } 20 | 21 | Ripple.configure = config => { 22 | if (config.hasOwnProperty('class') && typeof config.class === 'string') { 23 | rippleConfig.rippleClass = config.class; 24 | } 25 | 26 | if (config.hasOwnProperty('removeTimeout') && typeof config.removeTimeout === 'number') { 27 | rippleConfig.removeTimeout = config.removeTimeout; 28 | } 29 | 30 | if (config.hasOwnProperty('focusClass') && typeof config.focusClass === 'string') { 31 | rippleConfig.focusClass = config.focusClass; 32 | } 33 | 34 | if (config.hasOwnProperty('focusedClass') && typeof config.focusedClass === 'string') { 35 | rippleConfig.focusedClass = config.focusedClass; 36 | } 37 | 38 | return Ripple; 39 | }; 40 | 41 | export default Ripple; 42 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug.yml: -------------------------------------------------------------------------------- 1 | name: Bug 2 | description: File a bug report 3 | labels: [bug] 4 | body: 5 | - type: markdown 6 | attributes: 7 | value: | 8 | Before opening a bug report, please search for the behavior in the existing issues. 9 | 10 | --- 11 | 12 | Thank you for taking the time to file a bug report. To address this bug as fast as possible, we need some information. 13 | - type: input 14 | id: package 15 | attributes: 16 | label: alpine-ripple 17 | description: Which version of the package are you using? 18 | placeholder: v1.0.0 19 | validations: 20 | required: true 21 | - type: textarea 22 | id: bug-description 23 | attributes: 24 | label: Bug description 25 | description: What happened? 26 | validations: 27 | required: true 28 | - type: textarea 29 | id: steps 30 | attributes: 31 | label: Steps to reproduce 32 | description: What steps do we need to take to reproduce this error? 33 | - type: textarea 34 | id: logs 35 | attributes: 36 | label: Relevant log output 37 | description: If applicable, provide relevant log (error) output. No need for backticks here. 38 | render: shell 39 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to `alpine-ripple` will be documented in this file. 4 | 5 | ## v1.1.2 - 2023-04-03 6 | 7 | ### What's Changed 8 | 9 | - Use `passive` option for `touchstart` and `touchmove` event listeners 10 | 11 | **Full Changelog**: https://github.com/rawilk/alpine-ripple/compare/v1.1.1...v1.1.2 12 | 13 | ## v1.1.1 - 2023-01-31 14 | 15 | ### What's Changed 16 | 17 | - Bump dependabot/fetch-metadata from 1.3.5 to 1.3.6 by @dependabot in https://github.com/rawilk/alpine-ripple/pull/3 18 | - Make ripple click effect inherit border radius from its parent element 19 | 20 | **Full Changelog**: https://github.com/rawilk/alpine-ripple/compare/v1.1.0...v1.1.1 21 | 22 | ## v1.1.0 - 2023-01-26 23 | 24 | ### What's Changed 25 | 26 | - NPM: Bump @babel/core from 7.20.5 to 7.20.7 by @dependabot in https://github.com/rawilk/alpine-ripple/pull/1 27 | - Add `overflow:hidden` to base ripple element 28 | - Add new `x-ripple-focus` directive for keyboard focus pulsating ripple effect 29 | - Add new `focusedClass` config option for the ripple focus directive 30 | - Add more event listeners to the `x-ripple` directive, such as `keydown` and `touchstart` for better handling of the ripple effect 31 | 32 | ### New Contributors 33 | 34 | - @dependabot made their first contribution in https://github.com/rawilk/alpine-ripple/pull/1 35 | 36 | **Full Changelog**: https://github.com/rawilk/alpine-ripple/compare/v1.0.0...v1.1.0 37 | 38 | ## v1.0.0 - 2022-12-16 39 | 40 | initial release 41 | -------------------------------------------------------------------------------- /src/js/utils/modifiers.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Return a user defined custom color for the ripple effect. 3 | * 4 | * @param {Array} modifiers 5 | * @returns {string} 6 | */ 7 | export const getCustomColorFromModifiers = modifiers => { 8 | if (! modifiers.includes('color')) { 9 | return ''; 10 | } 11 | 12 | const nextModifier = modifiers[modifiers.indexOf('color') + 1] || 'invalid-color'; 13 | if (nextModifier.indexOf('#') === 0 || nextModifier.indexOf('rgb') === 0) { 14 | return nextModifier; 15 | } 16 | 17 | return nextModifier.indexOf('bg') === 0 18 | ? nextModifier 19 | : `bg-${nextModifier}`; 20 | }; 21 | 22 | /** 23 | * Return a user defined custom radius for the ripple effect. 24 | * 25 | * @param {Array} modifiers 26 | * @returns {string} 27 | */ 28 | export const getCustomRadiusFromModifiers = modifiers => { 29 | if (! modifiers.includes('radius')) { 30 | return ''; 31 | } 32 | 33 | let nextModifier = modifiers[modifiers.indexOf('radius') + 1] || 'invalid-radius'; 34 | 35 | // _ allows us to use decimals, such as 0.5. 36 | nextModifier = nextModifier.replace('_', '.'); 37 | 38 | // Separate the numeric value from the unit in nextModifier. 39 | // Possible values for nextModifier: 50, 50.5, 50.5px, 50px, 50%, 50rem, 50em 40 | const numericValue = nextModifier.match(/^[0-9]+(\.[0-9]+)?/)[0]; 41 | let unit = nextModifier.replace(numericValue, ''); 42 | if (! unit) { 43 | unit = '%'; 44 | } 45 | 46 | return `${numericValue}${unit}`; 47 | } 48 | -------------------------------------------------------------------------------- /src/js/utils/ripple.js: -------------------------------------------------------------------------------- 1 | export const startRipple = (event, el, options = {}) => { 2 | const { 3 | center = options.pulsate, 4 | } = options; 5 | 6 | const rect = el.getBoundingClientRect(); 7 | 8 | // Determine the size of the ripple. 9 | let rippleX, 10 | rippleY, 11 | rippleSize; 12 | 13 | if ( 14 | center || 15 | event === undefined || 16 | (event.clientX === 0 && event.clientY === 0) || 17 | (! event.clientX && ! event.touches) 18 | ) { 19 | // This is mostly used for the keyboard focus ripple. 20 | rippleX = Math.round(rect.width / 2); 21 | rippleY = Math.round(rect.height / 2); 22 | } else { 23 | const { clientX, clientY } = event.touches && event.touches.length > 0 ? event.touches[0] : event; 24 | 25 | rippleX = Math.round(clientX - rect.left); 26 | rippleY = Math.round(clientY - rect.top); 27 | } 28 | 29 | if (center) { 30 | rippleSize = Math.sqrt((2 * rect.width ** 2 + rect.height ** 2) / 3); 31 | 32 | // For some reason the animation is broken on Mobile Chrome if the size is even. 33 | if (rippleSize % 2 === 0) { 34 | rippleSize++; 35 | } 36 | } else { 37 | const sizeX = Math.max(Math.abs((el ? el.clientWidth : 0) - rippleX), rippleX) * 2 + 2, 38 | sizeY = Math.max(Math.abs((el ? el.clientHeight : 0) - rippleY), rippleY) * 2 + 2; 39 | 40 | rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2); 41 | } 42 | 43 | return { 44 | width: `${rippleSize}px`, 45 | height: `${rippleSize}px`, 46 | top: `${-(rippleSize / 2) + rippleY}px`, 47 | left: `${-(rippleSize / 2) + rippleX}px`, 48 | }; 49 | }; 50 | -------------------------------------------------------------------------------- /src/css/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --ripple-color: #fff; 3 | --ripple-radius: 9999px; 4 | --ripple-duration: 600ms; 5 | --ripple-timing-function: linear; 6 | --ripple-focus-duration: 2500ms; 7 | --ripple-focus-timing-function: ease-in-out; 8 | --ripple-focus-delay: 200ms; 9 | } 10 | 11 | .ripple { 12 | position: absolute; 13 | top: 0; 14 | left: 0; 15 | bottom: 0; 16 | right: 0; 17 | overflow: hidden; 18 | pointer-events: none; 19 | border-radius: inherit; 20 | } 21 | 22 | .ripple span { 23 | position: absolute; 24 | border-radius: var(--ripple-radius); 25 | opacity: 0.5; 26 | background: var(--ripple-color); 27 | transform: scale(0); 28 | animation: ripple var(--ripple-duration) var(--ripple-timing-function); 29 | } 30 | 31 | .ripple-focus { 32 | overflow: hidden; 33 | pointer-events: none; 34 | position: absolute; 35 | z-index: 0; 36 | border-radius: inherit; 37 | inset: 0; 38 | } 39 | 40 | .ripple-focus-child { 41 | position: absolute; 42 | opacity: 0.3; 43 | border-radius: 50%; 44 | background: var(--ripple-focus-color, var(--ripple-color)); 45 | transform: scale(1); 46 | animation: ripple-pulsate var(--ripple-focus-duration) var(--ripple-focus-timing-function) infinite var(--ripple-focus-delay); 47 | } 48 | 49 | .ripple-focus-child > span { 50 | position: absolute; 51 | top: 0; 52 | left: 0; 53 | display: block; 54 | width: 100%; 55 | height: 100%; 56 | border-radius: 50%; 57 | } 58 | 59 | @keyframes ripple { 60 | to { 61 | transform: scale(4); 62 | opacity: 0; 63 | } 64 | } 65 | 66 | @keyframes ripple-pulsate { 67 | 0% { 68 | transform: scale(1); 69 | } 70 | 50% { 71 | transform: scale(.92); 72 | } 73 | 100% { 74 | transform: scale(1); 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /docs/usage/x-ripple-focus.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: X-Ripple-Focus 3 | sort: 2 4 | --- 5 | 6 | ## Introduction 7 | 8 | The `x-ripple-focus` directive can be attached to an element to provide a pulsating ripple effect when the element is focused. This directive is compatible 9 | with the `x-ripple` directive, and can be used in conjunction with it. 10 | 11 | ```html 12 | 13 | ``` 14 | 15 | When this button is focused, it will show a pulsating ripple effect. 16 | 17 | > {note} For the `x-ripple-focus` directive to work, you must have the `x-data` directive applied to the element as well, or the element 18 | > must be inside the scope of an `x-data` directive. 19 | 20 | ## Options 21 | 22 | Certain aspects of the ripple focus effect can be customized for this package. Some options can be set [globally via CSS](/docs/alpine-ripple/{version}/usage d/global-customization), or on a per-element basis. 23 | 24 | ### Color 25 | 26 | By default, the ripple focus color is white, which should work in most cases. However, if you want to change the color, you can do so with a `color` modifier. 27 | 28 | ```html 29 | 30 | ``` 31 | 32 | This will result in a black ripple focus effect when the button is focused. If you're using Tailwind, you may define a color class and use that instead. 33 | 34 | ```html 35 | 36 | ``` 37 | 38 | This will result in the ripple focus element getting the `!bg-green-500` class added to it. `!` is added to the class to specify that it is important, 39 | so it overrides any other styles. to prevent Tailwind from puring your color classes, you should be sure to add them to your `safelist` in your 40 | `tailwind.config.js` file if you're not using them anywhere else. 41 | 42 | > {note} If you're using the `x-ripple-focus` directive in conjunction with the `x-ripple` directive, the color of the ripple focus effect will default to 43 | > the color of the ripple effect unless you specify a color for the ripple focus effect. 44 | 45 | ### Other Options 46 | 47 | The rest of the options for the ripple focus effect are only able to be changed globally via CSS. See the [X-Ripple-Focus](/docs/alpine-ripple/{version}/usage/global-customization#user-content-x-ripple-focus) section 48 | for more information. 49 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Contributions are **welcome** and will be fully **credited**. 4 | 5 | Please read and understand the contribution guide before creating an issue or pull request. 6 | 7 | ## Etiquette 8 | 9 | This project is open source, and as such, the maintainers give their free time to build and maintain the source code 10 | held within. They make the code freely available in the hope that it will be of use to other developers. It would be 11 | extremely unfair for them to suffer abuse or anger for their hard work. 12 | 13 | Please be considerate towards maintainers when raising issues or presenting pull requests. Let's show the 14 | world that developers are civilized and selfless people. 15 | 16 | It's the duty of the maintainer to ensure that all submissions to the project are of sufficient 17 | quality to benefit the project. Many developers have different skill-sets, strengths, and weaknesses. Respect the maintainer's decision, and do not be upset or abusive if your submission is not used. 18 | 19 | ## Viability 20 | 21 | When requesting or submitting new features, first consider whether it might be useful to others. Open 22 | source projects are used by many developers, who may have entirely different needs to your own. Think about 23 | whether or not your feature is likely to be used by other users of the project. 24 | 25 | ## Procedure 26 | 27 | Before filing an issue: 28 | 29 | - Attempt to replicate the problem, to ensure that it wasn't a coincidental incident. 30 | - Check to make sure your feature suggestion isn't already present within the project. 31 | - Check the pull requests tab to ensure that the bug doesn't have a fix in progress. 32 | - Check the pull requests tab to ensure that the feature isn't already in progress. 33 | 34 | Before submitting a pull request: 35 | 36 | - Check the codebase to ensure that your feature doesn't already exist. 37 | - Check the pull requests to ensure that another person hasn't already submitted the feature or fix. 38 | 39 | ## Requirements 40 | 41 | If the project maintainer has any additional requirements, you will find them listed here. 42 | 43 | - **Document any change in behaviour** - Make sure the `README.md` and any other relevant documentation are kept up-to-date. 44 | 45 | - **Consider our release cycle** - We try to follow [SemVer v2.0.0](https://semver.org/). Randomly breaking public APIs is not an option. 46 | 47 | - **One pull request per feature** - If you want to do more than one thing, send multiple pull requests. 48 | 49 | - **Send coherent history** - Make sure each individual commit in your pull request is meaningful. If you had to make multiple intermediate commits while developing, please [squash them](https://www.git-scm.com/book/en/v2/Git-Tools-Rewriting-History#Changing-Multiple-Commit-Messages) before submitting. 50 | 51 | **Happy coding**! 52 | -------------------------------------------------------------------------------- /docs/usage/global-customization.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Global Customization 3 | sort: 3 4 | --- 5 | 6 | ## Introduction 7 | 8 | If you find yourself using the same options on multiple elements, you may find it better to modify those options globally via CSS. This way, you don't have to repeat yourself on every element. 9 | Below is an explanation of how to modify each of the options for the directives globally. 10 | 11 | > {tip} Be sure your CSS if located after the CSS for this package for any changes to take effect. 12 | 13 | ## X-Ripple 14 | 15 | Below are the options for the `x-ripple` directive that can be modified globally. 16 | 17 | ### Color 18 | 19 | If you want to change the color globally, you can do so by setting the `--ripple-color` CSS variable. The best place to do this in your app CSS file in a `:root` selector. 20 | You may define the color with any valid hex or rgb value. 21 | 22 | ```css 23 | :root { 24 | --ripple-color: #000; 25 | } 26 | ``` 27 | 28 | ### Radius 29 | 30 | By default, the ripple radius is 9999px, but you may make it more or less to suit your needs. To change it globally, you can set the `--ripple-radius` CSS variable in your app CSS file. 31 | 32 | ```css 33 | :root { 34 | --ripple-radius: 5%; 35 | } 36 | ``` 37 | 38 | Now the ripple radius will be 5% instead. 39 | 40 | ### Duration 41 | 42 | By default, the ripple duration is 600ms, but you may make it more or less to suit your needs. To change it globally, you can set the `--ripple-duration` CSS variable in your app CSS file. 43 | 44 | ```css 45 | :root { 46 | --ripple-duration: 1000ms; 47 | } 48 | ``` 49 | 50 | ### Timing Function 51 | 52 | By default, the ripple timing function is `linear`, but you may change it to suit your needs by setting the `--ripple-timing-function` CSS variable in your app CSS file. 53 | 54 | ```css 55 | :root { 56 | --ripple-timing-function: ease-in-out; 57 | } 58 | ``` 59 | 60 | ## X-Ripple-Focus 61 | 62 | Below are the options for the `x-ripple-focus` directive that can be modified globally. 63 | 64 | ### Focus Color 65 | 66 | If you want to change the color of the `x-ripple-focus` globally, you can do so by setting the `--ripple-focus-color` CSS variable in your app CSS file. 67 | You may define the color with any valid hex or rgb value. 68 | 69 | ```css 70 | :root { 71 | --ripple-focus-color: #000; 72 | } 73 | ``` 74 | 75 | > {note} If you're using the `x-ripple` directives, you only need to set the `--ripple-color` CSS variable unless you want to use a different color for the `x-ripple-focus` directive. 76 | 77 | ### Animation 78 | 79 | The `x-ripple-focus` directive uses a CSS animation to create a pulsating effect on the ripple focus element that gets appended inside your element when it is focused. There 80 | are a few customizations you may make to the animation via CSS variables. Here are the defaults that are used for the animation. 81 | 82 | ```css 83 | :root { 84 | --ripple-focus-duration: 2500ms; 85 | --ripple-focus-timing-function: ease-in-out; 86 | --ripple-focus-delay: 200ms; 87 | } 88 | ``` 89 | -------------------------------------------------------------------------------- /docs/usage/x-ripple.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: X-Ripple 3 | sort: 1 4 | --- 5 | 6 | ## Introduction 7 | 8 | The `x-ripple` directive is the main directive this package offers. It adds a ripple effect to any element with the directive applied to it. 9 | In most cases, this will be a button, but you are free to use it on any element. 10 | 11 | ```html 12 | 13 | ``` 14 | 15 | This will result in a ripple effect when the button is clicked on. By default, the ripple effect will be white, but this can be 16 | changed globally or on a per-element basis. 17 | 18 | > {note} For the `x-ripple` directive to work, you must have the `x-data` directive applied to the element as well, or the element 19 | > must be inside the scope of an `x-data` directive. 20 | 21 | ## Options 22 | 23 | Certain aspects of the ripple effect can be customized for this package. Some options can be set [globally via CSS](/docs/alpine-ripple/{version}/usage/global-customization), or on a per-element basis. 24 | 25 | ### Color 26 | 27 | By default, the ripple color is white, which should work in most cases. However, if you want to change the color, you can do so with a `color` modifier. 28 | 29 | ```html 30 | 31 | ``` 32 | 33 | This will result in a black ripple effect when the button is clicked on. If you're using Tailwind, you may define a color class and use that instead. 34 | 35 | ```html 36 | 37 | ``` 38 | 39 | This will result in the ripple element getting the `!bg-green-500` class added to it. `!` is added to the class to specify that it is important, 40 | so it overrides any other styles. to prevent Tailwind from puring your color classes, you should be sure to add them to your `safelist` in your 41 | `tailwind.config.js` file if you're not using them anywhere else. 42 | 43 | ### Radius 44 | 45 | By default, the ripple radius is set to `9999px`, but you may make it more or less to suit your needs. You can modify the radius with the `radius` modifier. 46 | 47 | ```html 48 | 49 | ``` 50 | 51 | This button will now have a radius of 5rem. Any valid CSS unit can be used. If one is omitted, we will assume a unit of `%`. If you want to use a decimal value, 52 | you may define it with an underscore, like this: 53 | 54 | ```html 55 | 56 | ``` 57 | 58 | This will give the ripple a radius of 5.5%. 59 | 60 | ### Duration 61 | 62 | By default, the ripple duration is 600ms, but you may make it more or less to suit your needs, however the only way to do this is by setting it globally via CSS. 63 | See the [Duration](/docs/alpine-ripple/{version}/usage/global-customization#user-content-duration) section for more information. 64 | 65 | ## Advanced Usage 66 | 67 | It is possible to chain multiple modifiers onto the `x-ripple` directive. Here is an example of changing the color to red, and the radius to 25%. 68 | 69 | ```html 70 | 71 | ``` 72 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > ✨ Help support the maintenance of this package by [sponsoring me](https://github.com/sponsors/rawilk). 2 | 3 | # alpine-ripple 4 | 5 | ![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/rawilk/alpine-ripple?label=version&style=flat-square) 6 | ![Npm downloads](https://img.shields.io/npm/dt/@wilkr/alpine-ripple?style=flat-square) 7 | ![GitHub stars](https://img.shields.io/github/stars/rawilk/alpine-ripple?style=flat-square) 8 | 9 | ![social image](https://banners.beyondco.de/alpine-ripple.png?theme=light&packageManager=npm+install&packageName=%40wilkr%2Falpine-ripple&pattern=bubbles&style=style_1&description=Ripple+effect+%28materialize%29+for+Alpine.js.&md=1&showWatermark=0&fontSize=100px&images=sparkles) 10 | 11 | `alpine-ripple` is a simple Alpine.js plugin that adds a ripple effect to any element with an alpine directive `x-ripple`. 12 | 13 | ## Requirements 14 | 15 | - Alpine.js v3.x 16 | - Tailwind CSS (only required if you want to use custom color classes on the directive) 17 | 18 | ## Installation 19 | 20 | ### CDN 21 | 22 | Include the following ` 33 | ``` 34 | 35 | ### NPM 36 | 37 | ```bash 38 | npm i -S @wilkr/alpine-ripple 39 | ``` 40 | 41 | Add the `x-ripple` directive to your project by importing the package. 42 | 43 | ```js 44 | import Alpine from "alpinejs"; 45 | import Ripple from "@wilkr/alpine-ripple"; 46 | 47 | Alpine.plugin(Ripple); 48 | 49 | window.Alpine = Alpine; 50 | window.Alpine.start(); 51 | ``` 52 | 53 | Import the package styles into your css. 54 | 55 | ```css 56 | @import "@wilkr/alpine-ripple/dist/alpine-ripple.css"; 57 | ``` 58 | 59 | ## Usage 60 | 61 | Add the `x-ripple` directive to any element, which in most cases will be a ` 65 | ``` 66 | 67 | This will result in a ripple effect when the button is clicked. By default, the ripple will be white, but this can be changed globally or on a per-element basis. 68 | 69 | ## Documentation 70 | 71 | More documentation can be found here: https://randallwilk.dev/docs/alpine-ripple 72 | 73 | ## Changelog 74 | 75 | Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. 76 | 77 | ## Contributing 78 | 79 | Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details. 80 | 81 | ## Security 82 | 83 | If you discover any security related issues, please email randall@randallwilk.dev instead of using the issue tracker. 84 | 85 | ## Credits 86 | 87 | - [Randall Wilk](https://github.com/rawilk) 88 | - [All Contributors](../../contributors) 89 | 90 | `alpine-ripple` is heavily inspired from: 91 | 92 | - [alHasandev/tailwind-button](https://github.com/alHasandev/tailwind-button) 93 | 94 | ## License 95 | 96 | The MIT License (MIT). Please see [License File](LICENSE.md) for more information. 97 | -------------------------------------------------------------------------------- /src/js/directives/focus.js: -------------------------------------------------------------------------------- 1 | import { 2 | addConfigClassToElement, 3 | configClassToSelector, 4 | getCustomColorFromModifiers, 5 | removeConfigClassFromElement, 6 | startRipple, 7 | toStyles, 8 | } from '../utils'; 9 | 10 | /** 11 | * Determine if the element is being focused from a click or tab. 12 | * This isn't the best way to do this, but it works for now. 13 | * 14 | * @param {HTMLElement} el 15 | * @returns {boolean} 16 | */ 17 | const isFromTab = el => ! el.hasAttribute('data-ripple-click'); 18 | 19 | /** 20 | * Configuration options for the ripple focus directive. 21 | * 22 | * @type {{focusClass: string, focusedClass: string}} 23 | */ 24 | let config = { 25 | focusClass: 'ripple-focus', 26 | focusedClass: 'ripple-focus-active', 27 | }; 28 | 29 | /** 30 | * Add a pulsating ripple effect to the element when it is focused. 31 | * 32 | * @param {Event} event 33 | * @param {HTMLElement} el 34 | * @param {array} modifiers 35 | */ 36 | export const addRippleFocus = (event, el, modifiers = []) => { 37 | if (! isFromTab(el)) { 38 | event.preventDefault(); 39 | 40 | return; 41 | } 42 | 43 | const rippleStyles = startRipple(event, el, { pulsate: true }); 44 | 45 | const rippleFocus = document.createElement('span'); 46 | addConfigClassToElement(rippleFocus, config.focusClass); 47 | 48 | el.appendChild(rippleFocus); 49 | 50 | const rippleFocusChild = document.createElement('span'); 51 | rippleFocusChild.classList.add('ripple-focus-child'); 52 | 53 | const color = getCustomColorFromModifiers(modifiers); 54 | if (color.indexOf('bg-') === 0) { 55 | // Prefix with '!' for !important (requires Tailwind). 56 | rippleFocusChild.classList.add(`!${color}`); 57 | } else if (color.indexOf('#') === 0 || color.indexOf('rgb') === 0) { 58 | rippleStyles['--ripple-focus-color'] = color; 59 | } 60 | 61 | rippleFocusChild.setAttribute('style', toStyles(rippleStyles)); 62 | rippleFocusChild.appendChild(document.createElement('span')); 63 | 64 | rippleFocus.appendChild(rippleFocusChild); 65 | 66 | addConfigClassToElement(el, config.focusedClass); 67 | }; 68 | 69 | /** 70 | * Remove the ripple focus effect from the element. 71 | * 72 | * @param {HTMLElement} el 73 | */ 74 | export const removeRippleFocus = el => { 75 | el.hasAttribute('data-ripple-click') && el.removeAttribute('data-ripple-click'); 76 | 77 | try { 78 | removeConfigClassFromElement(el, config.focusedClass); 79 | } catch (e) {} 80 | 81 | const ripple = el.querySelector(configClassToSelector(config.focusClass)); 82 | 83 | ripple && ripple.remove(); 84 | }; 85 | 86 | /** 87 | * Add a data attribute to the element so we know it was clicked instead of keyboard focused. 88 | * 89 | * @param {HTMLElement} el 90 | */ 91 | export const rippleFocusClick = el => { 92 | el.setAttribute('data-ripple-click', 'true'); 93 | }; 94 | 95 | /** 96 | * Remove our click data attribute from the element. 97 | * 98 | * @param {HTMLElement} el 99 | * @returns {false|void} 100 | */ 101 | export const rippleFocusMouseUp = el => el.hasAttribute('data-ripple-click') && el.removeAttribute('data-ripple-click'); 102 | 103 | export default (Alpine, rippleConfig) => { 104 | config = { ...config, ...rippleConfig }; 105 | 106 | Alpine.directive('ripple-focus', (el, { modifiers, expression }, { cleanup }) => { 107 | const clickHandler = () => rippleFocusClick(el); 108 | const mouseUpHandler = () => rippleFocusMouseUp(el); 109 | const focusHandler = event => addRippleFocus(event, el, modifiers); 110 | const blurHandler = () => removeRippleFocus(el); 111 | 112 | /* 113 | * We need a way to know if we are giving focus to the element by clicking or tabbing. 114 | * Since there isn't a reliable way to do this with the focus event and the `mousedown` 115 | * event is fired before the `focus` event, we will set a data attribute on the element 116 | * that we can check for in the `focus` event. 117 | * 118 | * This way, we don't show our pulsating ripple animation when the user clicks on the 119 | * element, but only show it when the user tabs to the element. 120 | */ 121 | el.addEventListener('mousedown', clickHandler); 122 | el.addEventListener('mouseup', mouseUpHandler); 123 | el.addEventListener('contextmenu', clickHandler); 124 | 125 | el.addEventListener('focus', focusHandler); 126 | el.addEventListener('blur', blurHandler); 127 | 128 | cleanup(() => { 129 | el.removeEventListener('mousedown', clickHandler); 130 | el.removeEventListener('mouseup', mouseUpHandler); 131 | el.removeEventListener('contextmenu', clickHandler); 132 | 133 | el.removeEventListener('focus', focusHandler); 134 | el.removeEventListener('blur', blurHandler); 135 | }); 136 | }); 137 | }; 138 | -------------------------------------------------------------------------------- /src/js/directives/click.js: -------------------------------------------------------------------------------- 1 | import { 2 | addConfigClassToElement, 3 | configClassToSelector, 4 | getAttributeThatStartsWith, 5 | getCustomColorFromModifiers, 6 | getCustomRadiusFromModifiers, 7 | isEnterOrSpace, 8 | startRipple, 9 | toStyles, 10 | willHaveAMouseUpEvent, 11 | } from '../utils'; 12 | import { addRippleFocus, removeRippleFocus } from './focus'; 13 | 14 | /** 15 | * Configuration options for the ripple click directive. 16 | * 17 | * @type {{removeTimeout: number, rippleClass: string}} 18 | */ 19 | let config = { 20 | rippleClass: 'ripple', 21 | removeTimeout: 1000, 22 | focusedClass: 'ripple-focus-active', // So we can check if the element is focused by our directive. 23 | }; 24 | 25 | /** 26 | * Check if the element has the focused class. 27 | * 28 | * @param {HTMLElement} el 29 | * @returns {boolean} 30 | */ 31 | const hasRippleFocus = el => config.focusedClass.split(' ').every(className => el.classList.contains(className)); 32 | 33 | /** 34 | * Add a ripple effect to the element. 35 | * 36 | * @param {MouseEvent|KeyboardEvent} event 37 | * @param {HTMLElement} el 38 | * @param {Array} modifiers 39 | */ 40 | export const addRipple = (event, el, modifiers = []) => { 41 | if (! willHaveAMouseUpEvent(event) && ! isEnterOrSpace(event)) { 42 | return; 43 | } 44 | 45 | const styles = startRipple(event, el); 46 | 47 | const ripple = document.createElement('span'); 48 | addConfigClassToElement(ripple, config.rippleClass); 49 | 50 | el.appendChild(ripple); 51 | 52 | const innerRipple = document.createElement('span'); 53 | 54 | const color = getCustomColorFromModifiers(modifiers); 55 | if (color.indexOf('bg-') === 0) { 56 | // Prefix with '!' for !important (requires Tailwind). 57 | innerRipple.classList.add(`!${color}`); 58 | } else if (color.indexOf('#') === 0 || color.indexOf('rgb') === 0) { 59 | styles['--ripple-color'] = color; 60 | } 61 | 62 | const radius = getCustomRadiusFromModifiers(modifiers); 63 | if (radius) { 64 | styles['--ripple-radius'] = radius; 65 | } 66 | 67 | ripple.appendChild(innerRipple); 68 | innerRipple.setAttribute('style', toStyles(styles)); 69 | }; 70 | 71 | /** 72 | * Remove the ripple effect from the element. 73 | * 74 | * @param {HTMLElement} el 75 | * @param {boolean} alsoRemoveFocus 76 | */ 77 | export const removeRipple = (el, alsoRemoveFocus = false) => { 78 | alsoRemoveFocus && removeRippleFocus(el); 79 | 80 | setTimeout(() => { 81 | // We are only removing the first instance to prevent ripples from subsequent clicks 82 | // being removed too quickly before the ripple effect can properly be seen. 83 | const ripple = el.querySelector(configClassToSelector(config.rippleClass)); 84 | 85 | ripple && ripple.remove(); 86 | }, config.removeTimeout); 87 | }; 88 | 89 | /** 90 | * Show a ripple effect when the user presses the enter or space key. 91 | * 92 | * @param {KeyboardEvent} event 93 | * @param {HTMLElement} el 94 | * @param {array} modifiers 95 | */ 96 | export const handleRippleKeydown = (event, el, modifiers) => { 97 | if (! isEnterOrSpace(event)) { 98 | return; 99 | } 100 | 101 | const originallyHadFocus = hasRippleFocus(el); 102 | 103 | addRipple(event, el, modifiers); 104 | removeRippleFocus(el); 105 | 106 | if (originallyHadFocus) { 107 | addFocusBack(event, el); 108 | } 109 | }; 110 | 111 | /** 112 | * Add a focus ripple effect back to the element after the ripple effect has been removed. 113 | * 114 | * @param {Event} event 115 | * @param {HTMLElement} el 116 | */ 117 | const addFocusBack = (event, el) => { 118 | const hasRippleClick = el.contains(el.querySelector(configClassToSelector(config.rippleClass))); 119 | 120 | if (hasRippleClick) { 121 | setTimeout(() => addFocusBack(event, el), config.removeTimeout); 122 | 123 | return; 124 | } 125 | 126 | // We need to get the modifiers, if any, from the x-ripple-focus directive. 127 | const directive = getAttributeThatStartsWith(el, 'x-ripple-focus'); 128 | const focusModifiers = directive ? directive.name.split('.').slice(1) : []; 129 | 130 | addRippleFocus(event, el, focusModifiers); 131 | }; 132 | 133 | /** 134 | * Define an Alpine directive that adds a ripple click effect to a given element. 135 | * 136 | * @param {Object} Alpine 137 | * @param {Object} rippleConfig 138 | */ 139 | export default (Alpine, rippleConfig) => { 140 | config = { ...config, ...rippleConfig }; 141 | 142 | Alpine.directive('ripple', (el, { modifiers, expression }, { cleanup }) => { 143 | const clickHandler = event => addRipple(event, el, modifiers); 144 | const mouseUpHandler = () => removeRipple(el, true); 145 | const keydownHandler = event => handleRippleKeydown(event, el, modifiers); 146 | const keyupHandler = event => isEnterOrSpace(event) && removeRipple(el, false); 147 | const passiveOptions = { passive: true }; 148 | 149 | el.addEventListener('mousedown', clickHandler); 150 | el.addEventListener('mouseup', mouseUpHandler); 151 | el.addEventListener('mouseleave', mouseUpHandler); 152 | el.addEventListener('contextmenu', mouseUpHandler); 153 | el.addEventListener('touchstart', clickHandler, passiveOptions); 154 | el.addEventListener('touchend', mouseUpHandler); 155 | el.addEventListener('touchmove', mouseUpHandler, passiveOptions); 156 | el.addEventListener('dragleave', mouseUpHandler); 157 | el.addEventListener('keydown', keydownHandler); 158 | el.addEventListener('keyup', keyupHandler); 159 | 160 | cleanup(() => { 161 | el.removeEventListener('mousedown', clickHandler); 162 | el.removeEventListener('mouseup', mouseUpHandler); 163 | el.removeEventListener('mouseleave', mouseUpHandler); 164 | el.removeEventListener('contextmenu', mouseUpHandler); 165 | el.removeEventListener('touchstart', clickHandler, passiveOptions); 166 | el.removeEventListener('touchend', mouseUpHandler); 167 | el.removeEventListener('touchmove', mouseUpHandler, passiveOptions); 168 | el.removeEventListener('dragleave', mouseUpHandler); 169 | el.removeEventListener('keydown', keydownHandler); 170 | el.removeEventListener('keyup', keyupHandler); 171 | }); 172 | }); 173 | }; 174 | -------------------------------------------------------------------------------- /dist/alpine-ripple.js: -------------------------------------------------------------------------------- 1 | (function(f){typeof define==='function'&&define.amd?define(f):f();})((function(){'use strict';/** 2 | * Get an attribute from an element that starts with a string. 3 | * 4 | * @param {HTMLElement} el 5 | * @param {string} startsWith 6 | * @returns {object|null} 7 | */ 8 | const getAttributeThatStartsWith = (el, startsWith) => { 9 | for (const attr of el.attributes) { 10 | if (attr.name.startsWith(startsWith)) { 11 | return attr; 12 | } 13 | } 14 | return null; 15 | };/** 16 | * Convert a space separated class string to a valid css selector. 17 | * 18 | * @param {string} configClass 19 | * @returns {string} 20 | */ 21 | const configClassToSelector = configClass => `.${configClass.replace(' ', '.')}`; 22 | 23 | /** 24 | * Add a space separated class string to an element. 25 | * 26 | * @param {HTMLElement} el 27 | * @param {string} configClass 28 | */ 29 | const addConfigClassToElement = (el, configClass) => configClass.split(' ').forEach(c => el.classList.add(c)); 30 | 31 | /** 32 | * Remove a space separated class string from an element. 33 | * 34 | * @param {HTMLElement} el 35 | * @param {string} configClass 36 | */ 37 | const removeConfigClassFromElement = (el, configClass) => configClass.split(' ').forEach(c => el.classList.remove(c));/** 38 | * Check if the keydown event is the enter key or the space bar. 39 | * 40 | * @param {KeyboardEvent} event 41 | * @returns {boolean} 42 | */ 43 | const isEnterOrSpace = event => event.key === 'Enter' || event.key === ' ';/** 44 | * Return a user defined custom color for the ripple effect. 45 | * 46 | * @param {Array} modifiers 47 | * @returns {string} 48 | */ 49 | const getCustomColorFromModifiers = modifiers => { 50 | if (!modifiers.includes('color')) { 51 | return ''; 52 | } 53 | const nextModifier = modifiers[modifiers.indexOf('color') + 1] || 'invalid-color'; 54 | if (nextModifier.indexOf('#') === 0 || nextModifier.indexOf('rgb') === 0) { 55 | return nextModifier; 56 | } 57 | return nextModifier.indexOf('bg') === 0 ? nextModifier : `bg-${nextModifier}`; 58 | }; 59 | 60 | /** 61 | * Return a user defined custom radius for the ripple effect. 62 | * 63 | * @param {Array} modifiers 64 | * @returns {string} 65 | */ 66 | const getCustomRadiusFromModifiers = modifiers => { 67 | if (!modifiers.includes('radius')) { 68 | return ''; 69 | } 70 | let nextModifier = modifiers[modifiers.indexOf('radius') + 1] || 'invalid-radius'; 71 | 72 | // _ allows us to use decimals, such as 0.5. 73 | nextModifier = nextModifier.replace('_', '.'); 74 | 75 | // Separate the numeric value from the unit in nextModifier. 76 | // Possible values for nextModifier: 50, 50.5, 50.5px, 50px, 50%, 50rem, 50em 77 | const numericValue = nextModifier.match(/^[0-9]+(\.[0-9]+)?/)[0]; 78 | let unit = nextModifier.replace(numericValue, ''); 79 | if (!unit) { 80 | unit = '%'; 81 | } 82 | return `${numericValue}${unit}`; 83 | };const startRipple = (event, el, options = {}) => { 84 | const { 85 | center = options.pulsate 86 | } = options; 87 | const rect = el.getBoundingClientRect(); 88 | 89 | // Determine the size of the ripple. 90 | let rippleX, rippleY, rippleSize; 91 | if (center || event === undefined || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) { 92 | // This is mostly used for the keyboard focus ripple. 93 | rippleX = Math.round(rect.width / 2); 94 | rippleY = Math.round(rect.height / 2); 95 | } else { 96 | const { 97 | clientX, 98 | clientY 99 | } = event.touches && event.touches.length > 0 ? event.touches[0] : event; 100 | rippleX = Math.round(clientX - rect.left); 101 | rippleY = Math.round(clientY - rect.top); 102 | } 103 | if (center) { 104 | rippleSize = Math.sqrt((2 * rect.width ** 2 + rect.height ** 2) / 3); 105 | 106 | // For some reason the animation is broken on Mobile Chrome if the size is even. 107 | if (rippleSize % 2 === 0) { 108 | rippleSize++; 109 | } 110 | } else { 111 | const sizeX = Math.max(Math.abs((el ? el.clientWidth : 0) - rippleX), rippleX) * 2 + 2, 112 | sizeY = Math.max(Math.abs((el ? el.clientHeight : 0) - rippleY), rippleY) * 2 + 2; 113 | rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2); 114 | } 115 | return { 116 | width: `${rippleSize}px`, 117 | height: `${rippleSize}px`, 118 | top: `${-(rippleSize / 2) + rippleY}px`, 119 | left: `${-(rippleSize / 2) + rippleX}px` 120 | }; 121 | };/** 122 | * Convert an object of style properties to a string of CSS. 123 | * 124 | * @param {object} styles 125 | * @returns {string} 126 | */ 127 | var toStyles = (styles => Object.entries(styles).map(([key, value]) => `${formatStyleKey(key)}: ${value}`).join(';')); 128 | 129 | /** 130 | * convert a style key to a css property. 131 | * 132 | * @param {string} key 133 | * @returns {string} 134 | */ 135 | const formatStyleKey = key => key.replace(/([A-Z])/g, '-$1').toLowerCase();/** 136 | * Some events, such as a right click or ctrl + left click won't trigger a mouseup event, 137 | * so we need to prevent the ripple from being added in those cases. 138 | * 139 | * @param {MouseEvent} event 140 | * @returns {boolean} 141 | */ 142 | var willHaveAMouseUpEvent = (event => { 143 | if (event.ctrlKey) { 144 | return false; 145 | } 146 | return event.button === 0 || event.button === 1; 147 | });/** 148 | * Determine if the element is being focused from a click or tab. 149 | * This isn't the best way to do this, but it works for now. 150 | * 151 | * @param {HTMLElement} el 152 | * @returns {boolean} 153 | */ 154 | const isFromTab = el => !el.hasAttribute('data-ripple-click'); 155 | 156 | /** 157 | * Configuration options for the ripple focus directive. 158 | * 159 | * @type {{focusClass: string, focusedClass: string}} 160 | */ 161 | let config$1 = { 162 | focusClass: 'ripple-focus', 163 | focusedClass: 'ripple-focus-active' 164 | }; 165 | 166 | /** 167 | * Add a pulsating ripple effect to the element when it is focused. 168 | * 169 | * @param {Event} event 170 | * @param {HTMLElement} el 171 | * @param {array} modifiers 172 | */ 173 | const addRippleFocus = (event, el, modifiers = []) => { 174 | if (!isFromTab(el)) { 175 | event.preventDefault(); 176 | return; 177 | } 178 | const rippleStyles = startRipple(event, el, { 179 | pulsate: true 180 | }); 181 | const rippleFocus = document.createElement('span'); 182 | addConfigClassToElement(rippleFocus, config$1.focusClass); 183 | el.appendChild(rippleFocus); 184 | const rippleFocusChild = document.createElement('span'); 185 | rippleFocusChild.classList.add('ripple-focus-child'); 186 | const color = getCustomColorFromModifiers(modifiers); 187 | if (color.indexOf('bg-') === 0) { 188 | // Prefix with '!' for !important (requires Tailwind). 189 | rippleFocusChild.classList.add(`!${color}`); 190 | } else if (color.indexOf('#') === 0 || color.indexOf('rgb') === 0) { 191 | rippleStyles['--ripple-focus-color'] = color; 192 | } 193 | rippleFocusChild.setAttribute('style', toStyles(rippleStyles)); 194 | rippleFocusChild.appendChild(document.createElement('span')); 195 | rippleFocus.appendChild(rippleFocusChild); 196 | addConfigClassToElement(el, config$1.focusedClass); 197 | }; 198 | 199 | /** 200 | * Remove the ripple focus effect from the element. 201 | * 202 | * @param {HTMLElement} el 203 | */ 204 | const removeRippleFocus = el => { 205 | el.hasAttribute('data-ripple-click') && el.removeAttribute('data-ripple-click'); 206 | try { 207 | removeConfigClassFromElement(el, config$1.focusedClass); 208 | } catch (e) {} 209 | const ripple = el.querySelector(configClassToSelector(config$1.focusClass)); 210 | ripple && ripple.remove(); 211 | }; 212 | 213 | /** 214 | * Add a data attribute to the element so we know it was clicked instead of keyboard focused. 215 | * 216 | * @param {HTMLElement} el 217 | */ 218 | const rippleFocusClick = el => { 219 | el.setAttribute('data-ripple-click', 'true'); 220 | }; 221 | 222 | /** 223 | * Remove our click data attribute from the element. 224 | * 225 | * @param {HTMLElement} el 226 | * @returns {false|void} 227 | */ 228 | const rippleFocusMouseUp = el => el.hasAttribute('data-ripple-click') && el.removeAttribute('data-ripple-click'); 229 | var rippleFocus = ((Alpine, rippleConfig) => { 230 | config$1 = { 231 | ...config$1, 232 | ...rippleConfig 233 | }; 234 | Alpine.directive('ripple-focus', (el, { 235 | modifiers, 236 | expression 237 | }, { 238 | cleanup 239 | }) => { 240 | const clickHandler = () => rippleFocusClick(el); 241 | const mouseUpHandler = () => rippleFocusMouseUp(el); 242 | const focusHandler = event => addRippleFocus(event, el, modifiers); 243 | const blurHandler = () => removeRippleFocus(el); 244 | 245 | /* 246 | * We need a way to know if we are giving focus to the element by clicking or tabbing. 247 | * Since there isn't a reliable way to do this with the focus event and the `mousedown` 248 | * event is fired before the `focus` event, we will set a data attribute on the element 249 | * that we can check for in the `focus` event. 250 | * 251 | * This way, we don't show our pulsating ripple animation when the user clicks on the 252 | * element, but only show it when the user tabs to the element. 253 | */ 254 | el.addEventListener('mousedown', clickHandler); 255 | el.addEventListener('mouseup', mouseUpHandler); 256 | el.addEventListener('contextmenu', clickHandler); 257 | el.addEventListener('focus', focusHandler); 258 | el.addEventListener('blur', blurHandler); 259 | cleanup(() => { 260 | el.removeEventListener('mousedown', clickHandler); 261 | el.removeEventListener('mouseup', mouseUpHandler); 262 | el.removeEventListener('contextmenu', clickHandler); 263 | el.removeEventListener('focus', focusHandler); 264 | el.removeEventListener('blur', blurHandler); 265 | }); 266 | }); 267 | });/** 268 | * Configuration options for the ripple click directive. 269 | * 270 | * @type {{removeTimeout: number, rippleClass: string}} 271 | */ 272 | let config = { 273 | rippleClass: 'ripple', 274 | removeTimeout: 1000, 275 | focusedClass: 'ripple-focus-active' // So we can check if the element is focused by our directive. 276 | }; 277 | 278 | /** 279 | * Check if the element has the focused class. 280 | * 281 | * @param {HTMLElement} el 282 | * @returns {boolean} 283 | */ 284 | const hasRippleFocus = el => config.focusedClass.split(' ').every(className => el.classList.contains(className)); 285 | 286 | /** 287 | * Add a ripple effect to the element. 288 | * 289 | * @param {MouseEvent|KeyboardEvent} event 290 | * @param {HTMLElement} el 291 | * @param {Array} modifiers 292 | */ 293 | const addRipple = (event, el, modifiers = []) => { 294 | if (!willHaveAMouseUpEvent(event) && !isEnterOrSpace(event)) { 295 | return; 296 | } 297 | const styles = startRipple(event, el); 298 | const ripple = document.createElement('span'); 299 | addConfigClassToElement(ripple, config.rippleClass); 300 | el.appendChild(ripple); 301 | const innerRipple = document.createElement('span'); 302 | const color = getCustomColorFromModifiers(modifiers); 303 | if (color.indexOf('bg-') === 0) { 304 | // Prefix with '!' for !important (requires Tailwind). 305 | innerRipple.classList.add(`!${color}`); 306 | } else if (color.indexOf('#') === 0 || color.indexOf('rgb') === 0) { 307 | styles['--ripple-color'] = color; 308 | } 309 | const radius = getCustomRadiusFromModifiers(modifiers); 310 | if (radius) { 311 | styles['--ripple-radius'] = radius; 312 | } 313 | ripple.appendChild(innerRipple); 314 | innerRipple.setAttribute('style', toStyles(styles)); 315 | }; 316 | 317 | /** 318 | * Remove the ripple effect from the element. 319 | * 320 | * @param {HTMLElement} el 321 | * @param {boolean} alsoRemoveFocus 322 | */ 323 | const removeRipple = (el, alsoRemoveFocus = false) => { 324 | alsoRemoveFocus && removeRippleFocus(el); 325 | setTimeout(() => { 326 | // We are only removing the first instance to prevent ripples from subsequent clicks 327 | // being removed too quickly before the ripple effect can properly be seen. 328 | const ripple = el.querySelector(configClassToSelector(config.rippleClass)); 329 | ripple && ripple.remove(); 330 | }, config.removeTimeout); 331 | }; 332 | 333 | /** 334 | * Show a ripple effect when the user presses the enter or space key. 335 | * 336 | * @param {KeyboardEvent} event 337 | * @param {HTMLElement} el 338 | * @param {array} modifiers 339 | */ 340 | const handleRippleKeydown = (event, el, modifiers) => { 341 | if (!isEnterOrSpace(event)) { 342 | return; 343 | } 344 | const originallyHadFocus = hasRippleFocus(el); 345 | addRipple(event, el, modifiers); 346 | removeRippleFocus(el); 347 | if (originallyHadFocus) { 348 | addFocusBack(event, el); 349 | } 350 | }; 351 | 352 | /** 353 | * Add a focus ripple effect back to the element after the ripple effect has been removed. 354 | * 355 | * @param {Event} event 356 | * @param {HTMLElement} el 357 | */ 358 | const addFocusBack = (event, el) => { 359 | const hasRippleClick = el.contains(el.querySelector(configClassToSelector(config.rippleClass))); 360 | if (hasRippleClick) { 361 | setTimeout(() => addFocusBack(event, el), config.removeTimeout); 362 | return; 363 | } 364 | 365 | // We need to get the modifiers, if any, from the x-ripple-focus directive. 366 | const directive = getAttributeThatStartsWith(el, 'x-ripple-focus'); 367 | const focusModifiers = directive ? directive.name.split('.').slice(1) : []; 368 | addRippleFocus(event, el, focusModifiers); 369 | }; 370 | 371 | /** 372 | * Define an Alpine directive that adds a ripple click effect to a given element. 373 | * 374 | * @param {Object} Alpine 375 | * @param {Object} rippleConfig 376 | */ 377 | var rippleClick = ((Alpine, rippleConfig) => { 378 | config = { 379 | ...config, 380 | ...rippleConfig 381 | }; 382 | Alpine.directive('ripple', (el, { 383 | modifiers, 384 | expression 385 | }, { 386 | cleanup 387 | }) => { 388 | const clickHandler = event => addRipple(event, el, modifiers); 389 | const mouseUpHandler = () => removeRipple(el, true); 390 | const keydownHandler = event => handleRippleKeydown(event, el, modifiers); 391 | const keyupHandler = event => isEnterOrSpace(event) && removeRipple(el, false); 392 | const passiveOptions = { 393 | passive: true 394 | }; 395 | el.addEventListener('mousedown', clickHandler); 396 | el.addEventListener('mouseup', mouseUpHandler); 397 | el.addEventListener('mouseleave', mouseUpHandler); 398 | el.addEventListener('contextmenu', mouseUpHandler); 399 | el.addEventListener('touchstart', clickHandler, passiveOptions); 400 | el.addEventListener('touchend', mouseUpHandler); 401 | el.addEventListener('touchmove', mouseUpHandler, passiveOptions); 402 | el.addEventListener('dragleave', mouseUpHandler); 403 | el.addEventListener('keydown', keydownHandler); 404 | el.addEventListener('keyup', keyupHandler); 405 | cleanup(() => { 406 | el.removeEventListener('mousedown', clickHandler); 407 | el.removeEventListener('mouseup', mouseUpHandler); 408 | el.removeEventListener('mouseleave', mouseUpHandler); 409 | el.removeEventListener('contextmenu', mouseUpHandler); 410 | el.removeEventListener('touchstart', clickHandler, passiveOptions); 411 | el.removeEventListener('touchend', mouseUpHandler); 412 | el.removeEventListener('touchmove', mouseUpHandler, passiveOptions); 413 | el.removeEventListener('dragleave', mouseUpHandler); 414 | el.removeEventListener('keydown', keydownHandler); 415 | el.removeEventListener('keyup', keyupHandler); 416 | }); 417 | }); 418 | });/** 419 | * Configuration options for the ripple directives. 420 | * 421 | * @type {{rippleClass: string, removeTimeout: number, focusClass: string, focusedClass: string}} 422 | */ 423 | const rippleConfig = { 424 | rippleClass: 'ripple', 425 | removeTimeout: 1000, 426 | focusClass: 'ripple-focus', 427 | focusedClass: 'ripple-focus-active' 428 | }; 429 | function Ripple(Alpine) { 430 | rippleClick(Alpine, rippleConfig); 431 | rippleFocus(Alpine, rippleConfig); 432 | } 433 | Ripple.configure = config => { 434 | if (config.hasOwnProperty('class') && typeof config.class === 'string') { 435 | rippleConfig.rippleClass = config.class; 436 | } 437 | if (config.hasOwnProperty('removeTimeout') && typeof config.removeTimeout === 'number') { 438 | rippleConfig.removeTimeout = config.removeTimeout; 439 | } 440 | if (config.hasOwnProperty('focusClass') && typeof config.focusClass === 'string') { 441 | rippleConfig.focusClass = config.focusClass; 442 | } 443 | if (config.hasOwnProperty('focusedClass') && typeof config.focusedClass === 'string') { 444 | rippleConfig.focusedClass = config.focusedClass; 445 | } 446 | return Ripple; 447 | };document.addEventListener('alpine:initializing', () => { 448 | Ripple(window.Alpine); 449 | });}));//# sourceMappingURL=alpine-ripple.js.map 450 | -------------------------------------------------------------------------------- /dist/alpine-ripple.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"alpine-ripple.js","sources":["../src/js/utils/attributes.js","../src/js/utils/config.js","../src/js/utils/keydown.js","../src/js/utils/modifiers.js","../src/js/utils/ripple.js","../src/js/utils/to-styles.js","../src/js/utils/will-have-mouse-up-event.js","../src/js/directives/focus.js","../src/js/directives/click.js","../src/js/ripple.js","../builds/cdn.js"],"sourcesContent":["/**\n * Get an attribute from an element that starts with a string.\n *\n * @param {HTMLElement} el\n * @param {string} startsWith\n * @returns {object|null}\n */\nexport const getAttributeThatStartsWith = (el, startsWith) => {\n for (const attr of el.attributes) {\n if (attr.name.startsWith(startsWith)) {\n return attr;\n }\n }\n\n return null;\n};\n","/**\n * Convert a space separated class string to a valid css selector.\n *\n * @param {string} configClass\n * @returns {string}\n */\nexport const configClassToSelector = configClass => `.${configClass.replace(' ', '.')}`;\n\n/**\n * Add a space separated class string to an element.\n *\n * @param {HTMLElement} el\n * @param {string} configClass\n */\nexport const addConfigClassToElement = (el, configClass) => configClass.split(' ').forEach(c => el.classList.add(c));\n\n/**\n * Remove a space separated class string from an element.\n *\n * @param {HTMLElement} el\n * @param {string} configClass\n */\nexport const removeConfigClassFromElement = (el, configClass) => configClass.split(' ').forEach(c => el.classList.remove(c));\n","/**\n * Check if the keydown event is the enter key or the space bar.\n *\n * @param {KeyboardEvent} event\n * @returns {boolean}\n */\nexport const isEnterOrSpace = event => event.key === 'Enter' || event.key === ' ';\n","/**\n * Return a user defined custom color for the ripple effect.\n *\n * @param {Array} modifiers\n * @returns {string}\n */\nexport const getCustomColorFromModifiers = modifiers => {\n if (! modifiers.includes('color')) {\n return '';\n }\n\n const nextModifier = modifiers[modifiers.indexOf('color') + 1] || 'invalid-color';\n if (nextModifier.indexOf('#') === 0 || nextModifier.indexOf('rgb') === 0) {\n return nextModifier;\n }\n\n return nextModifier.indexOf('bg') === 0\n ? nextModifier\n : `bg-${nextModifier}`;\n};\n\n/**\n * Return a user defined custom radius for the ripple effect.\n *\n * @param {Array} modifiers\n * @returns {string}\n */\nexport const getCustomRadiusFromModifiers = modifiers => {\n if (! modifiers.includes('radius')) {\n return '';\n }\n\n let nextModifier = modifiers[modifiers.indexOf('radius') + 1] || 'invalid-radius';\n\n // _ allows us to use decimals, such as 0.5.\n nextModifier = nextModifier.replace('_', '.');\n\n // Separate the numeric value from the unit in nextModifier.\n // Possible values for nextModifier: 50, 50.5, 50.5px, 50px, 50%, 50rem, 50em\n const numericValue = nextModifier.match(/^[0-9]+(\\.[0-9]+)?/)[0];\n let unit = nextModifier.replace(numericValue, '');\n if (! unit) {\n unit = '%';\n }\n\n return `${numericValue}${unit}`;\n}\n","export const startRipple = (event, el, options = {}) => {\n const {\n center = options.pulsate,\n } = options;\n\n const rect = el.getBoundingClientRect();\n\n // Determine the size of the ripple.\n let rippleX,\n rippleY,\n rippleSize;\n\n if (\n center ||\n event === undefined ||\n (event.clientX === 0 && event.clientY === 0) ||\n (! event.clientX && ! event.touches)\n ) {\n // This is mostly used for the keyboard focus ripple.\n rippleX = Math.round(rect.width / 2);\n rippleY = Math.round(rect.height / 2);\n } else {\n const { clientX, clientY } = event.touches && event.touches.length > 0 ? event.touches[0] : event;\n\n rippleX = Math.round(clientX - rect.left);\n rippleY = Math.round(clientY - rect.top);\n }\n\n if (center) {\n rippleSize = Math.sqrt((2 * rect.width ** 2 + rect.height ** 2) / 3);\n\n // For some reason the animation is broken on Mobile Chrome if the size is even.\n if (rippleSize % 2 === 0) {\n rippleSize++;\n }\n } else {\n const sizeX = Math.max(Math.abs((el ? el.clientWidth : 0) - rippleX), rippleX) * 2 + 2,\n sizeY = Math.max(Math.abs((el ? el.clientHeight : 0) - rippleY), rippleY) * 2 + 2;\n\n rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2);\n }\n\n return {\n width: `${rippleSize}px`,\n height: `${rippleSize}px`,\n top: `${-(rippleSize / 2) + rippleY}px`,\n left: `${-(rippleSize / 2) + rippleX}px`,\n };\n};\n","/**\n * Convert an object of style properties to a string of CSS.\n *\n * @param {object} styles\n * @returns {string}\n */\nexport default styles => Object.entries(styles).map(([key, value]) => `${formatStyleKey(key)}: ${value}`).join(';');\n\n/**\n * convert a style key to a css property.\n *\n * @param {string} key\n * @returns {string}\n */\nconst formatStyleKey = key => key.replace(/([A-Z])/g, '-$1').toLowerCase();\n","/**\n * Some events, such as a right click or ctrl + left click won't trigger a mouseup event,\n * so we need to prevent the ripple from being added in those cases.\n *\n * @param {MouseEvent} event\n * @returns {boolean}\n */\nexport default event => {\n if (event.ctrlKey) {\n return false;\n }\n\n return event.button === 0 || event.button === 1;\n};\n","import {\n addConfigClassToElement,\n configClassToSelector,\n getCustomColorFromModifiers,\n removeConfigClassFromElement,\n startRipple,\n toStyles,\n} from '../utils';\n\n/**\n * Determine if the element is being focused from a click or tab.\n * This isn't the best way to do this, but it works for now.\n *\n * @param {HTMLElement} el\n * @returns {boolean}\n */\nconst isFromTab = el => ! el.hasAttribute('data-ripple-click');\n\n/**\n * Configuration options for the ripple focus directive.\n *\n * @type {{focusClass: string, focusedClass: string}}\n */\nlet config = {\n focusClass: 'ripple-focus',\n focusedClass: 'ripple-focus-active',\n};\n\n/**\n * Add a pulsating ripple effect to the element when it is focused.\n *\n * @param {Event} event\n * @param {HTMLElement} el\n * @param {array} modifiers\n */\nexport const addRippleFocus = (event, el, modifiers = []) => {\n if (! isFromTab(el)) {\n event.preventDefault();\n\n return;\n }\n\n const rippleStyles = startRipple(event, el, { pulsate: true });\n\n const rippleFocus = document.createElement('span');\n addConfigClassToElement(rippleFocus, config.focusClass);\n\n el.appendChild(rippleFocus);\n\n const rippleFocusChild = document.createElement('span');\n rippleFocusChild.classList.add('ripple-focus-child');\n\n const color = getCustomColorFromModifiers(modifiers);\n if (color.indexOf('bg-') === 0) {\n // Prefix with '!' for !important (requires Tailwind).\n rippleFocusChild.classList.add(`!${color}`);\n } else if (color.indexOf('#') === 0 || color.indexOf('rgb') === 0) {\n rippleStyles['--ripple-focus-color'] = color;\n }\n\n rippleFocusChild.setAttribute('style', toStyles(rippleStyles));\n rippleFocusChild.appendChild(document.createElement('span'));\n\n rippleFocus.appendChild(rippleFocusChild);\n\n addConfigClassToElement(el, config.focusedClass);\n};\n\n/**\n * Remove the ripple focus effect from the element.\n *\n * @param {HTMLElement} el\n */\nexport const removeRippleFocus = el => {\n el.hasAttribute('data-ripple-click') && el.removeAttribute('data-ripple-click');\n\n try {\n removeConfigClassFromElement(el, config.focusedClass);\n } catch (e) {}\n\n const ripple = el.querySelector(configClassToSelector(config.focusClass));\n\n ripple && ripple.remove();\n};\n\n/**\n * Add a data attribute to the element so we know it was clicked instead of keyboard focused.\n *\n * @param {HTMLElement} el\n */\nexport const rippleFocusClick = el => {\n el.setAttribute('data-ripple-click', 'true');\n};\n\n/**\n * Remove our click data attribute from the element.\n *\n * @param {HTMLElement} el\n * @returns {false|void}\n */\nexport const rippleFocusMouseUp = el => el.hasAttribute('data-ripple-click') && el.removeAttribute('data-ripple-click');\n\nexport default (Alpine, rippleConfig) => {\n config = { ...config, ...rippleConfig };\n\n Alpine.directive('ripple-focus', (el, { modifiers, expression }, { cleanup }) => {\n const clickHandler = () => rippleFocusClick(el);\n const mouseUpHandler = () => rippleFocusMouseUp(el);\n const focusHandler = event => addRippleFocus(event, el, modifiers);\n const blurHandler = () => removeRippleFocus(el);\n\n /*\n * We need a way to know if we are giving focus to the element by clicking or tabbing.\n * Since there isn't a reliable way to do this with the focus event and the `mousedown`\n * event is fired before the `focus` event, we will set a data attribute on the element\n * that we can check for in the `focus` event.\n *\n * This way, we don't show our pulsating ripple animation when the user clicks on the\n * element, but only show it when the user tabs to the element.\n */\n el.addEventListener('mousedown', clickHandler);\n el.addEventListener('mouseup', mouseUpHandler);\n el.addEventListener('contextmenu', clickHandler);\n\n el.addEventListener('focus', focusHandler);\n el.addEventListener('blur', blurHandler);\n\n cleanup(() => {\n el.removeEventListener('mousedown', clickHandler);\n el.removeEventListener('mouseup', mouseUpHandler);\n el.removeEventListener('contextmenu', clickHandler);\n\n el.removeEventListener('focus', focusHandler);\n el.removeEventListener('blur', blurHandler);\n });\n });\n};\n","import {\n addConfigClassToElement,\n configClassToSelector,\n getAttributeThatStartsWith,\n getCustomColorFromModifiers,\n getCustomRadiusFromModifiers,\n isEnterOrSpace,\n startRipple,\n toStyles,\n willHaveAMouseUpEvent,\n} from '../utils';\nimport { addRippleFocus, removeRippleFocus } from './focus';\n\n/**\n * Configuration options for the ripple click directive.\n *\n * @type {{removeTimeout: number, rippleClass: string}}\n */\nlet config = {\n rippleClass: 'ripple',\n removeTimeout: 1000,\n focusedClass: 'ripple-focus-active', // So we can check if the element is focused by our directive.\n};\n\n/**\n * Check if the element has the focused class.\n *\n * @param {HTMLElement} el\n * @returns {boolean}\n */\nconst hasRippleFocus = el => config.focusedClass.split(' ').every(className => el.classList.contains(className));\n\n/**\n * Add a ripple effect to the element.\n *\n * @param {MouseEvent|KeyboardEvent} event\n * @param {HTMLElement} el\n * @param {Array} modifiers\n */\nexport const addRipple = (event, el, modifiers = []) => {\n if (! willHaveAMouseUpEvent(event) && ! isEnterOrSpace(event)) {\n return;\n }\n\n const styles = startRipple(event, el);\n\n const ripple = document.createElement('span');\n addConfigClassToElement(ripple, config.rippleClass);\n\n el.appendChild(ripple);\n\n const innerRipple = document.createElement('span');\n\n const color = getCustomColorFromModifiers(modifiers);\n if (color.indexOf('bg-') === 0) {\n // Prefix with '!' for !important (requires Tailwind).\n innerRipple.classList.add(`!${color}`);\n } else if (color.indexOf('#') === 0 || color.indexOf('rgb') === 0) {\n styles['--ripple-color'] = color;\n }\n\n const radius = getCustomRadiusFromModifiers(modifiers);\n if (radius) {\n styles['--ripple-radius'] = radius;\n }\n\n ripple.appendChild(innerRipple);\n innerRipple.setAttribute('style', toStyles(styles));\n};\n\n/**\n * Remove the ripple effect from the element.\n *\n * @param {HTMLElement} el\n * @param {boolean} alsoRemoveFocus\n */\nexport const removeRipple = (el, alsoRemoveFocus = false) => {\n alsoRemoveFocus && removeRippleFocus(el);\n\n setTimeout(() => {\n // We are only removing the first instance to prevent ripples from subsequent clicks\n // being removed too quickly before the ripple effect can properly be seen.\n const ripple = el.querySelector(configClassToSelector(config.rippleClass));\n\n ripple && ripple.remove();\n }, config.removeTimeout);\n};\n\n/**\n * Show a ripple effect when the user presses the enter or space key.\n *\n * @param {KeyboardEvent} event\n * @param {HTMLElement} el\n * @param {array} modifiers\n */\nexport const handleRippleKeydown = (event, el, modifiers) => {\n if (! isEnterOrSpace(event)) {\n return;\n }\n\n const originallyHadFocus = hasRippleFocus(el);\n\n addRipple(event, el, modifiers);\n removeRippleFocus(el);\n\n if (originallyHadFocus) {\n addFocusBack(event, el);\n }\n};\n\n/**\n * Add a focus ripple effect back to the element after the ripple effect has been removed.\n *\n * @param {Event} event\n * @param {HTMLElement} el\n */\nconst addFocusBack = (event, el) => {\n const hasRippleClick = el.contains(el.querySelector(configClassToSelector(config.rippleClass)));\n\n if (hasRippleClick) {\n setTimeout(() => addFocusBack(event, el), config.removeTimeout);\n\n return;\n }\n\n // We need to get the modifiers, if any, from the x-ripple-focus directive.\n const directive = getAttributeThatStartsWith(el, 'x-ripple-focus');\n const focusModifiers = directive ? directive.name.split('.').slice(1) : [];\n\n addRippleFocus(event, el, focusModifiers);\n};\n\n/**\n * Define an Alpine directive that adds a ripple click effect to a given element.\n *\n * @param {Object} Alpine\n * @param {Object} rippleConfig\n */\nexport default (Alpine, rippleConfig) => {\n config = { ...config, ...rippleConfig };\n\n Alpine.directive('ripple', (el, { modifiers, expression }, { cleanup }) => {\n const clickHandler = event => addRipple(event, el, modifiers);\n const mouseUpHandler = () => removeRipple(el, true);\n const keydownHandler = event => handleRippleKeydown(event, el, modifiers);\n const keyupHandler = event => isEnterOrSpace(event) && removeRipple(el, false);\n const passiveOptions = { passive: true };\n\n el.addEventListener('mousedown', clickHandler);\n el.addEventListener('mouseup', mouseUpHandler);\n el.addEventListener('mouseleave', mouseUpHandler);\n el.addEventListener('contextmenu', mouseUpHandler);\n el.addEventListener('touchstart', clickHandler, passiveOptions);\n el.addEventListener('touchend', mouseUpHandler);\n el.addEventListener('touchmove', mouseUpHandler, passiveOptions);\n el.addEventListener('dragleave', mouseUpHandler);\n el.addEventListener('keydown', keydownHandler);\n el.addEventListener('keyup', keyupHandler);\n\n cleanup(() => {\n el.removeEventListener('mousedown', clickHandler);\n el.removeEventListener('mouseup', mouseUpHandler);\n el.removeEventListener('mouseleave', mouseUpHandler);\n el.removeEventListener('contextmenu', mouseUpHandler);\n el.removeEventListener('touchstart', clickHandler, passiveOptions);\n el.removeEventListener('touchend', mouseUpHandler);\n el.removeEventListener('touchmove', mouseUpHandler, passiveOptions);\n el.removeEventListener('dragleave', mouseUpHandler);\n el.removeEventListener('keydown', keydownHandler);\n el.removeEventListener('keyup', keyupHandler);\n });\n });\n};\n","import rippleClick from './directives/click';\nimport rippleFocus from './directives/focus';\n\n/**\n * Configuration options for the ripple directives.\n *\n * @type {{rippleClass: string, removeTimeout: number, focusClass: string, focusedClass: string}}\n */\nconst rippleConfig = {\n rippleClass: 'ripple',\n removeTimeout: 1000,\n focusClass: 'ripple-focus',\n focusedClass: 'ripple-focus-active',\n};\n\nfunction Ripple(Alpine) {\n rippleClick(Alpine, rippleConfig);\n rippleFocus(Alpine, rippleConfig);\n}\n\nRipple.configure = config => {\n if (config.hasOwnProperty('class') && typeof config.class === 'string') {\n rippleConfig.rippleClass = config.class;\n }\n\n if (config.hasOwnProperty('removeTimeout') && typeof config.removeTimeout === 'number') {\n rippleConfig.removeTimeout = config.removeTimeout;\n }\n\n if (config.hasOwnProperty('focusClass') && typeof config.focusClass === 'string') {\n rippleConfig.focusClass = config.focusClass;\n }\n\n if (config.hasOwnProperty('focusedClass') && typeof config.focusedClass === 'string') {\n rippleConfig.focusedClass = config.focusedClass;\n }\n\n return Ripple;\n};\n\nexport default Ripple;\n","import ripple from '../src/js/ripple';\nimport '../src/css/styles.css';\n\ndocument.addEventListener('alpine:initializing', () => {\n ripple(window.Alpine);\n});\n"],"names":["getAttributeThatStartsWith","el","startsWith","attr","attributes","name","configClassToSelector","configClass","replace","addConfigClassToElement","split","forEach","c","classList","add","removeConfigClassFromElement","remove","isEnterOrSpace","event","key","getCustomColorFromModifiers","modifiers","includes","nextModifier","indexOf","getCustomRadiusFromModifiers","numericValue","match","unit","startRipple","options","center","pulsate","rect","getBoundingClientRect","rippleX","rippleY","rippleSize","undefined","clientX","clientY","touches","Math","round","width","height","length","left","top","sqrt","sizeX","max","abs","clientWidth","sizeY","clientHeight","styles","Object","entries","map","value","formatStyleKey","join","toLowerCase","ctrlKey","button","isFromTab","hasAttribute","config","focusClass","focusedClass","addRippleFocus","preventDefault","rippleStyles","rippleFocus","document","createElement","appendChild","rippleFocusChild","color","setAttribute","toStyles","removeRippleFocus","removeAttribute","e","ripple","querySelector","rippleFocusClick","rippleFocusMouseUp","Alpine","rippleConfig","directive","expression","cleanup","clickHandler","mouseUpHandler","focusHandler","blurHandler","addEventListener","removeEventListener","rippleClass","removeTimeout","hasRippleFocus","every","className","contains","addRipple","willHaveAMouseUpEvent","innerRipple","radius","removeRipple","alsoRemoveFocus","setTimeout","handleRippleKeydown","originallyHadFocus","addFocusBack","hasRippleClick","focusModifiers","slice","keydownHandler","keyupHandler","passiveOptions","passive","Ripple","rippleClick","configure","hasOwnProperty","class","window"],"mappings":"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"} --------------------------------------------------------------------------------