My Pouet bookmarklet :: pouët.net

My Pouet bookmarklet

category: general [glöplog]

I thought I'd share with you my bookmarklet script for improving Pouet.
It shows the prods as an image gallery on a different Pouet pages, like:
main, prodlist, lists, group, latest added/released/comments/top of the month/watch list.
Feel free to improve it.

Code:

javascript: (function() {
    if (document.getElementById("PouetOverlay")) document.getElementById("PouetOverlay").remove();
    var div = document.createElement("div");
    div.style.position = "absolute";
    div.style.display = "none";
    div.style.width = "100%";
    div.style.height = "100%";
    div.style.top = "0";
    div.style.left = "0";
    div.style.right = "0";
    div.style.bottom = "0";
    div.style.backgroundColor = "rgba(0,0,0,0.5)";
    div.style.zIndex = "100";
    div.setAttribute("id", "PouetOverlay");
    div.onclick = function() {
        document.getElementById("PouetOverlay").remove();
    };
    document.body.appendChild(div);
    document.getElementById("PouetOverlay").style.display = "block";
    div.innerHTML += "<style> .Praca { border: 1px solid #555; box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.4); margin: 10px 10px; display: block; float: left; width: 200px; height: 125px; position: relative; } </style>";
    div.innerHTML += "<style>.ObrazekPo { background-size: cover !important; background-position: center!important; width: 200px; height: 125px; display:inline-block; } .nazwa { display: block; position: absolute; bottom: 0; background-color: rgba(0, 0, 0, 0.6); left: 0; right: 0; padding: 0px 5px; overflow: hidden; text-shadow: 1px 1px #666; } .ObrazekYT { background-image: url('https://www.youtube.com/favicon.ico'); width: 16px; height: 16px; display: inline-block; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; line-height: 100px; } </style>";
    tabela_produkcji = document.querySelectorAll("a");
    if (tabela_produkcji.length > 0) {
        tablica_numerow = [];
        tabela_produkcji.forEach(wiersz => {
            if (wiersz.href.match(/prod.php.which=(\d+)/)) {
                numer = wiersz.href.match(/prod.php.which=(\d+)/)[1];
                adres = wiersz.href;
                nazwa = wiersz.innerText;
                if (!document.getElementById("id" + numer)) {
                    tablica_numerow.push({
                        adres
                    });
                    div.innerHTML += "<span class='Praca'><a id='id" + numer + "' class='ObrazekPo' href=''>" + nazwa + "</a></span>";
                }
            }
        });

        tablica_numerow.forEach(wiersz => {
            fetch(wiersz.adres).then(response => response.text()).then(text => {
                try {
                    var numer = wiersz.adres.match(/prod.php.which=(\d+)/)[1];
                    var parser = new DOMParser();
                    var htmlDocument = parser.parseFromString(text, "text/html");
                    var obrazek = "";
                    if (htmlDocument.documentElement.querySelector('#screenshot img'))
                        obrazek = htmlDocument.documentElement.querySelector('#screenshot img').src;
                    var nazwa = htmlDocument.documentElement.querySelector('#title').outerHTML;
                    var platforma = htmlDocument.documentElement.querySelectorAll('a[href*="prodlist.php?platform')[0];
                    platforma.innerHTML = platforma.querySelector("span").outerHTML;
                    platforma = platforma.outerHTML;
                    var span_typ = htmlDocument.documentElement.querySelectorAll('a[href*="prodlist.php?type')[0];
                    span_typ.innerHTML = span_typ.querySelector("span").outerHTML;
                    span_typ = span_typ.outerHTML;
                    var youtube = "";
                    if (htmlDocument.documentElement.querySelectorAll('a[href*="youtube.com/watch"], a[href*="youtu.be')) {
                        youtube = htmlDocument.documentElement.querySelectorAll('a[href*="youtube.com/watch"], a[href*="youtu.be');
                        if (youtube.length > 0) {
                            youtube = youtube[0].innerHTML = "<img src='https://www.youtube.com/favicon.ico' style='display:inline-block; vertical-align: middle;'>";
                        } else {
                            youtube = "";
                        }
                    }

                    div.querySelector('#id' + numer).href = wiersz.adres;
                    div.querySelector('#id' + numer).style.background = "url(" + obrazek + ")";
                    div.querySelector('#id' + numer).innerHTML = "<span class='nazwa'>" + nazwa + "</span>" + platforma + span_typ + youtube;
                } catch (error) {}
            });
        });
    }
})()

added on the 2024-11-22 01:08:37 by Blast!

and a screenshot:

added on the 2024-11-22 01:10:01 by Blast!

small youtube link correction

Code:

