WI: Tag polish

- make the button thingeys look more button-ey
- enter now saves the focused tag and focuses the placeholder tag
- reduced code duplication for primary vs secondary and normal vs
  placeholder tags

static/koboldai.css

@@ -1268,8 +1268,32 @@ td.server_vars {
 	border-color: var(--wi_tag_color);
 }
 
-.tag .delete_icon {
+.tag .tag_button {
 	cursor: pointer;
+	opacity: 0.4;
+	font-size: 16px;
+	position: relative;
+}
+
+.tag .delete_icon {
+	top: 3px;
+	right: 3px;
+}
+
+.tag .add_icon {
+	top: 3px;
+	right: 3px;
+}
+
+.tag .tag_text {
+	display: inline-block;
+	outline: none;
+	position: relative;
+	right: 3px;
+}
+
+.placeholder_tag .tag_text:empty {
+	opacity: 0.4;
 }
 
 .oi[folder] {

static/koboldai.js

@@ -83,6 +83,7 @@ let story_id = -1;
 var dirty_chunks = [];
 var initial_socketio_connection_occured = false;
 var selected_model_data;
+var attention_wanting_wi_bar = null;
 
 // Each entry into this array should be an object that looks like:
 // {class: "class", key: "key", func: callback}
@@ -2230,15 +2231,16 @@ function world_info_entry(data) {
 		this.classList.add("pulse");
 	})
 
-	tags = world_info_card.querySelector('.world_info_tag_primary_area');
+	const tags = world_info_card.querySelector('.world_info_tag_primary_area');
 	tags.id = "world_info_tags_"+data.uid;
 	//add tag content here
-	add_tags(tags, data);
+	add_tags(tags, data, "primary");
 	
-	secondarytags = world_info_card.querySelector('.world_info_tag_secondary_area');
+	const secondarytags = world_info_card.querySelector('.world_info_tag_secondary_area');
 	secondarytags.id = "world_info_secondtags_"+data.uid;
 	//add second tag content here
-	add_secondary_tags(secondarytags, data);
+	add_tags(secondarytags, data, "secondary");
+
 	//w++ toggle
 	wpp_toggle_area = world_info_card.querySelector('.world_info_wpp_toggle_area');
 	wpp_toggle_area.id = "world_info_wpp_toggle_area_"+data.uid;
@@ -4229,161 +4231,139 @@ function removeA(arr) {
     return arr;
 }
 
-function add_tags(tags, data) {
+function create_tag_element(tagText, uid, tagType) {
-	while (tags.firstChild) { 
+	// tagText is string, or null for empty tag at end.
-		tags.removeChild(tags.firstChild);
+	// barType should be "primary" or "secondary"
+	const isPlaceholderTag = tagText === null;
+
+	const wiCardEl = document.querySelector(`.world_info_card[uid="${uid}"]`)
+	const keyField = {primary: "key", secondary: "keysecondary"}[tagType];
+	const tagClassFragment = {primary: "tags", primary: "secondtags"}[tagType];
+
+	const tagEl = document.createElement("span");
+	tagEl.classList.add("tag");
+	if (isPlaceholderTag) tagEl.classList.add("placeholder_tag");
+
+	const xEl = document.createElement("span");
+	xEl.classList.add("material-icons-outlined");
+	xEl.classList.add("tag_button");
+
+	if (!isPlaceholderTag) {
+		xEl.classList.add("delete_icon");
+		xEl.textContent = "close";
+	} else {
+		xEl.classList.add("add_icon");
+		xEl.textContent = "add";
 	}
-	for (tag of data.key) {
+
-		tag_item = document.createElement("span");
+	xEl.setAttribute("uid", uid);
-		tag_item.classList.add("tag");
+	xEl.setAttribute("tag", tagText);
-		x = document.createElement("span");
+	xEl.addEventListener("click", function() {
-		x.textContent = "x ";
+		removeA(
-		x.classList.add("delete_icon");
+			world_info_data[uid][keyField],
-		x.setAttribute("uid", data.uid);
+			tagText
-		x.setAttribute("tag", tag);
+		);
-		x.onclick = function () {
+		send_world_info(uid);
-						removeA(world_info_data[this.getAttribute('uid')]['key'], this.getAttribute('tag'));
+		this.classList.add("pulse");
-						send_world_info(this.getAttribute('uid'));
+	});
-						this.classList.add("pulse");
+
-					};
+	const textEl = document.createElement("span");
-		text = document.createElement("span");
+	textEl.classList.add("tag_text");
-		text.textContent = tag;
+	textEl.textContent = tagText;
-		text.setAttribute("contenteditable", true);
+
-		text.setAttribute("uid", data.uid);
+	textEl.setAttribute("data-placeholder", "Tag")
-		text.setAttribute("tag", tag);
+	textEl.setAttribute("contenteditable", true);
-		text.id = "world_info_tags_text_"+data.uid+"_"+tag;
+	textEl.setAttribute("uid", uid);
-		text.ondragstart=function() {event.preventDefault();event.stopPropagation();};
+	textEl.setAttribute("tag", tagText);
-		text.setAttribute("draggable", "true");
+	textEl.setAttribute("draggable", "true");
-		text.onfocus=function() {this.parentElement.parentElement.parentElement.setAttribute('draggable', 'false');this.setAttribute('draggable', 'false');};
+	textEl.id = `world_info_${tagClassFragment}_text_${uid}_${tagText || "blank"}`;
-		text.onblur = function () {
+
-						this.parentElement.parentElement.parentElement.setAttribute('draggable', 'true');
+	textEl.addEventListener("dragstart", function(event) {
-						this.setAttribute('draggable', 'true');
+		event.preventDefault();
-						for (var i = 0; i < world_info_data[this.getAttribute('uid')]['key'].length; i++) {
+		event.stopPropagation();
-							if (world_info_data[this.getAttribute('uid')]['key'][i] == this.getAttribute("tag")) {
+	});
-								world_info_data[this.getAttribute('uid')]['key'][i] = this.textContent;
+
-							}
+	textEl.addEventListener("focus", function(event) {
-						}
+		wiCardEl.setAttribute('draggable', 'false');
-						send_world_info(this.getAttribute('uid'));
+		this.setAttribute('draggable', 'false');
-						this.classList.add("pulse");
+	});
-					};
+
-		tag_item.append(x);
+	textEl.addEventListener("blur", function () {
-		tag_item.append(text);
+		wiCardEl.setAttribute('draggable', 'true');
-		tag_item.id = "world_info_tags_"+data.uid+"_"+tag;
+		this.setAttribute('draggable', 'true');
-		tags.append(tag_item);
+
-	}
+		if (!isPlaceholderTag) {
-	//add the blank tag
+			// Normal tag
-	tag_item = document.createElement("span");
+			for (var i = 0; i < world_info_data[uid][keyField].length; i++) {
-	tag_item.classList.add("tag");
+				if (world_info_data[uid][keyField][i] !== tagText) {
-	x = document.createElement("span");
+					world_info_data[uid][keyField][i] = this.innerText;
-	x.textContent = "+ ";
+				}
-	tag_item.append(x);
+			}
-	text = document.createElement("span");
+		} else {
-	text.classList.add("rawtext");
+			// Placeholder tag
-	text.textContent = "    ";
+			if (!this.textContent.trim()) return;
-	text.setAttribute("uid", data.uid);
+
-	text.setAttribute("contenteditable", true);
+			on_new_wi_item = this.id;
-	text.id = "world_info_tags_text_"+data.uid+"_blank";
+			world_info_data[uid][keyField].push(this.textContent);
-	text.ondragstart=function() {event.preventDefault();event.stopPropagation();};
+		}
-	text.setAttribute("draggable", "true");
+
-	text.onfocus=function() {this.parentElement.parentElement.parentElement.setAttribute('draggable', 'false');this.setAttribute('draggable', 'false');};
+		send_world_info(uid);
-	text.onblur = function () {
+		this.classList.add("pulse");
-					this.parentElement.parentElement.parentElement.setAttribute('draggable', 'true');
+	});
-					this.setAttribute('draggable', 'true');
+
-					if (this.textContent.trim() != "") {
+	textEl.addEventListener("keydown", function(event) {
-						//console.log(this.textContent);
+		if (event.key === "Enter") {
-						on_new_wi_item = this.id;
+			// Press Enter to save tag and focus next one
-						world_info_data[this.getAttribute('uid')]['key'].push(this.textContent);
+			event.preventDefault();
-						send_world_info(this.getAttribute('uid'));
+
-						this.classList.add("pulse");
+			// HACK: Work around the fact that the server is in control of
-					} else {
+			// placing these elements
-						this.textContent = "    ";
+			attention_wanting_wi_bar = tagType;
-					}
+			// And don't wait for like 10000 years to randomly take focus from
-				};
+			// the user
-	text.onclick = function () {
+			setTimeout(() => attention_wanting_wi_bar = null, 500);
-					this.textContent = "";
+
-				};
+			this.blur();
-	tag_item.append(text);
+		} else if (event.key === "Escape") {
-	tag_item.id = "world_info_secondtags_"+data.uid+"_new";
+
-	tags.append(tag_item);
+		}
+	})
+
+	tagEl.append(xEl);
+	tagEl.append(textEl);
+	tagEl.id = `world_info_${tagClassFragment}_${uid}_${tagText || "new"}`;
+
+	return tagEl;
 }
 
-function add_secondary_tags(tags, data) {
+function add_tags(tagBarEl, data, tagType) {
-	while (tags.firstChild) { 
+	// tagType is either "primary" or "secondary"
-		tags.removeChild(tags.firstChild);
+
+	// Remove existing tags
+	while (tagBarEl.firstChild) {
+		tagBarEl.removeChild(tagBarEl.firstChild);
 	}
-	for (tag of data.keysecondary) {
+
-		tag_item = document.createElement("span");
+	const tagList = {
-		tag_item.classList.add("tag");
+		primary: data.key,
-		x = document.createElement("span");
+		secondary: data.keysecondary
-		x.textContent = "x ";
+	}[tagType];
-		x.classList.add("delete_icon");
+
-		x.setAttribute("uid", data.uid);
+	for (tag of tagList) {
-		x.setAttribute("tag", tag);
+		tagBarEl.append(create_tag_element(tag, data.uid, tagType));
-		x.onclick = function () {
-						removeA(world_info_data[this.getAttribute('uid')]['keysecondary'], this.getAttribute('tag'));
-						send_world_info(this.getAttribute('uid'));
-						this.classList.add("pulse");
-					};
-		text = document.createElement("span");
-		text.textContent = tag;
-		text.setAttribute("contenteditable", true);
-		text.setAttribute("uid", data.uid);
-		text.setAttribute("tag", tag);
-		text.id = "world_info_secondtags_text_"+data.uid+"_"+tag;
-		text.ondragstart=function() {event.preventDefault();event.stopPropagation();};
-		text.setAttribute("draggable", "true");
-		text.onfocus=function() {this.parentElement.parentElement.parentElement.setAttribute('draggable', 'false');this.setAttribute('draggable', 'false');};
-		text.onblur = function () {
-						this.parentElement.parentElement.parentElement.setAttribute('draggable', 'true');
-						this.setAttribute('draggable', 'true');
-						for (var i = 0; i < world_info_data[this.getAttribute('uid')]['keysecondary'].length; i++) {
-							if (world_info_data[this.getAttribute('uid')]['keysecondary'][i] == this.getAttribute("tag")) {
-								world_info_data[this.getAttribute('uid')]['keysecondary'][i] = this.textContent;
-							}
-						}
-						send_world_info(this.getAttribute('uid'));
-						this.classList.add("pulse");
-					};
-		tag_item.append(x);
-		tag_item.append(text);
-		tag_item.id = "world_info_secondtags_"+data.uid+"_"+tag;
-		tags.append(tag_item);
 	}
+
 	//add the blank tag
-	tag_item = document.createElement("span");
+	const placeholderTagEl = create_tag_element(null, data.uid, tagType);
-	tag_item.classList.add("tag");
+	tagBarEl.append(placeholderTagEl);
-	x = document.createElement("span");
+
-	x.textContent = "+ ";
+	if (attention_wanting_wi_bar === tagType) {
-	tag_item.append(x);
+		const textEl = placeholderTagEl.querySelector(".tag_text");
-	text = document.createElement("span");
+		// HACK: Please don't ask because I do not know
-	text.classList.add("rawtext");
+		setTimeout(() => textEl.focus(), 1);
-	text.textContent = "    ";
+	}
-	text.setAttribute("uid", data.uid);
-	text.setAttribute("contenteditable", true);
-	text.id = "world_info_secondtags_text_"+data.uid+"_blank";
-	text.ondragstart=function() {event.preventDefault();event.stopPropagation();};
-	text.setAttribute("draggable", "true");
-	text.onfocus=function() {this.parentElement.parentElement.parentElement.setAttribute('draggable', 'false');this.setAttribute('draggable', 'false');};
-	text.onblur = function () {
-					this.parentElement.parentElement.parentElement.setAttribute('draggable', 'true');
-					this.setAttribute('draggable', 'true');
-					if (this.textContent.trim() != "") {
-						on_new_wi_item = this.id;
-						world_info_data[this.getAttribute('uid')]['keysecondary'].push(this.textContent);
-						send_world_info(this.getAttribute('uid'));
-						this.classList.add("pulse");
-					} else {
-						this.textContent = "    ";
-					}
-				};
-	text.onclick = function () {
-					this.textContent = "";
-				};
-	tag_item.append(text);
-	tag_item.id = "world_info_secondtags_"+data.uid+"_new";
-	tags.append(tag_item);
 }
-	
+
 function create_new_wi_entry(folder) {
 	var uid = -1;
 	for (item of document.getElementsByClassName('world_info_card')) {