From 055aaa87239dd84dabf6c59e9ebbe38cf2f88504 Mon Sep 17 00:00:00 2001 From: GStaehler Date: Mon, 2 Sep 2019 16:49:46 +0200 Subject: [PATCH 01/40] Update README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ad9aed9..a6ff63b 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ ![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 and beautiful windows. Full demo [here](https://gstaehler.github.io/window-engine).   From d873132cf520ebe172db1d02dc12fab2edf0e849 Mon Sep 17 00:00:00 2001 From: GStaehler Date: Wed, 4 Sep 2019 13:11:19 +0200 Subject: [PATCH 02/40] Remove useless code --- index.html | 2 +- window-engine/window-engine.js | 7 ++----- window-engine/window-engine.min.js | 2 +- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index cc9e8bd..9fd391a 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@
-

Window Engine 4.0

+

Window Engine 4.0.1

diff --git a/window-engine/window-engine.js b/window-engine/window-engine.js index 96df98a..2926e41 100644 --- a/window-engine/window-engine.js +++ b/window-engine/window-engine.js @@ -1,8 +1,8 @@ /* Window Engine - MIT License - Copyright (c) 2019 Gauthier Staehler */ var metaTag = document.createElement('meta'); -metaTag.name = "viewport" -metaTag.content = "user-scalable=0" +metaTag.name = "viewport"; +metaTag.content = "user-scalable=0"; document.getElementsByTagName('head')[0].appendChild(metaTag); const lastWindow = document.getElementsByClassName("windowGroup")[0].lastElementChild.id.substring(5); @@ -46,9 +46,6 @@ function dragElement(elmnt) { if (document.getElementById(elmnt.id + "header")) { document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown; document.getElementById(elmnt.id + "header").ontouchstart = dragMouseDown; - } else { - elmnt.onmousedown = dragMouseDown; - elmnt.ontouchstart = dragMouseDown; } function dragMouseDown(e) { diff --git a/window-engine/window-engine.min.js b/window-engine/window-engine.min.js index bb079ba..3766088 100644 --- a/window-engine/window-engine.min.js +++ b/window-engine/window-engine.min.js @@ -1,2 +1,2 @@ /* Window Engine - MIT License - Copyright (c) 2019 Gauthier Staehler */ -var 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(5);for(i=1;i<=lastWindow;i++)createWindow(i);function createWindow(e){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("mydiv"+e),50),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("mydiv"+e).style.display&&(t=!1),t&&(document.getElementById("mydiv"+e).style="position: absolute;",document.getElementById("mydiv"+e).style="top: 80px;",fadeIn(document.getElementById("mydiv"+e),50)),t=!1},dragElement(document.getElementById("mydiv"+e)),t=!0}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var i=0,l=0,m=0,d=0;function s(t){if(t=t||window.event,!1 in document.documentElement&&t.preventDefault(),o=t.clientX,c=t.clientY,"ontouchstart"in document.documentElement)try{m=t.touches[0].clientX,d=t.touches[0].clientY}catch{}document.onmouseup=u,document.onmousemove=a,document.ontouchend=u,document.ontouchmove=a;for(var n=document.getElementsByClassName("mydiv"),i=n.length-1;i>-1;i--)n[i].classList.remove("mydivActive");document.getElementById(e.id).className+=" mydivActive"}function a(s){(s=s||window.event).preventDefault(),"ontouchstart"in document.documentElement?(i=m-s.touches[0].clientX,l=d-s.touches[0].clientY,m=s.touches[0].clientX,d=s.touches[0].clientY,e.style.top=e.offsetTop-l+"px",e.style.left=e.offsetLeft-i+"px"):(t=o-s.clientX,n=c-s.clientY,o=s.clientX,c=s.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function u(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")?(document.getElementById(e.id+"header").onmousedown=s,document.getElementById(e.id+"header").ontouchstart=s):(e.onmousedown=s,e.ontouchstart=s)}function fadeIn(e,t){if(e.style.opacity=0,e.style.display="initial",e.classList.contains("fade"))var n=0,o=setInterval(function(){(n+=10/t)>=1&&(clearInterval(o),n=.9),e.style.opacity=n;for(var c=document.getElementsByClassName("mydiv"),i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"},50);else{e.style.opacity=.9;var c=document.getElementsByClassName("mydiv");for(i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"}}function fadeOut(e,t){if(e.classList.contains("fade"))var n=1,o=setInterval(function(){(n-=10/t)<=0&&(clearInterval(o),n=0,e.style.display="none"),e.style.opacity=n},50);else{e.style.opacity=0,e.style.display="none";var c=document.getElementsByClassName("mydiv");for(i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"}} \ No newline at end of file +var 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(5);for(i=1;i<=lastWindow;i++)createWindow(i);function createWindow(e){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("mydiv"+e),50),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("mydiv"+e).style.display&&(t=!1),t&&(document.getElementById("mydiv"+e).style="position: absolute;",document.getElementById("mydiv"+e).style="top: 80px;",fadeIn(document.getElementById("mydiv"+e),50)),t=!1},dragElement(document.getElementById("mydiv"+e)),t=!0}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var i=0,l=0,m=0,d=0;function s(t){if(t=t||window.event,!1 in document.documentElement&&t.preventDefault(),o=t.clientX,c=t.clientY,"ontouchstart"in document.documentElement)try{m=t.touches[0].clientX,d=t.touches[0].clientY}catch{}document.onmouseup=u,document.onmousemove=a,document.ontouchend=u,document.ontouchmove=a;for(var n=document.getElementsByClassName("mydiv"),i=n.length-1;i>-1;i--)n[i].classList.remove("mydivActive");document.getElementById(e.id).className+=" mydivActive"}function a(s){(s=s||window.event).preventDefault(),"ontouchstart"in document.documentElement?(i=m-s.touches[0].clientX,l=d-s.touches[0].clientY,m=s.touches[0].clientX,d=s.touches[0].clientY,e.style.top=e.offsetTop-l+"px",e.style.left=e.offsetLeft-i+"px"):(t=o-s.clientX,n=c-s.clientY,o=s.clientX,c=s.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function u(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=s,document.getElementById(e.id+"header").ontouchstart=s)}function fadeIn(e,t){if(e.style.opacity=0,e.style.display="initial",e.classList.contains("fade"))var n=0,o=setInterval(function(){(n+=10/t)>=1&&(clearInterval(o),n=.9),e.style.opacity=n;for(var c=document.getElementsByClassName("mydiv"),i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"},50);else{e.style.opacity=.9;var c=document.getElementsByClassName("mydiv");for(i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"}}function fadeOut(e,t){if(e.classList.contains("fade"))var n=1,o=setInterval(function(){(n-=10/t)<=0&&(clearInterval(o),n=0,e.style.display="none"),e.style.opacity=n},50);else{e.style.opacity=0,e.style.display="none";var c=document.getElementsByClassName("mydiv");for(i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"}} \ No newline at end of file From 12f9fd7351c9a3deffcb36b0026b47ea0e0dc01a Mon Sep 17 00:00:00 2001 From: GStaehler Date: Wed, 4 Sep 2019 14:16:31 +0200 Subject: [PATCH 03/40] Remove useless code --- window-engine/window-engine.js | 1 - window-engine/window-engine.min.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/window-engine/window-engine.js b/window-engine/window-engine.js index 2926e41..125c51d 100644 --- a/window-engine/window-engine.js +++ b/window-engine/window-engine.js @@ -141,7 +141,6 @@ function fadeOut(elem, ms) { elem.style.opacity = opacity; }, 50); } else { - elem.style.opacity = 0; elem.style.display = "none"; var active = document.getElementsByClassName("mydiv"); for (i = active.length - 1; i > -1; i--) { diff --git a/window-engine/window-engine.min.js b/window-engine/window-engine.min.js index 3766088..f2a9db1 100644 --- a/window-engine/window-engine.min.js +++ b/window-engine/window-engine.min.js @@ -1,2 +1,2 @@ /* Window Engine - MIT License - Copyright (c) 2019 Gauthier Staehler */ -var 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(5);for(i=1;i<=lastWindow;i++)createWindow(i);function createWindow(e){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("mydiv"+e),50),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("mydiv"+e).style.display&&(t=!1),t&&(document.getElementById("mydiv"+e).style="position: absolute;",document.getElementById("mydiv"+e).style="top: 80px;",fadeIn(document.getElementById("mydiv"+e),50)),t=!1},dragElement(document.getElementById("mydiv"+e)),t=!0}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var i=0,l=0,m=0,d=0;function s(t){if(t=t||window.event,!1 in document.documentElement&&t.preventDefault(),o=t.clientX,c=t.clientY,"ontouchstart"in document.documentElement)try{m=t.touches[0].clientX,d=t.touches[0].clientY}catch{}document.onmouseup=u,document.onmousemove=a,document.ontouchend=u,document.ontouchmove=a;for(var n=document.getElementsByClassName("mydiv"),i=n.length-1;i>-1;i--)n[i].classList.remove("mydivActive");document.getElementById(e.id).className+=" mydivActive"}function a(s){(s=s||window.event).preventDefault(),"ontouchstart"in document.documentElement?(i=m-s.touches[0].clientX,l=d-s.touches[0].clientY,m=s.touches[0].clientX,d=s.touches[0].clientY,e.style.top=e.offsetTop-l+"px",e.style.left=e.offsetLeft-i+"px"):(t=o-s.clientX,n=c-s.clientY,o=s.clientX,c=s.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function u(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=s,document.getElementById(e.id+"header").ontouchstart=s)}function fadeIn(e,t){if(e.style.opacity=0,e.style.display="initial",e.classList.contains("fade"))var n=0,o=setInterval(function(){(n+=10/t)>=1&&(clearInterval(o),n=.9),e.style.opacity=n;for(var c=document.getElementsByClassName("mydiv"),i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"},50);else{e.style.opacity=.9;var c=document.getElementsByClassName("mydiv");for(i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"}}function fadeOut(e,t){if(e.classList.contains("fade"))var n=1,o=setInterval(function(){(n-=10/t)<=0&&(clearInterval(o),n=0,e.style.display="none"),e.style.opacity=n},50);else{e.style.opacity=0,e.style.display="none";var c=document.getElementsByClassName("mydiv");for(i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"}} \ No newline at end of file +var 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(5);for(i=1;i<=lastWindow;i++)createWindow(i);function createWindow(e){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("mydiv"+e),50),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("mydiv"+e).style.display&&(t=!1),t&&(document.getElementById("mydiv"+e).style="position: absolute;",document.getElementById("mydiv"+e).style="top: 80px;",fadeIn(document.getElementById("mydiv"+e),50)),t=!1},dragElement(document.getElementById("mydiv"+e)),t=!0}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var i=0,l=0,m=0,d=0;function s(t){if(t=t||window.event,!1 in document.documentElement&&t.preventDefault(),o=t.clientX,c=t.clientY,"ontouchstart"in document.documentElement)try{m=t.touches[0].clientX,d=t.touches[0].clientY}catch{}document.onmouseup=u,document.onmousemove=a,document.ontouchend=u,document.ontouchmove=a;for(var n=document.getElementsByClassName("mydiv"),i=n.length-1;i>-1;i--)n[i].classList.remove("mydivActive");document.getElementById(e.id).className+=" mydivActive"}function a(s){(s=s||window.event).preventDefault(),"ontouchstart"in document.documentElement?(i=m-s.touches[0].clientX,l=d-s.touches[0].clientY,m=s.touches[0].clientX,d=s.touches[0].clientY,e.style.top=e.offsetTop-l+"px",e.style.left=e.offsetLeft-i+"px"):(t=o-s.clientX,n=c-s.clientY,o=s.clientX,c=s.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function u(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=s,document.getElementById(e.id+"header").ontouchstart=s)}function fadeIn(e,t){if(e.style.opacity=0,e.style.display="initial",e.classList.contains("fade"))var n=0,o=setInterval(function(){(n+=10/t)>=1&&(clearInterval(o),n=.9),e.style.opacity=n;for(var c=document.getElementsByClassName("mydiv"),i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"},50);else{e.style.opacity=.9;var c=document.getElementsByClassName("mydiv");for(i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"}}function fadeOut(e,t){if(e.classList.contains("fade"))var n=1,o=setInterval(function(){(n-=10/t)<=0&&(clearInterval(o),n=0,e.style.display="none"),e.style.opacity=n},50);else{e.style.display="none";var c=document.getElementsByClassName("mydiv");for(i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"}} \ No newline at end of file From 13aada7304963cffebe943e402d4dc173176db7a Mon Sep 17 00:00:00 2001 From: GStaehler Date: Wed, 4 Sep 2019 14:44:32 +0200 Subject: [PATCH 04/40] Remove useless code --- window-engine/window-engine.js | 6 ++---- window-engine/window-engine.min.js | 2 +- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/window-engine/window-engine.js b/window-engine/window-engine.js index 125c51d..3b84602 100644 --- a/window-engine/window-engine.js +++ b/window-engine/window-engine.js @@ -49,7 +49,6 @@ function dragElement(elmnt) { } function dragMouseDown(e) { - e = e || window.event; if (!"ontouchstart" in document.documentElement) { e.preventDefault(); } @@ -66,14 +65,13 @@ function dragElement(elmnt) { document.ontouchend = closeDragElement; document.ontouchmove = elementDrag; var active = document.getElementsByClassName("mydiv"); - for (var i = active.length - 1; i > -1; i--) { + for (i = active.length - 1; i > -1; i--) { active[i].classList.remove("mydivActive"); } document.getElementById(elmnt.id).className += " mydivActive"; } function elementDrag(e) { - e = e || window.event; e.preventDefault(); if ("ontouchstart" in document.documentElement) { pos1touch = pos3touch - e.touches[0].clientX; @@ -113,7 +111,7 @@ function fadeIn(elem, ms) { } elem.style.opacity = opacity; var active = document.getElementsByClassName("mydiv"); - for (var i = active.length - 1; i > -1; i--) { + for (i = active.length - 1; i > -1; i--) { active[i].classList.remove("mydivActive"); } elem.className += " mydivActive"; diff --git a/window-engine/window-engine.min.js b/window-engine/window-engine.min.js index f2a9db1..51af327 100644 --- a/window-engine/window-engine.min.js +++ b/window-engine/window-engine.min.js @@ -1,2 +1,2 @@ /* Window Engine - MIT License - Copyright (c) 2019 Gauthier Staehler */ -var 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(5);for(i=1;i<=lastWindow;i++)createWindow(i);function createWindow(e){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("mydiv"+e),50),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("mydiv"+e).style.display&&(t=!1),t&&(document.getElementById("mydiv"+e).style="position: absolute;",document.getElementById("mydiv"+e).style="top: 80px;",fadeIn(document.getElementById("mydiv"+e),50)),t=!1},dragElement(document.getElementById("mydiv"+e)),t=!0}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var i=0,l=0,m=0,d=0;function s(t){if(t=t||window.event,!1 in document.documentElement&&t.preventDefault(),o=t.clientX,c=t.clientY,"ontouchstart"in document.documentElement)try{m=t.touches[0].clientX,d=t.touches[0].clientY}catch{}document.onmouseup=u,document.onmousemove=a,document.ontouchend=u,document.ontouchmove=a;for(var n=document.getElementsByClassName("mydiv"),i=n.length-1;i>-1;i--)n[i].classList.remove("mydivActive");document.getElementById(e.id).className+=" mydivActive"}function a(s){(s=s||window.event).preventDefault(),"ontouchstart"in document.documentElement?(i=m-s.touches[0].clientX,l=d-s.touches[0].clientY,m=s.touches[0].clientX,d=s.touches[0].clientY,e.style.top=e.offsetTop-l+"px",e.style.left=e.offsetLeft-i+"px"):(t=o-s.clientX,n=c-s.clientY,o=s.clientX,c=s.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function u(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=s,document.getElementById(e.id+"header").ontouchstart=s)}function fadeIn(e,t){if(e.style.opacity=0,e.style.display="initial",e.classList.contains("fade"))var n=0,o=setInterval(function(){(n+=10/t)>=1&&(clearInterval(o),n=.9),e.style.opacity=n;for(var c=document.getElementsByClassName("mydiv"),i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"},50);else{e.style.opacity=.9;var c=document.getElementsByClassName("mydiv");for(i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"}}function fadeOut(e,t){if(e.classList.contains("fade"))var n=1,o=setInterval(function(){(n-=10/t)<=0&&(clearInterval(o),n=0,e.style.display="none"),e.style.opacity=n},50);else{e.style.display="none";var c=document.getElementsByClassName("mydiv");for(i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"}} \ No newline at end of file +var 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(5);for(i=1;i<=lastWindow;i++)createWindow(i);function createWindow(e){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("mydiv"+e),50),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("mydiv"+e).style.display&&(t=!1),t&&(document.getElementById("mydiv"+e).style="position: absolute;",document.getElementById("mydiv"+e).style="top: 80px;",fadeIn(document.getElementById("mydiv"+e),50)),t=!1},dragElement(document.getElementById("mydiv"+e)),t=!0}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var l=0,m=0,d=0,s=0;function a(t){if(!1 in document.documentElement&&t.preventDefault(),o=t.clientX,c=t.clientY,"ontouchstart"in document.documentElement)try{d=t.touches[0].clientX,s=t.touches[0].clientY}catch{}document.onmouseup=y,document.onmousemove=u,document.ontouchend=y,document.ontouchmove=u;var n=document.getElementsByClassName("mydiv");for(i=n.length-1;i>-1;i--)n[i].classList.remove("mydivActive");document.getElementById(e.id).className+=" mydivActive"}function u(i){i.preventDefault(),"ontouchstart"in document.documentElement?(l=d-i.touches[0].clientX,m=s-i.touches[0].clientY,d=i.touches[0].clientX,s=i.touches[0].clientY,e.style.top=e.offsetTop-m+"px",e.style.left=e.offsetLeft-l+"px"):(t=o-i.clientX,n=c-i.clientY,o=i.clientX,c=i.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function y(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=a,document.getElementById(e.id+"header").ontouchstart=a)}function fadeIn(e,t){if(e.style.opacity=0,e.style.display="initial",e.classList.contains("fade"))var n=0,o=setInterval(function(){(n+=10/t)>=1&&(clearInterval(o),n=.9),e.style.opacity=n;var c=document.getElementsByClassName("mydiv");for(i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"},50);else{e.style.opacity=.9;var c=document.getElementsByClassName("mydiv");for(i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"}}function fadeOut(e,t){if(e.classList.contains("fade"))var n=1,o=setInterval(function(){(n-=10/t)<=0&&(clearInterval(o),n=0,e.style.display="none"),e.style.opacity=n},50);else{e.style.display="none";var c=document.getElementsByClassName("mydiv");for(i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"}} \ No newline at end of file From 7cd3dbccf16b934d2b1939715386ad26775ce9ec Mon Sep 17 00:00:00 2001 From: "gauthier.staehler" Date: Wed, 2 Oct 2019 10:31:16 +0200 Subject: [PATCH 05/40] Clean demo --- demo.css | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/demo.css b/demo.css index 3b23468..6d9864f 100644 --- a/demo.css +++ b/demo.css @@ -13,12 +13,9 @@ footer { bottom: 0px; 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: 0px 2px 2px 1px black; } header { @@ -46,5 +43,5 @@ p { cursor: pointer; font-size: 30px; position: relative; - bottom: 6px; + bottom: 2px; } From 668cd3ae7fca433402c2d1b3f40977feb78cf865 Mon Sep 17 00:00:00 2001 From: "gauthier.staehler" Date: Wed, 2 Oct 2019 10:51:08 +0200 Subject: [PATCH 06/40] Clean demo --- demo.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/demo.css b/demo.css index 6d9864f..e392a05 100644 --- a/demo.css +++ b/demo.css @@ -28,13 +28,11 @@ header { padding: 4px; color: white; font-size: 12px; - display: block; } p { cursor: default; margin-top: 0; - margin-bottom: 1rem; } [id^="button"] { From f11775caad27649b3cabdc09a8c1cfda9cb38196 Mon Sep 17 00:00:00 2001 From: "gauthier.staehler" Date: Thu, 3 Oct 2019 15:13:32 +0200 Subject: [PATCH 07/40] Remove useless code --- index.html | 2 +- window-engine/window-engine.css | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 9fd391a..82acab7 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@
-

Window Engine 4.0.1

+

Window Engine 4.0.2

diff --git a/window-engine/window-engine.css b/window-engine/window-engine.css index 65093d5..f79ed14 100644 --- a/window-engine/window-engine.css +++ b/window-engine/window-engine.css @@ -20,8 +20,8 @@ color: #fff; border-radius: 4px 4px 0px 0px; height: 40px; - justify-content: space-between !important; - display: flex !important; + justify-content: space-between; + display: flex; touch-action: none; } @@ -52,8 +52,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; } From 9407146cc473acc661af4e4dec80a34e4055b3ec Mon Sep 17 00:00:00 2001 From: "gauthier.staehler" Date: Thu, 3 Oct 2019 15:55:13 +0200 Subject: [PATCH 08/40] Refactored --- README.md | 24 ++++++++++++------------ index.html | 26 +++++++++++++------------- window-engine/window-engine.css | 8 ++------ window-engine/window-engine.js | 22 +++++++++++----------- window-engine/window-engine.min.js | 2 +- 5 files changed, 39 insertions(+), 43 deletions(-) diff --git a/README.md b/README.md index a6ff63b..b3ea806 100644 --- a/README.md +++ b/README.md @@ -33,8 +33,8 @@ OR Test it first : ### Structure of a window ```html -
-
+
+

Title

×
@@ -76,7 +76,7 @@ All of the windows must be in one windowGroup : You can add a fade effect on the windows with the class "fade" : ```html -
+
```   @@ -86,13 +86,13 @@ You can add a fade effect on the windows with the class "fade" : If you want your window to be visible without clicking on a button the first time : ```html -
+
``` Of course you can combine it with the fade effect : ```html -
+
```   @@ -102,7 +102,7 @@ Of course you can combine it with the fade effect : You can change the size of the window with "small" and "large" : ```html -
+
``` **normal** : 800 x 400; **small** : 600 x 300; **large** : 1000 x 500 @@ -116,8 +116,8 @@ You can change the size of the window with "small" and "large" : -
-
+
+

Window Engine

×
@@ -128,8 +128,8 @@ You can change the size of the window with "small" and "large" : -
-
+
+

Second Window

×
@@ -141,8 +141,8 @@ You can change the size of the window with "small" and "large" : -
-
+
+

Third Window

×
diff --git a/index.html b/index.html index 82acab7..2aae7ba 100644 --- a/index.html +++ b/index.html @@ -14,15 +14,15 @@
-

Window Engine 4.0.2

+

Window Engine 4.1

-
-
+
+

Window Engine

×
@@ -34,8 +34,8 @@ -
-
+
+

Second Window

×
@@ -47,8 +47,8 @@ -
-
+
+

Third Window

×
@@ -60,8 +60,8 @@ -
-
+
+

Fourth Window

×
@@ -72,8 +72,8 @@ -
-
+
+

Fifth Window

×
@@ -84,8 +84,8 @@ -
-
+
+

Sixth Window

×
diff --git a/window-engine/window-engine.css b/window-engine/window-engine.css index f79ed14..52049aa 100644 --- a/window-engine/window-engine.css +++ b/window-engine/window-engine.css @@ -1,6 +1,6 @@ /* Window Engine - MIT License - Copyright (c) 2019 Gauthier Staehler */ -.mydiv { +.window { position: absolute; top: 80px; z-index: 9; @@ -13,7 +13,7 @@ display: none; } -.mydivheader { +[id$="header"] { padding: 10px; z-index: 10; background-color: black; @@ -25,10 +25,6 @@ touch-action: none; } -.mydivheader p { - cursor: default; -} - .mydivActive { z-index: 100; } diff --git a/window-engine/window-engine.js b/window-engine/window-engine.js index 3b84602..60eb5e2 100644 --- a/window-engine/window-engine.js +++ b/window-engine/window-engine.js @@ -5,7 +5,7 @@ metaTag.name = "viewport"; metaTag.content = "user-scalable=0"; document.getElementsByTagName('head')[0].appendChild(metaTag); -const lastWindow = document.getElementsByClassName("windowGroup")[0].lastElementChild.id.substring(5); +const lastWindow = document.getElementsByClassName("windowGroup")[0].lastElementChild.id.substring(6); for (i = 1; i <= lastWindow; i++) { createWindow(i); @@ -14,21 +14,21 @@ for (i = 1; i <= lastWindow; i++) { function createWindow(id) { var isOut; document.getElementById("closeButton" + id).onclick = function () { - fadeOut(document.getElementById("mydiv" + id), 50); + fadeOut(document.getElementById("window" + id), 50); isOut = true; }; document.getElementById("button" + id).onclick = function () { - if (document.getElementById("mydiv" + id).style.display === "initial") { + if (document.getElementById("window" + id).style.display === "initial") { isOut = false; } if (isOut) { - document.getElementById("mydiv" + id).style = "position: absolute;"; - document.getElementById("mydiv" + id).style = "top: 80px;"; - fadeIn(document.getElementById("mydiv" + id), 50); + document.getElementById("window" + id).style = "position: absolute;"; + document.getElementById("window" + id).style = "top: 80px;"; + fadeIn(document.getElementById("window" + id), 50); } isOut = false; }; - dragElement(document.getElementById("mydiv" + id)); + dragElement(document.getElementById("window" + id)); isOut = true; } @@ -64,7 +64,7 @@ function dragElement(elmnt) { document.onmousemove = elementDrag; document.ontouchend = closeDragElement; document.ontouchmove = elementDrag; - var active = document.getElementsByClassName("mydiv"); + var active = document.getElementsByClassName("window"); for (i = active.length - 1; i > -1; i--) { active[i].classList.remove("mydivActive"); } @@ -110,7 +110,7 @@ function fadeIn(elem, ms) { opacity = 0.9; } elem.style.opacity = opacity; - var active = document.getElementsByClassName("mydiv"); + var active = document.getElementsByClassName("window"); for (i = active.length - 1; i > -1; i--) { active[i].classList.remove("mydivActive"); } @@ -118,7 +118,7 @@ function fadeIn(elem, ms) { }, 50); } else { elem.style.opacity = 0.9; - var active = document.getElementsByClassName("mydiv"); + var active = document.getElementsByClassName("window"); for (i = active.length - 1; i > -1; i--) { active[i].classList.remove("mydivActive"); } @@ -140,7 +140,7 @@ function fadeOut(elem, ms) { }, 50); } else { elem.style.display = "none"; - var active = document.getElementsByClassName("mydiv"); + var active = document.getElementsByClassName("window"); for (i = active.length - 1; i > -1; i--) { active[i].classList.remove("mydivActive"); } diff --git a/window-engine/window-engine.min.js b/window-engine/window-engine.min.js index 51af327..f9bd26b 100644 --- a/window-engine/window-engine.min.js +++ b/window-engine/window-engine.min.js @@ -1,2 +1,2 @@ /* Window Engine - MIT License - Copyright (c) 2019 Gauthier Staehler */ -var 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(5);for(i=1;i<=lastWindow;i++)createWindow(i);function createWindow(e){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("mydiv"+e),50),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("mydiv"+e).style.display&&(t=!1),t&&(document.getElementById("mydiv"+e).style="position: absolute;",document.getElementById("mydiv"+e).style="top: 80px;",fadeIn(document.getElementById("mydiv"+e),50)),t=!1},dragElement(document.getElementById("mydiv"+e)),t=!0}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var l=0,m=0,d=0,s=0;function a(t){if(!1 in document.documentElement&&t.preventDefault(),o=t.clientX,c=t.clientY,"ontouchstart"in document.documentElement)try{d=t.touches[0].clientX,s=t.touches[0].clientY}catch{}document.onmouseup=y,document.onmousemove=u,document.ontouchend=y,document.ontouchmove=u;var n=document.getElementsByClassName("mydiv");for(i=n.length-1;i>-1;i--)n[i].classList.remove("mydivActive");document.getElementById(e.id).className+=" mydivActive"}function u(i){i.preventDefault(),"ontouchstart"in document.documentElement?(l=d-i.touches[0].clientX,m=s-i.touches[0].clientY,d=i.touches[0].clientX,s=i.touches[0].clientY,e.style.top=e.offsetTop-m+"px",e.style.left=e.offsetLeft-l+"px"):(t=o-i.clientX,n=c-i.clientY,o=i.clientX,c=i.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function y(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=a,document.getElementById(e.id+"header").ontouchstart=a)}function fadeIn(e,t){if(e.style.opacity=0,e.style.display="initial",e.classList.contains("fade"))var n=0,o=setInterval(function(){(n+=10/t)>=1&&(clearInterval(o),n=.9),e.style.opacity=n;var c=document.getElementsByClassName("mydiv");for(i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"},50);else{e.style.opacity=.9;var c=document.getElementsByClassName("mydiv");for(i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"}}function fadeOut(e,t){if(e.classList.contains("fade"))var n=1,o=setInterval(function(){(n-=10/t)<=0&&(clearInterval(o),n=0,e.style.display="none"),e.style.opacity=n},50);else{e.style.display="none";var c=document.getElementsByClassName("mydiv");for(i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"}} \ No newline at end of file +var 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);for(i=1;i<=lastWindow;i++)createWindow(i);function createWindow(e){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("window"+e),50),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("window"+e).style.display&&(t=!1),t&&(document.getElementById("window"+e).style="position: absolute;",document.getElementById("window"+e).style="top: 80px;",fadeIn(document.getElementById("window"+e),50)),t=!1},dragElement(document.getElementById("window"+e)),t=!0}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var l=0,m=0,d=0,s=0;function a(t){if(!1 in document.documentElement&&t.preventDefault(),o=t.clientX,c=t.clientY,"ontouchstart"in document.documentElement)try{d=t.touches[0].clientX,s=t.touches[0].clientY}catch{}document.onmouseup=y,document.onmousemove=u,document.ontouchend=y,document.ontouchmove=u;var n=document.getElementsByClassName("window");for(i=n.length-1;i>-1;i--)n[i].classList.remove("mydivActive");document.getElementById(e.id).className+=" mydivActive"}function u(i){i.preventDefault(),"ontouchstart"in document.documentElement?(l=d-i.touches[0].clientX,m=s-i.touches[0].clientY,d=i.touches[0].clientX,s=i.touches[0].clientY,e.style.top=e.offsetTop-m+"px",e.style.left=e.offsetLeft-l+"px"):(t=o-i.clientX,n=c-i.clientY,o=i.clientX,c=i.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function y(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=a,document.getElementById(e.id+"header").ontouchstart=a)}function fadeIn(e,t){if(e.style.opacity=0,e.style.display="initial",e.classList.contains("fade"))var n=0,o=setInterval(function(){(n+=10/t)>=1&&(clearInterval(o),n=.9),e.style.opacity=n;var c=document.getElementsByClassName("window");for(i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"},50);else{e.style.opacity=.9;var c=document.getElementsByClassName("window");for(i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"}}function fadeOut(e,t){if(e.classList.contains("fade"))var n=1,o=setInterval(function(){(n-=10/t)<=0&&(clearInterval(o),n=0,e.style.display="none"),e.style.opacity=n},50);else{e.style.display="none";var c=document.getElementsByClassName("window");for(i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"}} \ No newline at end of file From 122977e5c9648936a4d8bdc975a2a7f0c31c2f28 Mon Sep 17 00:00:00 2001 From: "gauthier.staehler" Date: Thu, 3 Oct 2019 16:37:07 +0200 Subject: [PATCH 09/40] Refactored --- window-engine/window-engine.css | 2 +- window-engine/window-engine.js | 16 ++++++++-------- window-engine/window-engine.min.js | 2 +- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/window-engine/window-engine.css b/window-engine/window-engine.css index 52049aa..7646ed5 100644 --- a/window-engine/window-engine.css +++ b/window-engine/window-engine.css @@ -25,7 +25,7 @@ touch-action: none; } -.mydivActive { +.windowActive { z-index: 100; } diff --git a/window-engine/window-engine.js b/window-engine/window-engine.js index 60eb5e2..2e1e8d8 100644 --- a/window-engine/window-engine.js +++ b/window-engine/window-engine.js @@ -66,9 +66,9 @@ function dragElement(elmnt) { document.ontouchmove = elementDrag; var active = document.getElementsByClassName("window"); for (i = active.length - 1; i > -1; i--) { - active[i].classList.remove("mydivActive"); + active[i].classList.remove("windowActive"); } - document.getElementById(elmnt.id).className += " mydivActive"; + document.getElementById(elmnt.id).className += " windowActive"; } function elementDrag(e) { @@ -112,17 +112,17 @@ function fadeIn(elem, ms) { elem.style.opacity = opacity; var active = document.getElementsByClassName("window"); for (i = active.length - 1; i > -1; i--) { - active[i].classList.remove("mydivActive"); + active[i].classList.remove("windowActive"); } - elem.className += " mydivActive"; + elem.className += " windowActive"; }, 50); } else { elem.style.opacity = 0.9; var active = document.getElementsByClassName("window"); for (i = active.length - 1; i > -1; i--) { - active[i].classList.remove("mydivActive"); + active[i].classList.remove("windowActive"); } - elem.className += " mydivActive"; + elem.className += " windowActive"; } } @@ -142,8 +142,8 @@ function fadeOut(elem, ms) { elem.style.display = "none"; var active = document.getElementsByClassName("window"); for (i = active.length - 1; i > -1; i--) { - active[i].classList.remove("mydivActive"); + active[i].classList.remove("windowActive"); } - elem.className += " mydivActive"; + elem.className += " windowActive"; } } diff --git a/window-engine/window-engine.min.js b/window-engine/window-engine.min.js index f9bd26b..84173e0 100644 --- a/window-engine/window-engine.min.js +++ b/window-engine/window-engine.min.js @@ -1,2 +1,2 @@ /* Window Engine - MIT License - Copyright (c) 2019 Gauthier Staehler */ -var 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);for(i=1;i<=lastWindow;i++)createWindow(i);function createWindow(e){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("window"+e),50),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("window"+e).style.display&&(t=!1),t&&(document.getElementById("window"+e).style="position: absolute;",document.getElementById("window"+e).style="top: 80px;",fadeIn(document.getElementById("window"+e),50)),t=!1},dragElement(document.getElementById("window"+e)),t=!0}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var l=0,m=0,d=0,s=0;function a(t){if(!1 in document.documentElement&&t.preventDefault(),o=t.clientX,c=t.clientY,"ontouchstart"in document.documentElement)try{d=t.touches[0].clientX,s=t.touches[0].clientY}catch{}document.onmouseup=y,document.onmousemove=u,document.ontouchend=y,document.ontouchmove=u;var n=document.getElementsByClassName("window");for(i=n.length-1;i>-1;i--)n[i].classList.remove("mydivActive");document.getElementById(e.id).className+=" mydivActive"}function u(i){i.preventDefault(),"ontouchstart"in document.documentElement?(l=d-i.touches[0].clientX,m=s-i.touches[0].clientY,d=i.touches[0].clientX,s=i.touches[0].clientY,e.style.top=e.offsetTop-m+"px",e.style.left=e.offsetLeft-l+"px"):(t=o-i.clientX,n=c-i.clientY,o=i.clientX,c=i.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function y(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=a,document.getElementById(e.id+"header").ontouchstart=a)}function fadeIn(e,t){if(e.style.opacity=0,e.style.display="initial",e.classList.contains("fade"))var n=0,o=setInterval(function(){(n+=10/t)>=1&&(clearInterval(o),n=.9),e.style.opacity=n;var c=document.getElementsByClassName("window");for(i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"},50);else{e.style.opacity=.9;var c=document.getElementsByClassName("window");for(i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"}}function fadeOut(e,t){if(e.classList.contains("fade"))var n=1,o=setInterval(function(){(n-=10/t)<=0&&(clearInterval(o),n=0,e.style.display="none"),e.style.opacity=n},50);else{e.style.display="none";var c=document.getElementsByClassName("window");for(i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"}} \ No newline at end of file +var 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);for(i=1;i<=lastWindow;i++)createWindow(i);function createWindow(e){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("window"+e),50),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("window"+e).style.display&&(t=!1),t&&(document.getElementById("window"+e).style="position: absolute;",document.getElementById("window"+e).style="top: 80px;",fadeIn(document.getElementById("window"+e),50)),t=!1},dragElement(document.getElementById("window"+e)),t=!0}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var l=0,d=0,s=0,a=0;function m(t){if(!1 in document.documentElement&&t.preventDefault(),o=t.clientX,c=t.clientY,"ontouchstart"in document.documentElement)try{s=t.touches[0].clientX,a=t.touches[0].clientY}catch{}document.onmouseup=r,document.onmousemove=u,document.ontouchend=r,document.ontouchmove=u;var n=document.getElementsByClassName("window");for(i=n.length-1;i>-1;i--)n[i].classList.remove("windowActive");document.getElementById(e.id).className+=" windowActive"}function u(i){i.preventDefault(),"ontouchstart"in document.documentElement?(l=s-i.touches[0].clientX,d=a-i.touches[0].clientY,s=i.touches[0].clientX,a=i.touches[0].clientY,e.style.top=e.offsetTop-d+"px",e.style.left=e.offsetLeft-l+"px"):(t=o-i.clientX,n=c-i.clientY,o=i.clientX,c=i.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function r(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=m,document.getElementById(e.id+"header").ontouchstart=m)}function fadeIn(e,t){if(e.style.opacity=0,e.style.display="initial",e.classList.contains("fade"))var n=0,o=setInterval(function(){(n+=10/t)>=1&&(clearInterval(o),n=.9),e.style.opacity=n;var c=document.getElementsByClassName("window");for(i=c.length-1;i>-1;i--)c[i].classList.remove("windowActive");e.className+=" windowActive"},50);else{e.style.opacity=.9;var c=document.getElementsByClassName("window");for(i=c.length-1;i>-1;i--)c[i].classList.remove("windowActive");e.className+=" windowActive"}}function fadeOut(e,t){if(e.classList.contains("fade"))var n=1,o=setInterval(function(){(n-=10/t)<=0&&(clearInterval(o),n=0,e.style.display="none"),e.style.opacity=n},50);else{e.style.display="none";var c=document.getElementsByClassName("window");for(i=c.length-1;i>-1;i--)c[i].classList.remove("windowActive");e.className+=" windowActive"}} \ No newline at end of file From c0bbe11591dc9bf9be3a1489707ef0491d1bf52d Mon Sep 17 00:00:00 2001 From: "gauthier.staehler" Date: Fri, 4 Oct 2019 15:14:38 +0200 Subject: [PATCH 10/40] Remove useless code --- window-engine/window-engine.css | 1 - 1 file changed, 1 deletion(-) diff --git a/window-engine/window-engine.css b/window-engine/window-engine.css index 7646ed5..79dbd43 100644 --- a/window-engine/window-engine.css +++ b/window-engine/window-engine.css @@ -36,7 +36,6 @@ .mainWindow { padding: 20px; - cursor: default; } [id^="closeButton"] { From 9a5b590095cd8121a9b834ec86ba646e676c0b50 Mon Sep 17 00:00:00 2001 From: "gauthier.staehler" Date: Fri, 4 Oct 2019 17:10:02 +0200 Subject: [PATCH 11/40] Remove useless code --- window-engine/window-engine.js | 3 +-- window-engine/window-engine.min.js | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/window-engine/window-engine.js b/window-engine/window-engine.js index 2e1e8d8..e635996 100644 --- a/window-engine/window-engine.js +++ b/window-engine/window-engine.js @@ -22,8 +22,7 @@ function createWindow(id) { isOut = false; } if (isOut) { - document.getElementById("window" + id).style = "position: absolute;"; - document.getElementById("window" + id).style = "top: 80px;"; + document.getElementById("window" + id).cssText = "position: absolute; top: 80px;"; fadeIn(document.getElementById("window" + id), 50); } isOut = false; diff --git a/window-engine/window-engine.min.js b/window-engine/window-engine.min.js index 84173e0..2a34e23 100644 --- a/window-engine/window-engine.min.js +++ b/window-engine/window-engine.min.js @@ -1,2 +1,2 @@ /* Window Engine - MIT License - Copyright (c) 2019 Gauthier Staehler */ -var 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);for(i=1;i<=lastWindow;i++)createWindow(i);function createWindow(e){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("window"+e),50),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("window"+e).style.display&&(t=!1),t&&(document.getElementById("window"+e).style="position: absolute;",document.getElementById("window"+e).style="top: 80px;",fadeIn(document.getElementById("window"+e),50)),t=!1},dragElement(document.getElementById("window"+e)),t=!0}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var l=0,d=0,s=0,a=0;function m(t){if(!1 in document.documentElement&&t.preventDefault(),o=t.clientX,c=t.clientY,"ontouchstart"in document.documentElement)try{s=t.touches[0].clientX,a=t.touches[0].clientY}catch{}document.onmouseup=r,document.onmousemove=u,document.ontouchend=r,document.ontouchmove=u;var n=document.getElementsByClassName("window");for(i=n.length-1;i>-1;i--)n[i].classList.remove("windowActive");document.getElementById(e.id).className+=" windowActive"}function u(i){i.preventDefault(),"ontouchstart"in document.documentElement?(l=s-i.touches[0].clientX,d=a-i.touches[0].clientY,s=i.touches[0].clientX,a=i.touches[0].clientY,e.style.top=e.offsetTop-d+"px",e.style.left=e.offsetLeft-l+"px"):(t=o-i.clientX,n=c-i.clientY,o=i.clientX,c=i.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function r(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=m,document.getElementById(e.id+"header").ontouchstart=m)}function fadeIn(e,t){if(e.style.opacity=0,e.style.display="initial",e.classList.contains("fade"))var n=0,o=setInterval(function(){(n+=10/t)>=1&&(clearInterval(o),n=.9),e.style.opacity=n;var c=document.getElementsByClassName("window");for(i=c.length-1;i>-1;i--)c[i].classList.remove("windowActive");e.className+=" windowActive"},50);else{e.style.opacity=.9;var c=document.getElementsByClassName("window");for(i=c.length-1;i>-1;i--)c[i].classList.remove("windowActive");e.className+=" windowActive"}}function fadeOut(e,t){if(e.classList.contains("fade"))var n=1,o=setInterval(function(){(n-=10/t)<=0&&(clearInterval(o),n=0,e.style.display="none"),e.style.opacity=n},50);else{e.style.display="none";var c=document.getElementsByClassName("window");for(i=c.length-1;i>-1;i--)c[i].classList.remove("windowActive");e.className+=" windowActive"}} \ No newline at end of file +var 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);for(i=1;i<=lastWindow;i++)createWindow(i);function createWindow(e){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("window"+e),50),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("window"+e).style.display&&(t=!1),t&&(document.getElementById("window"+e).cssText="position: absolute; top: 80px;",fadeIn(document.getElementById("window"+e),50)),t=!1},dragElement(document.getElementById("window"+e)),t=!0}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var l=0,s=0,d=0,a=0;function m(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{}document.onmouseup=r,document.onmousemove=u,document.ontouchend=r,document.ontouchmove=u;var n=document.getElementsByClassName("window");for(i=n.length-1;i>-1;i--)n[i].classList.remove("windowActive");document.getElementById(e.id).className+=" windowActive"}function u(i){i.preventDefault(),"ontouchstart"in document.documentElement?(l=d-i.touches[0].clientX,s=a-i.touches[0].clientY,d=i.touches[0].clientX,a=i.touches[0].clientY,e.style.top=e.offsetTop-s+"px",e.style.left=e.offsetLeft-l+"px"):(t=o-i.clientX,n=c-i.clientY,o=i.clientX,c=i.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function r(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=m,document.getElementById(e.id+"header").ontouchstart=m)}function fadeIn(e,t){if(e.style.opacity=0,e.style.display="initial",e.classList.contains("fade"))var n=0,o=setInterval(function(){(n+=10/t)>=1&&(clearInterval(o),n=.9),e.style.opacity=n;var c=document.getElementsByClassName("window");for(i=c.length-1;i>-1;i--)c[i].classList.remove("windowActive");e.className+=" windowActive"},50);else{e.style.opacity=.9;var c=document.getElementsByClassName("window");for(i=c.length-1;i>-1;i--)c[i].classList.remove("windowActive");e.className+=" windowActive"}}function fadeOut(e,t){if(e.classList.contains("fade"))var n=1,o=setInterval(function(){(n-=10/t)<=0&&(clearInterval(o),n=0,e.style.display="none"),e.style.opacity=n},50);else{e.style.display="none";var c=document.getElementsByClassName("window");for(i=c.length-1;i>-1;i--)c[i].classList.remove("windowActive");e.className+=" windowActive"}} \ No newline at end of file From f433ab42c6340ccc741a627712e971b8bdbdd782 Mon Sep 17 00:00:00 2001 From: "gauthier.staehler" Date: Mon, 7 Oct 2019 12:42:48 +0200 Subject: [PATCH 12/40] Remove bug of position --- window-engine/window-engine.js | 245 +++++++++++++++-------------- window-engine/window-engine.min.js | 2 +- 2 files changed, 124 insertions(+), 123 deletions(-) diff --git a/window-engine/window-engine.js b/window-engine/window-engine.js index e635996..f631807 100644 --- a/window-engine/window-engine.js +++ b/window-engine/window-engine.js @@ -8,141 +8,142 @@ document.getElementsByTagName('head')[0].appendChild(metaTag); const lastWindow = document.getElementsByClassName("windowGroup")[0].lastElementChild.id.substring(6); for (i = 1; i <= lastWindow; i++) { - createWindow(i); + createWindow(i); } function createWindow(id) { - var isOut; - document.getElementById("closeButton" + id).onclick = function () { - fadeOut(document.getElementById("window" + id), 50); - isOut = true; - }; - document.getElementById("button" + id).onclick = function () { - if (document.getElementById("window" + id).style.display === "initial") { - isOut = false; - } - if (isOut) { - document.getElementById("window" + id).cssText = "position: absolute; top: 80px;"; - fadeIn(document.getElementById("window" + id), 50); - } - isOut = false; - }; - dragElement(document.getElementById("window" + id)); - isOut = true; + var isOut; + document.getElementById("closeButton" + id).onclick = function () { + fadeOut(document.getElementById("window" + id), 50); + isOut = true; + }; + document.getElementById("button" + id).onclick = function () { + if (document.getElementById("window" + id).style.display === "initial") { + isOut = false; + } + if (isOut) { + document.getElementById("window" + id).style = "position: absolute;"; + document.getElementById("window" + id).style = "top: 80px;"; + fadeIn(document.getElementById("window" + id), 50); + } + isOut = false; + }; + dragElement(document.getElementById("window" + id)); + isOut = true; } 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; - } + 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; + } - 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 {} - } - document.onmouseup = closeDragElement; - document.onmousemove = elementDrag; - document.ontouchend = closeDragElement; - document.ontouchmove = elementDrag; - var active = document.getElementsByClassName("window"); - for (i = active.length - 1; i > -1; i--) { - active[i].classList.remove("windowActive"); - } - document.getElementById(elmnt.id).className += " windowActive"; - } + 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 {} + } + document.onmouseup = closeDragElement; + document.onmousemove = elementDrag; + document.ontouchend = closeDragElement; + document.ontouchmove = elementDrag; + var active = document.getElementsByClassName("window"); + for (i = active.length - 1; i > -1; i--) { + active[i].classList.remove("windowActive"); + } + document.getElementById(elmnt.id).className += " windowActive"; + } - 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 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 closeDragElement() { + document.onmouseup = null; + document.onmousemove = null; + document.ontouchend = null; + document.ontouchmove = null; + } } function fadeIn(elem, ms) { - elem.style.opacity = 0; - elem.style.display = "initial"; - if (elem.classList.contains("fade")) { - var opacity = 0; - var timer = setInterval(function () { - opacity += 10 / ms; - if (opacity >= 1) { - clearInterval(timer); - opacity = 0.9; - } - elem.style.opacity = opacity; - var active = document.getElementsByClassName("window"); - for (i = active.length - 1; i > -1; i--) { - active[i].classList.remove("windowActive"); - } - elem.className += " windowActive"; - }, 50); - } else { - elem.style.opacity = 0.9; - var active = document.getElementsByClassName("window"); - for (i = active.length - 1; i > -1; i--) { - active[i].classList.remove("windowActive"); - } - elem.className += " windowActive"; - } + elem.style.opacity = 0; + elem.style.display = "initial"; + if (elem.classList.contains("fade")) { + var opacity = 0; + var timer = setInterval(function () { + opacity += 10 / ms; + if (opacity >= 1) { + clearInterval(timer); + opacity = 0.9; + } + elem.style.opacity = opacity; + var active = document.getElementsByClassName("window"); + for (i = active.length - 1; i > -1; i--) { + active[i].classList.remove("windowActive"); + } + elem.className += " windowActive"; + }, 50); + } else { + elem.style.opacity = 0.9; + var active = document.getElementsByClassName("window"); + for (i = active.length - 1; i > -1; i--) { + active[i].classList.remove("windowActive"); + } + elem.className += " windowActive"; + } } function fadeOut(elem, ms) { - if (elem.classList.contains("fade")) { - var opacity = 1; - var timer = setInterval(function () { - opacity -= 10 / ms; - if (opacity <= 0) { - clearInterval(timer); - opacity = 0; - elem.style.display = "none"; - } - elem.style.opacity = opacity; - }, 50); - } else { - elem.style.display = "none"; - var active = document.getElementsByClassName("window"); - for (i = active.length - 1; i > -1; i--) { - active[i].classList.remove("windowActive"); - } - elem.className += " windowActive"; - } + if (elem.classList.contains("fade")) { + var opacity = 1; + var timer = setInterval(function () { + opacity -= 10 / ms; + if (opacity <= 0) { + clearInterval(timer); + opacity = 0; + elem.style.display = "none"; + } + elem.style.opacity = opacity; + }, 50); + } else { + elem.style.display = "none"; + var active = document.getElementsByClassName("window"); + for (i = active.length - 1; i > -1; i--) { + active[i].classList.remove("windowActive"); + } + elem.className += " windowActive"; + } } diff --git a/window-engine/window-engine.min.js b/window-engine/window-engine.min.js index 2a34e23..84173e0 100644 --- a/window-engine/window-engine.min.js +++ b/window-engine/window-engine.min.js @@ -1,2 +1,2 @@ /* Window Engine - MIT License - Copyright (c) 2019 Gauthier Staehler */ -var 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);for(i=1;i<=lastWindow;i++)createWindow(i);function createWindow(e){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("window"+e),50),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("window"+e).style.display&&(t=!1),t&&(document.getElementById("window"+e).cssText="position: absolute; top: 80px;",fadeIn(document.getElementById("window"+e),50)),t=!1},dragElement(document.getElementById("window"+e)),t=!0}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var l=0,s=0,d=0,a=0;function m(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{}document.onmouseup=r,document.onmousemove=u,document.ontouchend=r,document.ontouchmove=u;var n=document.getElementsByClassName("window");for(i=n.length-1;i>-1;i--)n[i].classList.remove("windowActive");document.getElementById(e.id).className+=" windowActive"}function u(i){i.preventDefault(),"ontouchstart"in document.documentElement?(l=d-i.touches[0].clientX,s=a-i.touches[0].clientY,d=i.touches[0].clientX,a=i.touches[0].clientY,e.style.top=e.offsetTop-s+"px",e.style.left=e.offsetLeft-l+"px"):(t=o-i.clientX,n=c-i.clientY,o=i.clientX,c=i.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function r(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=m,document.getElementById(e.id+"header").ontouchstart=m)}function fadeIn(e,t){if(e.style.opacity=0,e.style.display="initial",e.classList.contains("fade"))var n=0,o=setInterval(function(){(n+=10/t)>=1&&(clearInterval(o),n=.9),e.style.opacity=n;var c=document.getElementsByClassName("window");for(i=c.length-1;i>-1;i--)c[i].classList.remove("windowActive");e.className+=" windowActive"},50);else{e.style.opacity=.9;var c=document.getElementsByClassName("window");for(i=c.length-1;i>-1;i--)c[i].classList.remove("windowActive");e.className+=" windowActive"}}function fadeOut(e,t){if(e.classList.contains("fade"))var n=1,o=setInterval(function(){(n-=10/t)<=0&&(clearInterval(o),n=0,e.style.display="none"),e.style.opacity=n},50);else{e.style.display="none";var c=document.getElementsByClassName("window");for(i=c.length-1;i>-1;i--)c[i].classList.remove("windowActive");e.className+=" windowActive"}} \ No newline at end of file +var 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);for(i=1;i<=lastWindow;i++)createWindow(i);function createWindow(e){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("window"+e),50),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("window"+e).style.display&&(t=!1),t&&(document.getElementById("window"+e).style="position: absolute;",document.getElementById("window"+e).style="top: 80px;",fadeIn(document.getElementById("window"+e),50)),t=!1},dragElement(document.getElementById("window"+e)),t=!0}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var l=0,d=0,s=0,a=0;function m(t){if(!1 in document.documentElement&&t.preventDefault(),o=t.clientX,c=t.clientY,"ontouchstart"in document.documentElement)try{s=t.touches[0].clientX,a=t.touches[0].clientY}catch{}document.onmouseup=r,document.onmousemove=u,document.ontouchend=r,document.ontouchmove=u;var n=document.getElementsByClassName("window");for(i=n.length-1;i>-1;i--)n[i].classList.remove("windowActive");document.getElementById(e.id).className+=" windowActive"}function u(i){i.preventDefault(),"ontouchstart"in document.documentElement?(l=s-i.touches[0].clientX,d=a-i.touches[0].clientY,s=i.touches[0].clientX,a=i.touches[0].clientY,e.style.top=e.offsetTop-d+"px",e.style.left=e.offsetLeft-l+"px"):(t=o-i.clientX,n=c-i.clientY,o=i.clientX,c=i.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function r(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=m,document.getElementById(e.id+"header").ontouchstart=m)}function fadeIn(e,t){if(e.style.opacity=0,e.style.display="initial",e.classList.contains("fade"))var n=0,o=setInterval(function(){(n+=10/t)>=1&&(clearInterval(o),n=.9),e.style.opacity=n;var c=document.getElementsByClassName("window");for(i=c.length-1;i>-1;i--)c[i].classList.remove("windowActive");e.className+=" windowActive"},50);else{e.style.opacity=.9;var c=document.getElementsByClassName("window");for(i=c.length-1;i>-1;i--)c[i].classList.remove("windowActive");e.className+=" windowActive"}}function fadeOut(e,t){if(e.classList.contains("fade"))var n=1,o=setInterval(function(){(n-=10/t)<=0&&(clearInterval(o),n=0,e.style.display="none"),e.style.opacity=n},50);else{e.style.display="none";var c=document.getElementsByClassName("window");for(i=c.length-1;i>-1;i--)c[i].classList.remove("windowActive");e.className+=" windowActive"}} \ No newline at end of file From 90e33a7def2f3b99e286b979fab1f3b12df831dc Mon Sep 17 00:00:00 2001 From: "gauthier.staehler" Date: Mon, 7 Oct 2019 12:50:47 +0200 Subject: [PATCH 13/40] Remove useless code --- window-engine/window-engine.js | 5 +---- window-engine/window-engine.min.js | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/window-engine/window-engine.js b/window-engine/window-engine.js index f631807..dde0e31 100644 --- a/window-engine/window-engine.js +++ b/window-engine/window-engine.js @@ -6,6 +6,7 @@ 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 (i = 1; i <= lastWindow; i++) { createWindow(i); @@ -64,7 +65,6 @@ function dragElement(elmnt) { document.onmousemove = elementDrag; document.ontouchend = closeDragElement; document.ontouchmove = elementDrag; - var active = document.getElementsByClassName("window"); for (i = active.length - 1; i > -1; i--) { active[i].classList.remove("windowActive"); } @@ -110,7 +110,6 @@ function fadeIn(elem, ms) { opacity = 0.9; } elem.style.opacity = opacity; - var active = document.getElementsByClassName("window"); for (i = active.length - 1; i > -1; i--) { active[i].classList.remove("windowActive"); } @@ -118,7 +117,6 @@ function fadeIn(elem, ms) { }, 50); } else { elem.style.opacity = 0.9; - var active = document.getElementsByClassName("window"); for (i = active.length - 1; i > -1; i--) { active[i].classList.remove("windowActive"); } @@ -140,7 +138,6 @@ function fadeOut(elem, ms) { }, 50); } else { elem.style.display = "none"; - var active = document.getElementsByClassName("window"); for (i = active.length - 1; i > -1; i--) { active[i].classList.remove("windowActive"); } diff --git a/window-engine/window-engine.min.js b/window-engine/window-engine.min.js index 84173e0..293b1eb 100644 --- a/window-engine/window-engine.min.js +++ b/window-engine/window-engine.min.js @@ -1,2 +1,2 @@ /* Window Engine - MIT License - Copyright (c) 2019 Gauthier Staehler */ -var 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);for(i=1;i<=lastWindow;i++)createWindow(i);function createWindow(e){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("window"+e),50),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("window"+e).style.display&&(t=!1),t&&(document.getElementById("window"+e).style="position: absolute;",document.getElementById("window"+e).style="top: 80px;",fadeIn(document.getElementById("window"+e),50)),t=!1},dragElement(document.getElementById("window"+e)),t=!0}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var l=0,d=0,s=0,a=0;function m(t){if(!1 in document.documentElement&&t.preventDefault(),o=t.clientX,c=t.clientY,"ontouchstart"in document.documentElement)try{s=t.touches[0].clientX,a=t.touches[0].clientY}catch{}document.onmouseup=r,document.onmousemove=u,document.ontouchend=r,document.ontouchmove=u;var n=document.getElementsByClassName("window");for(i=n.length-1;i>-1;i--)n[i].classList.remove("windowActive");document.getElementById(e.id).className+=" windowActive"}function u(i){i.preventDefault(),"ontouchstart"in document.documentElement?(l=s-i.touches[0].clientX,d=a-i.touches[0].clientY,s=i.touches[0].clientX,a=i.touches[0].clientY,e.style.top=e.offsetTop-d+"px",e.style.left=e.offsetLeft-l+"px"):(t=o-i.clientX,n=c-i.clientY,o=i.clientX,c=i.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function r(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=m,document.getElementById(e.id+"header").ontouchstart=m)}function fadeIn(e,t){if(e.style.opacity=0,e.style.display="initial",e.classList.contains("fade"))var n=0,o=setInterval(function(){(n+=10/t)>=1&&(clearInterval(o),n=.9),e.style.opacity=n;var c=document.getElementsByClassName("window");for(i=c.length-1;i>-1;i--)c[i].classList.remove("windowActive");e.className+=" windowActive"},50);else{e.style.opacity=.9;var c=document.getElementsByClassName("window");for(i=c.length-1;i>-1;i--)c[i].classList.remove("windowActive");e.className+=" windowActive"}}function fadeOut(e,t){if(e.classList.contains("fade"))var n=1,o=setInterval(function(){(n-=10/t)<=0&&(clearInterval(o),n=0,e.style.display="none"),e.style.opacity=n},50);else{e.style.display="none";var c=document.getElementsByClassName("window");for(i=c.length-1;i>-1;i--)c[i].classList.remove("windowActive");e.className+=" windowActive"}} \ No newline at end of file +var 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(i=1;i<=lastWindow;i++)createWindow(i);function createWindow(e){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("window"+e),50),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("window"+e).style.display&&(t=!1),t&&(document.getElementById("window"+e).style="position: absolute;",document.getElementById("window"+e).style="top: 80px;",fadeIn(document.getElementById("window"+e),50)),t=!1},dragElement(document.getElementById("window"+e)),t=!0}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var l=0,a=0,d=0,s=0;function m(t){if(!1 in document.documentElement&&t.preventDefault(),o=t.clientX,c=t.clientY,"ontouchstart"in document.documentElement)try{d=t.touches[0].clientX,s=t.touches[0].clientY}catch{}for(document.onmouseup=f,document.onmousemove=u,document.ontouchend=f,document.ontouchmove=u,i=active.length-1;i>-1;i--)active[i].classList.remove("windowActive");document.getElementById(e.id).className+=" windowActive"}function u(i){i.preventDefault(),"ontouchstart"in document.documentElement?(l=d-i.touches[0].clientX,a=s-i.touches[0].clientY,d=i.touches[0].clientX,s=i.touches[0].clientY,e.style.top=e.offsetTop-a+"px",e.style.left=e.offsetLeft-l+"px"):(t=o-i.clientX,n=c-i.clientY,o=i.clientX,c=i.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function f(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=m,document.getElementById(e.id+"header").ontouchstart=m)}function fadeIn(e,t){if(e.style.opacity=0,e.style.display="initial",e.classList.contains("fade"))var n=0,o=setInterval(function(){for((n+=10/t)>=1&&(clearInterval(o),n=.9),e.style.opacity=n,i=active.length-1;i>-1;i--)active[i].classList.remove("windowActive");e.className+=" windowActive"},50);else{for(e.style.opacity=.9,i=active.length-1;i>-1;i--)active[i].classList.remove("windowActive");e.className+=" windowActive"}}function fadeOut(e,t){if(e.classList.contains("fade"))var n=1,o=setInterval(function(){(n-=10/t)<=0&&(clearInterval(o),n=0,e.style.display="none"),e.style.opacity=n},50);else{for(e.style.display="none",i=active.length-1;i>-1;i--)active[i].classList.remove("windowActive");e.className+=" windowActive"}} \ No newline at end of file From 95a231daa7a106e25b9f463b084f40f57afea56c Mon Sep 17 00:00:00 2001 From: "gauthier.staehler" Date: Mon, 7 Oct 2019 13:17:42 +0200 Subject: [PATCH 14/40] Clean --- window-engine/window-engine.js | 4 ++-- window-engine/window-engine.min.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/window-engine/window-engine.js b/window-engine/window-engine.js index dde0e31..69430fa 100644 --- a/window-engine/window-engine.js +++ b/window-engine/window-engine.js @@ -1,6 +1,6 @@ /* Window Engine - MIT License - Copyright (c) 2019 Gauthier Staehler */ -var metaTag = document.createElement('meta'); +const metaTag = document.createElement('meta'); metaTag.name = "viewport"; metaTag.content = "user-scalable=0"; document.getElementsByTagName('head')[0].appendChild(metaTag); @@ -116,7 +116,7 @@ function fadeIn(elem, ms) { elem.className += " windowActive"; }, 50); } else { - elem.style.opacity = 0.9; + elem.style.opacity = "0.9"; for (i = active.length - 1; i > -1; i--) { active[i].classList.remove("windowActive"); } diff --git a/window-engine/window-engine.min.js b/window-engine/window-engine.min.js index 293b1eb..9f822bc 100644 --- a/window-engine/window-engine.min.js +++ b/window-engine/window-engine.min.js @@ -1,2 +1,2 @@ /* Window Engine - MIT License - Copyright (c) 2019 Gauthier Staehler */ -var 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(i=1;i<=lastWindow;i++)createWindow(i);function createWindow(e){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("window"+e),50),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("window"+e).style.display&&(t=!1),t&&(document.getElementById("window"+e).style="position: absolute;",document.getElementById("window"+e).style="top: 80px;",fadeIn(document.getElementById("window"+e),50)),t=!1},dragElement(document.getElementById("window"+e)),t=!0}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var l=0,a=0,d=0,s=0;function m(t){if(!1 in document.documentElement&&t.preventDefault(),o=t.clientX,c=t.clientY,"ontouchstart"in document.documentElement)try{d=t.touches[0].clientX,s=t.touches[0].clientY}catch{}for(document.onmouseup=f,document.onmousemove=u,document.ontouchend=f,document.ontouchmove=u,i=active.length-1;i>-1;i--)active[i].classList.remove("windowActive");document.getElementById(e.id).className+=" windowActive"}function u(i){i.preventDefault(),"ontouchstart"in document.documentElement?(l=d-i.touches[0].clientX,a=s-i.touches[0].clientY,d=i.touches[0].clientX,s=i.touches[0].clientY,e.style.top=e.offsetTop-a+"px",e.style.left=e.offsetLeft-l+"px"):(t=o-i.clientX,n=c-i.clientY,o=i.clientX,c=i.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function f(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=m,document.getElementById(e.id+"header").ontouchstart=m)}function fadeIn(e,t){if(e.style.opacity=0,e.style.display="initial",e.classList.contains("fade"))var n=0,o=setInterval(function(){for((n+=10/t)>=1&&(clearInterval(o),n=.9),e.style.opacity=n,i=active.length-1;i>-1;i--)active[i].classList.remove("windowActive");e.className+=" windowActive"},50);else{for(e.style.opacity=.9,i=active.length-1;i>-1;i--)active[i].classList.remove("windowActive");e.className+=" windowActive"}}function fadeOut(e,t){if(e.classList.contains("fade"))var n=1,o=setInterval(function(){(n-=10/t)<=0&&(clearInterval(o),n=0,e.style.display="none"),e.style.opacity=n},50);else{for(e.style.display="none",i=active.length-1;i>-1;i--)active[i].classList.remove("windowActive");e.className+=" windowActive"}} \ No newline at end of file +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(i=1;i<=lastWindow;i++)createWindow(i);function createWindow(e){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("window"+e),50),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("window"+e).style.display&&(t=!1),t&&(document.getElementById("window"+e).style="position: absolute;",document.getElementById("window"+e).style="top: 80px;",fadeIn(document.getElementById("window"+e),50)),t=!1},dragElement(document.getElementById("window"+e)),t=!0}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var l=0,a=0,d=0,s=0;function m(t){if(!1 in document.documentElement&&t.preventDefault(),o=t.clientX,c=t.clientY,"ontouchstart"in document.documentElement)try{d=t.touches[0].clientX,s=t.touches[0].clientY}catch{}for(document.onmouseup=f,document.onmousemove=u,document.ontouchend=f,document.ontouchmove=u,i=active.length-1;i>-1;i--)active[i].classList.remove("windowActive");document.getElementById(e.id).className+=" windowActive"}function u(i){i.preventDefault(),"ontouchstart"in document.documentElement?(l=d-i.touches[0].clientX,a=s-i.touches[0].clientY,d=i.touches[0].clientX,s=i.touches[0].clientY,e.style.top=e.offsetTop-a+"px",e.style.left=e.offsetLeft-l+"px"):(t=o-i.clientX,n=c-i.clientY,o=i.clientX,c=i.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function f(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=m,document.getElementById(e.id+"header").ontouchstart=m)}function fadeIn(e,t){if(e.style.opacity=0,e.style.display="initial",e.classList.contains("fade"))var n=0,o=setInterval(function(){for((n+=10/t)>=1&&(clearInterval(o),n=.9),e.style.opacity=n,i=active.length-1;i>-1;i--)active[i].classList.remove("windowActive");e.className+=" windowActive"},50);else{for(e.style.opacity="0.9",i=active.length-1;i>-1;i--)active[i].classList.remove("windowActive");e.className+=" windowActive"}}function fadeOut(e,t){if(e.classList.contains("fade"))var n=1,o=setInterval(function(){(n-=10/t)<=0&&(clearInterval(o),n=0,e.style.display="none"),e.style.opacity=n},50);else{for(e.style.display="none",i=active.length-1;i>-1;i--)active[i].classList.remove("windowActive");e.className+=" windowActive"}} \ No newline at end of file From 8b432219c905764463704a8947c7fb99cc2d582a Mon Sep 17 00:00:00 2001 From: "gauthier.staehler" Date: Mon, 7 Oct 2019 14:12:10 +0200 Subject: [PATCH 15/40] Update README --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index b3ea806..1645531 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,7 @@ [![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) +[![CodeFactor](https://www.codefactor.io/repository/github/gstaehler/window-engine/badge)](https://www.codefactor.io/repository/github/gstaehler/window-engine) ![Demo](https://gstaehler.github.io/window_engine/window.png) From 61c6a5840d1315350e2796c7e15f46a9e671f8f9 Mon Sep 17 00:00:00 2001 From: "gauthier.staehler" Date: Mon, 7 Oct 2019 14:18:31 +0200 Subject: [PATCH 16/40] Clean CSS --- demo.css | 6 +++--- window-engine/window-engine.css | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/demo.css b/demo.css index e392a05..18c87a9 100644 --- a/demo.css +++ b/demo.css @@ -10,17 +10,17 @@ body { footer { position: fixed; - bottom: 0px; + bottom: 0; background-color: rebeccapurple; width: 100%; height: 48px; padding: 4px; - box-shadow: 0px 2px 2px 1px black; + box-shadow: 0 2px 2px 1px black; } header { position: fixed; - top: 0px; + top: 0; background-color: rebeccapurple; width: 100%; height: 20px; diff --git a/window-engine/window-engine.css b/window-engine/window-engine.css index 79dbd43..2b56aef 100644 --- a/window-engine/window-engine.css +++ b/window-engine/window-engine.css @@ -7,7 +7,7 @@ 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; @@ -18,7 +18,7 @@ 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; display: flex; From 4405fb0fd4ecd91058ad95817c9aa111535fc2f2 Mon Sep 17 00:00:00 2001 From: "gauthier.staehler" Date: Mon, 7 Oct 2019 16:23:07 +0200 Subject: [PATCH 17/40] Clean --- window-engine/window-engine.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/window-engine/window-engine.js b/window-engine/window-engine.js index 69430fa..99d00b8 100644 --- a/window-engine/window-engine.js +++ b/window-engine/window-engine.js @@ -8,7 +8,7 @@ document.getElementsByTagName('head')[0].appendChild(metaTag); const lastWindow = document.getElementsByClassName("windowGroup")[0].lastElementChild.id.substring(6); const active = document.getElementsByClassName("window"); -for (i = 1; i <= lastWindow; i++) { +for (let i = 1; i <= lastWindow; i++) { createWindow(i); } @@ -65,7 +65,7 @@ function dragElement(elmnt) { document.onmousemove = elementDrag; document.ontouchend = closeDragElement; document.ontouchmove = elementDrag; - for (i = active.length - 1; i > -1; i--) { + for (let i = active.length - 1; i > -1; i--) { active[i].classList.remove("windowActive"); } document.getElementById(elmnt.id).className += " windowActive"; @@ -117,7 +117,7 @@ function fadeIn(elem, ms) { }, 50); } else { elem.style.opacity = "0.9"; - for (i = active.length - 1; i > -1; i--) { + for (let i = active.length - 1; i > -1; i--) { active[i].classList.remove("windowActive"); } elem.className += " windowActive"; From 35dea66fc10720a53cf3979ad2b84742147127db Mon Sep 17 00:00:00 2001 From: "gauthier.staehler" Date: Mon, 7 Oct 2019 16:35:58 +0200 Subject: [PATCH 18/40] Clean --- window-engine/window-engine.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/window-engine/window-engine.js b/window-engine/window-engine.js index 99d00b8..557599e 100644 --- a/window-engine/window-engine.js +++ b/window-engine/window-engine.js @@ -138,7 +138,7 @@ function fadeOut(elem, ms) { }, 50); } else { elem.style.display = "none"; - for (i = active.length - 1; i > -1; i--) { + for (let i = active.length - 1; i > -1; i--) { active[i].classList.remove("windowActive"); } elem.className += " windowActive"; From bb79f7199ace47265d3a3f14764968407aa898d5 Mon Sep 17 00:00:00 2001 From: "gauthier.staehler" Date: Mon, 7 Oct 2019 16:42:20 +0200 Subject: [PATCH 19/40] Clean --- window-engine/window-engine.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/window-engine/window-engine.js b/window-engine/window-engine.js index 557599e..e313518 100644 --- a/window-engine/window-engine.js +++ b/window-engine/window-engine.js @@ -1,9 +1,9 @@ /* Window Engine - MIT License - Copyright (c) 2019 Gauthier Staehler */ -const metaTag = document.createElement('meta'); +const metaTag = document.createElement("meta"); metaTag.name = "viewport"; metaTag.content = "user-scalable=0"; -document.getElementsByTagName('head')[0].appendChild(metaTag); +document.getElementsByTagName("head")[0].appendChild(metaTag); const lastWindow = document.getElementsByClassName("windowGroup")[0].lastElementChild.id.substring(6); const active = document.getElementsByClassName("window"); From 6f6d387b475a05427ad6449f844a0f31618db2c4 Mon Sep 17 00:00:00 2001 From: "gauthier.staehler" Date: Mon, 7 Oct 2019 16:48:21 +0200 Subject: [PATCH 20/40] Clean --- window-engine/window-engine.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/window-engine/window-engine.js b/window-engine/window-engine.js index e313518..9ff4e77 100644 --- a/window-engine/window-engine.js +++ b/window-engine/window-engine.js @@ -110,7 +110,7 @@ function fadeIn(elem, ms) { opacity = 0.9; } elem.style.opacity = opacity; - for (i = active.length - 1; i > -1; i--) { + for (let i = active.length - 1; i > -1; i--) { active[i].classList.remove("windowActive"); } elem.className += " windowActive"; From a9e4ebf78142656d968eaf650de9c27789285923 Mon Sep 17 00:00:00 2001 From: "gauthier.staehler" Date: Mon, 7 Oct 2019 16:59:47 +0200 Subject: [PATCH 21/40] Remove duplicated code --- window-engine/window-engine.js | 18 +++++++++--------- window-engine/window-engine.min.js | 2 +- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/window-engine/window-engine.js b/window-engine/window-engine.js index 9ff4e77..f4b9131 100644 --- a/window-engine/window-engine.js +++ b/window-engine/window-engine.js @@ -65,9 +65,7 @@ function dragElement(elmnt) { document.onmousemove = elementDrag; document.ontouchend = closeDragElement; document.ontouchmove = elementDrag; - for (let i = active.length - 1; i > -1; i--) { - active[i].classList.remove("windowActive"); - } + activeWindow(); document.getElementById(elmnt.id).className += " windowActive"; } @@ -117,9 +115,7 @@ function fadeIn(elem, ms) { }, 50); } else { elem.style.opacity = "0.9"; - for (let i = active.length - 1; i > -1; i--) { - active[i].classList.remove("windowActive"); - } + activeWindow(); elem.className += " windowActive"; } } @@ -138,9 +134,13 @@ function fadeOut(elem, ms) { }, 50); } else { elem.style.display = "none"; - for (let i = active.length - 1; i > -1; i--) { - active[i].classList.remove("windowActive"); - } + activeWindow(); elem.className += " windowActive"; } } + +function activeWindow() { + for (let i = active.length - 1; i > -1; i--) { + active[i].classList.remove("windowActive"); + } +} diff --git a/window-engine/window-engine.min.js b/window-engine/window-engine.min.js index 9f822bc..604d2f4 100644 --- a/window-engine/window-engine.min.js +++ b/window-engine/window-engine.min.js @@ -1,2 +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(i=1;i<=lastWindow;i++)createWindow(i);function createWindow(e){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("window"+e),50),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("window"+e).style.display&&(t=!1),t&&(document.getElementById("window"+e).style="position: absolute;",document.getElementById("window"+e).style="top: 80px;",fadeIn(document.getElementById("window"+e),50)),t=!1},dragElement(document.getElementById("window"+e)),t=!0}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var l=0,a=0,d=0,s=0;function m(t){if(!1 in document.documentElement&&t.preventDefault(),o=t.clientX,c=t.clientY,"ontouchstart"in document.documentElement)try{d=t.touches[0].clientX,s=t.touches[0].clientY}catch{}for(document.onmouseup=f,document.onmousemove=u,document.ontouchend=f,document.ontouchmove=u,i=active.length-1;i>-1;i--)active[i].classList.remove("windowActive");document.getElementById(e.id).className+=" windowActive"}function u(i){i.preventDefault(),"ontouchstart"in document.documentElement?(l=d-i.touches[0].clientX,a=s-i.touches[0].clientY,d=i.touches[0].clientX,s=i.touches[0].clientY,e.style.top=e.offsetTop-a+"px",e.style.left=e.offsetLeft-l+"px"):(t=o-i.clientX,n=c-i.clientY,o=i.clientX,c=i.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function f(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=m,document.getElementById(e.id+"header").ontouchstart=m)}function fadeIn(e,t){if(e.style.opacity=0,e.style.display="initial",e.classList.contains("fade"))var n=0,o=setInterval(function(){for((n+=10/t)>=1&&(clearInterval(o),n=.9),e.style.opacity=n,i=active.length-1;i>-1;i--)active[i].classList.remove("windowActive");e.className+=" windowActive"},50);else{for(e.style.opacity="0.9",i=active.length-1;i>-1;i--)active[i].classList.remove("windowActive");e.className+=" windowActive"}}function fadeOut(e,t){if(e.classList.contains("fade"))var n=1,o=setInterval(function(){(n-=10/t)<=0&&(clearInterval(o),n=0,e.style.display="none"),e.style.opacity=n},50);else{for(e.style.display="none",i=active.length-1;i>-1;i--)active[i].classList.remove("windowActive");e.className+=" windowActive"}} \ No newline at end of file +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){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("window"+e),50),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("window"+e).style.display&&(t=!1),t&&(document.getElementById("window"+e).style="position: absolute;",document.getElementById("window"+e).style="top: 80px;",fadeIn(document.getElementById("window"+e),50)),t=!1},dragElement(document.getElementById("window"+e)),t=!0}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 s(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{}document.onmouseup=u,document.onmousemove=m,document.ontouchend=u,document.ontouchmove=m,activeWindow(),document.getElementById(e.id).className+=" windowActive"}function m(s){s.preventDefault(),"ontouchstart"in document.documentElement?(i=d-s.touches[0].clientX,l=a-s.touches[0].clientY,d=s.touches[0].clientX,a=s.touches[0].clientY,e.style.top=e.offsetTop-l+"px",e.style.left=e.offsetLeft-i+"px"):(t=o-s.clientX,n=c-s.clientY,o=s.clientX,c=s.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function u(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=s,document.getElementById(e.id+"header").ontouchstart=s)}function fadeIn(e,t){if(e.style.opacity=0,e.style.display="initial",e.classList.contains("fade"))var n=0,o=setInterval(function(){(n+=10/t)>=1&&(clearInterval(o),n=.9),e.style.opacity=n;for(let e=active.length-1;e>-1;e--)active[e].classList.remove("windowActive");e.className+=" windowActive"},50);else e.style.opacity="0.9",activeWindow(),e.className+=" windowActive"}function fadeOut(e,t){if(e.classList.contains("fade"))var n=1,o=setInterval(function(){(n-=10/t)<=0&&(clearInterval(o),n=0,e.style.display="none"),e.style.opacity=n},50);else e.style.display="none",activeWindow(),e.className+=" windowActive"}function activeWindow(){for(let e=active.length-1;e>-1;e--)active[e].classList.remove("windowActive")} \ No newline at end of file From 5dd80cd48b576a765a1b6e79170a3e353be70ee2 Mon Sep 17 00:00:00 2001 From: "gauthier.staehler" Date: Fri, 25 Oct 2019 10:50:05 +0200 Subject: [PATCH 22/40] Improve fade effect --- window-engine/window-engine.js | 12 ++++++------ window-engine/window-engine.min.js | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/window-engine/window-engine.js b/window-engine/window-engine.js index f4b9131..e7513bc 100644 --- a/window-engine/window-engine.js +++ b/window-engine/window-engine.js @@ -15,7 +15,7 @@ for (let i = 1; i <= lastWindow; i++) { function createWindow(id) { var isOut; document.getElementById("closeButton" + id).onclick = function () { - fadeOut(document.getElementById("window" + id), 50); + fadeOut(document.getElementById("window" + id)); isOut = true; }; document.getElementById("button" + id).onclick = function () { @@ -25,7 +25,7 @@ function createWindow(id) { if (isOut) { document.getElementById("window" + id).style = "position: absolute;"; document.getElementById("window" + id).style = "top: 80px;"; - fadeIn(document.getElementById("window" + id), 50); + fadeIn(document.getElementById("window" + id)); } isOut = false; }; @@ -96,13 +96,13 @@ function dragElement(elmnt) { } } -function fadeIn(elem, ms) { +function fadeIn(elem) { elem.style.opacity = 0; elem.style.display = "initial"; if (elem.classList.contains("fade")) { var opacity = 0; var timer = setInterval(function () { - opacity += 10 / ms; + opacity += 30 / 70; if (opacity >= 1) { clearInterval(timer); opacity = 0.9; @@ -120,11 +120,11 @@ function fadeIn(elem, ms) { } } -function fadeOut(elem, ms) { +function fadeOut(elem) { if (elem.classList.contains("fade")) { var opacity = 1; var timer = setInterval(function () { - opacity -= 10 / ms; + opacity -= 30 / 70; if (opacity <= 0) { clearInterval(timer); opacity = 0; diff --git a/window-engine/window-engine.min.js b/window-engine/window-engine.min.js index 604d2f4..6b61ce1 100644 --- a/window-engine/window-engine.min.js +++ b/window-engine/window-engine.min.js @@ -1,2 +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){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("window"+e),50),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("window"+e).style.display&&(t=!1),t&&(document.getElementById("window"+e).style="position: absolute;",document.getElementById("window"+e).style="top: 80px;",fadeIn(document.getElementById("window"+e),50)),t=!1},dragElement(document.getElementById("window"+e)),t=!0}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 s(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{}document.onmouseup=u,document.onmousemove=m,document.ontouchend=u,document.ontouchmove=m,activeWindow(),document.getElementById(e.id).className+=" windowActive"}function m(s){s.preventDefault(),"ontouchstart"in document.documentElement?(i=d-s.touches[0].clientX,l=a-s.touches[0].clientY,d=s.touches[0].clientX,a=s.touches[0].clientY,e.style.top=e.offsetTop-l+"px",e.style.left=e.offsetLeft-i+"px"):(t=o-s.clientX,n=c-s.clientY,o=s.clientX,c=s.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function u(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=s,document.getElementById(e.id+"header").ontouchstart=s)}function fadeIn(e,t){if(e.style.opacity=0,e.style.display="initial",e.classList.contains("fade"))var n=0,o=setInterval(function(){(n+=10/t)>=1&&(clearInterval(o),n=.9),e.style.opacity=n;for(let e=active.length-1;e>-1;e--)active[e].classList.remove("windowActive");e.className+=" windowActive"},50);else e.style.opacity="0.9",activeWindow(),e.className+=" windowActive"}function fadeOut(e,t){if(e.classList.contains("fade"))var n=1,o=setInterval(function(){(n-=10/t)<=0&&(clearInterval(o),n=0,e.style.display="none"),e.style.opacity=n},50);else e.style.display="none",activeWindow(),e.className+=" windowActive"}function activeWindow(){for(let e=active.length-1;e>-1;e--)active[e].classList.remove("windowActive")} \ No newline at end of file +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){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("window"+e)),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("window"+e).style.display&&(t=!1),t&&(document.getElementById("window"+e).style="position: absolute;",document.getElementById("window"+e).style="top: 80px;",fadeIn(document.getElementById("window"+e))),t=!1},dragElement(document.getElementById("window"+e)),t=!0}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 s(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{}document.onmouseup=u,document.onmousemove=m,document.ontouchend=u,document.ontouchmove=m,activeWindow(),document.getElementById(e.id).className+=" windowActive"}function m(s){s.preventDefault(),"ontouchstart"in document.documentElement?(i=d-s.touches[0].clientX,l=a-s.touches[0].clientY,d=s.touches[0].clientX,a=s.touches[0].clientY,e.style.top=e.offsetTop-l+"px",e.style.left=e.offsetLeft-i+"px"):(t=o-s.clientX,n=c-s.clientY,o=s.clientX,c=s.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function u(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=s,document.getElementById(e.id+"header").ontouchstart=s)}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;for(let e=active.length-1;e>-1;e--)active[e].classList.remove("windowActive");e.className+=" windowActive"},50);else e.style.opacity="0.9",activeWindow(),e.className+=" windowActive"}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.className+=" windowActive"}function activeWindow(){for(let e=active.length-1;e>-1;e--)active[e].classList.remove("windowActive")} \ No newline at end of file From e9a52c90e78f230fab040f6695a1e1036d24073c Mon Sep 17 00:00:00 2001 From: "gauthier.staehler" Date: Fri, 25 Oct 2019 11:48:17 +0200 Subject: [PATCH 23/40] Refactor --- index.html | 2 +- window-engine/window-engine.js | 32 ++++++++++++++---------------- window-engine/window-engine.min.js | 2 +- 3 files changed, 17 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index 2aae7ba..5769c8e 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@
-

Window Engine 4.1

+

Window Engine 4.2

diff --git a/window-engine/window-engine.js b/window-engine/window-engine.js index e7513bc..c6606af 100644 --- a/window-engine/window-engine.js +++ b/window-engine/window-engine.js @@ -96,10 +96,10 @@ function dragElement(elmnt) { } } -function fadeIn(elem) { - elem.style.opacity = 0; - elem.style.display = "initial"; - if (elem.classList.contains("fade")) { +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; @@ -107,35 +107,33 @@ function fadeIn(elem) { clearInterval(timer); opacity = 0.9; } - elem.style.opacity = opacity; - for (let i = active.length - 1; i > -1; i--) { - active[i].classList.remove("windowActive"); - } - elem.className += " windowActive"; + elmnt.style.opacity = opacity; + activeWindow(); + elmnt.className += " windowActive"; }, 50); } else { - elem.style.opacity = "0.9"; + elmnt.style.opacity = "0.9"; activeWindow(); - elem.className += " windowActive"; + elmnt.className += " windowActive"; } } -function fadeOut(elem) { - if (elem.classList.contains("fade")) { +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; - elem.style.display = "none"; + elmnt.style.display = "none"; } - elem.style.opacity = opacity; + elmnt.style.opacity = opacity; }, 50); } else { - elem.style.display = "none"; + elmnt.style.display = "none"; activeWindow(); - elem.className += " windowActive"; + elmnt.className += " windowActive"; } } diff --git a/window-engine/window-engine.min.js b/window-engine/window-engine.min.js index 6b61ce1..98f0f43 100644 --- a/window-engine/window-engine.min.js +++ b/window-engine/window-engine.min.js @@ -1,2 +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){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("window"+e)),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("window"+e).style.display&&(t=!1),t&&(document.getElementById("window"+e).style="position: absolute;",document.getElementById("window"+e).style="top: 80px;",fadeIn(document.getElementById("window"+e))),t=!1},dragElement(document.getElementById("window"+e)),t=!0}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 s(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{}document.onmouseup=u,document.onmousemove=m,document.ontouchend=u,document.ontouchmove=m,activeWindow(),document.getElementById(e.id).className+=" windowActive"}function m(s){s.preventDefault(),"ontouchstart"in document.documentElement?(i=d-s.touches[0].clientX,l=a-s.touches[0].clientY,d=s.touches[0].clientX,a=s.touches[0].clientY,e.style.top=e.offsetTop-l+"px",e.style.left=e.offsetLeft-i+"px"):(t=o-s.clientX,n=c-s.clientY,o=s.clientX,c=s.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function u(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=s,document.getElementById(e.id+"header").ontouchstart=s)}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;for(let e=active.length-1;e>-1;e--)active[e].classList.remove("windowActive");e.className+=" windowActive"},50);else e.style.opacity="0.9",activeWindow(),e.className+=" windowActive"}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.className+=" windowActive"}function activeWindow(){for(let e=active.length-1;e>-1;e--)active[e].classList.remove("windowActive")} \ No newline at end of file +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){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("window"+e)),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("window"+e).style.display&&(t=!1),t&&(document.getElementById("window"+e).style="position: absolute;",document.getElementById("window"+e).style="top: 80px;",fadeIn(document.getElementById("window"+e))),t=!1},dragElement(document.getElementById("window"+e)),t=!0}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 s(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{}document.onmouseup=m,document.onmousemove=u,document.ontouchend=m,document.ontouchmove=u,activeWindow(),document.getElementById(e.id).className+=" windowActive"}function u(s){s.preventDefault(),"ontouchstart"in document.documentElement?(i=d-s.touches[0].clientX,l=a-s.touches[0].clientY,d=s.touches[0].clientX,a=s.touches[0].clientY,e.style.top=e.offsetTop-l+"px",e.style.left=e.offsetLeft-i+"px"):(t=o-s.clientX,n=c-s.clientY,o=s.clientX,c=s.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=s,document.getElementById(e.id+"header").ontouchstart=s)}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.className+=" windowActive"},50);else e.style.opacity="0.9",activeWindow(),e.className+=" windowActive"}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.className+=" windowActive"}function activeWindow(){for(let e=active.length-1;e>-1;e--)active[e].classList.remove("windowActive")} \ No newline at end of file From 5e6411202193bfe97cf213ecafa4203e3c7a7645 Mon Sep 17 00:00:00 2001 From: GStaehler Date: Thu, 5 Dec 2019 13:33:25 +0100 Subject: [PATCH 24/40] On opening a window, if it is already open, the window is the active one --- index.html | 2 +- window-engine/window-engine.js | 4 +++- window-engine/window-engine.min.js | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 5769c8e..61c240a 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@
-

