GStaehler · onizuka8 · Sep 2, 2019 · Sep 2, 2019 · Sep 4, 2019 · Sep 4, 2019
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+.idea
+node_modules
diff --git a/README.md b/README.md
@@ -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).
 
 &nbsp;
 
 ### 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>
@@ -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>
@@ -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
@@ -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>
@@ -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>
@@ -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>

diff --git a/dist/window-engine.min.css b/dist/window-engine.min.css
diff --git a/dist/window-engine.min.js b/dist/window-engine.min.js
diff --git a/demo.css → example/demo.css b/demo.css → example/demo.css
@@ -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"] {
@@ -46,5 +41,5 @@ p {
 	cursor: pointer;
 	font-size: 30px;
 	position: relative;
-	bottom: 6px;
+	bottom: 2px;
 }
diff --git a/index.html → example/index.html b/index.html → example/index.html
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -96,7 +90,7 @@
 
 	</div>
 
-	<footer id="footer">
+	<footer>
 		<span id="button1">1</span>
 		<span id="button2">2</span>
 		<span id="button3">3</span>
@@ -109,4 +103,4 @@
 
 </html>
 
-<script src="window-engine/window-engine.js"></script>
+<script src="../src/window-engine.js"></script>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "window-engine",
+  "version": "4.3.7",
+  "description": "Lightweight and touchscreen friendly zero-dependency JavaScript library for draggable windows",
+  "main": "dist/window-engine.min.js",
+  "unpkg": "dist/window-engine.min.js",
+  "files": [
+    "dist/window-engine.min.js",
+    "dist/window-engine.min.css"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "minify": "uglifyjs src/window-engine.js --compress --mangle --warn --comments all --output dist/window-engine.min.js && uglifycss src/window-engine.css --output dist/window-engine.min.css"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/GStaehler/Window-Engine.git"
+  },
+  "keywords": [
+    "draggable",
+    "window",
+    "modals",
+    "engine"
+  ],
+  "author": "Gauthier Staehler",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/GStaehler/Window-Engine/issues"
+  },
+  "homepage": "https://github.com/GStaehler/Window-Engine#readme",
+  "dependencies": {},
+  "devDependencies": {
+    "uglify-es": "^3.3.9",
+    "uglifycss": "0.0.29"
+  }
+}
diff --git a/window-engine/window-engine.css → src/window-engine.css b/window-engine/window-engine.css → src/window-engine.css
@@ -1,35 +1,31 @@
 /* Window Engine - MIT License - Copyright (c) 2019 Gauthier Staehler */
 
