attach path_info data to dom nodes and update data with radio buttons

admin.html

@@ -17,12 +17,10 @@
 	</ul>
 </div>
 
-<div id="main_container">
+<div id="main_container"></div>
-	<ul></ul>
-</div>
 
 <template id="path_info_template">
-	<li>
+	<div>
 		<form>
 			<input type="radio" name="media_type" value="movie" />
 			<label>movie</label>
@@ -30,7 +28,7 @@
 			<label>tv_show</label>
 			<span />
 		</form>
-	</li>
+	</div>
 </template>
 
 <h3>errors</h3>

static/admin.js

@@ -19,39 +19,84 @@
 const SCAN_URL = '/video_metadata/admin.php?action=scan';
 
 
-function displayPathInfo(path_info)
+function copyJSONtoDOMData(node, path_info)
+{
+	node.dataset.baseName = path_info.base_name;
+	node.dataset.contentSize = path_info.content_size;
+	node.dataset.depth = path_info.depth;
+	node.dataset.fileExtension = path_info.path_extension;
+	node.dataset.fullPath = path_info.full_path;
+	node.dataset.mediaType = path_info.media_type;
+	node.dataset.pathType = path_info.path_type;
+}
+
+function updatePathInfoStyle(node)
+{
+	node.classList.remove('unknown', 'movie', 'tv_show');
+
+	if (node.dataset.pathType == 'directory') {
+		node.classList.add('directory');
+	} else if (node.dataset.pathType == 'file') {
+		node.classList.add('file');
+
+		if (node.dataset.mediaType != '')
+			node.classList.add(node.dataset.mediaType);
+	}
+
+	if (node.dataset.mediaType == 'unknown')
+		node.classList.add('unknown');
+}
+
+function updateMediaType(node, media_type)
+{
+	node.dataset.mediaType = media_type;
+	updateRadioButtons(node, media_type)
+	updatePathInfoStyle(node);
+
+	for (let child of node.children) {
+		if (child.nodeName == 'DIV')
+			updateMediaType(child, media_type);
+	}
+}
+
+function updateRadioButtons(node, media_type)
+{
+	if (media_type == 'movie')
+		node.querySelector('input[value^="movie"]').setAttribute('checked', true);
+	else if (media_type == 'tv_show')
+		node.querySelector('input[value^="tv_show"]').setAttribute('checked', true);
+}
+
+// NOTE: recursively build DOM tree with attached data attributes and callbacks
+//	for editing the data
+function buildDirectoryTreeWithData(path_info)
 {
 	const DEPTH_NAMES = ['depth_0', 'depth_1', 'depth_2', 'depth_3', 'depth_4', 'depth_5'];
 
 	let t = document.querySelector("#path_info_template");
 	let clone = document.importNode(t.content, true);
-	let sub_list = clone.querySelector('li');
+	let sub_list = clone.querySelector('div');
 	sub_list.querySelector('form span').textContent = path_info.base_name;
 	sub_list.classList.add(DEPTH_NAMES[path_info.depth]);
 
-	if (path_info.path_type == 'directory') {
+	copyJSONtoDOMData(sub_list, path_info);
-		sub_list.classList.add('directory');
+	updatePathInfoStyle(sub_list);
-	} else if (path_info.path_type == 'file') {
+	updateRadioButtons(sub_list, path_info.media_type)
-		sub_list.classList.add('file');
-		sub_list.classList.add(((path_info.media_type == '') ? 'none' : path_info.media_type));
-	}
-	if (path_info.media_type == 'unknown')
-		sub_list.classList.add('unknown');
-
-	if (path_info.media_type == 'movie')
-		sub_list.querySelector('input[value^="movie"]').setAttribute('checked', true);
-	else if (path_info.media_type == 'tv_show')
-		sub_list.querySelector('input[value^="tv_show"]').setAttribute('checked', true);
 
 	// NOTE: don't display the radio buttons on top level directory
 	if (path_info.depth == 0) {
 		let s = sub_list.querySelector('form span');
 		sub_list.appendChild(s);
 		sub_list.removeChild(sub_list.querySelector('form'));
+	} else {
+		//sub_list.querySelector('form').addEventListener('change', onMediaTypeChanged);
+		sub_list.querySelector('form').addEventListener('change', function(e){
+			updateMediaType(sub_list, e.target.value);
+		});
 	}
 
 	for (let node of path_info.contents)
-		sub_list.appendChild(displayPathInfo(node));
+		sub_list.appendChild(buildDirectoryTreeWithData(node));
 
 	return clone;
 }
@@ -60,7 +105,7 @@ function scanFolderResponse(data)
 {
 	let error_container = document.querySelector('#error_container');
 	let info_container = document.querySelector('#info pre');
-	let main_container = document.querySelector('#main_container ul');
+	let main_container = document.querySelector('#main_container');
 	resetContainers(error_container, info_container, main_container);
 
 	if (data.errors) {
@@ -78,7 +123,7 @@ function scanFolderResponse(data)
 
 	if (data.path_info) {
 		console.log(data.path_info);
-		main_container.appendChild(displayPathInfo(data.path_info));
+		main_container.appendChild(buildDirectoryTreeWithData(data.path_info));
 	}
 }
 

static/default.css

@@ -62,7 +62,6 @@ ul {
 .file {	font-size: 0.75em; }
 .movie { background-color: #89b441; }
 .tv_show { background-color: #ccf; }
-.none { background-color: #ccc; }
 .unknown { background-color: #c77; }
 
 .depth_1 { margin-left: 20px; }