Make formatting help area movable

Author: codeling

index.css

@@ -312,14 +312,14 @@ img {
 
 #drawer {
 	display: inline-block;
-	position: fixed;
+	position: absolute;
 	width: 300px;
 	background-color: rgb(240, 240, 240);
 	opacity: 0.5;
 	border: 1px solid black;
 	border-radius: 5px;
-	margin-top: 1.8em;
 	padding: 0;
+	cursor: move;
 }
 #drawer h5 {
 	border-bottom: 1px solid black;
@@ -338,10 +338,10 @@ img.icon {
 	width: 1.5em;
 	vertical-align: middle;
 }
-a img.icon:hover {
+a > img.icon:hover, a > span.icongroup:hover {
 	outline: 1px outset white;
 }
-a img.icon:active {
+a > img.icon:active, a > span.icongroup:active {
 	outline: 1px inset white;
 }
 .rightaligned

index.php

@@ -85,11 +85,7 @@ function printHeader($title, $bodyclass="")
 	print "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n";
 	print "    <link type=\"text/css\" rel=\"stylesheet\" href=\"" . BASE_URI . "/" . CSS_FILE ."\" />\n";
 	print "    <title>".PAGE_TITLE."$title</title>\n";
-	print "    <script>\n";
-	print "        function toggleDrawer(){\n";
-	print "            document.getElementById('drawer').classList.toggle('inactive');\n";
-	print "        }\n";
-	print "    </script>\n";
+	print "    <script src=\"wiki.js\"></script>\n";
 	print "  </head>\n";
 	print "  <body".($bodyclass != "" ? " class=\"$bodyclass\"":"").">\n";
 }
@@ -134,7 +130,7 @@ function printDrawer()
 		"*** Horizontal rule<br/>".
 		"--- Horizontal rule</h5><br/>".
 		"</div></div>".
-		"<a id=\"drawer-control\" href=\"\" onclick=\"toggleDrawer(); return false;\"><img src=\"/icons/format-text-bold.svg\" alt=\"".__('Show links here')."\" title=\"".__('Formatting help')."\" class=\"icon\"/><img src=\"/icons/format-text-italic.svg\" alt=\"".__('Show links here')."\" title=\"".__('Formatting help')."\" class=\"icon\"/><img src=\"/icons/format-text-code.svg\" alt=\"".__('Show links here')."\" title=\"".__('Formatting help')."\" class=\"icon\"/></span>\n";
+		"<a id=\"drawer-control\" href=\"\" onclick=\"toggleDrawer(); return false;\"><span class=\"icongroup\"><img src=\"/icons/format-text-bold.svg\" alt=\"".__('Formatting help')."\" title=\"".__('Formatting help')."\" class=\"icon\"/><img src=\"/icons/format-text-italic.svg\" alt=\"".__('Formatting help')."\" title=\"".__('Formatting help')."\" class=\"icon\"/><img src=\"/icons/format-text-code.svg\" alt=\"".__('Formatting help')."\" title=\"".__('Formatting help')."\" class=\"icon\"/></span></a>\n";
 }
 
 if ( REQUIRE_PASSWORD && !isset($_SESSION['password']) )

wiki.js

@@ -0,0 +1,63 @@
+
+function toggleDrawer()
+{
+     document.getElementById('drawer').classList.toggle('inactive');
+}
+
+// based on https://www.w3schools.com/howto/howto_js_draggable.asp
+function makeElementDraggable(elmnt)
+{
+    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+/*
+    if (document.getElementById(elmnt.id + "header"))
+    {
+        // if present, the header is where you move the DIV from:
+        document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
+    }
+    else
+    {
+        // otherwise, move the DIV from anywhere inside the DIV:
+*/
+    elmnt.onmousedown = dragMouseDown;
+//    }
+  
+    function dragMouseDown(e)
+    {
+        e = e || window.event;
+        e.preventDefault();
+        // get the mouse cursor position at startup:
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+        console.log("Click: "+pos3+", "+pos4);
+        document.onmouseup = closeDragElement;
+        // call a function whenever the cursor moves:
+        document.onmousemove = elementDrag;
+    }
+  
+    function elementDrag(e)
+    {
+        e = e || window.event;
+        e.preventDefault();
+        // calculate the new cursor position:
+        pos1 = pos3 - e.clientX;
+        pos2 = pos4 - e.clientY;
+        console.log("Pos: "+e.clientX+", "+e.clientY+", drag: "+pos1+", "+pos2+", offsetLeftTop: "+elmnt.offsetLeft+", "+elmnt.offsetTop+", newPos: "+(elmnt.offsetLeft-pos1)+", "+(elmnt.offsetTop-pos2));
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+        // set the element's new position:
+        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
+        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
+    }
+  
+    function closeDragElement()
+    {
+       // stop moving when mouse button is released:
+       document.onmouseup = null;
+       document.onmousemove = null;
+    }
+}
+
+window.onload = function(e)
+{
+    makeElementDraggable(document.getElementById("drawer"));
+};