javascript: (function() {
    if (document.getElementById("PouetOverlay")) document.getElementById("PouetOverlay").remove();
    var div = document.createElement("div");
    div.style.position = "absolute";
    div.style.display = "none";
    div.style.width = "100%";
    div.style.height = "100%";
    div.style.top = "0";
    div.style.left = "0";
    div.style.right = "0";
    div.style.bottom = "0";
    div.style.backgroundColor = "rgba(0,0,0,0.5)";
    div.style.zIndex = "100";
    div.setAttribute("id", "PouetOverlay");
    div.onclick = function() {
        document.getElementById("PouetOverlay").remove();
    };
    document.body.appendChild(div);
    document.getElementById("PouetOverlay").style.display = "block";
    div.innerHTML += "<style> .Praca { border: 1px solid #555; box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.4); margin: 10px 10px; display: block; float: left; width: 200px; height: 125px; position: relative; } </style>";
    div.innerHTML += "<style>.ObrazekPo { background-size: cover !important; background-position: center!important; width: 200px; height: 125px; display:inline-block; } .nazwa { display: block; position: absolute; bottom: 0; background-color: rgba(0, 0, 0, 0.6); left: 0; right: 0; padding: 0px 5px; overflow: hidden; text-shadow: 1px 1px #666; } .ObrazekYT { background-image: url('https://www.youtube.com/favicon.ico'); width: 16px; height: 16px; display: inline-block; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; line-height: 100px; } </style>";
    tabela_produkcji = document.querySelectorAll("a");
    if (tabela_produkcji.length > 0) {
        tablica_numerow = [];
        tabela_produkcji.forEach(wiersz => {
            if (wiersz.href.match(/prod.php.which=(\d+)/)) {
                numer = wiersz.href.match(/prod.php.which=(\d+)/)[1];
                adres = wiersz.href;
                nazwa = wiersz.innerText;
                if (!document.getElementById("id" + numer)) {
                    tablica_numerow.push({
                        adres
                    });
                    div.innerHTML += "<span class='Praca'><a id='id" + numer + "' class='ObrazekPo' href=''>" + nazwa + "</a></span>";
                }
            }
        });
        tablica_numerow.forEach(wiersz => {
            fetch(wiersz.adres).then(response => response.text()).then(text => {
                try {
                    var numer = wiersz.adres.match(/prod.php.which=(\d+)/)[1];
                    var parser = new DOMParser();
                    var htmlDocument = parser.parseFromString(text, "text/html");
                    var obrazek = "";
                    if (htmlDocument.documentElement.querySelector('#screenshot img')) obrazek = htmlDocument.documentElement.querySelector('#screenshot img').src;
                    var nazwa = htmlDocument.documentElement.querySelector('#title').outerHTML;
                    var platforma = htmlDocument.documentElement.querySelectorAll('a[href*="prodlist.php?platform')[0];
                    platforma.innerHTML = platforma.querySelector("span").outerHTML;
                    platforma = platforma.outerHTML;
                    var span_typ = htmlDocument.documentElement.querySelectorAll('a[href*="prodlist.php?type')[0];
                    span_typ.innerHTML = span_typ.querySelector("span").outerHTML;
                    span_typ = span_typ.outerHTML;
                    var youtube = "";
                    if (htmlDocument.documentElement.querySelectorAll('a[href*="youtube.com/watch"], a[href*="youtu.be')) {
                        youtube = htmlDocument.documentElement.querySelectorAll('a[href*="youtube.com/watch"], a[href*="youtu.be');
                        if (youtube.length > 0) {
                            youtube[0].innerHTML = "<img src='https://www.youtube.com/favicon.ico' style='display:inline-block; vertical-align: middle;'>";
                            youtube = youtube[0].outerHTML;
                        } else {
                            youtube = "";
                        }
                    }
                    div.querySelector('#id' + numer).href = wiersz.adres;
                    div.querySelector('#id' + numer).style.background = "url(" + obrazek + ")";
                    div.querySelector('#id' + numer).innerHTML = "<span class='nazwa'>" + nazwa + "</span>" + platforma + span_typ + youtube;
                } catch (error) {}
            });
        });
    }
})()

added on the 2024-11-22 10:19:14 by Blast!

Neat.

added on the 2024-11-22 10:37:48 by p01

Cool idea.

added on the 2024-11-22 23:35:35 by JAC!

Cool, works really well!

added on the 2024-11-23 08:09:59 by Olympian

Very neat! Nice idea!
Thanks Blast! for sharing! =)

added on the 2024-11-27 15:23:52 by sim

neat, thanks!

added on the 2024-11-27 18:49:41 by wullon

My Pouet bookmarklet

login