Skip to content

Show windown on body click #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 41 commits into
base: develop
Choose a base branch
from
Open

Show windown on body click #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
41 commits
Select commit Hold shift + click to select a range
87fd3c8
Merge pull request #3 from GStaehler/develop
GStaehler Sep 2, 2019
055aaa8
Update README
GStaehler Sep 2, 2019
d873132
Remove useless code
GStaehler Sep 4, 2019
12f9fd7
Remove useless code
GStaehler Sep 4, 2019
13aada7
Remove useless code
GStaehler Sep 4, 2019
7cd3dbc
Clean demo
GStaehler Oct 2, 2019
668cd3a
Clean demo
GStaehler Oct 2, 2019
f11775c
Remove useless code
GStaehler Oct 3, 2019
9407146
Refactored
GStaehler Oct 3, 2019
122977e
Refactored
GStaehler Oct 3, 2019
c0bbe11
Remove useless code
GStaehler Oct 4, 2019
9a5b590
Remove useless code
GStaehler Oct 4, 2019
f433ab4
Remove bug of position
GStaehler Oct 7, 2019
90e33a7
Remove useless code
GStaehler Oct 7, 2019
95a231d
Clean
GStaehler Oct 7, 2019
8b43221
Update README
GStaehler Oct 7, 2019
61c6a58
Clean CSS
GStaehler Oct 7, 2019
4405fb0
Clean
GStaehler Oct 7, 2019
35dea66
Clean
GStaehler Oct 7, 2019
bb79f71
Clean
GStaehler Oct 7, 2019
6f6d387
Clean
GStaehler Oct 7, 2019
a9e4ebf
Remove duplicated code
GStaehler Oct 7, 2019
5dd80cd
Improve fade effect
GStaehler Oct 25, 2019
e9a52c9
Refactor
GStaehler Oct 25, 2019
5e64112
On opening a window, if it is already open, the window is the active one
GStaehler Dec 5, 2019
a2e94f4
Add gitignore
GStaehler Dec 11, 2019
93ad24d
Add package.json
GStaehler Dec 11, 2019
386e25d
Refactor
GStaehler Dec 11, 2019
5516b40
Clean README
GStaehler Dec 11, 2019
e4fbfde
Improve API, no need to write a close button in html anymore
GStaehler Dec 16, 2019
df86435
Improve API, no need to set an id to header
GStaehler Dec 16, 2019
b83aa06
Clean
GStaehler Dec 16, 2019
ff29343
Update README
GStaehler Dec 16, 2019
dd14650
Clean
GStaehler Dec 23, 2019
da2f4b3
Delete useless code and limit dom interactions
GStaehler Jan 23, 2020
c619251
Update example
GStaehler Jan 24, 2020
9bb1313
Add minify script in package.json
GStaehler Apr 27, 2020
dca8dea
Update package.json and README
GStaehler Apr 27, 2020
c1e5b3f
Update README
GStaehler Apr 28, 2020
1702d43
Update README
GStaehler Apr 28, 2020
fc27921
adds showWindown on body click
matteo-gheri-pocketworks Sep 5, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
.idea
node_modules
71 changes: 37 additions & 34 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,57 +3,63 @@
[![License: MIT](https://img.shields.io/github/license/GStaehler/Window-Engine.svg?color=brightgreen&label=License)](https://github.com/GStaehler/Window-Engine/blob/master/LICENSE)
[![Version](https://img.shields.io/github/release/GStaehler/Window-Engine.svg?color=Brightgreen&label=Version)](https://github.com/GStaehler/Window-Engine/releases)
[![Donate](https://img.shields.io/badge/Donate-PayPal-Brightgreen.svg)](https://www.paypal.me/GauthierStaehler)
[![GitHub file size in bytes](https://img.shields.io/github/size/GStaehler/Window_Engine/window-engine/window-engine.min.js.svg?color=green&label=window-engine.min.js)](https://github.com/GStaehler/Window-Engine/blob/master/window-engine/window-engine.min.js)
[![GitHub file size in bytes](https://img.shields.io/github/size/GStaehler/Window_Engine/window-engine/window-engine.css.svg?color=green&label=window-engine.css)](https://github.com/GStaehler/Window-Engine/blob/master/window-engine/window-engine.css)
[![GitHub file size in bytes](https://img.shields.io/github/size/GStaehler/Window_Engine/dist/window-engine.min.js.svg?color=green&label=window-engine.min.js)](https://github.com/GStaehler/Window-Engine/blob/master/dist/window-engine.min.js)
[![GitHub file size in bytes](https://img.shields.io/github/size/GStaehler/Window_Engine/dist/window-engine.min.css.svg?color=green&label=window-engine.min.css)](https://github.com/GStaehler/Window-Engine/blob/master/dist/window-engine.css)
[![CodeFactor](https://www.codefactor.io/repository/github/gstaehler/window-engine/badge)](https://www.codefactor.io/repository/github/gstaehler/window-engine)
[![npm](https://img.shields.io/npm/dw/window-engine)](https://www.npmjs.com/package/window-engine)

![Demo](https://gstaehler.github.io/window_engine/window.png)

Welcome to **Window Engine**. Window Engine is a lightweight javascript library, developed by **Gauthier Staehler**, for draggable and beautiful windows. Full demo [here](https://gstaehler.github.io/window.html).
Welcome to **Window Engine**. Window Engine is a lightweight javascript library, developed by **Gauthier Staehler**, for draggable windows. Demo [here](https://gstaehler.github.io/window-engine).

 

### Installation

[GET Window Engine](https://gstaehler.github.io/get-window-engine/) :
Download ZIP :

```html
<link rel="stylesheet" href="window-engine/window-engine.css">
<script src="window-engine/window-engine.min.js"></script> // End of your file
<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 :
```sh
npm i window-engine
```

OR Test it first :

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

&nbsp;

### Structure of a window

```html
<div id="mydiv!" class="mydiv">
<div id="mydiv!header" class="mydivheader color">
<div id="window!" class="window">
<div class="color">
<p class="windowTitle">Title</p>
<b id="closeButton!">&times;</b>
</div>
<div class="mainWindow">Content</div>
</div>
```
*! is the number of the window*
**!** *is the number of the window*

*color is the color of the window : purple, orange, brown, cyan, crimson, green*
**color** *is the color of the window : purple, orange, brown, cyan, crimson, green*

*if no color, the window is black*
*default color is black*

&nbsp;

### 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)
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 :
Add another button to open you new window :

```html
<button id="button!"></button>
Expand All @@ -63,7 +69,7 @@ You can add another button to open you new window :

### windowGroup

All of the windows must be in one windowGroup :
All of the windows must be in the same windowGroup :

```html
<div class="windowGroup"> Your windows ... </div>
Expand All @@ -73,36 +79,36 @@ All of the windows must be in one windowGroup :

### Fade effect

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

```html
<div id="mydiv!" class="mydiv fade">
<div id="window!" class="window fade">
```

&nbsp;

### Display

If you want your window to be visible without clicking on a button the first time :
The following code makes the window visible without a button click :

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

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

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

&nbsp;

### Size

You can change the size of the window with "small" and "large" :
Change the size of the window with "small" and "large" :

```html
<div id="mydiv!" class="mydiv large">
<div id="window!" class="window large">
```

**normal** : 800 x 400; **small** : 600 x 300; **large** : 1000 x 500
Expand All @@ -116,10 +122,9 @@ You can change the size of the window with "small" and "large" :

<!-- WINDOW 1 -->

<div id="mydiv1" class="mydiv" style="display: initial;">
<div id="mydiv1header" class="mydivheader purple">
<div id="window1" class="window" style="display: initial;">
<div class="purple">
<p class="windowTitle">Window Engine</p>
<b id="closeButton1">&times;</b>
</div>
<div class="mainWindow">
<p>Welcome to Window Engine !</p>
Expand All @@ -128,10 +133,9 @@ You can change the size of the window with "small" and "large" :

<!-- WINDOW 2 -->

<div id="mydiv2" class="mydiv fade">
<div id="mydiv2header" class="mydivheader cyan">
<div id="window2" class="window fade">
<div class="cyan">
<p class="windowTitle">Second Window</p>
<b id="closeButton2">&times;</b>
</div>
<div class="mainWindow">
<p>Cyan</p>
Expand All @@ -141,10 +145,9 @@ You can change the size of the window with "small" and "large" :

<!-- WINDOW 3 -->

<div id="mydiv3" class="mydiv fade small">
<div id="mydiv3header" class="mydivheader brown">
<div id="window3" class="window fade small">
<div class="brown">
<p class="windowTitle">Third Window</p>
<b id="closeButton3">&times;</b>
</div>
<div class="mainWindow">
<p>Brown</p>
Expand Down
1 change: 1 addition & 0 deletions dist/window-engine.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions dist/window-engine.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

15 changes: 5 additions & 10 deletions demo.css → example/demo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,34 +10,29 @@ body {

footer {
position: fixed;
bottom: 0px;
bottom: 0;
background-color: rebeccapurple;
width: 100%;
height: 42px;
height: 48px;
padding: 4px;
padding-left: 8px;
box-shadow: 2px 2px 2px 2px black;
justify-content: flex-start !important;
display: block;
box-shadow: 0 2px 2px 1px black;
}

header {
position: fixed;
top: 0px;
top: 0;
background-color: rebeccapurple;
width: 100%;
height: 20px;
opacity: 0.5;
padding: 4px;
color: white;
font-size: 12px;
display: block;
}

p {
cursor: default;
margin-top: 0;
margin-bottom: 1rem;
}

[id^="button"] {
Expand All @@ -46,5 +41,5 @@ p {
cursor: pointer;
font-size: 30px;
position: relative;
bottom: 6px;
bottom: 2px;
}
42 changes: 18 additions & 24 deletions index.html → example/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,40 +4,38 @@
<head>
<meta charset="utf-8">
<meta name="author" content="Gauthier Staehler">
<meta name="description" content="Window Engine is a lightweight javascript library for draggable and beautiful windows">
<meta name="description" content="Lightweight and touchscreen friendly zero-dependency JavaScript library for draggable windows">
<meta name="keywords" content="JavaScript, CSS, Window, Draggable">
<title>Window Engine - JavaScript Library</title>
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="window-engine/window-engine.css">
<link rel="stylesheet" href="../src/window-engine.css">
</head>

<body>

<header>
<p>Window Engine 4.0</p>
<p>Window Engine 4.3.7</p>
</header>

<div class="windowGroup">

<!-- WINDOW 1 -->

<div id="mydiv1" class="mydiv" style="display: initial;">
<div id="mydiv1header" class="mydivheader purple">
<div id="window1" class="window" style="display: initial;">
<div class="purple">
<p class="windowTitle">Window Engine</p>
<b id="closeButton1">&times;</b>
</div>
<div class="mainWindow">
<p>Welcome to Window Engine !</p>
<p>Window Engine helps you start projects that need draggable and beautiful custom windows.</p>
<p>Window Engine helps you start projects that need draggable windows.</p>
</div>
</div>

<!-- WINDOW 2 -->

<div id="mydiv2" class="mydiv fade">
<div id="mydiv2header" class="mydivheader cyan">
<div id="window2" class="window fade">
<div class="cyan">
<p class="windowTitle">Second Window</p>
<b id="closeButton2">&times;</b>
</div>
<div class="mainWindow">
<p>Cyan</p>
Expand All @@ -47,10 +45,9 @@

<!-- WINDOW 3 -->

<div id="mydiv3" class="mydiv fade">
<div id="mydiv3header" class="mydivheader brown">
<div id="window3" class="window fade">
<div class="brown">
<p class="windowTitle">Third Window</p>
<b id="closeButton3">&times;</b>
</div>
<div class="mainWindow">
<p>Brown</p>
Expand All @@ -60,10 +57,9 @@

<!-- WINDOW 4 -->

<div id="mydiv4" class="mydiv small">
<div id="mydiv4header" class="mydivheader orange">
<div id="window4" class="window small">
<div class="orange">
<p class="windowTitle">Fourth Window</p>
<b id="closeButton4">&times;</b>
</div>
<div class="mainWindow">
<p>Orange - Small</p>
Expand All @@ -72,10 +68,9 @@

<!-- WINDOW 5 -->

<div id="mydiv5" class="mydiv large">
<div id="mydiv5header" class="mydivheader crimson">
<div id="window5" class="window large">
<div class="crimson">
<p class="windowTitle">Fifth Window</p>
<b id="closeButton5">&times;</b>
</div>
<div class="mainWindow">
<p>Crimson - Large</p>
Expand All @@ -84,10 +79,9 @@

<!-- WINDOW 6 -->

<div id="mydiv6" class="mydiv">
<div id="mydiv6header" class="mydivheader green">
<div id="window6" class="window">
<div class="green">
<p class="windowTitle">Sixth Window</p>
<b id="closeButton6">&times;</b>
</div>
<div class="mainWindow">
<p>Green</p>
Expand All @@ -96,7 +90,7 @@

</div>

<footer id="footer">
<footer>
<span id="button1">1</span>
<span id="button2">2</span>
<span id="button3">3</span>
Expand All @@ -109,4 +103,4 @@

</html>

<script src="window-engine/window-engine.js"></script>
<script src="../src/window-engine.js"></script>
36 changes: 36 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading