moving favorite tag to important, bug fixes

was a pain and code is clunky, but needed to be done

artists_and_tags.js

@@ -861,6 +861,7 @@ var artistsData = [
 ["Rubens","Peter Paul","baroque|Flemish|history|mythology|nudes|oil-painting|painting|renaissance|romanticism|added-2023-08-08",false],
 ["Ruysch","Rachel","baroque|painting|still-life|added-2023-08-16",false],
 ["Ryder","Albert Pinkham","dream-like|impressionism|painting|seascapes|added-2023-08-16",false],
+["Ryden","Mark","big-eyes|childhood|contemporary|creatures|dark|dream-like|illustration|surreal|added-2023-09-01",false],
 ["Rydingsvard","Ursula von","abstract|Metamorphosis|Minimalism|Sculpture|added-2023-08-08",false],
 ["Rysselberghe","Theo van","expressionism|impressionism|landscapes|portraits|added-2023-09-01",false],
 ["Saarinen","Eero","Architecture|metaphysics|modern|Modern|added-2023-08-08",false],
@@ -1329,7 +1330,7 @@ var artistsData = [
 // first category must be 'important' and last must be 'other' or things won't work
 // tag names cannot be 'image-item' or 'hidden' because well, this isn't coded that well, lol
 var tagCategories = [
-	['important'],
+	['important',"favorite"],
 	['mediums',"3D-rendering","animation","architecture","assemblage","body-art","book-illustration","bronze","calligraphy","caricature","cartoon","ceiling-painting","ceramics","collage","comics","digital","drawing","earthworks","enamel","engraving","etching","experiential","film","frescoes","glasswork","graffiti","graphic-design","graphic-novel","illuminated-manuscripts","illustration","immersive","metalwork","infinity-rooms","installation","interactive","jewelry","kinetic","land-art","landscape-architecture","light-art","lithography","manga-anime","mixed-media","montage","mosaic","multimedia","mural-painting","newspaper","oil-painting","painting","pastel","pen-and-ink","performance","photography","photography-color","photography-bw","posters","printmaking","public-art","puppets","quilting","recycled-materials","sculpture","sketching","stained-glass","street-art","tapestry","textiles","typography","velvet","video-art","video-games","virtual-reality","wall-drawings","watercolor","woodblock"],
 	['styles',"abstract","action-painting","afro-futurism","angular","anthropomorphism","atmospheric","blurry","bohemian","bold-colors","color-field","colorful","cute","cyberpunk","dark","delicate","drip-painting","eerie","elegant","ethereal","figurative","flat-colors","folk-art","fragmentation","futuristic","geometric","gestural","golden","gothic","grids","grungy","high-contrast","illusion","impasto","improvisation","industrial","kids-book","large-scale","long-exposure","low-contrast","opulent","macro-world","Maximalism","melancholy","messy","miniature","monochromatic","muted-colors","mysterious","naturalist","neon","noir","observational","organic","ornate","pastel-colors","photorealism","pin-up","playful","polka-dots","precisionism","primary-colors","propaganda","psychedelic","pulp","Rococo","shallow-depth-of-field","steampunk","symbolist","text-based","vibrant","whimsical"],
 	['themes',"activism","adventure","advertising","allegory","anxiety","autobiographical","childhood","commercial-art","conceptual","consumerism","controversy","death","displacement","distortion","documentary","dream-like","dreams","dystopia","empowerment","environmentalism","exoticism","family","fantasy","femininity","feminism","fleeting-moments","folklore","friendship","futurism","homo-eroticism","horror","identity","kitsch","loneliness","luxury","magic","mathematics","metamorphosis","metaphysics","mysticism","nightlife","nostalgia","observational","plein-air","politics","punk","religion","satire","science-fiction","serenity","slice-of-life","social-commentary","solitude","spirituality","surreal","utopia"],

index.css

@@ -1012,7 +1012,7 @@ input[type="checkbox"]:checked::before {
 	color: #ffe300;
 	opacity: 0.8;
 	cursor: pointer;
-	margin: 5px 0 0 21px;
+	margin: 2px 0 10px 27px;
 }
 
 #edit_most_used:hover {
@@ -1069,3 +1069,7 @@ input[type="checkbox"]:checked::before {
 #layout.edit_mode #toggles .most_used_indicator {
 	visibility: visible;
 }
+
+#layout.edit_mode #favorite_label {
+	cursor: default;
+}

index.html

@@ -53,11 +53,8 @@
 				<label class="top_control">
 					<input type="checkbox" checked="checked" name="deprecated" value="deprecated" autocomplete="off"><span>hide unknown to SDXL</span><span class="count"></span>
 				</label>
-				<label class="top_control">
-					<input type="checkbox" checked="checked" name="favorite" value="favorite" autocomplete="off"><span>favorited</span><span class="count"></span>
-				</label>
 				<div class="divider"></div>
-				<span id="edit_most_used" class="hidden">edit</span>
+				<span id="edit_most_used" class="hidden">edit these</span>
 				<!-- JS will insert checkboxes here -->
 			</div>
 			<div id="gutter">

index.js

@@ -45,9 +45,9 @@ async function startUp() {
 	unhideBasedOnPermissiveSetting();
 	updateArtistsCountPerTag('start');
 	rotatePromptsImages();
+	await loadMostUsedTags();
 	sortArtists();
 	sortTags();
-	await loadMostUsedTags();
 	updateArtistsCountPerCategory();
 	showHideLowCountTags();
 	makeStyleRuleForDrag();
@@ -401,6 +401,8 @@ function insertCheckboxesFromArtistsData() {
 			uniqueTags.add(tag.toLowerCase());
 		});
 	});