Window Engine 4.2

+

Window Engine 4.2.1

diff --git a/window-engine/window-engine.js b/window-engine/window-engine.js index c6606af..15e0b62 100644 --- a/window-engine/window-engine.js +++ b/window-engine/window-engine.js @@ -20,6 +20,8 @@ function createWindow(id) { }; document.getElementById("button" + id).onclick = function () { if (document.getElementById("window" + id).style.display === "initial") { + activeWindow(); + document.getElementById("window" + id).className += " windowActive"; isOut = false; } if (isOut) { @@ -141,4 +143,4 @@ function activeWindow() { for (let i = active.length - 1; i > -1; i--) { active[i].classList.remove("windowActive"); } -} +} \ No newline at end of file diff --git a/window-engine/window-engine.min.js b/window-engine/window-engine.min.js index 98f0f43..d5dd3a7 100644 --- a/window-engine/window-engine.min.js +++ b/window-engine/window-engine.min.js @@ -1,2 +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){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("window"+e)),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("window"+e).style.display&&(t=!1),t&&(document.getElementById("window"+e).style="position: absolute;",document.getElementById("window"+e).style="top: 80px;",fadeIn(document.getElementById("window"+e))),t=!1},dragElement(document.getElementById("window"+e)),t=!0}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 s(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{}document.onmouseup=m,document.onmousemove=u,document.ontouchend=m,document.ontouchmove=u,activeWindow(),document.getElementById(e.id).className+=" windowActive"}function u(s){s.preventDefault(),"ontouchstart"in document.documentElement?(i=d-s.touches[0].clientX,l=a-s.touches[0].clientY,d=s.touches[0].clientX,a=s.touches[0].clientY,e.style.top=e.offsetTop-l+"px",e.style.left=e.offsetLeft-i+"px"):(t=o-s.clientX,n=c-s.clientY,o=s.clientX,c=s.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=s,document.getElementById(e.id+"header").ontouchstart=s)}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.className+=" windowActive"},50);else e.style.opacity="0.9",activeWindow(),e.className+=" windowActive"}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.className+=" windowActive"}function activeWindow(){for(let e=active.length-1;e>-1;e--)active[e].classList.remove("windowActive")} \ No newline at end of file +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){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("window"+e)),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("window"+e).style.display&&(activeWindow(),document.getElementById("window"+e).className+=" windowActive",t=!1),t&&(document.getElementById("window"+e).style="position: absolute;",document.getElementById("window"+e).style="top: 80px;",fadeIn(document.getElementById("window"+e))),t=!1},dragElement(document.getElementById("window"+e)),t=!0}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 m(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{}document.onmouseup=u,document.onmousemove=s,document.ontouchend=u,document.ontouchmove=s,activeWindow(),document.getElementById(e.id).className+=" windowActive"}function s(m){m.preventDefault(),"ontouchstart"in document.documentElement?(i=d-m.touches[0].clientX,l=a-m.touches[0].clientY,d=m.touches[0].clientX,a=m.touches[0].clientY,e.style.top=e.offsetTop-l+"px",e.style.left=e.offsetLeft-i+"px"):(t=o-m.clientX,n=c-m.clientY,o=m.clientX,c=m.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function u(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=m,document.getElementById(e.id+"header").ontouchstart=m)}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.className+=" windowActive"},50);else e.style.opacity="0.9",activeWindow(),e.className+=" windowActive"}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.className+=" windowActive"}function activeWindow(){for(let e=active.length-1;e>-1;e--)active[e].classList.remove("windowActive")} \ No newline at end of file From a2e94f4a22f9d4ac6d626f012148579fcfa9fb35 Mon Sep 17 00:00:00 2001 From: GStaehler Date: Wed, 11 Dec 2019 11:25:38 +0100 Subject: [PATCH 25/40] Add gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..723ef36 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea \ No newline at end of file From 93ad24d2966dc049e67440c02390768cc8d15af4 Mon Sep 17 00:00:00 2001 From: GStaehler Date: Wed, 11 Dec 2019 11:54:17 +0100 Subject: [PATCH 26/40] Add package.json --- package.json | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 package.json diff --git a/package.json b/package.json new file mode 100644 index 0000000..05c5ac7 --- /dev/null +++ b/package.json @@ -0,0 +1,24 @@ +{ + "name": "window-engine", + "version": "4.2.1", + "description": "Lightweight and touchscreen friendly js library for draggable windows", + "main": "window-engine.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/GStaehler/Window-Engine.git" + }, + "keywords": [ + "draggable", + "window", + "modals" + ], + "author": "Gauthier Staehler", + "license": "MIT", + "bugs": { + "url": "https://github.com/GStaehler/Window-Engine/issues" + }, + "homepage": "https://github.com/GStaehler/Window-Engine#readme" +} From 386e25ddf502bd638ec3e1d1c120ac0d0eca1aa8 Mon Sep 17 00:00:00 2001 From: GStaehler Date: Wed, 11 Dec 2019 17:17:23 +0100 Subject: [PATCH 27/40] Refactor --- README.md | 4 ++-- dist/window-engine.min.css | 2 ++ {window-engine => dist}/window-engine.min.js | 0 demo.css => example/demo.css | 0 index.html => example/index.html | 6 +++--- package.json | 2 +- {window-engine => src}/window-engine.css | 0 {window-engine => src}/window-engine.js | 0 8 files changed, 8 insertions(+), 6 deletions(-) create mode 100644 dist/window-engine.min.css rename {window-engine => dist}/window-engine.min.js (100%) rename demo.css => example/demo.css (100%) rename index.html => example/index.html (94%) rename {window-engine => src}/window-engine.css (100%) rename {window-engine => src}/window-engine.js (100%) diff --git a/README.md b/README.md index 1645531..5f91021 100644 --- a/README.md +++ b/README.md @@ -18,8 +18,8 @@ Welcome to **Window Engine**. Window Engine is a lightweight javascript library [GET Window Engine](https://gstaehler.github.io/get-window-engine/) : ```html - - // End of your file + + // End of your file ``` OR Test it first : diff --git a/dist/window-engine.min.css b/dist/window-engine.min.css new file mode 100644 index 0000000..f052d4f --- /dev/null +++ b/dist/window-engine.min.css @@ -0,0 +1,2 @@ +/* Window Engine - MIT License - Copyright (c) 2019 Gauthier Staehler */ +.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 #000;opacity:.9;display:none}[id$=header]{padding:10px;z-index:10;background-color:#000;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:#fff;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:#663399}.orange{background-color:#deb887}.brown{background-color:brown}.cyan{background-color:#008b8b}.crimson{background-color:#dc143c}.green{background-color:#006400}.small{width:600px;height:300px}.large{width:1000px;height:500px}*,::after,::before{box-sizing:border-box}.windowGroup p{cursor:default;margin-top:0;margin-bottom:1rem} \ No newline at end of file diff --git a/window-engine/window-engine.min.js b/dist/window-engine.min.js similarity index 100% rename from window-engine/window-engine.min.js rename to dist/window-engine.min.js diff --git a/demo.css b/example/demo.css similarity index 100% rename from demo.css rename to example/demo.css diff --git a/index.html b/example/index.html similarity index 94% rename from index.html rename to example/index.html index 61c240a..c7d73f2 100644 --- a/index.html +++ b/example/index.html @@ -8,13 +8,13 @@ Window Engine - JavaScript Library - +
-

Window Engine 4.2.1

+

Window Engine 4.3

@@ -109,4 +109,4 @@ - + diff --git a/package.json b/package.json index 05c5ac7..fd2d6df 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "window-engine", - "version": "4.2.1", + "version": "4.3", "description": "Lightweight and touchscreen friendly js library for draggable windows", "main": "window-engine.js", "scripts": { diff --git a/window-engine/window-engine.css b/src/window-engine.css similarity index 100% rename from window-engine/window-engine.css rename to src/window-engine.css diff --git a/window-engine/window-engine.js b/src/window-engine.js similarity index 100% rename from window-engine/window-engine.js rename to src/window-engine.js From 5516b400b224680b41c8123ec1cc031a8fd5dc10 Mon Sep 17 00:00:00 2001 From: GStaehler Date: Wed, 11 Dec 2019 17:21:36 +0100 Subject: [PATCH 28/40] Clean README --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 5f91021..a539014 100644 --- a/README.md +++ b/README.md @@ -3,8 +3,8 @@ [![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) ![Demo](https://gstaehler.github.io/window_engine/window.png) @@ -18,7 +18,7 @@ Welcome to **Window Engine**. Window Engine is a lightweight javascript library [GET Window Engine](https://gstaehler.github.io/get-window-engine/) : ```html - + // End of your file ``` From e4fbfdebd0f8bfd58bfea33d9f5ffcc8a657862c Mon Sep 17 00:00:00 2001 From: "gauthier.staehler" Date: Mon, 16 Dec 2019 13:45:22 +0100 Subject: [PATCH 29/40] Improve API, no need to write a close button in html anymore --- README.md | 4 ---- dist/window-engine.min.js | 2 +- example/index.html | 8 +------- src/window-engine.js | 6 ++++++ 4 files changed, 8 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index a539014..fa8ff85 100644 --- a/README.md +++ b/README.md @@ -37,7 +37,6 @@ OR Test it first :

Title

- ×
Content
@@ -120,7 +119,6 @@ You can change the size of the window with "small" and "large" :

Window Engine

- ×

Welcome to Window Engine !

@@ -132,7 +130,6 @@ You can change the size of the window with "small" and "large" :

Second Window

- ×

Cyan

@@ -145,7 +142,6 @@ You can change the size of the window with "small" and "large" :

Third Window

- ×

Brown

diff --git a/dist/window-engine.min.js b/dist/window-engine.min.js index d5dd3a7..a0bedd6 100644 --- a/dist/window-engine.min.js +++ b/dist/window-engine.min.js @@ -1,2 +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){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("window"+e)),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("window"+e).style.display&&(activeWindow(),document.getElementById("window"+e).className+=" windowActive",t=!1),t&&(document.getElementById("window"+e).style="position: absolute;",document.getElementById("window"+e).style="top: 80px;",fadeIn(document.getElementById("window"+e))),t=!1},dragElement(document.getElementById("window"+e)),t=!0}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 m(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{}document.onmouseup=u,document.onmousemove=s,document.ontouchend=u,document.ontouchmove=s,activeWindow(),document.getElementById(e.id).className+=" windowActive"}function s(m){m.preventDefault(),"ontouchstart"in document.documentElement?(i=d-m.touches[0].clientX,l=a-m.touches[0].clientY,d=m.touches[0].clientX,a=m.touches[0].clientY,e.style.top=e.offsetTop-l+"px",e.style.left=e.offsetLeft-i+"px"):(t=o-m.clientX,n=c-m.clientY,o=m.clientX,c=m.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function u(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=m,document.getElementById(e.id+"header").ontouchstart=m)}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.className+=" windowActive"},50);else e.style.opacity="0.9",activeWindow(),e.className+=" windowActive"}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.className+=" windowActive"}function activeWindow(){for(let e=active.length-1;e>-1;e--)active[e].classList.remove("windowActive")} \ No newline at end of file +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){var t;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(document.getElementById("window"+e)),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("window"+e).style.display&&(activeWindow(),document.getElementById("window"+e).className+=" windowActive",t=!1),t&&(document.getElementById("window"+e).style="position: absolute;",document.getElementById("window"+e).style="top: 80px;",fadeIn(document.getElementById("window"+e))),t=!1},dragElement(document.getElementById("window"+e)),t=!0}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var i=0,d=0,l=0,a=0;function m(t){if(!1 in document.documentElement&&t.preventDefault(),o=t.clientX,c=t.clientY,"ontouchstart"in document.documentElement)try{l=t.touches[0].clientX,a=t.touches[0].clientY}catch{}document.onmouseup=s,document.onmousemove=u,document.ontouchend=s,document.ontouchmove=u,activeWindow(),document.getElementById(e.id).className+=" windowActive"}function u(m){m.preventDefault(),"ontouchstart"in document.documentElement?(i=l-m.touches[0].clientX,d=a-m.touches[0].clientY,l=m.touches[0].clientX,a=m.touches[0].clientY,e.style.top=e.offsetTop-d+"px",e.style.left=e.offsetLeft-i+"px"):(t=o-m.clientX,n=c-m.clientY,o=m.clientX,c=m.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function s(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=m,document.getElementById(e.id+"header").ontouchstart=m)}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.className+=" windowActive"},50);else e.style.opacity="0.9",activeWindow(),e.className+=" windowActive"}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.className+=" windowActive"}function activeWindow(){for(let e=active.length-1;e>-1;e--)active[e].classList.remove("windowActive")} \ No newline at end of file diff --git a/example/index.html b/example/index.html index c7d73f2..7a9adce 100644 --- a/example/index.html +++ b/example/index.html @@ -14,7 +14,7 @@
-

