anka-213 / webcomic_reader

Webcomic Reader userscript at
https://openuserjs.org/scripts/anka-213/Webcomic_Reader
MIT License
120 stars 27 forks source link

Need a better option for pages with multiple images #134

Open SoraHjort opened 4 years ago

SoraHjort commented 4 years ago

I've ran into several sites where they'll have multiple images on a single page. With the script, it will only load the first, and ignore the rest. Sites like Girl Genius, Bob and George, and several others. Example 1: http://www.girlgeniusonline.com/comic.php?date=20170802 Example 2: http://bobandgeorge.com/archives/050401 (click next on the image to go to next image)

I found a work around for the first example, (have yet to try on the second). But it is not elegant. Not only is it a bit messy with the code, but it will also display all images at once instead of being added to the navigation queue.

{
        url:    'girlgeniusonline.com/comic.php',
        img:    'http://www.girlgeniusonline.com/ggmain/strips/',
        back:   [['#bottomprev']],
        next:   [['#bottomnext']],
        extra:  [['//div[@id="comicbody"]']],
        style:  '#wcr_imagen{display: none !important;}', //Hides img and displays only extra
        js: function(dir){ //Copied from whoever did Webtoon's entry
                // Makes it so anything within extra will be nav-clickable
                var elemImagen = document.querySelectorAll('#wcr_extra');
                setEvt(elemImagen, 'click', imgClick);
                setEvt(elemImagen, 'mousemove', imgCursor);
                },
    },

This also does, in the case of Girl Genius, break it's layout. Though this probably can be fixed with some styling. But either way, it's not elegant. It might not work with example 2, due to how it has the additional images are hidden, though that too probably can be fixed with styling.

I did find out during testing that you can select specific images via an array entry selector. img: ['//img[@alt="Comic"][2]'], (Though with the Girl Genius selection for some reason that selects the third, where as setting it to 1 will select the first. Completely skipping the second image.) I thought that maybe there was a way to incorporate this as some way to get the multiple images to work with the script. But at this point I'm at the edge of my realm of javascript expertise. (I'm novice at worse). I can "see" how to implement it on a per comic basis, though I lack the clarity to do so.

But even if I were to do so, doing it for every single site that has multiple images would rack up the character count very quickly. And I'm not capable of going through all the functions to set it up.

But here is the idea for the syntax setup I had in mind for someone who is more capable than me: img: ['//div[@id="ComicContainer"]//img[i]'] Where [i] would go and queue up all images within the selector for the containment of comics (whether it's a div with an id, or what have you) If setup, this would let people have a easier time to setup sites with multiple images.

Or maybe have a sister entry that is "imgs:" to specify that there are multiple images, with the ability to have multiple selectors. (Getting rushed due to needing to run errands, trying to complete thoughts).

Eitherway, there needs to be a cleaner way to get the script to work with pages with multiple images. So this is a call out to anyone who wants to take this up. Otherwise, we'll be stuck with the example workaround method I posted above.

anka-213 commented 4 years ago

Yes, I agree. The solutions I've used have been pure hacks.