use a download button instead of 910234123 confusing direct links

Author: DaringCuteSeal

catalog/events.js

@@ -1,25 +1,36 @@
+const REPO_URL = "https://raw.githubusercontent.com/DaringCuteSeal/wallpapers"
+const BRANCH = "gh-pages"
+//https://raw.githubusercontent.com/DaringCuteSeal/wallpapers/main/os/artix-iceberg/artix-iceberg-light.png
+
 /* Create a new preview object */
-var preview = function(name, variants)
-{
-	this.name = name;
-	this.variants = variants;
-}
+class preview {
+	constructor(name, variants, variants_filename, category) {
+		this.name = name;
+		this.variants = variants;
+		this.category = category;
+		this.variants_filename = variants_filename;
+		this.selected_variant = 0;
+	}
+	/* Show image based on given index */
+	showImg(n) {
+		this.selected_variant = n;
+		this.imgs = document.getElementsByClassName("preview-img-" + this.name);
+		this.nImgs = this.imgs.length;
 
+		/* Hide every image */
+		for (let i = 0; i < this.nImgs; i++) {
+			this.imgs[i].style.display = "none";
+		}
 
-/* Show image based on given index */
-preview.prototype.showImg = function(n) 
-{
-	this.imgs = document.getElementsByClassName("preview-img-" + this.name);
-	this.nImgs = this.imgs.length;
+		/* Show image based on given index */
+		this.imgs[n].style.display = "block";
+	}
 
-	/* Hide every image */
-	for(i = 0; i < this.nImgs; i++)
-	{
-		this.imgs[i].style.display = "none";
+	/* Open high-resolution image in new tab */
+	openImageInNewTab() {
+		window.open(REPO_URL + "/" + BRANCH + "/" + this.category + "/" + this.name + "/" + this.variants_filename[this.selected_variant])
 	}
 
-	/* Show image based on given index */
-	this.imgs[n].style.display = "block";
 }
 
 /* Attach event listeners to each preview */
@@ -32,7 +43,7 @@ for (let j = 0; j < previews.length; j++)
 
 	variantBtns[j] = document.getElementsByClassName(current_name + '-vars');
 
-	imgPreview[j] = new preview(current_name, previews[j].variants);
+	imgPreview[j] = new preview(current_name, previews[j].variants, previews[j].variants_filename, previews[j].category);
 
 	for(let k = 0; k < variantBtns[j].length; k++)
 	{
@@ -57,8 +68,12 @@ for (let j = 0; j < previews.length; j++)
 		/* Make the first button inactive */
 		variantBtns[j][0].classList.add('btn-var-curr');
 
-
 	}
+
+	document.getElementById(current_name + '-download').addEventListener('click', function()
+		{
+			imgPreview[j].openImageInNewTab()
+		})
 }
 
 /* Copy link to image to user's clipboard */

catalog/generate-catalog.sh

@@ -312,20 +312,8 @@ EOF
 
 			write "<br>\n" 4
 
-			write "<b>Images:</b> " 3
-
-			m=0
-			for l in "${!variants[@]}"
-			do
-				write "<a href=\"https://raw.githubusercontent.com/DaringCuteSeal/wallpapers/main/$category/$parsable_name/${variants[$l]}\">${variants[$l]} ($l)</a>"
-				m=$(($m+1))
-				if [[ $m -lt ${#variants[@]} ]]
-				then
-					write " &bull; "
-				fi
-			done
+			write "<button id=\"$parsable_name-download\" class=\"download-btn\">Download Variant</button>" 4
 			write "\n</p>\n"
-			unset m
 
 			write_stdin << EOF
 			<p>
@@ -376,6 +364,22 @@ vars_str(){
 	unset k
 }
 
+filenames_str(){
+	echo -n "["
+	k=0
+	for j in "${variants[@]}"
+	do
+		echo -n "'$j'"
+		k=$(($k+1))
+		if [[ $k -lt ${#variants[@]} ]]
+		then
+			echo -n ", "
+		fi
+	done
+	echo -n "]"
+	unset k
+}
+
 work "Generating previews JSON..." # and yes it isn't JSON but hey it's called "JavaScript Object Notation" so...
 cat > "$out_previews" <<< "var previews = ["
 
@@ -388,10 +392,13 @@ do
 	write_js_stdin << EOF
 	{
 		'name': '$parsable_name',
+		'category': '$category',
 EOF
 
 	m=$(($m+1))
-	write_js "'variants': `vars_str`\n" 2
+	write_js "'variants': $(vars_str),\n" 2
+
+	write_js "'variants_filename': $(filenames_str)\n" 2
 	write_js "}" 1
 
 	if [[ $m -lt ${#infos[@]} ]]

catalog/styles.css

@@ -1,5 +1,3 @@
-
-
 @media (prefers-color-scheme: dark) {
 	.btn-var-curr {
 		background-color: #3B4656;
@@ -18,6 +16,21 @@
 		transition: 0.1s ease;
 		background-color: #445062;
 	}
+	
+
+  .download-btn {
+		font-weight: bold;
+		background-color: #46726B;
+  	font-size: 100%;
+		padding: 10px;
+		margin-top: 1em;
+  }
+	
+  .download-btn:hover {
+		background-color: #334D49;
+  }
+
+
 }
 
 @media (prefers-color-scheme: light) {
@@ -39,6 +52,19 @@
 		transition: 0.1s ease;
 		background-color: #9FA2A5;
 	}
+	
+  .download-btn {
+		font-weight: bold;
+		background-color: #68AFA3;
+  	font-size: 100%;
+		padding: 10px;
+		margin-top: 1em;
+  }
+	
+  .download-btn:hover {
+		background-color: #58847D;
+  }
+
 }