Window Engine 4.3

+

Window Engine 4.3.1

@@ -24,7 +24,6 @@

Window Engine

- ×

Welcome to Window Engine !

@@ -37,7 +36,6 @@

Second Window

- ×

Cyan

@@ -50,7 +48,6 @@

Third Window

- ×

Brown

@@ -63,7 +60,6 @@

Fourth Window

- ×

Orange - Small

@@ -75,7 +71,6 @@

Fifth Window

- ×

Crimson - Large

@@ -87,7 +82,6 @@

Sixth Window

- ×

Green

diff --git a/src/window-engine.js b/src/window-engine.js index 15e0b62..6d25276 100644 --- a/src/window-engine.js +++ b/src/window-engine.js @@ -14,6 +14,12 @@ for (let i = 1; i <= lastWindow; i++) { function createWindow(id) { var isOut; + + 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(document.getElementById("window" + id)); isOut = true; From df8643536bdc1ed893a7ec5bd66c8ffae925e2a9 Mon Sep 17 00:00:00 2001 From: "gauthier.staehler" Date: Mon, 16 Dec 2019 15:09:06 +0100 Subject: [PATCH 30/40] Improve API, no need to set an id to header --- README.md | 8 ++++---- dist/window-engine.min.js | 2 +- example/index.html | 14 +++++++------- src/window-engine.js | 4 ++++ 4 files changed, 16 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index fa8ff85..c17268a 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,7 @@ OR Test it first : ```html
-
+

Title

Content
@@ -117,7 +117,7 @@ You can change the size of the window with "small" and "large" :
-
+

Window Engine

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

Second Window

@@ -140,7 +140,7 @@ You can change the size of the window with "small" and "large" :
-
+

Third Window

diff --git a/dist/window-engine.min.js b/dist/window-engine.min.js index a0bedd6..646ebc6 100644 --- a/dist/window-engine.min.js +++ b/dist/window-engine.min.js @@ -1,2 +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){var t;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(document.getElementById("window"+e)),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("window"+e).style.display&&(activeWindow(),document.getElementById("window"+e).className+=" windowActive",t=!1),t&&(document.getElementById("window"+e).style="position: absolute;",document.getElementById("window"+e).style="top: 80px;",fadeIn(document.getElementById("window"+e))),t=!1},dragElement(document.getElementById("window"+e)),t=!0}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var i=0,d=0,l=0,a=0;function m(t){if(!1 in document.documentElement&&t.preventDefault(),o=t.clientX,c=t.clientY,"ontouchstart"in document.documentElement)try{l=t.touches[0].clientX,a=t.touches[0].clientY}catch{}document.onmouseup=s,document.onmousemove=u,document.ontouchend=s,document.ontouchmove=u,activeWindow(),document.getElementById(e.id).className+=" windowActive"}function u(m){m.preventDefault(),"ontouchstart"in document.documentElement?(i=l-m.touches[0].clientX,d=a-m.touches[0].clientY,l=m.touches[0].clientX,a=m.touches[0].clientY,e.style.top=e.offsetTop-d+"px",e.style.left=e.offsetLeft-i+"px"):(t=o-m.clientX,n=c-m.clientY,o=m.clientX,c=m.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function s(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=m,document.getElementById(e.id+"header").ontouchstart=m)}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.className+=" windowActive"},50);else e.style.opacity="0.9",activeWindow(),e.className+=" windowActive"}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.className+=" windowActive"}function activeWindow(){for(let e=active.length-1;e>-1;e--)active[e].classList.remove("windowActive")} \ No newline at end of file +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){var t;let n=document.getElementById("window"+e).firstElementChild;console.log(n),n.id="window"+e+"header";let o=document.createElement("b");o.id="closeButton"+e,o.innerHTML="×",document.getElementById("window"+e+"header").appendChild(o),document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("window"+e)),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("window"+e).style.display&&(activeWindow(),document.getElementById("window"+e).className+=" windowActive",t=!1),t&&(document.getElementById("window"+e).style="position: absolute;",document.getElementById("window"+e).style="top: 80px;",fadeIn(document.getElementById("window"+e))),t=!1},dragElement(document.getElementById("window"+e)),t=!0}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var d=0,i=0,l=0,a=0;function m(t){if(!1 in document.documentElement&&t.preventDefault(),o=t.clientX,c=t.clientY,"ontouchstart"in document.documentElement)try{l=t.touches[0].clientX,a=t.touches[0].clientY}catch{}document.onmouseup=u,document.onmousemove=s,document.ontouchend=u,document.ontouchmove=s,activeWindow(),document.getElementById(e.id).className+=" windowActive"}function s(m){m.preventDefault(),"ontouchstart"in document.documentElement?(d=l-m.touches[0].clientX,i=a-m.touches[0].clientY,l=m.touches[0].clientX,a=m.touches[0].clientY,e.style.top=e.offsetTop-i+"px",e.style.left=e.offsetLeft-d+"px"):(t=o-m.clientX,n=c-m.clientY,o=m.clientX,c=m.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function u(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=m,document.getElementById(e.id+"header").ontouchstart=m)}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.className+=" windowActive"},50);else e.style.opacity="0.9",activeWindow(),e.className+=" windowActive"}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.className+=" windowActive"}function activeWindow(){for(let e=active.length-1;e>-1;e--)active[e].classList.remove("windowActive")} \ No newline at end of file diff --git a/example/index.html b/example/index.html index 7a9adce..3dd04d7 100644 --- a/example/index.html +++ b/example/index.html @@ -14,7 +14,7 @@
-

Window Engine 4.3.1

+

Window Engine 4.3.2

@@ -22,7 +22,7 @@
-
+

Window Engine

@@ -34,7 +34,7 @@
-
+

Second Window

@@ -46,7 +46,7 @@
-
+

Third Window

@@ -58,7 +58,7 @@
-
+

Fourth Window

@@ -69,7 +69,7 @@
-
+

Fifth Window

@@ -80,7 +80,7 @@
-
+

Sixth Window

diff --git a/src/window-engine.js b/src/window-engine.js index 6d25276..4bcb07f 100644 --- a/src/window-engine.js +++ b/src/window-engine.js @@ -15,6 +15,10 @@ for (let i = 1; i <= lastWindow; i++) { function createWindow(id) { var isOut; + let headerID = document.getElementById("window" + id).firstElementChild; + console.log(headerID); + headerID.id = "window" + id + "header"; + let createCloseButton = document.createElement("b"); createCloseButton.id = "closeButton" + id; createCloseButton.innerHTML = "×"; From b83aa060b00fc912cff48869f1aad06e345b5a83 Mon Sep 17 00:00:00 2001 From: "gauthier.staehler" Date: Mon, 16 Dec 2019 15:10:25 +0100 Subject: [PATCH 31/40] Clean --- src/window-engine.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/window-engine.js b/src/window-engine.js index 4bcb07f..6e7cc3d 100644 --- a/src/window-engine.js +++ b/src/window-engine.js @@ -16,7 +16,6 @@ function createWindow(id) { var isOut; let headerID = document.getElementById("window" + id).firstElementChild; - console.log(headerID); headerID.id = "window" + id + "header"; let createCloseButton = document.createElement("b"); From ff2934399a6bdfa68c47ea8195c879f742f71a79 Mon Sep 17 00:00:00 2001 From: "gauthier.staehler" Date: Mon, 16 Dec 2019 15:41:54 +0100 Subject: [PATCH 32/40] Update README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c17268a..f8a19e5 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ Welcome to **Window Engine**. Window Engine is a lightweight javascript library OR Test it first : ```html - + // End of your file ``` From dd14650286a9d90396ca09563df286fbf79b4abf Mon Sep 17 00:00:00 2001 From: GStaehler Date: Mon, 23 Dec 2019 20:40:45 +0100 Subject: [PATCH 33/40] Clean --- dist/window-engine.min.js | 2 +- example/index.html | 2 +- src/window-engine.js | 20 ++++++++------------ 3 files changed, 10 insertions(+), 14 deletions(-) diff --git a/dist/window-engine.min.js b/dist/window-engine.min.js index 646ebc6..0380456 100644 --- a/dist/window-engine.min.js +++ b/dist/window-engine.min.js @@ -1,2 +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){var t;let n=document.getElementById("window"+e).firstElementChild;console.log(n),n.id="window"+e+"header";let o=document.createElement("b");o.id="closeButton"+e,o.innerHTML="×",document.getElementById("window"+e+"header").appendChild(o),document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("window"+e)),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("window"+e).style.display&&(activeWindow(),document.getElementById("window"+e).className+=" windowActive",t=!1),t&&(document.getElementById("window"+e).style="position: absolute;",document.getElementById("window"+e).style="top: 80px;",fadeIn(document.getElementById("window"+e))),t=!1},dragElement(document.getElementById("window"+e)),t=!0}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var d=0,i=0,l=0,a=0;function m(t){if(!1 in document.documentElement&&t.preventDefault(),o=t.clientX,c=t.clientY,"ontouchstart"in document.documentElement)try{l=t.touches[0].clientX,a=t.touches[0].clientY}catch{}document.onmouseup=u,document.onmousemove=s,document.ontouchend=u,document.ontouchmove=s,activeWindow(),document.getElementById(e.id).className+=" windowActive"}function s(m){m.preventDefault(),"ontouchstart"in document.documentElement?(d=l-m.touches[0].clientX,i=a-m.touches[0].clientY,l=m.touches[0].clientX,a=m.touches[0].clientY,e.style.top=e.offsetTop-i+"px",e.style.left=e.offsetLeft-d+"px"):(t=o-m.clientX,n=c-m.clientY,o=m.clientX,c=m.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function u(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=m,document.getElementById(e.id+"header").ontouchstart=m)}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.className+=" windowActive"},50);else e.style.opacity="0.9",activeWindow(),e.className+=" windowActive"}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.className+=" windowActive"}function activeWindow(){for(let e=active.length-1;e>-1;e--)active[e].classList.remove("windowActive")} \ No newline at end of file +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).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(document.getElementById("window"+e)),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("window"+e).style.display&&(activeWindow(document.getElementById("window"+e)),t=!1),t&&(document.getElementById("window"+e).style="position: absolute;",document.getElementById("window"+e).style="top: 80px;",fadeIn(document.getElementById("window"+e))),t=!1},dragElement(document.getElementById("window"+e)),t=!0}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var d=0,i=0,l=0,a=0;function m(t){if(!1 in document.documentElement&&t.preventDefault(),o=t.clientX,c=t.clientY,"ontouchstart"in document.documentElement)try{l=t.touches[0].clientX,a=t.touches[0].clientY}catch{}document.onmouseup=s,document.onmousemove=u,document.ontouchend=s,document.ontouchmove=u,activeWindow(document.getElementById(e.id))}function u(m){m.preventDefault(),"ontouchstart"in document.documentElement?(d=l-m.touches[0].clientX,i=a-m.touches[0].clientY,l=m.touches[0].clientX,a=m.touches[0].clientY,e.style.top=e.offsetTop-i+"px",e.style.left=e.offsetLeft-d+"px"):(t=o-m.clientX,n=c-m.clientY,o=m.clientX,c=m.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function s(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=m,document.getElementById(e.id+"header").ontouchstart=m)}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/example/index.html b/example/index.html index 3dd04d7..e191947 100644 --- a/example/index.html +++ b/example/index.html @@ -14,7 +14,7 @@
-

Window Engine 4.3.2

+

Window Engine 4.3.3

diff --git a/src/window-engine.js b/src/window-engine.js index 6e7cc3d..9ef704f 100644 --- a/src/window-engine.js +++ b/src/window-engine.js @@ -13,7 +13,7 @@ for (let i = 1; i <= lastWindow; i++) { } function createWindow(id) { - var isOut; + let isOut; let headerID = document.getElementById("window" + id).firstElementChild; headerID.id = "window" + id + "header"; @@ -29,8 +29,7 @@ function createWindow(id) { }; document.getElementById("button" + id).onclick = function () { if (document.getElementById("window" + id).style.display === "initial") { - activeWindow(); - document.getElementById("window" + id).className += " windowActive"; + activeWindow(document.getElementById("window" + id)); isOut = false; } if (isOut) { @@ -76,8 +75,7 @@ function dragElement(elmnt) { document.onmousemove = elementDrag; document.ontouchend = closeDragElement; document.ontouchmove = elementDrag; - activeWindow(); - document.getElementById(elmnt.id).className += " windowActive"; + activeWindow(document.getElementById(elmnt.id)); } function elementDrag(e) { @@ -119,13 +117,11 @@ function fadeIn(elmnt) { opacity = 0.9; } elmnt.style.opacity = opacity; - activeWindow(); - elmnt.className += " windowActive"; + activeWindow(elmnt); }, 50); } else { elmnt.style.opacity = "0.9"; - activeWindow(); - elmnt.className += " windowActive"; + activeWindow(elmnt); } } @@ -143,13 +139,13 @@ function fadeOut(elmnt) { }, 50); } else { elmnt.style.display = "none"; - activeWindow(); - elmnt.className += " windowActive"; + activeWindow(elmnt); } } -function activeWindow() { +function activeWindow(elmnt) { for (let i = active.length - 1; i > -1; i--) { active[i].classList.remove("windowActive"); + elmnt.className += " windowActive"; } } \ No newline at end of file From da2f4b32e98137063f43feb3a0174d60d8fdc58c Mon Sep 17 00:00:00 2001 From: "gauthier.staehler" Date: Thu, 23 Jan 2020 16:25:23 +0100 Subject: [PATCH 34/40] Delete useless code and limit dom interactions --- dist/window-engine.min.js | 2 +- example/index.html | 2 +- src/window-engine.js | 26 ++++++++++---------------- 3 files changed, 12 insertions(+), 18 deletions(-) diff --git a/dist/window-engine.min.js b/dist/window-engine.min.js index 0380456..8f6c53d 100644 --- a/dist/window-engine.min.js +++ b/dist/window-engine.min.js @@ -1,2 +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).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(document.getElementById("window"+e)),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("window"+e).style.display&&(activeWindow(document.getElementById("window"+e)),t=!1),t&&(document.getElementById("window"+e).style="position: absolute;",document.getElementById("window"+e).style="top: 80px;",fadeIn(document.getElementById("window"+e))),t=!1},dragElement(document.getElementById("window"+e)),t=!0}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var d=0,i=0,l=0,a=0;function m(t){if(!1 in document.documentElement&&t.preventDefault(),o=t.clientX,c=t.clientY,"ontouchstart"in document.documentElement)try{l=t.touches[0].clientX,a=t.touches[0].clientY}catch{}document.onmouseup=s,document.onmousemove=u,document.ontouchend=s,document.ontouchmove=u,activeWindow(document.getElementById(e.id))}function u(m){m.preventDefault(),"ontouchstart"in document.documentElement?(d=l-m.touches[0].clientX,i=a-m.touches[0].clientY,l=m.touches[0].clientX,a=m.touches[0].clientY,e.style.top=e.offsetTop-i+"px",e.style.left=e.offsetLeft-d+"px"):(t=o-m.clientX,n=c-m.clientY,o=m.clientX,c=m.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function s(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")&&(document.getElementById(e.id+"header").onmousedown=m,document.getElementById(e.id+"header").ontouchstart=m)}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 +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{}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/example/index.html b/example/index.html index e191947..6d961b4 100644 --- a/example/index.html +++ b/example/index.html @@ -14,7 +14,7 @@
-

Window Engine 4.3.3

+

Window Engine 4.3.4

diff --git a/src/window-engine.js b/src/window-engine.js index 9ef704f..0be6a8e 100644 --- a/src/window-engine.js +++ b/src/window-engine.js @@ -13,9 +13,8 @@ for (let i = 1; i <= lastWindow; i++) { } function createWindow(id) { - let isOut; - - let headerID = document.getElementById("window" + id).firstElementChild; + let windowID = document.getElementById("window" + id); + let headerID = windowID.firstElementChild; headerID.id = "window" + id + "header"; let createCloseButton = document.createElement("b"); @@ -24,23 +23,18 @@ function createWindow(id) { document.getElementById("window" + id + "header").appendChild(createCloseButton); document.getElementById("closeButton" + id).onclick = function () { - fadeOut(document.getElementById("window" + id)); - isOut = true; + fadeOut(windowID); }; document.getElementById("button" + id).onclick = function () { - if (document.getElementById("window" + id).style.display === "initial") { - activeWindow(document.getElementById("window" + id)); - isOut = false; - } - if (isOut) { - document.getElementById("window" + id).style = "position: absolute;"; - document.getElementById("window" + id).style = "top: 80px;"; - fadeIn(document.getElementById("window" + id)); + if (windowID.style.display === "initial") { + activeWindow(windowID); + } else { + windowID.style = "position: absolute;"; + windowID.style = "top: 80px;"; + fadeIn(windowID); } - isOut = false; }; - dragElement(document.getElementById("window" + id)); - isOut = true; + dragElement(windowID); } function dragElement(elmnt) { From c619251630ccca02bf2a5bb4f976078655cabd8e Mon Sep 17 00:00:00 2001 From: "gauthier.staehler" Date: Fri, 24 Jan 2020 10:31:13 +0100 Subject: [PATCH 35/40] Update example --- example/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/index.html b/example/index.html index 6d961b4..66f5446 100644 --- a/example/index.html +++ b/example/index.html @@ -90,7 +90,7 @@
-