From 1de256ec16b3c7d93c82ef336a35ed25dc8236e2 Mon Sep 17 00:00:00 2001
From: df <fieldhouse@gmx.net>
Date: Thu, 4 Mar 2021 13:19:13 +0000
Subject: [PATCH] Make use of unique element IDs for img consistent

Fixes https://hummy.tv/forum/threads/webif-web-interface-1-4-x.7712/post-153127
---
 webif/html/browse/script.js | 40 ++++++++++++++++++-------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/webif/html/browse/script.js b/webif/html/browse/script.js
index cec02bb..0b1235d 100755
--- a/webif/html/browse/script.js
+++ b/webif/html/browse/script.js
@@ -10,6 +10,18 @@ var plugins = {
 	dmenu_prepare: {}
 };
 
+// pattern matches directory path prefix
+var pathre = /.*\/|\.[^.]*$/g;
+
+// IDs of size, img, etc elements for folders use RFC4648 s5 encoding of folder name
+function folderID(folder) {
+	return btoa(escape(folder))
+		.replace(/\+/g, '-')
+		.replace(/\//g, '_')
+		.replace(/=/g, '');
+	}
+}
+
 function blockpage(msg)
 {
 	if (!msg)
@@ -111,22 +123,14 @@ function epginfo_callback(data, status, xhr)
 
 function insert_folder_size(folder, size)
 {
-	// folder = folder.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');
-	// ID of size element is ID + RFC4648 s5 encoding of folder name
-	folder = "ID" + 
-             btoa(escape(folder))
-                     .replace(/\+/g, '-')
-                     .replace(/\//g, '_')
-                     .replace(/=/g, '');	
-	//console.log("Folder: (%s) = (%s)", folder, size);
 	if (size.search(/\d$/) == -1)
 		size += 'iB';
 	else
 		size += ' bytes';
-	if (folder == "")
-		$('#dirsize').text(' (' + size + ')');
-	else
-		$('#' + folder).text(' (' + size + ')');
+	folder = folderID(folder);	
+	//console.log("Folder: (%s) = (%s)", folder, size);
+	$(folder == "" ? '#dirsize': '#ID' + folder)
+		.text(' (' + size + ')');
 }
 
 function folder_size_callback(data, status, xhr)
@@ -138,11 +142,9 @@ function folder_size_callback(data, status, xhr)
 
 function set_folder_new(folder, cnt)
 {
-	folder = folder.replace(/ /g, '');
-	folder = folder.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');
 	//console.log("Folder: (%s) = (%s)", folder, cnt);
 	left = cnt > 99 ? 11 : (cnt > 9 ? 14 : 17);
-	$('#img' + folder)
+	$('#img' + folderID(folder))
 	    .attr('src', '/img/Folder_New.png')
 	    .next('span.foldernum')
 	    .css('left', left + 'px')
@@ -161,10 +163,8 @@ function new_folder_callback(data, status, xhr)
 
 function set_folder__(folder)
 {
-	folder = folder.replace(/ /g, '');
-	folder = folder.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');
 	//console.log("Folder: (%s)", folder);
-	$('#img' + folder + ' ~ span.folderu').show();
+	$('#img' + folderID(folder) + ' ~ span.folderu').show();
 }
 
 function __folder_callback(data, status, xhr)
@@ -261,7 +261,7 @@ var $confirm;	// Populated after DOM is loaded.
 
 function confirm_action(action, callback, file, type, id)
 {
-	var bfile = file.replace(/.*\/|\.[^.]*$/g, '');
+	var bfile = file.replace(pathre, '');
 	$confirm.dialog('option', 'buttons', {
 		'Yes': function() { $(this).dialog('close');
 			callback(file, type, id); },
@@ -434,7 +434,7 @@ var menuclick = function(action, el, pos)
 {
 	var file = $(el).parent().prevAll('a.bf').last().attr('file');
 	var efile = encodeURIComponent(file);
-	var bfile = file.replace(/.*\/|\.[^.]*$/g, '');
+	var bfile = file.replace(pathre, '');
 	bfile = bfile.replace(/[\x00-\x1f]+/g, '');
 	var type = $(el).attr('type');
 	var id = $(el).attr('did');