Skip to content

Latest commit

 

History

History
177 lines (120 loc) · 6.75 KB

README.md

File metadata and controls

177 lines (120 loc) · 6.75 KB
Raw

banner

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 license

🌈 Live demo

Open the LIVE DEMO 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

View more

✨ 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, CEF and other Web standards-based environments.
  • Technically works, but it is not very useful in mobile web browsers.
IE / Edge
IE / Edge		 Firefox
Firefox		 Chrome
Chrome		 Safari
Safari		 Opera
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 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 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 or bug report. Code contributors will be listed in the README.

💻 Screenshots
screenshot 1 screenshot 2
screenshot 3 screenshot 4

View more

⚙️ 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:

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:

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.

Browsers support badges

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