diff options
| -rw-r--r-- | css/layouts.css | 16 | ||||
| -rw-r--r-- | index.html | 4 | ||||
| -rw-r--r-- | 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'; +} @@ -121,7 +121,9 @@ <span class="close" id="closePreferences">×</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'; |