Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/GStaehler/Window-Engine

:tv: Window Engine is a lightweight and touchscreen friendly zero-dependency JavaScript library for draggable windows.
https://github.com/GStaehler/Window-Engine

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

Last synced: 2 days ago
JSON representation

:tv: Window Engine is a lightweight and touchscreen friendly zero-dependency JavaScript library for draggable windows.

Host: GitHub
URL: https://github.com/GStaehler/Window-Engine
Owner: GStaehler
License: mit
Created: 2019-03-17T18:43:30.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2021-09-05T08:25:00.000Z (about 3 years ago)
Last Synced: 2024-10-06T06:56:58.752Z (about 1 month ago)
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
Language: JavaScript
Homepage: https://www.npmjs.com/package/window-engine
Size: 825 KB
Stars: 21
Watchers: 2
Forks: 8
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # Window Engine

[![License: MIT](https://img.shields.io/github/license/GStaehler/Window-Engine.svg?color=brightgreen&label=License)](https://github.com/GStaehler/Window-Engine/blob/master/LICENSE)

[![Version](https://img.shields.io/github/release/GStaehler/Window-Engine.svg?color=Brightgreen&label=Version)](https://github.com/GStaehler/Window-Engine/releases)

[![Donate](https://img.shields.io/badge/Donate-PayPal-Brightgreen.svg)](https://www.paypal.me/GauthierStaehler)

[![GitHub file size in bytes](https://img.shields.io/github/size/GStaehler/Window_Engine/dist/window-engine.min.js.svg?color=green&label=window-engine.min.js)](https://github.com/GStaehler/Window-Engine/blob/master/dist/window-engine.min.js)

[![GitHub file size in bytes](https://img.shields.io/github/size/GStaehler/Window_Engine/dist/window-engine.min.css.svg?color=green&label=window-engine.min.css)](https://github.com/GStaehler/Window-Engine/blob/master/dist/window-engine.css)

[![CodeFactor](https://www.codefactor.io/repository/github/gstaehler/window-engine/badge)](https://www.codefactor.io/repository/github/gstaehler/window-engine)

[![npm](https://img.shields.io/npm/dw/window-engine)](https://www.npmjs.com/package/window-engine)

![Demo](https://gstaehler.github.io/window_engine/window.png)

Welcome 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).

 

### Installation

Download ZIP :

```html

 // End of your file

```

OR Install with NPM :

```sh

npm i window-engine

```

OR Test it first :

```html

 // End of your file

```

 

### Structure of a window

```html



	

		Title

	

	Content



```

**!** *is the number of the window*

**color** *is the color of the window : purple, orange, brown, cyan, crimson, green*

*default color is black*

 

### Add a new window

To add a new window, copy the structure above in your html and change **!** (if this is your third window, **!** = 3 for example)

Add another button to open you new window :

```html

```

 

### windowGroup

All of the windows must be in the same windowGroup :

```html

 Your windows ... 

```

 

### Fade effect

Add a fade effect on the windows with the class "fade" :

```html



```

 

### Display

The following code makes the window visible without a button click :

```html



```

Of course it is possible to combine it with the fade effect :

```html



```

 

### Size

Change the size of the window with "small" and "large" :

```html



```

**normal** : 800 x 400; **small** : 600 x 300; **large** : 1000 x 500

 

### Basic Example

```html



	

	


		

			Window Engine

		

		

			Welcome to Window Engine !

		

	


	

	


		

			Second Window

		

		

			Cyan

			With fade effect !

		

	


	

	


		

			Third Window

		

		

			Brown

			With fade effect !

		

	

	



1

2

3

```

 

### They talked about it

[CSS Script](https://www.cssscript.com/draggable-popup-window-engine/)

 

Copyright **Gauthier Staehler**