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 and beautiful windows. Full demo here.

Installation

GET Window Engine :

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

OR Test it first :

<link rel="stylesheet" href="https://gstaehler.github.io/cdn/window-engine.min.css">
<script src="https://gstaehler.github.io/cdn/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

if no color, the window 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)

You can add another button to open you new window :

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

windowGroup

All of the windows must be in one windowGroup :

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

Fade effect

You can add a fade effect on the windows with the class "fade" :

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

Display

If you want your window to be visible without clicking on a button the first time :

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

Of course you can combine it with the fade effect :

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

Size

You can 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