added copy visible names to clipboard

artists_and_tags.js

@@ -1130,7 +1130,7 @@ var artistsData = [
 ["Smith","Jeffrey","cloudscapes|conceptual|dark|digital|dream-like|landscapes|magic-realism|surreal|added-2023-08-10",true],
 ["Smith","Kiki","body-art|contemporary|feminism|minimalism|performance|sculpture|added-2023-08-08",true],
 ["Smith","Michael James","contemporary|environmentalism|landscapes|added-2023-08-16",true],
-["Smith","Rodney","|fashion|monochromatic|photography|portraits|photography-bw|added-2023-08-16",false],
+["Smith","Rodney","fashion|monochromatic|photography|portraits|photography-bw|added-2023-08-16",false],
 ["Smith","Samantha Keely","abstract|abstract-Expressionism|contemporary|Dream-like|Loneliness|painting|added-2023-08-08",false],
 ["Smithson","Robert","conceptual|earthworks|environmentalism|land-art|post-minimalism|sculpture|added-2023-08-08",false],
 ["Solomon","Barbara Stauffacher","Commercial-art|contemporary|Graphic-Design|Graphic-design|Pop-art|added-2023-08-08",false],

index.css

@@ -114,6 +114,30 @@ h4 {
 	width: 100%;
 }
 
+#copy-all-names {
+	position: absolute;
+	z-index: 2;
+	left: calc(70% + 25px);
+	bottom: 50px;
+	transform: translateX(-50%);
+	white-space: nowrap;
+	background-color: #ffe300;
+	opacity: 0.8;
+	padding: 4px 8px;
+	border-radius: 4px;
+	box-shadow: 0 5px 10px black;
+	font-size: 12px;
+	font-weight: bold;
+	color: black;
+	cursor: pointer;
+	transition: opacity 100ms 200ms linear;
+}
+
+#image-container #copy-all-names:hover {
+	opacity: 1;
+	transition: opacity 100ms 0ms linear;
+}
+
 #alert {
 	position: fixed;
 	z-index: 1;

index.html

@@ -178,13 +178,16 @@
 				<span id="edit_most_used" class="hidden">edit</span>
 				<!-- JS will insert checkboxes here -->
 			</div>
-			<div id="gutter"><div data-tooltip="drag slowly"></div></div>
+			<div id="gutter">
+				<div data-tooltip="drag slowly"></div>
+			</div>
 			<div id="image-container">
 				<div id="filtersHidingAll">
 					these filters hide every image<br>
 					check-mark any tag or ‟permissive”<br>
 					👀
 				</div>
+				<div id="copy-all-names">copy all visible names</div>
 				<!-- JS will insert images here -->
 				<!--
 				<div class="image-item tag1 tag2">

index.js

@@ -1420,6 +1420,27 @@ function copyStuffToClipboard(item,stuff) {
 			.catch(() => {
 				doAlert('😭😭 Can\'t access clipboard',1);
 			});
+	} else if(stuff == 'copyAllNames') {
+		let str = '';
+		let count = 0;
+		let imageItems = document.querySelectorAll('.image-item:not(.hidden)');
+		let imageItemsArr = Array.from(imageItems).sort(function (a, b) {
+			return a.querySelectorAll('h3 span')[1].textContent.toLowerCase().localeCompare(
+				b.querySelectorAll('h3 span')[1].textContent.toLowerCase());
+		});
+		for(i=0,il=imageItemsArr.length;i<il;i++) {
+			let item = imageItemsArr[i];
+			str += item.querySelectorAll('h3 span')[0].textContent + ' ';
+			str += item.querySelectorAll('h3 span')[1].textContent + '\n';
+			count++;
+		}
+		navigator.clipboard.writeText(str)
+			.then(() => {
+				doAlert('Copied ' + count.toLocaleString() + ' names to clipboard!',1);
+			})
+			.catch(() => {
+				doAlert('😭😭 Can\'t access clipboard',1);
+			});
 	}
 }
 
@@ -1578,6 +1599,7 @@ function movePartition(e) {
 	document.getElementById('toggles').style.width = 'calc(' + gutterEndPercentX + '% - 20px)';
 	document.getElementById('gutter').style.left =  gutterEndPercentX + '%';
 	document.getElementById('image-container').style.marginLeft = 'calc(' + gutterEndPercentX + '% + 50px)';
+	document.getElementById('copy-all-names').style.left = 'calc(' + (gutterEndPercentX + ((100-gutterEndPercentX)/2)) + '% + 25px)';
 	imgHoverRule.style.width = gutterEndPercentX + '%';
 	// prevent text from being selected during drag
 	if (window.getSelection) {
@@ -1889,7 +1911,7 @@ function deleteAllEdits() {
 }
 
 function addAllListeners() {
-	// add checkbox event listeners
+	// checkboxes
 	var checkboxes = document.querySelectorAll('input[type="checkbox"]');
 	checkboxes.forEach(function(checkbox) {
 		let isTop = checkbox.parentNode.classList.contains('top_control');
@@ -1940,7 +1962,7 @@ function addAllListeners() {
 			}
 		}
 	});
-	// add options event listeners
+	// options
 	var infoI = document.getElementById('infoI');
 	infoI.addEventListener('click', function(e) {
 		showInstructions();
@@ -1953,7 +1975,7 @@ function addAllListeners() {
 	infoX.addEventListener('click', function(e) {
 		showExport();
 	});
-	// prompt options
+	// prompts
 	var promptA = document.getElementById('promptA');
 	promptA.addEventListener('click', function(e) {
 		highlightSelectedOption('promptA');
@@ -1972,7 +1994,7 @@ function addAllListeners() {
 		rotatePromptsImages();
 		storeOptionsState();
 	});
-	// add information event listeners
+	// information
 	var export_favorites = document.getElementById('export_favorites_button');
 	export_favorites.addEventListener('click', function(e) {
 		exportTextarea('favorites');
@@ -2001,7 +2023,7 @@ function addAllListeners() {
 			}
 		});
 	});
-	// sort options
+	// sorting
 	var sortTA = document.getElementById('sortTA');
 	sortTA.addEventListener('click', function(e) {
 		sortTagsByAlpha();
@@ -2048,7 +2070,7 @@ function addAllListeners() {
 			}
 		});
 	});
-	// add artist event listeners
+	// artists
 	var imageItems = document.getElementsByClassName('image-item');
 	Array.from(imageItems).forEach(function(imageItem) {
 		imageItem.addEventListener('mouseenter', function(e) {
@@ -2092,7 +2114,7 @@ function addAllListeners() {
 			}
 		});
 	});
-	// add gutter event listener
+	// gutter
 	var gutter = document.getElementById('gutter');
 	gutter.addEventListener('mousedown', function(e) {
 		e.preventDefault();
@@ -2103,7 +2125,12 @@ function addAllListeners() {
 			gutter.removeEventListener('mousemove', movePartition, false);
 		}, false);
 	}, false);
-	// add footer event listeners
+	// copy-all
+	var copyAllNames = document.getElementById('copy-all-names');
+	copyAllNames.addEventListener('click', function(e) {
+		copyStuffToClipboard(this, 'copyAllNames')
+	});
+	// footer
 	var closeFooter = document.getElementById('close_footer');
 	closeFooter.addEventListener('click', function(e) {
 		document.getElementById('layout').classList.add('footerHidden');