+	// favorite isn't an artist tag so has to be added
+	uniqueTags.add('favorite');
 	var uTags = Array.from(uniqueTags);
 	var toggles = document.getElementById('toggles');
 	for(i=0,il=uTags.length;i<il;i++) {
@@ -426,6 +428,8 @@ function insertCheckboxesFromArtistsData() {
 			toggles.appendChild(label);
 		}
 	}
+	// so it can be referenced by CSS
+	document.querySelector('input[name="favorite"').parentNode.id = "favorite_label";
 }
 
 function insertCheckboxesFromCategories() {
@@ -454,9 +458,10 @@ async function loadCheckboxesState() {
 	await loadItemBasedOnAccessType('tagsChecked').then(state => {
 		let allChecked = true;
 		for (let name in state) {
-			if (document.querySelector('input[name="'+name+'"]')) {
-				document.querySelector('input[name="'+name+'"]').checked = state[name];
-				styleLabelToCheckbox(document.querySelector('input[name="'+name+'"]'));
+			let checkbox = document.querySelector('input[name="'+name+'"]');
+			if (checkbox) {
+				checkbox.checked = state[name];
+				styleLabelToCheckbox(checkbox);
 				if(name != 'mode' && name != 'use_categories') {
 					if(!state[name]) {
 						allChecked = false;
@@ -645,33 +650,36 @@ function updateArtistsCountPerTagSlow() {
 	let deprecatedDivs = document.querySelectorAll('.image-item[data-deprecated="true"]');
 	let last = performance.now();
 	checkboxes.forEach(function(checkbox) {
-		let isTop = checkbox.parentNode.classList.contains('top_control');
-		if(!isTop) {
-			let matchingDivs;
-			if(isPermissive) {
-				matchingDivs = document.querySelectorAll('.image-item[data-tag-list*="' + checkbox.name + '"]');
-			} else {
-				// for strict mode, for each checkbox, only count artists with a tags matching all checked checkboxes
-				matchingDivs = document.querySelectorAll('.image-item[data-tag-list*="' + checkbox.name + '"]:not(.hidden)');
-			}
-			let filteredDivs = Array.from(matchingDivs).filter(mat => {
-				// only includes the artists known to SD
-				return !Array.from(deprecatedDivs).some(dep => dep === mat);
-			});
-			let count = 0;
-			if(deprecatedCheckbox.checked) {
-				count = filteredDivs.length;
-			} else {
-				count = matchingDivs.length;
-			}
-			if(!count) { count = 0; }
-			checkbox.parentNode.querySelector('.count').textContent = ' - ' + count.toLocaleString();
-			checkbox.parentNode.classList.remove('no_matches');
-			checkbox.parentNode.querySelector('input').disabled = false;
-			if(!isPermissive) {
-				if(count == 0) {
-					checkbox.parentNode.classList.add('no_matches');
-					checkbox.parentNode.querySelector('input').disabled = true;
+		// 'favorite' count is updated elsewhere
+		if(checkbox.name != 'favorite') {
+			// top controls aren't tags and don't have counts
+			if(!checkbox.parentNode.classList.contains('top_control')) {
+				let matchingDivs;
+				if(isPermissive) {
+					matchingDivs = document.querySelectorAll('.image-item[data-tag-list*="' + checkbox.name + '"]');
+				} else {
+					// for strict mode, for each checkbox, only count artists with a tags matching all checked checkboxes
+					matchingDivs = document.querySelectorAll('.image-item[data-tag-list*="' + checkbox.name + '"]:not(.hidden)');
+				}
+				let filteredDivs = Array.from(matchingDivs).filter(mat => {
+					// only includes the artists known to SD
+					return !Array.from(deprecatedDivs).some(dep => dep === mat);
+				});
+				let count = 0;
+				if(deprecatedCheckbox.checked) {
+					count = filteredDivs.length;
+				} else {
+					count = matchingDivs.length;
+				}
+				if(!count) { count = 0; }
+				checkbox.parentNode.querySelector('.count').textContent = ' - ' + count.toLocaleString();
+				checkbox.parentNode.classList.remove('no_matches');
+				checkbox.parentNode.querySelector('input').disabled = false;
+				if(!isPermissive) {
+					if(count == 0) {
+						checkbox.parentNode.classList.add('no_matches');
+						checkbox.parentNode.querySelector('input').disabled = true;
+					}
 				}
 			}
 		}
@@ -696,10 +704,16 @@ function updateArtistsCountPerCategory() {
 	}
 	countItems.forEach(function(imageItem) {
 		let tagList = imageItem.dataset.tagList.split('|');
+		let isFavorited = imageItem.classList.contains('favorite');
 		for(i=0,il=tagCategories.length; i<il; i++) {
 			if(tagCategories[i].map(tag => tag.toLowerCase()).some(tag => tagList.includes(tag))) {
 				counts[i]++;
 			}
+			if(tagCategories[i][0] == 'important') {
+				if(isFavorited) {
+					counts[i]++;
+				}
+			}
 		}
 	});
 	for(i=0,il=tagCategories.length; i<il; i++) {
@@ -1238,6 +1252,17 @@ function sortTagsByAlpha() {
 		labels.forEach(function(label) {
 			let isTop = label.classList.contains('top_control');
 			if(!isTop) {
+				// appendChild will move the element to the end of the container
+				// "favorite" tag always stays at top
+				if(label.querySelector('input').name != 'favorite') {
+					container.appendChild(label);
+				}
+			}
+		});
+		// "added" tags always goes to bottom
+		labels.forEach(function(label) {
+			let name = label.querySelector('input').name;
+			if(name.indexOf('added-') > -1) {
 				// appendChild will move the element to the end of the container
 				container.appendChild(label);
 			}
@@ -1262,7 +1287,7 @@ function sortTagsByAlpha() {
 			arrayOfTagsLower.sort();
 			arrayOfTagsLower.forEach(tag => {
 				let label = labelMap[tag];
-				if (label) {
+				if(label) {
 					let isTop = label.classList.contains('top_control');
 					if(!isTop) {
 						label.dataset.isInCategory = categoryLabel.dataset.categoryName;
@@ -1287,6 +1312,10 @@ function sortTagsByAlpha() {
 				container.appendChild(label);
 			}
 		});
+		// favorite always goes to top of important category
+		let importantCategory = document.querySelector('label[data-category-name="important"]');
+		let favoriteLabel = document.getElementById('favorite_label');
+		importantCategory.after(favoriteLabel);
 	}
 }
 
@@ -1303,6 +1332,17 @@ function sortTagsByCount() {
 		labels.forEach(function(label) {
 			let isTop = label.classList.contains('top_control');
 			if(!isTop) {
+				// appendChild will move the element to the end of the container
+				// "favorite" tag always stays at top
+				if(label.querySelector('input').name != 'favorite') {
+					container.appendChild(label);
+				}
+			}
+		});
+		// "added" tags always goes to bottom
+		labels.forEach(function(label) {
+			let name = label.querySelector('input').name;
+			if(name.indexOf('added-') > -1) {
 				// appendChild will move the element to the end of the container
 				container.appendChild(label);
 			}
@@ -1377,14 +1417,19 @@ function sortTagsByCount() {
 				container.appendChild(label);
 			}
 		});
+		// favorite always goes to top of important category
+		let importantCategory = document.querySelector('label[data-category-name="important"]');
+		let favoriteLabel = document.getElementById('favorite_label');
+		importantCategory.after(favoriteLabel);
 	}
 }
 
 async function loadMostUsedTags() {
+	// aka the important category
 	await loadItemBasedOnAccessType('mustUsedTags').then(state => {
 		let mostUsedCategory = document.querySelector('[data-category-name="important"]');
 		for(let tag in state) {
-			if (state[tag]) {
+			if(state[tag]) {
 				let label = document.querySelector('input[name="'+ tag +'"]');
 				if(label) {
 					label = label.parentNode;
@@ -1395,6 +1440,11 @@ async function loadMostUsedTags() {
 				}
 			}
 		}
+		// favorite is always most used
+		let favoriteLabel = document.getElementById('favorite_label');
+		favoriteLabel.classList.add('is_most_used');
+		favoriteLabel.querySelectorAll('.most_used_indicator')[0].textContent = '';
+		updateTagArrayToMatchMostUsed(true,favoriteLabel,'favorite');
 	});
 }
 
@@ -1439,7 +1489,7 @@ function enterExitEditMostUsedMode(doExit) {
 		if(editMostUsedMode || doExit) {
 			// exit edit mode
 			editMostUsedMode = false;
-			document.getElementById('edit_most_used').textContent = 'edit';
+			document.getElementById('edit_most_used').textContent = 'edit these';
 			document.getElementById('layout').classList.remove('edit_mode');
 			inputs.forEach(function(input) {
 				input.disabled = false;
@@ -1448,11 +1498,12 @@ function enterExitEditMostUsedMode(doExit) {
 			labels.forEach(function(label) {
 				// clean up classes added to track moved tags during edit mode
 				label.classList.remove('was_moved');
-			})
+			});
 			document.getElementById('toggles').style.width = 'calc(' + gutterEndPercentX + '% - 20px)';
 			document.getElementById('gutter').style.left =  gutterEndPercentX + '%';
 			document.getElementById('image-container').style.marginLeft = 'calc(' + gutterEndPercentX + '% + 50px)';
 			updateArtistsCountPerCategory();
+			sortTags();
 		} else {
 			// enter edit mode
 			editMostUsedMode = true;
@@ -1568,7 +1619,7 @@ function storeFavoriteState(artist) {
 function updateFavoritesCount() {
 	var favoritedArtists = document.getElementsByClassName('favorite');
 	var favoriteCount = favoritedArtists.length;
-	var favoriteCounter = document.querySelectorAll('input[name="favorite"]')[0].parentNode.querySelector('.count');
+	var favoriteCounter = document.getElementById('favorite_label').querySelector('.count');
 	favoriteCounter.textContent = ' - ' + favoriteCount;
 }
 
@@ -2338,12 +2389,16 @@ function addAllListeners() {
 	});
 	var labels = document.querySelectorAll('label');
 	Array.from(labels).forEach(function(label) {
-		label.addEventListener('click', function(e) {
-			if(editMostUsedMode) {
-				addRemoveIsMostUsed(this);
-				storeMostUsedState(this);
-			}
-		});
+		let name = label.querySelector('input').name;
+		if(name != 'favorite') {
+			// favorite can't be removed from most used
+			label.addEventListener('click', function(e) {
+				if(editMostUsedMode) {
+					addRemoveIsMostUsed(this);
+					storeMostUsedState(this);
+				}
+			});
+		}
 	});
 	// artists
 	var imageItems = document.getElementsByClassName('image-item');