Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://hlhielkema.github.io/elara/

Elara enables creating a Windows/MacOS like window manager experience inside a web browser. This JavaScript library is written with performances and compatibility in mind. No third-party libraries or frameworks are needed to use Elara. Open the live demo to try it yourself.
https://hlhielkema.github.io/elara/

awesome browser css elara es-lint javascript javascript-library live-demo open-source screenshots window-manager

Last synced: about 2 months ago
JSON representation

Host: GitHub
URL: https://hlhielkema.github.io/elara/
Owner: hlhielkema
License: mit
Created: 2019-03-22T18:41:14.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2023-03-14T04:56:45.000Z (over 1 year ago)
Last Synced: 2024-05-20T01:00:34.792Z (4 months ago)
Topics: awesome, browser, css, elara, es-lint, javascript, javascript-library, live-demo, open-source, screenshots, window-manager
Language: JavaScript
Homepage: https://hlhielkema.github.io/elara/
Size: 29.5 MB
Stars: 16
Watchers: 2
Forks: 3
Open Issues: 13
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        
![banner](media/logo/banner.svg)

Elara enables creating a Windows/MacOS like window manager experience inside a web browser. This JavaScript library is written with performances and compatibility in mind. No third-party libraries or frameworks are needed to use Elara.

[![ESLint](https://github.com/hlhielkema/elara/workflows/ESLint/badge.svg)](https://github.com/hlhielkema/elara/actions?query=workflow%3AESLint)

[![](https://img.shields.io/badge/Demo-Open%20live%20demo-brightgreen)](https://hlhielkema.github.io/elara/)

![license](https://img.shields.io/badge/License-MIT-green)

---

## 🌈 Live demo

Open the [LIVE DEMO](https://hlhielkema.github.io/elara/) to try Elara yourself.

*Scroll down for some screenshots.*

> The demo site is hosted using GitHub pages. Running Elara requires no back-end code besides static file hosting.

![screenshot A](media/screenshots/screenshot_a.png)

> [View more](media/screenshots/)

---

## ✨ Features

-	Move windows around the screen.

-	Resize windows from all sides.

-	Maximize/Minimize/Close windows.

-	Dock windows on the sides or in the corners of the screen.

-	Double click the top of the window to maximize it.

-	Select windows with the taskbar on the bottom of the screen.

-	Switch between unlimited workspaces, each with their own set of active windows.

-	Grab windows to bring them to the top level.

-	Animations and smooth movement.

-	Split windows, cascade windows, maximize/minimize/show all.

## 🖥 Environment Support

- Supports all major web browsers.

- Can run directly on [Electron](http://electron.atom.io/), [CEF](https://github.com/chromiumembedded/cef) and other Web standards-based environments.

- Technically works, but it is not very useful in mobile web browsers.

| [](http://godban.github.io/browsers-support-badges/)
IE / Edge | [](http://godban.github.io/browsers-support-badges/)
Firefox | [](http://godban.github.io/browsers-support-badges/)
Chrome | [](http://godban.github.io/browsers-support-badges/)
Safari | [](http://godban.github.io/browsers-support-badges/)
Opera |

| --------- | --------- | --------- | --------- | --------- |

| IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions

## 📦 Build

Bundling the Elara code into a single Javascript and CSS file with **Webpack** requires **Node.js**. [Install Node.js](https://nodejs.org/en/) and run the command below to bundle Elara. The files that can be used for distribution will be placed in the `/dist` directory.

```

npm run build

```

Grab the files from the `/dist` directory if you want only to use Elara without modifying it.

## ✔️ Linting



This project uses ESLint to ensure a consistent coding style. The rules are a minor extension on the Airbnb rules. Use this command to run ESLint:

```

npm run lint

```

> Use `eslint --fix ./src/` for automated fixing (where possible).

## ❓ Community Support

Please create a [new issue](https://github.com/hlhielkema/elara/issues/new) if you encounter any issues with this project.

## 🤝 Contributing

Contributing to the project is welcome and appreciated. If you would like to contribute, feel free to create a [pull request](https://github.com/hlhielkema/elara/pulls) or [bug report](https://github.com/hlhielkema/elara/issues/new). Code contributors will be listed in the README.

## 💻 Screenshots

| | |

|:---|:---|

| ![screenshot 1](media/screenshots/screenshot_1.png) | ![screenshot 2](media/screenshots/screenshot_2.png) |

| ![screenshot 3](media/screenshots/screenshot_3.png) | ![screenshot 4](media/screenshots/screenshot_4.png) |

[View more](media/screenshots/)

## ⚙️ Run local demo server

**The Elara library itself does not require any backend to work.** However, just opening *index.html* on your local system will not work properly. This repository contains 3 implementations of simple servers to try or test Elara. Each server is written in a different programming language. Please use the server implementation you prefer. Use the online live demo described earlier in this document if you just want to try the last stable version of Elara. The server implementations are written in:

- Node.js

- ASP.NET Core

- Go

---

### Node.js demo server



*Command:*

``` ps

node demo\nodejs\server.js

```

*Output:*

```

Routes:

"/"       ->: D:\GitHub Workspace\elara\demo\shared\index.html

"/dist/*" ->: D:\GitHub Workspace\elara\dist

"/*"      ->: D:\GitHub Workspace\elara\demo\shared

Elara demo server running at http://127.0.0.1:3000/

```

> TIP: Press Ctrl+C to shut down.

---

### ASP.NET Core demo server



*Command:*

``` ps

dotnet run --project .\demo\aspnetcore\ElaraDemo

```

*Output:*

```

info: Microsoft.Hosting.Lifetime[0]

      Now listening on: https://localhost:5001

info: Microsoft.Hosting.Lifetime[0]

      Now listening on: http://localhost:5000 

info: Microsoft.Hosting.Lifetime[0]

      Application started. Press Ctrl+C to shut down.

info: Microsoft.Hosting.Lifetime[0]

      Hosting environment: Development

info: Microsoft.Hosting.Lifetime[0]

      Content root path: D:\GitHub Workspace\elara\demo\aspnetcore\ElaraDemo

```

> TIP: Press Ctrl+C to shut down.

---

### Go demo server



*Command:*

```

cd demo/go

go build server.go

.\server.exe

```

*Output:*

```

2020/03/07 13:50:14 Listening on :3500..

```

> TIP: Press Ctrl+C to shut down.

---

## 🔗 Third-party resources

### Feather

Some of the icons used in the demo are from the Feather icon pack. Feather is licensed under the MIT License.

- Website: [feathericons.com](https://feathericons.com)

- GitHub: [feathericons/feather](https://github.com/feathericons/feather)

### Browsers support badges

An useful tool to generate browser support tables in markdown format. This project is licensed under the MIT License.

- Website: [godban.github.io/browsers-support-badges/](https://godban.github.io/browsers-support-badges/)

- GitHub: [godban/browsers-support-badges](https://github.com/godban/browsers-support-badges)