{"id":13657837,"url":"https://github.com/GStaehler/Window-Engine","last_synced_at":"2025-04-24T08:30:40.531Z","repository":{"id":41233466,"uuid":"176144665","full_name":"GStaehler/Window-Engine","owner":"GStaehler","description":":tv: Window Engine is a lightweight and touchscreen friendly zero-dependency JavaScript library for draggable windows.","archived":false,"fork":false,"pushed_at":"2021-09-05T08:25:00.000Z","size":845,"stargazers_count":22,"open_issues_count":1,"forks_count":8,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-24T04:47:34.272Z","etag":null,"topics":["css","design","drag","draggable","draggable-window","javascript","javascript-library","js","library","lightweight","lightweight-javascript-library","mobile-friendly","modals","style","stylesheet","touchscreen","window","window-engine","windows"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/window-engine","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GStaehler.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-17T18:43:30.000Z","updated_at":"2025-03-26T09:03:06.000Z","dependencies_parsed_at":"2022-07-28T20:28:57.212Z","dependency_job_id":null,"html_url":"https://github.com/GStaehler/Window-Engine","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GStaehler%2FWindow-Engine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GStaehler%2FWindow-Engine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GStaehler%2FWindow-Engine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GStaehler%2FWindow-Engine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GStaehler","download_url":"https://codeload.github.com/GStaehler/Window-Engine/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250591892,"owners_count":21455452,"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":["css","design","drag","draggable","draggable-window","javascript","javascript-library","js","library","lightweight","lightweight-javascript-library","mobile-friendly","modals","style","stylesheet","touchscreen","window","window-engine","windows"],"created_at":"2024-08-02T05:00:51.833Z","updated_at":"2025-04-24T08:30:40.221Z","avatar_url":"https://github.com/GStaehler.png","language":"JavaScript","funding_links":["https://www.paypal.me/GauthierStaehler"],"categories":["JavaScript"],"sub_categories":[],"readme":"# Window Engine\n\n[![License: MIT](https://img.shields.io/github/license/GStaehler/Window-Engine.svg?color=brightgreen\u0026label=License)](https://github.com/GStaehler/Window-Engine/blob/master/LICENSE)\n[![Version](https://img.shields.io/github/release/GStaehler/Window-Engine.svg?color=Brightgreen\u0026label=Version)](https://github.com/GStaehler/Window-Engine/releases)\n[![Donate](https://img.shields.io/badge/Donate-PayPal-Brightgreen.svg)](https://www.paypal.me/GauthierStaehler)\n[![GitHub file size in bytes](https://img.shields.io/github/size/GStaehler/Window_Engine/dist/window-engine.min.js.svg?color=green\u0026label=window-engine.min.js)](https://github.com/GStaehler/Window-Engine/blob/master/dist/window-engine.min.js)\n[![GitHub file size in bytes](https://img.shields.io/github/size/GStaehler/Window_Engine/dist/window-engine.min.css.svg?color=green\u0026label=window-engine.min.css)](https://github.com/GStaehler/Window-Engine/blob/master/dist/window-engine.css)\n[![CodeFactor](https://www.codefactor.io/repository/github/gstaehler/window-engine/badge)](https://www.codefactor.io/repository/github/gstaehler/window-engine)\n[![npm](https://img.shields.io/npm/dw/window-engine)](https://www.npmjs.com/package/window-engine)\n\n![Demo](https://gstaehler.github.io/window_engine/window.png)\n\nWelcome to **Window Engine**.  Window Engine is a lightweight javascript library, developed by **Gauthier Staehler**, for draggable windows. Demo [here](https://gstaehler.github.io/window-engine).\n\n\u0026nbsp;\n\n### Installation\n\nDownload ZIP :\n\n```html\n\u003clink rel=\"stylesheet\" href=\"dist/window-engine.min.css\"\u003e\n\u003cscript src=\"dist/window-engine.min.js\"\u003e\u003c/script\u003e // End of your file\n```\n\nOR Install with NPM :\n```sh\nnpm i window-engine\n```\n\nOR Test it first :\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/window-engine@latest/dist/window-engine.min.css\"\u003e\n\u003cscript src=\"https://unpkg.com/window-engine@latest/dist/window-engine.min.js\"\u003e\u003c/script\u003e // End of your file\n```\n\n\u0026nbsp;\n\n### Structure of a window\n\n```html\n\u003cdiv id=\"window!\" class=\"window\"\u003e\n\t\u003cdiv class=\"color\"\u003e\n\t\t\u003cp class=\"windowTitle\"\u003eTitle\u003c/p\u003e\n\t\u003c/div\u003e\n\t\u003cdiv class=\"mainWindow\"\u003eContent\u003c/div\u003e\n\u003c/div\u003e\n```\n**!** *is the number of the window*\n\n**color** *is the color of the window : purple, orange, brown, cyan, crimson, green*\n\n*default color is black*\n\n\u0026nbsp;\n\n### Add a new window\n\nTo add a new window, copy the structure above in your html and change **!** (if this is your third window, **!** = 3 for example)\n\nAdd another button to open you new window :\n\n```html\n\u003cbutton id=\"button!\"\u003e\u003c/button\u003e\n```\n\n\u0026nbsp;\n\n### windowGroup\n\nAll of the windows must be in the same windowGroup :\n\n```html\n\u003cdiv class=\"windowGroup\"\u003e Your windows ... \u003c/div\u003e\n```\n\n\u0026nbsp;\n\n### Fade effect\n\nAdd a fade effect on the windows with the class \"fade\" :\n\n```html\n\u003cdiv id=\"window!\" class=\"window fade\"\u003e\n```\n\n\u0026nbsp;\n\n### Display\n\nThe following code makes the window visible without a button click :\n\n```html\n\u003cdiv id=\"window!\" class=\"window\" style=\"display: initial;\"\u003e\n```\n\nOf course it is possible to combine it with the fade effect :\n\n```html\n\u003cdiv id=\"window!\" class=\"window fade\" style=\"display: initial;\"\u003e\n```\n\n\u0026nbsp;\n\n### Size\n\nChange the size of the window with \"small\" and \"large\" :\n\n```html\n\u003cdiv id=\"window!\" class=\"window large\"\u003e\n```\n\n**normal** : 800 x 400; **small** : 600 x 300; **large** : 1000 x 500\n\n\u0026nbsp;\n\n### Basic Example\n\n```html\n\u003cdiv class=\"windowGroup\"\u003e\n\n\t\u003c!-- WINDOW 1 --\u003e\n\n\t\u003cdiv id=\"window1\" class=\"window\" style=\"display: initial;\"\u003e\n\t\t\u003cdiv class=\"purple\"\u003e\n\t\t\t\u003cp class=\"windowTitle\"\u003eWindow Engine\u003c/p\u003e\n\t\t\u003c/div\u003e\n\t\t\u003cdiv class=\"mainWindow\"\u003e\n\t\t\t\u003cp\u003eWelcome to Window Engine !\u003c/p\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\n\t\u003c!-- WINDOW 2 --\u003e\n\n\t\u003cdiv id=\"window2\" class=\"window fade\"\u003e\n\t\t\u003cdiv class=\"cyan\"\u003e\n\t\t\t\u003cp class=\"windowTitle\"\u003eSecond Window\u003c/p\u003e\n\t\t\u003c/div\u003e\n\t\t\u003cdiv class=\"mainWindow\"\u003e\n\t\t\t\u003cp\u003eCyan\u003c/p\u003e\n\t\t\t\u003cp\u003eWith fade effect !\u003c/p\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\n\t\u003c!-- WINDOW 3 --\u003e\n\n\t\u003cdiv id=\"window3\" class=\"window fade small\"\u003e\n\t\t\u003cdiv class=\"brown\"\u003e\n\t\t\t\u003cp class=\"windowTitle\"\u003eThird Window\u003c/p\u003e\n\t\t\u003c/div\u003e\n\t\t\u003cdiv class=\"mainWindow\"\u003e\n\t\t\t\u003cp\u003eBrown\u003c/p\u003e\n\t\t\t\u003cp\u003eWith fade effect !\u003c/p\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\t\n\u003c/div\u003e\n\n\u003cbutton id=\"button1\"\u003e1\u003c/button\u003e\n\u003cbutton id=\"button2\"\u003e2\u003c/button\u003e\n\u003cbutton id=\"button3\"\u003e3\u003c/button\u003e\n```\n\n\u0026nbsp;\n\n### They talked about it\n\n[CSS Script](https://www.cssscript.com/draggable-popup-window-engine/)\n\n\u0026nbsp;\n\nCopyright **Gauthier Staehler**","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGStaehler%2FWindow-Engine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGStaehler%2FWindow-Engine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGStaehler%2FWindow-Engine/lists"}