diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2d2b47d --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.idea +node_modules \ No newline at end of file diff --git a/README.md b/README.md index ad9aed9..42d7356 100644 --- a/README.md +++ b/README.md @@ -3,29 +3,36 @@ [![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 - - // End of your file + + // End of your file +``` + +OR Install with NPM : +```sh +npm i window-engine ``` OR Test it first : ```html - - // End of your file + + // End of your file ```   @@ -33,27 +40,26 @@ OR Test it first : ### Structure of a window ```html -
-
+
+

Title

- ×
Content
``` -*! 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*   ### 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 @@ -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
Your windows ...
@@ -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 -
+
```   ### 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 -
+
``` -Of course you can combine it with the fade effect : +Of course it is possible to combine it with the fade effect : ```html -
+
```   ### Size -You can change the size of the window with "small" and "large" : +Change the size of the window with "small" and "large" : ```html -
+
``` **normal** : 800 x 400; **small** : 600 x 300; **large** : 1000 x 500 @@ -116,10 +122,9 @@ You can change the size of the window with "small" and "large" : -
-
+
+

Window Engine

- ×

Welcome to Window Engine !

@@ -128,10 +133,9 @@ You can change the size of the window with "small" and "large" : -
-
+
+

Second Window

- ×

Cyan

@@ -141,10 +145,9 @@ You can change the size of the window with "small" and "large" : -
-
+
+

Third Window

- ×

Brown

diff --git a/dist/window-engine.min.css b/dist/window-engine.min.css new file mode 100644 index 0000000..b3fbe4b --- /dev/null +++ b/dist/window-engine.min.css @@ -0,0 +1 @@ +.window{position:absolute;top:80px;z-index:9;background-color:#f1f1f1;width:800px;height:400px;border-radius:8px 8px 0 0;box-shadow:8px 8px 6px -6px black;opacity:.9;display:none}[id$="header"]{padding:10px;z-index:10;background-color:black;color:#fff;border-radius:4px 4px 0 0;height:40px;justify-content:space-between;display:flex;touch-action:none}.windowActive{z-index:100}.windowTitle{position:relative;bottom:2px}.mainWindow{padding:20px}[id^="closeButton"]{color:white;cursor:pointer;position:relative;bottom:9px;font-size:24px}.windowGroup{justify-content:center;display:flex;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}.purple{background-color:rebeccapurple}.orange{background-color:burlywood}.brown{background-color:brown}.cyan{background-color:darkcyan}.crimson{background-color:crimson}.green{background-color:darkgreen}.small{width:600px;height:300px}.large{width:1000px;height:500px}*,*::before,*::after{box-sizing:border-box}.windowGroup p{cursor:default;margin-top:0;margin-bottom:1rem} \ No newline at end of file diff --git a/dist/window-engine.min.js b/dist/window-engine.min.js new file mode 100644 index 0000000..dce1d4a --- /dev/null +++ b/dist/window-engine.min.js @@ -0,0 +1,2 @@ +/* Window Engine - MIT License - Copyright (c) 2019 Gauthier Staehler */ +const metaTag=document.createElement("meta");metaTag.name="viewport",metaTag.content="user-scalable=0",document.getElementsByTagName("head")[0].appendChild(metaTag);const lastWindow=document.getElementsByClassName("windowGroup")[0].lastElementChild.id.substring(6),active=document.getElementsByClassName("window");for(let e=1;e<=lastWindow;e++)createWindow(e);function createWindow(e){let t=document.getElementById("window"+e);t.firstElementChild.id="window"+e+"header";let n=document.createElement("b");n.id="closeButton"+e,n.innerHTML="×",document.getElementById("window"+e+"header").appendChild(n),document.getElementById("closeButton"+e).onclick=function(){fadeOut(t)},document.getElementById("button"+e).onclick=function(){"initial"===t.style.display?activeWindow(t):(t.style="position: absolute;",t.style="top: 80px;",fadeIn(t))},dragElement(t)}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var i=0,l=0,d=0,a=0;function u(t){if(!1 in document.documentElement&&t.preventDefault(),o=t.clientX,c=t.clientY,"ontouchstart"in document.documentElement)try{d=t.touches[0].clientX,a=t.touches[0].clientY}catch(e){}document.onmouseup=m,document.onmousemove=s,document.ontouchend=m,document.ontouchmove=s,activeWindow(document.getElementById(e.id))}function s(u){u.preventDefault(),"ontouchstart"in document.documentElement?(i=d-u.touches[0].clientX,l=a-u.touches[0].clientY,d=u.touches[0].clientX,a=u.touches[0].clientY,e.style.top=e.offsetTop-l+"px",e.style.left=e.offsetLeft-i+"px"):(t=o-u.clientX,n=c-u.clientY,o=u.clientX,c=u.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function m(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=u,document.getElementById(e.id+"header").ontouchstart=u)}function fadeIn(e){if(e.style.opacity=0,e.style.display="initial",e.classList.contains("fade"))var t=0,n=setInterval(function(){(t+=30/70)>=1&&(clearInterval(n),t=.9),e.style.opacity=t,activeWindow(e)},50);else e.style.opacity="0.9",activeWindow(e)}function fadeOut(e){if(e.classList.contains("fade"))var t=1,n=setInterval(function(){(t-=30/70)<=0&&(clearInterval(n),t=0,e.style.display="none"),e.style.opacity=t},50);else e.style.display="none",activeWindow(e)}function activeWindow(e){for(let t=active.length-1;t>-1;t--)active[t].classList.remove("windowActive"),e.className+=" windowActive"} \ No newline at end of file diff --git a/demo.css b/example/demo.css similarity index 80% rename from demo.css rename to example/demo.css index 3b23468..18c87a9 100644 --- a/demo.css +++ b/example/demo.css @@ -10,20 +10,17 @@ 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; @@ -31,13 +28,11 @@ header { padding: 4px; color: white; font-size: 12px; - display: block; } p { cursor: default; margin-top: 0; - margin-bottom: 1rem; } [id^="button"] { @@ -46,5 +41,5 @@ p { cursor: pointer; font-size: 30px; position: relative; - bottom: 6px; + bottom: 2px; } diff --git a/index.html b/example/index.html similarity index 58% rename from index.html rename to example/index.html index cc9e8bd..9b28cee 100644 --- a/index.html +++ b/example/index.html @@ -4,40 +4,38 @@ - + Window Engine - JavaScript Library - +
-

Window Engine 4.0

+

Window Engine 4.3.7

-
-
+
+

Window Engine

- ×

Welcome to Window Engine !

-

Window Engine helps you start projects that need draggable and beautiful custom windows.

+

Window Engine helps you start projects that need draggable windows.

-
-
+
+

Second Window

- ×

Cyan

@@ -47,10 +45,9 @@ -
-
+
+

Third Window

- ×

Brown

@@ -60,10 +57,9 @@ -
-
+
+

Fourth Window

- ×

Orange - Small

@@ -72,10 +68,9 @@ -
-
+
+

Fifth Window

- ×

Crimson - Large

@@ -84,10 +79,9 @@ -
-
+
+

Sixth Window

- ×

Green

@@ -96,7 +90,7 @@
-