{"_id":"@alttiri/popup-enhance","_rev":"4-e6388b79b3187b13d3c3883345a62662","name":"@alttiri/popup-enhance","dist-tags":{"latest":"1.2.0-20240821"},"versions":{"1.1.1-20240725":{"name":"@alttiri/popup-enhance","version":"1.1.1-20240725","keywords":["movable","resizable","popup"],"license":"MIT","_id":"@alttiri/popup-enhance@1.1.1-20240725","maintainers":[{"name":"alttiri","email":"AlttiRi@pm.me"}],"homepage":"https://github.com/AlttiRi/popup-enhance","bugs":{"url":"https://github.com/alttiri/popup-enhance/issues"},"dist":{"shasum":"5390f586557efc194e3fcf49868ed5b43ed7732c","tarball":"https://registry.npmjs.org/@alttiri/popup-enhance/-/popup-enhance-1.1.1-20240725.tgz","fileCount":10,"integrity":"sha512-9cjyYFFpppeI4Vro8eKSkQ+QDzWKwf5kUZpixI1xBSnkNtenxMKXUgI3JPoVDl5z8/EmKM6XFagMiYgQDzYnag==","signatures":[{"sig":"MEQCIGqja/rKLPOH6a4BLT6L481hkubt2QWuJh9Hc800ycXQAiB4uLUH/WczAWXYvq45k3D5L5r/zGMbcE9du1fEPI2N5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13463},"main":"index.js","type":"module","gitHead":"5eb7ddf2de0966bac64cc613df2d489e92affb65","scripts":{"#":"","-":"","##":"","###":"","dev":"vite --host","build":"vite build","preview":"vite preview","clean-ts":"tsc --build --clean","login-ghp":"npm login --registry=https://npm.pkg.github.com","login-npm":"npm login --registry=https://registry.npmjs.org","compile-ts":"tsc --build","publish-ghp":"tsc --build && npm publish --registry=https://npm.pkg.github.com","publish-npm":"tsc --build && npm publish --registry=https://registry.npmjs.org","test-publish":"tsc --build && npm pack","unpublish-npm":"npm unpublish @alttiri/popup-enhance@1.0.0 --registry=https://registry.npmjs.org","compile-ts-watch":"tsc --build --watch"},"typings":"index.d.ts","_npmUser":{"name":"alttiri","email":"AlttiRi@pm.me"},"repository":{"url":"git+https://github.com/alttiri/popup-enhance.git","type":"git"},"_npmVersion":"10.7.0","description":"A pretty simple JavaScript (TS) library to enhance a popup to make it movable and resizable","directories":{},"_nodeVersion":"20.15.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"5.3.4","typescript":"5.5.4","@types/node":"20.12.12"},"_npmOperationalInternal":{"tmp":"tmp/popup-enhance_1.1.1-20240725_1721900528454_0.5726062719827434","host":"s3://npm-registry-packages"}},"1.2.0-20240821":{"name":"@alttiri/popup-enhance","version":"1.2.0-20240821","description":"A pretty simple JavaScript (TS) library to enhance a popup to make it movable and resizable","homepage":"https://github.com/AlttiRi/popup-enhance","keywords":["movable","resizable","popup"],"license":"MIT","type":"module","main":"index.js","typings":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/alttiri/popup-enhance.git"},"publishConfig":{"access":"public"},"scripts":{"dev":"vite --host","build":"vite build","preview":"vite preview","-":"","compile-ts":"tsc --build","compile-ts-watch":"tsc --build --watch","clean-ts":"tsc --build --clean","#":"","test-publish":"tsc --build && npm pack","publish-npm":"tsc --build && npm publish --registry=https://registry.npmjs.org","publish-ghp":"tsc --build && npm publish --registry=https://npm.pkg.github.com","##":"","unpublish-npm":"npm unpublish @alttiri/popup-enhance@1.0.0 --registry=https://registry.npmjs.org","###":"","login-npm":"npm login --registry=https://registry.npmjs.org","login-ghp":"npm login --registry=https://npm.pkg.github.com"},"devDependencies":{"@types/node":"20.12.12","typescript":"5.5.4","vite":"5.3.4"},"_id":"@alttiri/popup-enhance@1.2.0-20240821","gitHead":"5d49bf390046d92320a13b5e92457a77d76de44a","bugs":{"url":"https://github.com/alttiri/popup-enhance/issues"},"_nodeVersion":"20.15.1","_npmVersion":"10.7.0","dist":{"integrity":"sha512-pO8b4UM1f/ZGNAf95hxy39yQp1VwMFqpwJHPqqAboVFk2lYMN+YTeqs7FTPKdD1h3OMMQtqgHVXyEEF1uLNe9w==","shasum":"1332b385e811c86c9c61f927c925c3d69c7c322a","tarball":"https://registry.npmjs.org/@alttiri/popup-enhance/-/popup-enhance-1.2.0-20240821.tgz","fileCount":10,"unpackedSize":15971,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAgr4zx2d7zliLA/a+McfA1hV94dnazXMRq8wtty9ymQIgA08qO7WkTbsL1E2LFaahULVPJE8Kxme39c0WS1dGHlQ="}]},"_npmUser":{"name":"alttiri","email":"AlttiRi@pm.me"},"directories":{},"maintainers":[{"name":"alttiri","email":"AlttiRi@pm.me"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/popup-enhance_1.2.0-20240821_1724249468517_0.6295717977513131"},"_hasShrinkwrap":false}},"time":{"created":"2024-07-25T09:42:08.381Z","modified":"2024-08-21T14:11:09.001Z","1.0.0":"2024-07-24T06:17:01.432Z","1.1.1-20240725":"2024-07-25T09:42:08.629Z","1.2.0-20240821":"2024-08-21T14:11:08.797Z"},"bugs":{"url":"https://github.com/alttiri/popup-enhance/issues"},"license":"MIT","homepage":"https://github.com/AlttiRi/popup-enhance","keywords":["movable","resizable","popup"],"repository":{"type":"git","url":"git+https://github.com/alttiri/popup-enhance.git"},"description":"A pretty simple JavaScript (TS) library to enhance a popup to make it movable and resizable","maintainers":[{"name":"alttiri","email":"AlttiRi@pm.me"}],"readme":"# PopupEnhance\r\n\r\n\r\nIt's a pretty simple JavaScript (TS) library _(mostly, for personal use)_ to enhance a popup to make it **movable** and **resizable**.\r\n\r\n\r\nIt's only 34 lines to make it movable: [`makeMovable` ↓](#makeMovable) and 38 lines to make it resizable: [`makeResizable` ↓](#makeResizable)\r\n\r\nAlso, there is en extra code to store the move / resize state in `localStorage` ([`popup-enh-extra.ts`](https://github.com/AlttiRi/popup-enhance/blob/606e39414083c47ebf6a1d2d5457ccf3f5e08c65/src/popup-enh-extra.ts)).\r\n\r\nThe required CSS is located here: [`popup.css`](https://github.com/AlttiRi/popup-enhance/blob/606e39414083c47ebf6a1d2d5457ccf3f5e08c65/css/popup.css).\r\n\r\nIt's available on [npm](https://www.npmjs.com/package/@alttiri/popup-enhance):\r\n\r\n```bash\r\nnpm i @alttiri/popup-enhance\r\n```\r\n\r\n---\r\n\r\n### Demo\r\n\r\nhttps://alttiri.github.io/popup-enhance/ (see: [`main.ts`](https://github.com/AlttiRi/popup-enhance/blob/606e39414083c47ebf6a1d2d5457ccf3f5e08c65/src-demo/main.ts)).\r\n\r\n---\r\n\r\n### How to use\r\n\r\n```js\r\nimport {getPopupEnh, makeFocusable} from \"@alttiri/popup-enhance\";\r\n\r\nconst {makeMovableEx} = getPopupEnh(\"fancy-demo-app\");\r\n\r\nconst popupElem  = document.querySelector(\".popup\");\r\nconst handleElem = popupElem.querySelector(\".popup-header\");\r\n\r\nconst {reset} = makeMovableEx(popupElem, \"popup-1\", {handle: handleElem});\r\nmakeFocusable(popupElem, handleElem);\r\n```\r\n\r\n- `\"fancy-demo-app\"` — `localStorage`' prefix for keys\r\n- `\"popup-1\"` — `localStorage`' key \r\n\r\nThe recommended HTML:\r\n```html\r\n<body>\r\n    <div id=\"app\"> ... </div>\r\n    <div class=\"popup-root\">\r\n        <div class=\"popup\" id=\"popup-1\">\r\n            <div class=\"popup-header\">Popup Title</div>\r\n            <div class=\"popup-content\"> ... </div>\r\n        </div>\r\n        <div class=\"popup\" id=\"popup-2\"> ... </div>\r\n    </div>\r\n</body>\r\n```\r\n\r\nThe recommended CSS:\r\n```js\r\n// JS imports:\r\nimport \"@alttiri/popup-enhance/css/popup.css\";\r\nimport \"@alttiri/popup-enhance/css/popup-content.css\";\r\n// Or CSS import:\r\n// @import \"@alttiri/popup-enhance/css/popup.css\";\r\n// @import \"@alttiri/popup-enhance/css/popup-content.css\";\r\n```\r\n\r\n\r\n---\r\n\r\n### `makeMovable`\r\n\r\nhttps://github.com/AlttiRi/popup-enhance/blob/606e39414083c47ebf6a1d2d5457ccf3f5e08c65/src/popup-enh-core.ts#L29-L63\r\n\r\n### `makeResizable`\r\n\r\nhttps://github.com/AlttiRi/popup-enhance/blob/606e39414083c47ebf6a1d2d5457ccf3f5e08c65/src/popup-enh-core.ts#L76-L114\r\n\r\n\r\n---\r\n\r\n### See also\r\n\r\n- https://github.com/AlttiRi/drag-select-demo\r\n\r\n\r\n## *.d.ts\r\n\r\n```ts\r\nexport type MoveStyleProps = \"top\" | \"left\";\r\nexport type MoveState = Record<MoveStyleProps, `${string}px`>;\r\nexport type ResizeStyleProps = \"width\" | \"height\";\r\nexport type ResizeState = Record<ResizeStyleProps, `${string}px`>;\r\nexport type AnyStyleProps = MoveStyleProps | ResizeStyleProps;\r\nexport type AnyState = MoveState | ResizeState;\r\nexport type MovableOpts = {\r\n    handle?: HTMLElement;\r\n    onMove?: (state: MoveState) => void;\r\n    onStop?: (state: MoveState) => void;\r\n    state?: MoveState;\r\n    reset?: Function;\r\n    position?: \"absolute\" | \"relative\";\r\n};\r\nexport declare function makeMovable(element: HTMLElement, { handle: hdl, onMove, onStop, state, reset, position }?: MovableOpts): {\r\n    reset: () => void;\r\n};\r\nexport type ResizableOpts = {\r\n    minW?: number;\r\n    minH?: number;\r\n    size?: number;\r\n    onMove?: (state: ResizeState) => void;\r\n    onStop?: (state: ResizeState) => void;\r\n    state?: ResizeState;\r\n    reset?: Function;\r\n};\r\nexport declare function makeResizable(element: HTMLElement, { minW, minH, size, onMove, onStop, state, reset }?: ResizableOpts): {\r\n    reset: () => void;\r\n};\r\n\r\ntype StoreStateOpt<T extends AnyState, S extends string> = {\r\n    id: S extends \"\" ? never : S;\r\n    onMove?: (state: T) => void;\r\n    onStop?: (state: T) => void;\r\n};\r\ntype StoreStateReturn<T extends AnyState> = {\r\n    onMove?: (state: T) => void;\r\n    onStop?: (state: T) => void;\r\n    state?: T;\r\n    reset: () => void;\r\n};\r\nexport declare function storeStateInLS<T extends AnyState, S extends string>({ id: lsName, onMove, onStop }: StoreStateOpt<T, S>): StoreStateReturn<T>;\r\nexport declare function getPopupEnh<S extends string>(appName: S extends \"\" ? never : S): {\r\n    /**\r\n     * Use `position: \"relative\"` option if you want to open multiple popups at once,\r\n     * and you do not want they overlap each other. However, don't use it with resizable popups.\r\n     */\r\n    makeMovableEx<S_1 extends string>(element: HTMLElement, id: S_1 extends \"\" ? never : S_1, opt?: MovableOpts): {\r\n        reset: () => void;\r\n    };\r\n    makeResizableEx<S_1 extends string>(element: HTMLElement, id: S_1 extends \"\" ? never : S_1, opt?: ResizableOpts): {\r\n        reset: () => void;\r\n    };\r\n};\r\n/**\r\n * Makes the element focusable, adds `\"focus\"` class.\r\n * Specify the drag `handle` (if exists) to run `\"focus\"` listener callback on `\"pointerdown\"` on it.\r\n */\r\nexport declare function makeFocusable(element: HTMLElement, handle?: HTMLElement): void;\r\n```\r\n","readmeFilename":"README.md"}