├── .github └── FUNDING.yml ├── .gitignore ├── LICENSE ├── README.md ├── package.json └── src ├── boot └── index.js ├── components ├── SwipeToClose.json └── SwipeToClose.vue ├── helpers └── domHelpers.js └── index.js /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: mesqueeb 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .thumbs.db 3 | node_modules 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Luca Ban - Mesqueeb 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 all 13 | 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 THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Quasar extension: Swipe to close ⛸ 2 | 3 | > ARCHIVED: 4 | > When I need similar functionality again in the future I will 5 | > recreate a new project that is framework agnostic. 6 | 7 | A Quasar extension that allows you to close dialogs by swiping. 8 | 9 | ### My extensions 10 | 11 | - [swipe-to-close](https://github.com/mesqueeb/quasar-app-extension-swipe-to-close) ⛸ 12 | - [draggable](https://github.com/mesqueeb/quasar-app-extension-draggable) 🚡 13 | 14 | ### Installation 15 | 16 | ``` 17 | quasar ext add swipe-to-close 18 | ``` 19 | 20 | ### Demo 21 | 22 | - [live demo](https://quasar-app-extension-swipe-to-close.netlify.com/) 23 | - [demo github repository](https://github.com/mesqueeb/quasar-app-extension-swipe-to-close-demo) 24 | 25 | **GIF** (might take a while to load...) 26 | 27 | ![gif](https://github.com/mesqueeb/quasar-app-extension-swipe-to-close/blob/media/swipe-to-scroll.gif) 28 | 29 | ### Usage 30 | 31 | You just have to wrap your q-dialog contents inside a `q-swipe-to-close` component with the same v-model as the q-dialog. 32 | 33 | ```html 34 | 44 | 45 | 52 | ``` 53 | 54 | > Please note currently it only supports `position="bottom"` or no position. 55 | 56 | If there's interest for other dialog positions and swipe directions, **let me know in an issue!** 57 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quasar-app-extension-swipe-to-close", 3 | "version": "0.0.7", 4 | "description": "A Quasar extension that allows you to close dialogs by swiping.", 5 | "author": "Luca Ban - Mesqueeb", 6 | "license": "MIT", 7 | "main": "src/index.js", 8 | "scripts": { 9 | "test": "echo \"No test specified\" && exit 0" 10 | }, 11 | "bugs": "https://github.com/mesqueeb/quasar-app-extension-swipe-to-close/issues", 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/mesqueeb/quasar-app-extension-swipe-to-close.git" 15 | }, 16 | "homepage": "https://github.com/mesqueeb/quasar-app-extension-swipe-to-close", 17 | "engines": { 18 | "node": ">= 8.9.0", 19 | "npm": ">= 5.6.0", 20 | "yarn": ">= 1.6.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/boot/index.js: -------------------------------------------------------------------------------- 1 | import QSwipeToClose from 'quasar-app-extension-swipe-to-close/src/components/SwipeToClose' 2 | 3 | export default ({ Vue }) => { 4 | Vue.component('q-swipe-to-close', QSwipeToClose) 5 | } 6 | -------------------------------------------------------------------------------- /src/components/SwipeToClose.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "component", 3 | "props": { 4 | "value": { 5 | "type": "Boolean", 6 | "desc": "Must be the same boolean that controls your QDialog. Must be added via v-model.", 7 | } 8 | }, 9 | "slots": { 10 | "default": { 11 | "desc": "Anything can go into this slot. It is your actual QDialog content." 12 | } 13 | } 14 | } -------------------------------------------------------------------------------- /src/components/SwipeToClose.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 37 | 38 | 93 | -------------------------------------------------------------------------------- /src/helpers/domHelpers.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * checks if an element is visible in the viewport or not 4 | * 5 | * @export 6 | * @param {*} el a DOM element 7 | * @returns {boolean} 8 | */ 9 | export function isElementInViewport (el) { 10 | const rect = el.getBoundingClientRect() 11 | return ( 12 | rect.top >= 0 && 13 | rect.left >= 0 && 14 | rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && 15 | rect.right <= (window.innerWidth || document.documentElement.clientWidth) 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Quasar App Extension index/runner script 3 | * (runs on each dev/build) 4 | * 5 | * API: https://github.com/quasarframework/quasar/blob/master/app/lib/app-extension/IndexAPI.js 6 | */ 7 | 8 | function extendWithComponent (conf) { 9 | // make sure boot file is registered 10 | conf.boot.push('~quasar-app-extension-swipe-to-close/src/boot/index.js') 11 | 12 | // make sure boot file transpiles 13 | conf.build.transpileDependencies.push(/quasar-app-extension-swipe-to-close[\\/]src/) 14 | console.log(` App Extension (qswipe-to-close) Info: 'Adding swipe-to-close boot reference to your quasar.conf.js'`) 15 | } 16 | 17 | module.exports = function (api) { 18 | api.compatibleWith('@quasar/app', '^1.0.0-beta.18') 19 | 20 | // register JSON api 21 | api.registerDescribeApi('QSwipeToClose', './components/QSwipeToClose.json') 22 | 23 | // extend quasar.conf 24 | api.extendQuasarConf(extendWithComponent) 25 | } 26 | --------------------------------------------------------------------------------