Window Engine

Welcome to Window Engine. Window Engine is a lightweight javascript library, developed by Gauthier Staehler, for draggable windows. Demo here.

 

Installation

Download ZIP :

<link rel="stylesheet" href="dist/window-engine.min.css">
<script src="dist/window-engine.min.js"></script> // End of your file

OR Install with NPM :

npm i window-engine

OR Test it first :

<link rel="stylesheet" href="https://unpkg.com/window-engine@latest/dist/window-engine.min.css">
<script src="https://unpkg.com/window-engine@latest/dist/window-engine.min.js"></script> // End of your file

 

Structure of a window

<div id="window!" class="window">
    <div class="color">
        <p class="windowTitle">Title</p>
    </div>
    <div class="mainWindow">Content</div>
</div>

! 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 :

<button id="button!"></button>

 

windowGroup

All of the windows must be in the same windowGroup :

<div class="windowGroup"> Your windows ... </div>

 

Fade effect

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

<div id="window!" class="window fade">

 

Display

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

<div id="window!" class="window" style="display: initial;">

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

<div id="window!" class="window fade" style="display: initial;">

 

Size

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

<div id="window!" class="window large">

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

 

Basic Example

<div class="windowGroup">
 
    <!-- WINDOW 1 -->
 
    <div id="window1" class="window" style="display: initial;">
        <div class="purple">
            <p class="windowTitle">Window Engine</p>
        </div>
        <div class="mainWindow">
            <p>Welcome to Window Engine !</p>
        </div>
    </div>
 
    <!-- WINDOW 2 -->
 
    <div id="window2" class="window fade">
        <div class="cyan">
            <p class="windowTitle">Second Window</p>
        </div>
        <div class="mainWindow">
            <p>Cyan</p>
            <p>With fade effect !</p>
        </div>
    </div>
 
    <!-- WINDOW 3 -->
 
    <div id="window3" class="window fade small">
        <div class="brown">
            <p class="windowTitle">Third Window</p>
        </div>
        <div class="mainWindow">
            <p>Brown</p>
            <p>With fade effect !</p>
        </div>
    </div>
    
</div>
 
<button id="button1">1</button>
<button id="button2">2</button>
<button id="button3">3</button>

 

They talked about it

CSS Script

 

Copyright Gauthier Staehler