From 007c65747fc3a7442a840541d35f158ddb6e70c8 Mon Sep 17 00:00:00 2001
From: Priyansh <bobbyskhs@gmail.com>
Date: Fri, 13 Nov 2020 23:10:54 +0530
Subject: Added Draggable Window for demo

---
 css/layouts.css | 16 +++++++++++++---
 index.html      |  4 +++-
 js/desktop.js   | 10 ++++++++++
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/css/layouts.css b/css/layouts.css
index 414f7b6..8c79e24 100644
--- a/css/layouts.css
+++ b/css/layouts.css
@@ -140,6 +140,10 @@
   background-repeat: no-repeat;
 }
 
+#desktop {
+  position: relative;
+}
+
 .window {
   background-color: #eeeeee;
   position: absolute;
@@ -148,9 +152,8 @@
 .non-resizable {
   width: 720px;
   height: 480px;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  top: calc(50% - 240px);
+  left: calc(50% - 360px);
 }
 
 .window header {
@@ -166,6 +169,8 @@
   left: 50%;
   top: 10px;
   transform: translateX(-50%);
+  user-select: none;
+  cursor: default;
 }
 
 .buttons {
@@ -180,3 +185,8 @@
   padding: 9px 15px 14px 15px;
   background-color: red;
 }
+
+.windowContents {
+  padding: 10px;
+  font-family: 'Chicago';
+}
diff --git a/index.html b/index.html
index 3e99fee..bcea342 100644
--- a/index.html
+++ b/index.html
@@ -121,7 +121,9 @@
             <span class="close" id="closePreferences">&times;</span>
           </div>
         </header>
-        <div class="windowContents"></div>
+        <div class="windowContents">
+          <p>This window is draggrable within this tab. Try grabbing it from the header and dragging it anywhere you want.</p>
+        </div>
       </div>
     </section>
     <!-- Scripts -->
diff --git a/js/desktop.js b/js/desktop.js
index cef0d7b..4e27144 100644
--- a/js/desktop.js
+++ b/js/desktop.js
@@ -8,6 +8,16 @@ const currentIndex = parsedAccounts.findIndex(
 const desktop = document.getElementById("desktop");
 const wallpaperRoute = "./images/wallpapers";
 const wallpaperExtension = ".jpeg";
+const draggableElements = document.querySelectorAll('.draggable');
+const draggableWindows = [];
+
+draggableElements.forEach(draggableElement => {
+    const currentDraggableWindow = new Draggabilly(draggableElement, {
+        containment: '#desktop',
+        handle: 'header',
+    });
+    draggableWindows.push(currentDraggableWindow);
+});
 
 if(!currentAccount.wallpaper) {
     currentAccount['wallpaper'] = 'Wallpaper1';
-- 
cgit v1.2.3