diff --git a/startpage.html b/startpage.html index aaabe9a..dd8bab8 100644 --- a/startpage.html +++ b/startpage.html @@ -16,25 +16,41 @@ body { cursor: url(""), auto; } - .grabbable:hover { - cursor: url(""), grab; - } + .removable:hover { cursor: url(""), crosshair; } + .grabbable:hover { + cursor: grab; + } */ + body { + height: 100vh; + overflow: hidden; + } + + .movable { position: fixed; + user-select: none; } .container { z-index: 998; display: flex; + flex-direction: column; + flex-wrap: nowrap; align-items: center; justify-content: center; overflow: auto; } + .containerHeader { + display: flex; + flex-direction: column; + width: 100%; + padding-left: 3rem; + } .section { margin-top: 0rem; @@ -44,9 +60,6 @@ background-color: rgba(173, 165, 165, 0.8); z-index: 999; - user-select: none; - - border: solid black 2px; border-radius: 10px; padding: 10px; @@ -72,8 +85,8 @@ .tab { margin-right: 2rem; - user-select: none; text-wrap: nowrap; + color: black; } .tab:hover { cursor: pointer; @@ -83,6 +96,9 @@ font-weight: bold; text-decoration: underline; } + a.visited { + color: black; + } #ioTab { flex-shrink: 1; } @@ -224,9 +240,7 @@ + TODO: CONTAINER TEXT RIGHT ALIGN AND ALSO PADDING LEVELS @@ -630,7 +654,6 @@ * loadBookmarks() and applySettings() do the rest */ initializeImageContainer() { - document.body.insertAdjacentHTML( "beforeend", ` @@ -664,15 +687,12 @@ "beforeend", `
-
-
- -
- +
+
+

-
` ); @@ -721,7 +741,6 @@ * -> remove "images" from wallpaper tab * -> furthermore, condense all global settings into one tab * - including wallpaper, audio, cursor - * add toggles for each settings menu * rename settings form div ids (see "note to self") */ @@ -874,38 +893,46 @@

+ header options

- - -
+
+ + +
- - -

+
+ + +
- - -

+
+ + +
- - -

- - - -
- - - +
+ + +
+
+ + +
+
+ + +
- - -
+
+ + +
- - +
+ + +

+ text options

@@ -1602,9 +1629,6 @@ document .getElementById("imageRatioToggle") .addEventListener("change", toggleImageRatio, false); - document - .getElementById("imageRemovalToggle") - .addEventListener("change", toggleImageRemoval, false); document .getElementById("autoplayAudioToggle") .addEventListener("change", toggleAutoplayAudio, false); @@ -1868,10 +1892,6 @@ let images = document.getElementsByClassName("userImage"); if (removing) { for (let i = 0; i < images.length; i++) { - // change cursor on images to crosshair - images[i].classList.remove("grabbable"); - images[i].classList.add("removable"); - images[i].addEventListener( "mousedown", mouseDownRemovableElement, @@ -1884,10 +1904,6 @@ } } else { for (let i = 0; i < images.length; i++) { - // remove crosshair cursor from images - images[i].classList.remove("removable"); - images[i].classList.add("grabbable"); - images[i].removeEventListener( "mousedown", mouseDownRemovableElement, @@ -1915,13 +1931,14 @@ // change cursor on movable elements to indicate grabbable let movableElements = document.getElementsByClassName("movable"); for (let i = 0; i < movableElements.length; i++) { - movableElements[i].classList.add("grabbable"); + // mmovableElements[i].classList.add("grabbable"); + movableElements[i].style.cursor = cursors.grab ? 'url("' + cursors.grab + '"), grab' : "grab"; } } else { // remove grabbable cursor let movableElements = document.getElementsByClassName("movable"); for (let i = 0; i < movableElements.length; i++) { - movableElements[i].classList.remove("grabbable"); + movableElements[i].style.cursor = ""; } // disable image removal mode active @@ -2291,6 +2308,7 @@ function moveElement(mouseMove) { if (!moving) { + console.log("RETURN: " + mouseMove.target.tagName); return; } @@ -2417,11 +2435,20 @@ // apply new default cursor to entire html document document.getElementsByTagName("html")[0].style.cursor = 'url("' + cursors.default + '"), auto'; + + document.getElementById("pointerCursorInput").value = ""; } function setGrabCursor() { cursors.grab = document.getElementById("grabCursorInput").value; // apply new grab cursor to grabbable elements... + let movableElements = document.getElementsByClassName("movable"); + for (let i = 0; i < movableElements.length; i++) { + console.log(movableElements[i]); + movableElements[i].style.cursor = cursors.grab ? 'url("' + cursors.grab + '"), grab' : "grab"; + } + + document.getElementById("grabCursorInput").value = ""; } /********************** * BOOK MARK HANDLERS *