-.mydiv {
+.window {
 	position: absolute;
 	top: 80px;
 	z-index: 9;
 	background-color: #f1f1f1;
 	width: 800px;
 	height: 400px;
-	border-radius: 8px 8px 0px 0px;
+	border-radius: 8px 8px 0 0;
 	box-shadow: 8px 8px 6px -6px black;
 	opacity: 0.9;
 	display: none;
 }
 
-.mydivheader {
+[id$="header"] {
 	padding: 10px;
 	z-index: 10;
 	background-color: black;
 	color: #fff;
-	border-radius: 4px 4px 0px 0px;
+	border-radius: 4px 4px 0 0;
 	height: 40px;
-	justify-content: space-between !important;
-	display: flex !important;
+	justify-content: space-between;
+	display: flex;
 	touch-action: none;
 }
 
-.mydivheader p {
-	cursor: default;
-}
-
-.mydivActive {
+.windowActive {
 	z-index: 100;
 }
 
@@ -40,7 +36,6 @@
 
 .mainWindow {
 	padding: 20px;
-	cursor: default;
 }
 
 [id^="closeButton"] {
@@ -52,8 +47,8 @@
 }
 
 .windowGroup {
-	justify-content: center !important;
-	display: flex !important;
+	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;
 }

diff --git a/src/window-engine.js b/src/window-engine.js
@@ -0,0 +1,158 @@
+/* Window Engine - MIT License - Copyright (c) 2019 Gauthier Staehler */
+
+const config = {
+  showOnClick: false,
+};
+
+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);
+const active = document.getElementsByClassName("window");
+
+for (let i = 1; i <= lastWindow; i++) {
+  createWindow(i);
+}
+
+function createWindow(id) {
+  let windowID = document.getElementById("window" + id);
+  let headerID = windowID.firstElementChild;
+  headerID.id = "window" + id + "header";
+
+  windowID.setAttribute("data-showonclick", config.showOnClick);
+
+  let createCloseButton = document.createElement("b");
+  createCloseButton.id = "closeButton" + id;
+  createCloseButton.innerHTML = "×";
+  document
+    .getElementById("window" + id + "header")
+    .appendChild(createCloseButton);
+
+  document.getElementById("closeButton" + id).onclick = function () {
+    fadeOut(windowID);
+  };
+  document.getElementById("button" + id).onclick = function () {
+    if (windowID.style.display === "initial") {
+      activeWindow(windowID);
+    } else {
+      windowID.style = "position: absolute;";
+      windowID.style = "top: 80px;";
+      fadeIn(windowID);
+    }
+  };
+  dragElement(windowID);
+}
+
+function dragElement(elmnt) {
+  var pos1 = 0,
+    pos2 = 0,
+    pos3 = 0,
+    pos4 = 0;
+  if ("ontouchstart" in document.documentElement) {
+    var pos1touch = 0,
+      pos2touch = 0,
+      pos3touch = 0,
+      pos4touch = 0;
+  }
+  if (document.getElementById(elmnt.id + "header")) {
+    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
+    document.getElementById(elmnt.id + "header").ontouchstart = dragMouseDown;
+  }
+  console.log(elmnt.dataset.showonclick);
+  if (elmnt.dataset.showonclick == "true")
+    elmnt.onmousedown = () => activeWindow(elmnt);
+
+  function dragMouseDown(e) {
+    if (!"ontouchstart" in document.documentElement) {
+      e.preventDefault();
+    }
+    pos3 = e.clientX;
+    pos4 = e.clientY;
+    if ("ontouchstart" in document.documentElement) {
+      try {
+        pos3touch = e.touches[0].clientX;
+        pos4touch = e.touches[0].clientY;
+      } catch (error) {}
+    }
+    document.onmouseup = closeDragElement;
+    document.onmousemove = elementDrag;
+    document.ontouchend = closeDragElement;
+    document.ontouchmove = elementDrag;
+    activeWindow(document.getElementById(elmnt.id));
+  }
+
+  function elementDrag(e) {
+    e.preventDefault();
+    if ("ontouchstart" in document.documentElement) {
+      pos1touch = pos3touch - e.touches[0].clientX;
+      pos2touch = pos4touch - e.touches[0].clientY;
+      pos3touch = e.touches[0].clientX;
+      pos4touch = e.touches[0].clientY;
+      elmnt.style.top = elmnt.offsetTop - pos2touch + "px";
+      elmnt.style.left = elmnt.offsetLeft - pos1touch + "px";
+    } else {
+      pos1 = pos3 - e.clientX;
+      pos2 = pos4 - e.clientY;
+      pos3 = e.clientX;
+      pos4 = e.clientY;
+      elmnt.style.top = elmnt.offsetTop - pos2 + "px";
+      elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
+    }
+  }
+
+  function closeDragElement() {
+    document.onmouseup = null;
+    document.onmousemove = null;
+    document.ontouchend = null;
+    document.ontouchmove = null;
+  }
+}
+
+function fadeIn(elmnt) {
+  elmnt.style.opacity = 0;
+  elmnt.style.display = "initial";
+  if (elmnt.classList.contains("fade")) {
+    var opacity = 0;
+    var timer = setInterval(function () {
+      opacity += 30 / 70;
+      if (opacity >= 1) {
+        clearInterval(timer);
+        opacity = 0.9;
+      }
+      elmnt.style.opacity = opacity;
+      activeWindow(elmnt);
+    }, 50);
+  } else {
+    elmnt.style.opacity = "0.9";
+    activeWindow(elmnt);
+  }
+}
+
+function fadeOut(elmnt) {
+  if (elmnt.classList.contains("fade")) {
+    var opacity = 1;
+    var timer = setInterval(function () {
+      opacity -= 30 / 70;
+      if (opacity <= 0) {
+        clearInterval(timer);
+        opacity = 0;
+        elmnt.style.display = "none";
+      }
+      elmnt.style.opacity = opacity;
+    }, 50);
+  } else {
+    elmnt.style.display = "none";
+    activeWindow(elmnt);
+  }
+}
+
+function activeWindow(elmnt) {
+  for (let i = active.length - 1; i > -1; i--) {
+    active[i].classList.remove("windowActive");
+    elmnt.className += " windowActive";
+  }
+}
diff --git a/window-engine/window-engine.js b/window-engine/window-engine.js
diff --git a/window-engine/window-engine.min.js b/window-engine/window-engine.min.js