danieljbingham / google-image-sizer

Chrome extension to re-implement Google Images size filter (e.g. Larger than 2MP)
15 stars 3 forks source link

enhancements and bug fixes #2

Closed Procyon-b closed 5 years ago

Procyon-b commented 5 years ago

I've just discovered your extension, and immediately thought of using it as a userscript in tampermonkey. Just as I do for make-gis-great-again.

In the process of adapting your code, I have found a couple bugs. One that was already corrected in the extension but not here, as I have noticed after downloading the extension.

  1. replace("tbs=isz:i", doesn't catch all the possibilities. If the user selects another criterion, they are all in the tbs parameter. I've fixed the regular expression to handle this. I have also simplified the use of temporary variables in "addSizes()".

  2. I have added code to checkmark the current value if it is one of the added options.

  3. The code also removes the checkmark from the "any size" default, and adds back a link.

  4. The current value is also displayed as the menu header. One caveat is that the style is only set when another criterion is selected (google does not insert the css when one of your value is selected)

  5. the code to find "isz_i" is not from your current version. It's what I've written before noticing that this repository doesn't have the latest version. My version stops attempting the find the toolbar after 10 seconds (100 attempts), in case google changes the layout again and the classname is modified.

I'll propose PR when you are ready. One final change that I will suggest: rename run.js to run.user.js to help users link directly from here (using the "raw" button) to load in tampermonkey.

// ==UserScript==
// @name         Google image sizer
// @namespace    https://github.com/danieljbingham/google-image-sizer
// @version      1.0.3.1
// @description  re-implement Google Images size filter
// @author       Daniel Bingham
// @include      http*://*.google.tld/search*tbm=isch*
// @grant        none
// ==/UserScript==

(function() {

var sz= /[?&]tbs=(?:[^&]+,)?isz:([^&,]+)/.test(location.search) && RegExp.$1;

/*
Iterate through list of image sizes and add them to the DOM 
*/
function addSizes() {
    var icon = document.getElementById("isz_i").parentNode.querySelector(':scope * + .hdtbItm:not([tabindex])');
    var parent = icon.parentNode;
    var sizes = [["isz_2", "2mp"],["isz_4", "4mp"],["isz_6", "6mp"],["isz_8", "8mp"],["isz_10", "10mp"],
        ["isz_12", "12mp"],["isz_15", "15mp"],["isz_20", "20mp"],["isz_40", "40mp"],["isz_70", "70mp"]];
    var chkAny=false;
    for (var i=0; i < sizes.length; i++) {
        clone = icon.cloneNode(true);
        clone.id = sizes[i][0];
        if (sizes[i][1]==sz) {
            clone.classList.add('hdtbSel');
            child=clone;
            chkAny=true;
            parent.previousSibling.querySelector('.mn-hd-txt').innerHTML = "Larger than " + sizes[i][1].toUpperCase();
            parent.previousSibling.classList.add('hdtb-tsel');
            }
        else {
            child = clone.firstChild;
            child.href = child.href.replace(/(tbs=(?:[^&]+,)?)isz(:[^&,]+)/, "$1"+"isz:" + sizes[i][1]);
            }
        child.innerHTML = "Larger than " + sizes[i][1].toUpperCase();

        parent.appendChild(clone);
    }

    var fc=parent.firstElementChild;
    if (chkAny && fc.classList.contains('hdtbSel')) {
        fc.classList.remove('hdtbSel');
        child=icon.firstChild.cloneNode(true);
        child.href= child.href.replace(/(tbs=(?:[^&]+,)?)isz(:[^&,]+)/, "$1");
        child.innerHTML = fc.innerHTML;
        fc.innerHTML='';
        fc.appendChild(child);
        }
}

/*
Check the user is on google images
*/
function isImageUrl() {
    return location.href.includes("tbm=isch");
}

/*
Check sizes not there already
*/
function needSizes() {
    return document.getElementById("isz_i").parentNode.childNodes.length < 6
}

/*
Show sizes/dimensions by default instead of on hover
*/
function showSizesDefault() {
    var css = ".rg_anbg {display: none !important;} .rg_l:hover .rg_anbg {display: block !important;} " +
        ".rg_ilmbg {display: block !important;} .rg_l:hover .rg_ilmbg {display: none !important;}";
    var style = document.createElement('style');

    if (style.styleSheet) {
        style.styleSheet.cssText = css;
    } else {
        style.appendChild(document.createTextNode(css));
    }

    document.getElementsByTagName('head')[0].appendChild(style);
}

//run script
showSizesDefault();

var maxTries=100;
function chk() {
    if (!document.getElementById('isz_i')) {
        if (maxTries--) setTimeout(chk,100);
        return;
        }
    if (needSizes()) addSizes();
}

if (isImageUrl()) chk();

})();
danieljbingham commented 5 years ago

Thank you very much, I wasn't aware of that situation with the tbs parameter, thanks for picking up on that. And yes, you're right, I completely forgot to push the updates here - these changes look great, please feel free to submit a PR whenever you'd like.

Thanks again!

danieljbingham commented 5 years ago

Just a quick update @Procyon-b - I've updated the repo with the latest version, so feel free to submit your changes

Procyon-b commented 5 years ago

I was off kb friday and almost all saturday, but I'm glad that this gave you the time to update the repository.

A PR has been submitted. :)