Dialog-draggable

├── .nvmrc ├── .npmrc ├── .gitignore ├── .prettierrc ├── vite.config.ts ├── .eslintrc ├── src ├── util.ts ├── util.test.ts └── index.ts ├── tsconfig.json ├── LICENSE ├── docs └── index.html ├── package.json ├── README.md └── pnpm-lock.yaml /.nvmrc: -------------------------------------------------------------------------------- 1 | v22 -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | .vscode/ 3 | dist/ 4 | node_modules/ 5 | yarn.lock 6 | package-lock.json 7 | test/ 8 | .DS_Store 9 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 4, 3 | "useTabs": false, 4 | "semi": false, 5 | "singleQuote": true, 6 | "quoteProps": "as-needed", 7 | "rangeStart": 0, 8 | "rangeEnd": 999999, 9 | "requirePragma": false, 10 | "insertPragma": false, 11 | "endOfLine": "auto" 12 | } 13 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { resolve } from 'path' 2 | import { defineConfig } from 'vitest/config' 3 | 4 | export default defineConfig({ 5 | build: { 6 | lib: { 7 | entry: resolve(__dirname, 'src/index.ts'), 8 | name: 'dialog-draggable', 9 | }, 10 | }, 11 | }) 12 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "env": { 4 | "browser": true, 5 | "node": true 6 | }, 7 | "extends": [ 8 | "plugin:@typescript-eslint/recommended", 9 | "eslint:recommended", 10 | "prettier" 11 | ], 12 | "parser": "@typescript-eslint/parser", 13 | "parserOptions": { 14 | "ecmaVersion": 2020, 15 | "lib": ["dom", "esnext"] 16 | }, 17 | "plugins": [ 18 | "@typescript-eslint", 19 | "prettier" 20 | ], 21 | "rules": { 22 | "prettier/prettier": "error", 23 | "@typescript-eslint/no-explicit-any": "error" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/util.ts: -------------------------------------------------------------------------------- 1 | export function getCssTranslateCoords(transformExp: string): { 2 | x: number 3 | y: number 4 | z: number 5 | } { 6 | if (transformExp === '') { 7 | return { x: 0, y: 0, z: 0 } 8 | } 9 | const matchResult = transformExp.match( 10 | /translate3d\((?[-.\d]+)(?:px)?,\s*(?[-.\d]+)(?:px)?,\s*(?[-.\d]+)(?:px)?\)/, 11 | ) 12 | if (!matchResult || !matchResult.groups) { 13 | return { x: 0, y: 0, z: 0 } 14 | } 15 | 16 | return { 17 | x: Number(matchResult.groups.x), 18 | y: Number(matchResult.groups.y), 19 | z: Number(matchResult.groups.z), 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "alwaysStrict": true, 4 | "target": "esnext", 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "noImplicitAny": true, 8 | "noImplicitThis": true, 9 | "strict": true, 10 | "strictNullChecks": true, 11 | "sourceMap": true, 12 | "resolveJsonModule": true, 13 | "esModuleInterop": true, 14 | "skipLibCheck": true, 15 | "noEmit": true, 16 | "lib": ["ESNext", "DOM"], 17 | "types": [ 18 | "node", 19 | "vite/client" 20 | ], 21 | "baseUrl": "." 22 | }, 23 | "include": [ 24 | "src/**/*.ts", 25 | "src/**/*.d.ts" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Naeemo 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 | -------------------------------------------------------------------------------- /src/util.test.ts: -------------------------------------------------------------------------------- 1 | import { describe, expect, it } from 'vitest' 2 | import { getCssTranslateCoords } from './util' 3 | 4 | describe('util', () => { 5 | it.concurrent('getCssTranslateCoords', () => { 6 | expect(getCssTranslateCoords(``)).toEqual({ x: 0, y: 0, z: 0 }) 7 | expect(getCssTranslateCoords(`translate3d(0,0,0)`)).toEqual({ 8 | x: 0, 9 | y: 0, 10 | z: 0, 11 | }) 12 | expect(getCssTranslateCoords(`translate3d(0px,0,0)`)).toEqual({ 13 | x: 0, 14 | y: 0, 15 | z: 0, 16 | }) 17 | expect(getCssTranslateCoords(`translate3d(10px,0,0)`)).toEqual({ 18 | x: 10, 19 | y: 0, 20 | z: 0, 21 | }) 22 | expect( 23 | getCssTranslateCoords(`translate3d(10px,1234.23423px,0)`), 24 | ).toEqual({ 25 | x: 10, 26 | y: 1234.23423, 27 | z: 0, 28 | }) 29 | expect( 30 | getCssTranslateCoords(`translate3d(10px,-1234.23423px,0)`), 31 | ).toEqual({ 32 | x: 10, 33 | y: -1234.23423, 34 | z: 0, 35 | }) 36 | expect( 37 | getCssTranslateCoords(`translate3d(-314.113px, -5.5px, 0px);`), 38 | ).toEqual({ 39 | x: -314.113, 40 | y: -5.5, 41 | z: 0, 42 | }) 43 | }) 44 | }) 45 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | Dialog-draggable 9 | 28 | 29 | 30 | 39 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dialog-draggable", 3 | "version": "0.1.6", 4 | "description": "Makes HTML