{"id":15428957,"url":"https://github.com/timdaub/preact-touchable-dock","last_synced_at":"2025-04-19T15:49:40.703Z","repository":{"id":42723537,"uuid":"279901504","full_name":"TimDaub/preact-touchable-dock","owner":"TimDaub","description":"A touch and drag and droppable dock for single page web applications.","archived":false,"fork":false,"pushed_at":"2023-01-06T11:38:04.000Z","size":2185,"stargazers_count":21,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-13T02:45:25.993Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/TimDaub.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}},"created_at":"2020-07-15T15:11:42.000Z","updated_at":"2023-02-15T19:32:43.000Z","dependencies_parsed_at":"2023-02-06T00:16:49.780Z","dependency_job_id":null,"html_url":"https://github.com/TimDaub/preact-touchable-dock","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimDaub%2Fpreact-touchable-dock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimDaub%2Fpreact-touchable-dock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimDaub%2Fpreact-touchable-dock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimDaub%2Fpreact-touchable-dock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TimDaub","download_url":"https://codeload.github.com/TimDaub/preact-touchable-dock/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249730644,"owners_count":21317327,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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-01T18:08:12.127Z","updated_at":"2025-04-19T15:49:40.686Z","avatar_url":"https://github.com/TimDaub.png","language":"JavaScript","readme":"# preact-touchable-dock\n[![npm version](https://badge.fury.io/js/preact-touchable-dock.svg)](https://badge.fury.io/js/preact-touchable-dock)\n\n\u003e A touch and drag and droppable dock for single page web applications.\n\nMobile|Simulated Mobile\n:-------------------------:|:-------------------------:\n![](./assets/demo-touch.gif)  |  ![](./assets/demo-touch-simulated.gif)\n\n## Installation\n\n```bash\n$ npm i --save preact-touchable-dock\n# or\n$ yarn add preact-touchable-dock\n```\n\n## Usage\n\n- [Demo](https://jsfiddle.net/bkcu1qfj/1/)\n\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"/\u003e\n    \u003ctitle\u003eTouchable Dock Demo\u003c/title\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e\n    \u003cscript src=\"https://unpkg.com/preact@10.4.6/dist/preact.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/htm@3.0.4/dist/htm.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/jss/dist/jss.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/jss-preset-default/dist/jss-preset-default.min.js\"\u003e\u003c/script\u003e\n    \n    \u003cscript src=\"./TouchableDock.min.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"module\"\u003e\n      const { h, Component, render, createRef } = preact;\n      const htm = window.htm;\n\n      const html = htm.bind(h);\n\n      class ControllableDock extends Component {\n        constructor(props) {\n          super(props);\n\n          this.dock = createRef();  \n          this.state = {\n            stage: \"hide\"\n          }\n        }\n\n        render() {\n          const { stage } = this.state;\n          return html`\n            \u003ch1\u003eHello World\u003c/h1\u003e\n            \u003cp\u003e\n              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n            \u003c/p\u003e\n            \u003cbutton onClick=${() =\u003e this.dock.current.setStage(\"hide\")}\u003ehide\u003c/button\u003e\n            \u003cbutton onClick=${() =\u003e this.dock.current.setStage(\"hint\")}\u003ehint\u003c/button\u003e\n            \u003cbutton onClick=${() =\u003e this.dock.current.setStage(\"full\")}\u003efull\u003c/button\u003e\n            \u003c${TouchableDock}\n              ref=${this.dock}\n              onClose=${() =\u003e console.log(\"Dock was closed\")}\n              onClick=${() =\u003e console.log(\"Dock was clicked\")}\n              style=${{\n                borderTop: \"5px solid green\",\n                backgroundColor: \"white\"\n              }}\u003e\n              \u003ch2\u003eThis is a dock text\u003c/h2\u003e \n            \u003c//\u003e\n          `;\n        }\n      }\n\n      render(html`\u003c${ControllableDock} /\u003e`, document.body);\n  \u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Notes\n\n- `TouchableDock` inserts inline classes via [JSS](https://cssinjs.org). This\nallows users to customize its style by adjusting classes like  `.touchableDock`\nand `.touchableDockHandle`.\n- Changing the dock's stage works by calling the `setStage` method through a\nref. Possible values are `[\"hide\", \"hint\", \"full\"]`.\n- `props.onClose` allows to listen for close events emitted from the dock.\n\n## Contributing\n\n```bash\n$ git clone git@github.com:TimDaub/preact-touchable-dock.git\n$ cd preact-touchable-dock\n$ npm i\n$ npm run dev\n```\n\n## Changelog\n\n### 0.3.5\n\n- Bug fix: Don't allow scrolling of body in `stage === full`\n\n### 0.3.4\n\n- Added `onClick` prop\n\n### 0.3.3\n\n- Forgot to update the build lol\n\n### 0.3.2\n\n- Bug fix: `Uncaught ReferenceError: pageY is not defined`\n\n### 0.3.1\n\n- Bug fix: Allow other components to receive touch and mouse movement event by\nconditionally applying `evt.preventDefault`\n- Bug fix: Allow adjusting dock's height in scrolled position\n\n### 0.3.0\n\n- Unmount children when component is in `stage === \"hide\"` to allow usage of\n`componentWillUnmount` in child\n\n### 0.2.2\n\n- Add `onClose` prop to component for listening to close events.\n\n### 0.2.1\n\n- Add closing action button\n\n### 0.2.0\n\n- Deprecate changing `stage` through props and allow only through new method \ncalled `setStage`\n\n### 0.1.0\n\n- Deliver CSS classes as JS-generated inline classes using JSS\n\n### 0.0.1\n\n- Initial release\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimdaub%2Fpreact-touchable-dock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimdaub%2Fpreact-touchable-dock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimdaub%2Fpreact-touchable-dock/lists"}