Package Exports

window-engine

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (window-engine) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Window Engine

Demo

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