xkcd 2x

The Request: anka-213#131

So what does it do? It adds in a button! What does this button do? Why it lets you toggle between the normal and the hidden srcset 2x resolution image!

This should hopefully solve a 4 year old request.

I won't go into too much detail, but this was a result of working about two weeks of doing something very similar for the Inhuman Webcomic and successfully implementing it. The hard part was to actually get it to properly preload the pages.

But eitherway, tweaked it a little, largely just changing the regex capture rules as well as several variable names, and now it's setup for xkcd's 2x.

I do not think anything I've done in the personal branch will run into any issues revolving "lack of" for this commit. Though i suppose I'll find out soon.

webcomic_reader.user.js

@@ -43,7 +43,7 @@ var defaultSettings = {
 // ==UserScript==
 // @name		Webcomic Reader - Sora Fix and Addition
 // @author		Javier Lopez <[email protected]> https://github.com/ameboide , fork by v4Lo https://github.com/v4Lo and by anka-213 http://github.com/anka-213
-// @version		2023.06.04.043900
+// @version		2023.08.03.223200
 // @license		MIT
 // @namespace	http://userscripts.org/scripts/show/59842
 // @description	Can work on almost any webcomic/manga page, preloads 5 or more pages ahead (or behind), navigates via ajax for instant-page-change, lets you use the keyboard, remembers your progress, and it's relatively easy to add new sites
@@ -725,10 +725,71 @@ var paginas = [
 		style:	'#bb,#header{position:relative;}'
 	},
 	{	url:	'xkcd.',
-		img:	['//div[@id="comic"]//img'],
+        img:    function(html, pos) {
+            console.log(html)
+					let img, origimg, hiRes; //Initlizing variables for ease of use
+
+					//RegEx'ing up to find the high resolution image
+					let iReg = new RegExp(/(?<=<div id="comic">[\s\S]<img .*srcset=").*\.(png|jpg|gif|jpeg|bmp)(?= 2x".*>$[\s\S].*<\/div>)/im);
+
+					//RegEx to find the original image
+					let imReg = new RegExp(/(?<=<div id="comic">[\s\S]<img src=").*\.(png|jpg|gif|jpeg|bmp)(?=".*>$[\s\S].*<\/div>)/im);
+
+					try {
+						//Try to find the high resolution link, and grab the href that leads to the high res image
+						hiRes = html.match(iReg)[0];
+
+						if (pos == 0 && confBool('xkcd2x') == true) { //Run only if this is on the initilizing page
+
+							//Find the original image in the document
+							origimg = xpath('//div[@id="comic"]/img', document)
+
+							//Find the original image in the variable "html" string
+							img = xpath('//div[@id="comic"]/img', html);
+
+							//Set both document and html's src to the high resolution image
+							img.src = origimg.src = hiRes;
+
+						} 
+
+                        if (pos == 0 && confBool('xkcd2x') == false) { //If the HiRes toggle is off
+							img = xpath('//div[@id="comic"]/img', html);
+						} 
+
+                        if (pos != 0 && confBool('xkcd2x') == true) { //Run on non-first loaded pages
+
+							//Find and replace the html variables' instance of the image's src with the high resolution src
+							html = html.replace(imReg, hiRes);
+
+							//xpath locator for the image in the html variable, now that it has the high resolution image as it's src
+							img = xpath('//div[@id="comic"]/img', html);
+
+						}
+
+                        if (pos != 0 && confBool('xkcd2x') == false) { //If the HiRes toggle is off
+                            img = xpath('//div[@id="comic"]/img', html);
+                        }
+
+					} catch(e) { //Error prevention on fresh loading of the page.
+						img = xpath('//div[@id="comic"]/img', html);
+					}
+					//Return the img as the capture rule. 
+					return img;
+				},
 		first:	'.="|<"',
 		last:	'.=">|"',
-		extra:	['<br/>', ['//div[@id="ctitle"]'], function(html, pos) {
+		extra:	['<br/>',
+                    function(){
+                        //Name the button depending on the saved setting
+                        if (confBool('xkcd2x') == true) {
+                                HiResBtnText = "Switch to Normal Resolution";
+                            } else {
+                                HiResBtnText = "Switch to Higher Resolution";
+                            }
+                        //Returns custom High Res button to the Extras Div
+                        return '<br><button id="wcr_btnHiRes">'+HiResBtnText+'</button>'
+                    },
+                    '<br>', ['//div[@id="ctitle"]'], function(html, pos) {
 					var href = xpath('//div[@id="comic"]//a/@href', html);
 					return '<br/><a href=' + href + '>' +
 						(href.indexOf('xkcd') >= 0 ? 'Large version' : 'Bonus Link!') +
@@ -743,8 +804,18 @@ var paginas = [
 					var url = 'http://www.explainxkcd.com/wiki/index.php/' + nr;
 					return '<a target=\"_blank\" href=\"' + url + '\">Explain Xkcd</a>';
 				}],
-		bgcol:	'#fff'
-	},
+		bgcol:	'#fff',
+        js:     function(dir, pos, html){
+
+            //Setup event for High Res button being pressed
+            setEvt('wcr_btnHiRes', 'click', toggleHighRes);
+
+            //Copied/edited from the function that handles the Layout button
+            function toggleHighRes() {
+                toggleConfBool('xkcd2x'); //Check the saved setting
+                redirect(link[posActual]); //Reload the page to take new setting into effect
+            }
+        },
 	{	url:	'dilbert.com',
 		img:	[['.img-comic']],
 		back:	'@title="Older Strip"',