{"id":16974622,"url":"https://github.com/alttiri/popup-enhance","last_synced_at":"2026-01-27T11:06:12.416Z","repository":{"id":249761743,"uuid":"832469570","full_name":"AlttiRi/popup-enhance","owner":"AlttiRi","description":"Enhance a popup by making it movable and resizable","archived":false,"fork":false,"pushed_at":"2025-06-18T14:39:05.000Z","size":132,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-29T00:08:41.124Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://alttiri.github.io/popup-enhance/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AlttiRi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-23T05:07:16.000Z","updated_at":"2025-06-18T14:39:09.000Z","dependencies_parsed_at":"2024-07-23T07:27:47.612Z","dependency_job_id":"c78167f5-8ccf-456b-b90d-0807c46326d0","html_url":"https://github.com/AlttiRi/popup-enhance","commit_stats":null,"previous_names":["alttiri/popup-enhance"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/AlttiRi/popup-enhance","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlttiRi%2Fpopup-enhance","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlttiRi%2Fpopup-enhance/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlttiRi%2Fpopup-enhance/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlttiRi%2Fpopup-enhance/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlttiRi","download_url":"https://codeload.github.com/AlttiRi/popup-enhance/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlttiRi%2Fpopup-enhance/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28812367,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T07:41:26.337Z","status":"ssl_error","status_checked_at":"2026-01-27T07:41:08.776Z","response_time":168,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T01:07:18.980Z","updated_at":"2026-01-27T11:06:12.387Z","avatar_url":"https://github.com/AlttiRi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [PopupEnhance](https://github.com/AlttiRi/popup-enhance)\n\n\nIt's a pretty simple JavaScript (TS) library _(mostly, for personal use)_ to enhance a popup to make it **movable** and **resizable**.\n\n\nIt's only 34 lines to make it movable: [`makeMovable` ↓](#makeMovable) and 38 lines to make it resizable: [`makeResizable` ↓](#makeResizable)\n\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)).\n\nThe required CSS is located here: [`popup.css`](https://github.com/AlttiRi/popup-enhance/blob/606e39414083c47ebf6a1d2d5457ccf3f5e08c65/css/popup.css).\n\nIt's available on [npm](https://www.npmjs.com/package/@alttiri/popup-enhance):\n\n```bash\nnpm i @alttiri/popup-enhance\n```\n\n---\n\n### Demo\n\nhttps://alttiri.github.io/popup-enhance/ (see: [`main.ts`](https://github.com/AlttiRi/popup-enhance/blob/606e39414083c47ebf6a1d2d5457ccf3f5e08c65/src-demo/main.ts)).\n\n---\n\n### How to use\n\n```js\nimport {getPopupEnh, makeFocusable} from \"@alttiri/popup-enhance\";\n\nconst {makeMovableEx} = getPopupEnh(\"fancy-demo-app\");\n\nconst popupElem  = document.querySelector(\".popup\");\nconst handleElem = popupElem.querySelector(\".popup-header\");\n\nconst {reset} = makeMovableEx(popupElem, \"popup-1\", {handle: handleElem});\nmakeFocusable(popupElem, handleElem);\n```\n\n- `\"fancy-demo-app\"` — `localStorage`' prefix for keys\n- `\"popup-1\"` — `localStorage`' key \n\nThe recommended HTML:\n```html\n\u003cbody\u003e\n    \u003cdiv id=\"app\"\u003e ... \u003c/div\u003e\n    \u003cdiv class=\"popup-root\"\u003e\n        \u003cdiv class=\"popup\" id=\"popup-1\"\u003e\n            \u003cdiv class=\"popup-header\"\u003ePopup Title\u003c/div\u003e\n            \u003cdiv class=\"popup-content\"\u003e ... \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"popup\" id=\"popup-2\"\u003e ... \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/body\u003e\n```\n\nThe recommended CSS:\n```js\n// JS imports:\nimport \"@alttiri/popup-enhance/css/popup.css\";\nimport \"@alttiri/popup-enhance/css/popup-content.css\";\n// Or CSS import:\n// @import \"@alttiri/popup-enhance/css/popup.css\";\n// @import \"@alttiri/popup-enhance/css/popup-content.css\";\n```\n\n\n---\n\n### `makeMovable`\n\nhttps://github.com/AlttiRi/popup-enhance/blob/606e39414083c47ebf6a1d2d5457ccf3f5e08c65/src/popup-enh-core.ts#L29-L63\n\n### `makeResizable`\n\nhttps://github.com/AlttiRi/popup-enhance/blob/606e39414083c47ebf6a1d2d5457ccf3f5e08c65/src/popup-enh-core.ts#L76-L114\n\n\n---\n\n### See also\n\n- https://github.com/AlttiRi/drag-select-demo\n\n\n## *.d.ts\n\n```ts\nexport type MoveStyleProps = \"top\" | \"left\";\nexport type MoveState = Record\u003cMoveStyleProps, `${string}px`\u003e;\nexport type ResizeStyleProps = \"width\" | \"height\";\nexport type ResizeState = Record\u003cResizeStyleProps, `${string}px`\u003e;\nexport type AnyStyleProps = MoveStyleProps | ResizeStyleProps;\nexport type AnyState = MoveState | ResizeState;\nexport type MovableOpts = {\n    handle?: HTMLElement;\n    onMove?: (state: MoveState) =\u003e void;\n    onStop?: (state: MoveState) =\u003e void;\n    state?: MoveState;\n    reset?: Function;\n    position?: \"absolute\" | \"relative\";\n};\nexport declare function makeMovable(element: HTMLElement, { handle: hdl, onMove, onStop, state, reset, position }?: MovableOpts): {\n    reset: () =\u003e void;\n};\nexport type ResizableOpts = {\n    minW?: number;\n    minH?: number;\n    size?: number;\n    onMove?: (state: ResizeState) =\u003e void;\n    onStop?: (state: ResizeState) =\u003e void;\n    state?: ResizeState;\n    reset?: Function;\n};\nexport declare function makeResizable(element: HTMLElement, { minW, minH, size, onMove, onStop, state, reset }?: ResizableOpts): {\n    reset: () =\u003e void;\n};\n\ntype StoreStateOpt\u003cT extends AnyState, S extends string\u003e = {\n    id: S extends \"\" ? never : S;\n    onMove?: (state: T) =\u003e void;\n    onStop?: (state: T) =\u003e void;\n};\ntype StoreStateReturn\u003cT extends AnyState\u003e = {\n    onMove?: (state: T) =\u003e void;\n    onStop?: (state: T) =\u003e void;\n    state?: T;\n    reset: () =\u003e void;\n};\nexport declare function storeStateInLS\u003cT extends AnyState, S extends string\u003e({ id: lsName, onMove, onStop }: StoreStateOpt\u003cT, S\u003e): StoreStateReturn\u003cT\u003e;\nexport declare function getPopupEnh\u003cS extends string\u003e(appName: S extends \"\" ? never : S): {\n    /**\n     * Use `position: \"relative\"` option if you want to open multiple popups at once,\n     * and you do not want they overlap each other. However, don't use it with resizable popups.\n     */\n    makeMovableEx\u003cS_1 extends string\u003e(element: HTMLElement, id: S_1 extends \"\" ? never : S_1, opt?: MovableOpts): {\n        reset: () =\u003e void;\n    };\n    makeResizableEx\u003cS_1 extends string\u003e(element: HTMLElement, id: S_1 extends \"\" ? never : S_1, opt?: ResizableOpts): {\n        reset: () =\u003e void;\n    };\n};\n/**\n * Makes the element focusable, adds `\"focus\"` class.\n * Specify the drag `handle` (if exists) to run `\"focus\"` listener callback on `\"pointerdown\"` on it.\n */\nexport declare function makeFocusable(element: HTMLElement, handle?: HTMLElement): void;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falttiri%2Fpopup-enhance","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falttiri%2Fpopup-enhance","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falttiri%2Fpopup-enhance/lists"}