Rewrite _getdir plugin

css/style.css

@@ -5,7 +5,7 @@
 }
 html, body {border: 0; margin: 0; padding: 0; cursor: default; overflow: hidden; background-color: #F5F5F5; height: 100%;}
 html, body, input,select,button,textarea{font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 11px;}
-div, td, label, fieldset, textarea, select, input, button, .Button {
+div, td, label, fieldset, textarea, select, input, button, dialog {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -468,7 +468,6 @@ span#loadimg {padding: 20px; background: transparent url(../images/ajax-loader.g
 .Icon_Share {background: transparent url(../images/share.gif) no-repeat left center}
 
 div#tadd-header {background-image: url(../images/world.gif)}
-div#tadd {display: none; left: 100px; top: 100px; position: absolute; margin: 0 auto }
 
 .konqueror div#tadd label { width: 80px; }
 .konqueror div#tadd { height: 290px; }
@@ -513,7 +512,7 @@ div#tadd {display: none; left: 100px; top: 100px; position: absolute; margin: 0
 }
 .speedEdit { width: 320px }
 #decimalDigitEdit input[type=number] {
-  min-width: 2rem;
+  min-width: 3rem;
 }
 .optionColumn {
   display: flex;

index.html

@@ -296,6 +296,7 @@ <h4 class="offcanvas-title" id="offcanvas-sidepanel-label"></h4>
 		</div>
 		<div class="graph_tab_grid"></div>
 		<div class="graph_tab_legend"></div>
+		<div id="dir-container"></div>
 		<script type="text/javascript" src="./js/bootstrap.bundle.min.js?v=5b1"></script>
 	</body>
 </html>

js/common.js

@@ -299,6 +299,10 @@ const theOptionsSwitcher = {
 	run: function(id) {
 		$('#' + this.current).hide();
 		$("#mnu_" + this.current).removeClass("focus");
+		// close directory frames associated with the current option page
+		if (thePlugins.isInstalled("_getdir")) {
+			thePlugins.get("_getdir").hideBrowseFrame(this.current);
+		}
 		this.current = id;
 		$('#' + this.current).show();
 		$("#mnu_" + this.current).addClass("focus");

js/content.js

@@ -639,7 +639,7 @@ function makeContent() {
 							$("<tr>").append(
 								...[
 									"", "Default", "KB", "MB", "GB", "TB", "PB",
-								].map((unit) => $("<td>").text(theUILang[unit] ?? "")),
+								].map((unit) => $("<th>").text(theUILang[unit] ?? "")),
 							),
 						),
 						$("<tbody>").append(

js/objects.js

@@ -73,7 +73,21 @@ class DnD {
 		if (self.detachedMask) {
 			const offs = self.mask.offset();
 			self.mask.hide();
-			self.obj.css({left: offs.left, top: offs.top});
+			self.obj.css(offs);
+			// move directory frames along with the dialog window
+			self.obj.find(".browseEdit").each((i, ele) => {
+				if ($(`#${ele.id}_frame`).css("display") !== "none") {
+					// move open ones only because they will automatically reposition
+					// when toggled open
+					const frameOffs = ele.getBoundingClientRect();
+					$(`#${ele.id}_frame`).css(
+						{
+							top: frameOffs.bottom,
+							left: frameOffs.left,
+						}
+					);
+				}
+			});
 		}
 		$(document).off("mousemove", self.run);
 		$(document).off("mouseup", self.finish);
@@ -181,25 +195,38 @@ var theDialogManager =
 	        	this.items[id].afterShow(id);
 		this.bringToTop(id);
 	},
-	hide: function( id, callback )
-	{
-		var pos = $.inArray(id+"",this.visible);
-		if(pos>=0)
-			this.visible.splice(pos,1);
-        	var obj = $('#'+id);
-        	if($type(this.items[id]) && ($type(this.items[id].beforeHide)=="function"))
-	        	this.items[id].beforeHide(id);
-		obj.hide(this.divider,callback);
-        	if($type(this.items[id]) && ($type(this.items[id].afterHide)=="function"))
-	        	this.items[id].afterHide(id);
-		if(obj.data("modal"))
+	hide: function(id, callback) {
+		const pos = $.inArray(id + "", this.visible);
+		if (pos >= 0)
+			this.visible.splice(pos, 1);
+		const obj = $('#'+id);
+		if ($type(this.items[id]) && ($type(this.items[id].beforeHide) === "function"))
+			this.items[id].beforeHide(id);
+		obj.hide(this.divider, callback);
+		thePlugins.get("_getdir").hideBrowseFrame(id);  // close associated directory frames
+		if ($type(this.items[id]) && ($type(this.items[id].afterHide) === "function"))
+			this.items[id].afterHide(id);
+		if (obj.data("modal"))
 			this.clearModalState();
 	},
-	setHandler: function(id,type,handler)
-	{
-		if($type(this.items[id]))
-	        	this.items[id][type] = handler;
-		return(this);
+	setHandler: function(id, type, handler) {
+		if ($type(this.items[id]))
+			this.items[id][type] = handler;
+		return this;
+	},
+	addHandler: function(id, type, handler) {
+		if ($type(this.items[id])) {
+			const existing = this.items[id][type];
+			if (existing) {
+				this.items[id][type] = function() {
+					existing();
+					handler();
+				};
+			} else {
+				this.items[id][type] = handler;
+			}
+		}
+		return this;
 	},
 	isModalState: function()
 	{

js/webui.js

@@ -355,16 +355,9 @@ var theWebUI =
 		this.requestWithoutTimeout("?action=getuisettings", [this.initSettings, this], true);
 	},
 
-	loadPlugins: function()
-	{
-		if(thePlugins.isInstalled("_getdir"))
-		{
-			$('#dir_edit').after($("<input type=button>").addClass("Button").attr("id","dir_btn").on('focus', function() { this.blur(); } ));
-			var btn = new this.rDirBrowser( 'tadd', 'dir_edit', 'dir_btn' );
-			theDialogManager.setHandler('tadd','afterHide',function()
-			{
-				btn.hide();
-			});
+	loadPlugins: function() {
+		if (thePlugins.isInstalled("_getdir")) {
+			new this.rDirBrowser("dir_edit");
 		}
 		correctContent();
 		this.updateServerTime();

plugins/_getdir/_getdir.css

@@ -1,24 +1,31 @@
-html {height: 100%;}
-body {background-color: window; color: windowtext; border: 0px; margin: 0px; padding: 0px; -moz-user-select:none; overflow: hidden; height: 100%;}
-.dir-list {display: flex; flex-direction: column; align-items: stretch; height: 100%;}
-.dir-list div {
-  padding-top: 1px;
-  padding-bottom: 1px;
-  padding-left: 0px;
-  padding-right: 0px;
-  cursor: default;
-  font-size: 11px;
-  font-family: Tahoma, Arial, Helvetica, sans-serif;
-  white-space: nowrap;
+.browseFrame {
+  position: absolute;
+  border: 1px solid #B0B0B0;
+  background-color: #F0F0F0;
+  height: 200px; /* default height 200px */
+  overflow: hidden;
+  padding: 0.25rem;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+}
+.rmenuobj {
+  border: 0;
+  overflow-y: auto;
+  padding: 0.25rem;
+}
+.rmenuitem {
+  color: windowtext;
+  padding: 0.15rem;
+  text-wrap: nowrap;
+}
+.rmenuitem.active {
+  color: highlighttext;
+  background-color: highlight;
 }
-.search-bar {display: flex; flex-direction: row;}
-.search-bar input[type="text"] {flex-grow: 1;}
-.rmenuobj {margin-bottom: 5px; border-width: 0; overflow-y: auto; flex-grow: 1;}
-.rmenuitem { color: windowtext; }
-.rmenuitemselected { color: highlighttext; background-color: highlight; }
 
 input.browseButton, button.browseButton {
-  width:30px;
+  width: 30px;
   margin-left: 0.25rem;
   margin-right: 0.25rem;
 }