{"id":20533712,"url":"https://github.com/ctrachte/kitchenwindow","last_synced_at":"2026-04-20T02:31:31.412Z","repository":{"id":143801921,"uuid":"524129239","full_name":"ctrachte/KitchenWindow","owner":"ctrachte","description":null,"archived":false,"fork":false,"pushed_at":"2022-08-12T15:01:38.000Z","size":1270,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-06T03:14:24.482Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/ctrachte.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":"2022-08-12T15:01:27.000Z","updated_at":"2022-08-12T15:01:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"c4349ef9-73ce-45eb-83c7-c7a727bc2eb7","html_url":"https://github.com/ctrachte/KitchenWindow","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ctrachte/KitchenWindow","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctrachte%2FKitchenWindow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctrachte%2FKitchenWindow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctrachte%2FKitchenWindow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctrachte%2FKitchenWindow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ctrachte","download_url":"https://codeload.github.com/ctrachte/KitchenWindow/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctrachte%2FKitchenWindow/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32030074,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T00:18:06.643Z","status":"online","status_checked_at":"2026-04-20T02:00:06.527Z","response_time":94,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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-11-16T00:23:20.215Z","updated_at":"2026-04-20T02:31:31.377Z","avatar_url":"https://github.com/ctrachte.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eDraggableWindows.js\u003c/h1\u003e\n\u003c/div\u003e\n\n  ![DraggableWindows v1.0.0](https://github.com/ctrachte/DraggableWindows/blob/6e93bbdc40c1453f34c06c2ee8864c3ce49183ca/2022-06-08%2018-33-46.gif)\n\n\u003cp align=\"left\"\u003e\n  Ever wanted to replicate the windows UI within the browser using JS and HTML? \n  Now you can! Draggable windows lets you silo large enterprise applications into digestable apps, and run each app side by side.\n  Perfect for microservices, multi-tasking, role-based productivity software, and data-driven application management.\n\u003c/p\u003e\n\n## Features\n  - Grid for windows to snap to, for multi-tasking. \n  - Hydrate with any content from any source!\n  - Customizeable color schemes *coming soon!*\n  - lightweight, easy to setup, no frameworks or special syntax.\n  - Works great with bootstrap! \n  - Can be configured to be fully responsive!\n\n  *Detailed documentation coming soon!*\n\n## Quick start\n\n - Download the project and open `index.html` in your browser\n - Add or remove options and elements from the options object. \n\n### How To: Create the body content of your window:\n There are lots of ways to add content to a window. You can create JS classes that contain or return functional pieces of HTML content, use a templating engine, or front-end frame-work like React to generate content.\n\n After content is rendered to the DOM, you simply add a reference to the parent element in the window options. Example: `{body: yourContentElement}`.\n\n  *Detailed documentation coming soon!*\n\n ##### Here's an example of a simple Bootstrap form, and a small piece of code to hook the button into: \n  ```\n  \u003cform\u003e\n    \u003cdiv class=\"form-group\"\u003e\n      \u003clabel for=\"exampleInputEmail1\"\u003eEmail address\u003c/label\u003e\n      \u003cinput type=\"email\" class=\"form-control\" id=\"exampleInputEmail1\" aria-describedby=\"emailHelp\" placeholder=\"Enter email\"\u003e\n      \u003csmall id=\"emailHelp\" class=\"form-text text-muted\"\u003eWe'll never share your email with anyone else.\u003c/small\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"form-group\"\u003e\n      \u003clabel for=\"exampleInputPassword1\"\u003ePassword\u003c/label\u003e\n      \u003cinput type=\"password\" class=\"form-control\" id=\"exampleInputPassword1\" placeholder=\"Password\"\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"form-check\"\u003e\n      \u003cinput type=\"checkbox\" class=\"form-check-input\" id=\"exampleCheck1\"\u003e\n      \u003clabel class=\"form-check-label\" for=\"exampleCheck1\"\u003eCheck me out\u003c/label\u003e\n    \u003c/div\u003e\n    \u003cbutton type=\"submit\" class=\"submitButton btn btn-primary\"\u003eSubmit\u003c/button\u003e\n  \u003c/form\u003e\n  \u003cscript\u003e \n  // add code to the form element:\n    let button = document.querySelector('submitButton');\n    button.onclick = (e) =\u003e alert('Submitted form!');\n  \u003c/script\u003e\n ```\n  Use code in your index, home page, or component to trigger the opening of a new window, then supply a reference to this `\u003cform\u003e` element to the DraggableWindow options. \n  *Voila!* The form lives in a Draggable Window! *See `index.html` for more detailed example.*\n\n## API/Route Table\n\n### Options:\n - `container` - DOM Node that will contain the DraggableWindows UI.\n - `header` - DOM Node or String text that represents the header content of the Draggable Window. \n - `body` - DOM Node or String text that represents the content of your window. Can be a string template literal or a pre-rendered HTML document.\n - `footer` - DOM Node or String text that represents the footer content of the Draggable Window.\n - `initialPosition` - Array with 2 values: `[x, y]`, valid values are as follows:\n   - x values: `left`, `right`, `middle`\n   - y values: `top`, `bottom`, `middle`\n   - `[middle, middle]` will position the Draggable Window full-screen, centered.\n - `left` - the distance from the right of the screen that the window will appear, example: `43px`\n - `top` - the distance from the top of the screen that the window will appear, example: `48px`\n - `offsetTop` - the margin that will appear above the Draggable Window grid, windows will not occupy this space. Used for application header content, etc.\n - `offsetLeft` - the margin that will appear to the left of the Draggable Window grid, windows will not occupy this space. Used for application side menu content, etc.\n - `draggable` - boolean, will determine whether or not the user can drag the Draggable Window around.\n - `close` - boolean, will determine whether or not the user can close the window, and if the 'close' icon shows at the top right of the header.\n - `locked` - boolean, will determine whether or not the window *must* be snapped to a grid space, if false, window can exist free form, or snapped to grid.\n - `snapping` - boolean, will determine whether or not the grid will exist for the Draggable Window to snap to. \n\n## Contributing [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/inessadl/readme/issues)\n\n[Please visit this contribution guide for GitHub open source if you are unsure about any of these steps:](https://gist.github.com/Chaser324/ce0505fbed06b947d962)\n\n1. Fork the Project (top right there should be a button)\n2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the Branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request \n\n*Code will be reviewed before being merged. If your code does not quite work or needs revision it may not be merged to the master.*\n\n\u003c!-- LICENSE --\u003e\n## License\n\nDistributed under the MIT License. \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctrachte%2Fkitchenwindow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fctrachte%2Fkitchenwindow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctrachte%2Fkitchenwindow/lists"}