Card style View in Google result for Tampermonkey

CardStyleView_inGoogleResult.user.js

// ==UserScript==
// @name         Card style View in Google result
// @namespace    https://twitter.com/yume_yu
// @homepage     https://gist.github.com/yume-yu/0381656dab58175ec64527f04397479c
// @supportURL   https://twitter.com/yume_yu
// @version      0.3.4.1
// @description  This scripts add cardView to your GoogleSearchResult.
// @author       @yume_yu
// @match        https://www.google.com/search*
// @grant        none
// @updateURL    https://gist.github.com/yume-yu/0381656dab58175ec64527f04397479c/raw/CardStyleView_inGoogleResult.user.js
// @downloadURL  https://gist.github.com/yume-yu/0381656dab58175ec64527f04397479c/raw/CardStyleView_inGoogleResult.user.js
// ==/UserScript==

(function() {
    var isImageSearch = /tbm=/g
    if(document.URL.match(isImageSearch)){
        return;
    }else{
        /* defaultmode "list" or "card" */
        var defaultmode;
        defaultmode = localStorage.cardViewDefault;
        if(typeof defaultmode == "undefined"){
            localStorage.setItem("cardViewDefault","list");
            defaultmode = "list";
            console.log("none")
        }
        var css = ' .mw {\
max-width:none;\
}\
#fld {\
display:none;\
}\
#rhs {\
display:none;\
}\
\
div.col {\
width:100%;\
}\
\
#cnt #center_col{\
width:calc(100vw - 2 * 75px);\
/*width: 100vw*/\
}\
\
.mw #center_col {\
/*margin-left: 0 !important;\
margin-right: 0 !important;*/\
\
margin-left: 75px !important;\
margin-right: 75px;\
\
}\
\
.g cite {\
word-break:break-all;\
overflow-wrap:anywhere;\
hyphens: auto;\
}\
#bottomads {\
display: none;\
}\
.g-blk {\
display:none;\
}\
/*各検索結果項目*/\
.cardList .g {\
line-height: 1.6;\
text-align: left;\
padding: 3%;\
/*width: 22%;*/\
border: 1px solid gray;\
border-radius: 1rem;\
box-shadow: 5px 5px 5px 1px rgba(200, 200, 200, 0.8);\
}\
.cardList .g table{\
display:none;\
}\
\
/*各検索結果項目*/\
.cardList .g:hover {\
border:1px solid gray;\
box-shadow: 10px 10px 7px 1px rgba(200, 200, 200, 0.4);\
}\
div.srg {\
width:  100%;\
display: grid;\
grid-template-columns: repeat(auto-fill, calc(2 * 592px / 3));\
justify-content: space-around;\
grid-column-gap: 13px;\
\
/*\
display: flex;\
justify-content: space-between;\
flex-wrap: wrap;\
*/\
}\
\
g-section-with-header{\
margin:0;\
}\
\
g-scrolling-carousel{\
margin:0 !important;\
}\
.card-section .brs_col{\
display:flex;\
}\
\
#bottomads+.med{\
/*margin-left:150px;*/\
}\
\
/*画像検索の結果*/\
div#imagebox_bigimages.g  g-section-with-header{\
overflow:auto;\
}\
.exp-outline {\
    display: none;\
}\
\
}';
        var button = document.createElement("div");
        button.name= "switchCard";
        button.id="switch";
        button.className += document.querySelector("#tsf div:nth-of-type(2) div:first-of-type button").className
        var buttonStyle = {
            display: "inline-flex",
            alignItems: "center",
            justifyContent: "center",
            width : "112px",
            //height : "100%",
            padding:0,
            position : "absolute",
            backgroundColor : "rgba(22,90,226,1)",
            zIndex : 999,
            textAlign:"center",
            borderRadius: "2rem",
            //top: "20px",
            left: "807px"
        }
        for(var buttonstyleKey in buttonStyle){
            button.style[buttonstyleKey] = buttonStyle[buttonstyleKey];
        }
        var label = document.createElement("a");
        label.textContent = "toCardStyle"
        var labelStyle = {
            display: "block",
            cursor: "pointer",
            textAlign: "center",
            padding: "0.5em 1em",
            width: "100%",
            color: "white",
            fontSize: "14px",
            fontWeight: "bold",
            userSelect:"none",
            textDecoration:"none"
        }
        for(var astyleKey in labelStyle){
            label.style[astyleKey] = labelStyle[astyleKey];
        }

        button.addEventListener("click", function() {
            if(document.getElementById("cardstyle") != null){
                document.getElementsByTagName("body")[0].removeChild(document.getElementById("cardstyle"));
                document.getElementById("switch").firstChild.textContent="toCardStyle";
                for(var g in [...Array(document.getElementById("rso").children.length).keys()]){
                    try{
                        document.getElementById("rso").children[g].classList.toggle("invisible")
                    }catch(e){
                        console.log(e);
                    }
                }
                localStorage.cardViewDefault = "list";
            }else{
                var style = document.createElement("style");
                style.id = "cardstyle";
                style.textContent = css;
                var center_col = document.getElementById("center_col");
                var body = document.getElementsByTagName("body")[0];
                var child = center_col.firstElementChild;
                if(document.getElementById("invisible") == null){
                    var invisible = document.createElement("style");
                    invisible.id = "invisible";
                    invisible.textContent = ".invisible { display:none;}";
                    body.appendChild(invisible);
                }
                body.appendChild(style);
                document.getElementById("switch").firstChild.textContent="toListStyle";
                if(document.getElementsByClassName("cardList").length == 0){
                    var nodeItems = document.querySelectorAll('.g')
                    var items = [...nodeItems]
                    var cardDiv;// = document.createElement("div");
                    var modelcase = document.getElementById("rso");
                    for(var i in modelcase.children){
                        if(modelcase.children[i].getElementsByClassName("srg").length != 0){
                            cardDiv = modelcase.children[i].cloneNode(true);
                            break;
                        }
                    }
                    cardDiv.getElementsByClassName("srg")[0].textContent = "";
                    for(var item in items){
                        cardDiv.getElementsByClassName("srg")[0].append(items[item].cloneNode(true));
                    }

                    cardDiv.className += " cardList invisible"
                    document.getElementById("rso").insertBefore(cardDiv,document.getElementById("rso").firstChild)
                }
                for(g in [...Array(document.getElementById("rso").children.length).keys()]){
                    try{
                        document.getElementById("rso").children[g].classList.toggle("invisible")
                    }catch(e){
                        console.log(g);
                    }
                }
                localStorage.cardViewDefault = "card";
            }
        },false);
        var main = document.getElementById("tophf");
        button.append(label);
        main.append(button);
        if (defaultmode == "card"){
            var invisible = document.createElement("style");
            invisible.id = "invisible";
            invisible.textContent = ".invisible { display:none;}";
            var style = document.createElement("style");
            style.id = "cardstyle";
            style.textContent = css;
            var center_col = document.getElementById("center_col");
            var body = document.getElementsByTagName("body")[0];
            var child = center_col.firstElementChild;
            body.appendChild(invisible);
            body.appendChild(style);
            document.getElementById("switch").firstChild.textContent="toListStyle";
            if(document.getElementsByClassName("cardList").length == 0){
                var nodeItems = document.querySelectorAll('.g')
                var items = [...nodeItems]
                var cardDiv;// = document.createElement("div");
                var modelcase = document.getElementById("rso");
                for(var i in modelcase.children){
                    if(modelcase.children[i].getElementsByClassName("srg").length != 0){
                        cardDiv = modelcase.children[i].cloneNode(true);
                        break;
                    }
                }
                cardDiv.getElementsByClassName("srg")[0].textContent = "";
                for(var item in items){
                    cardDiv.getElementsByClassName("srg")[0].append(items[item].cloneNode(true));
                }

                cardDiv.className += " cardList invisible"
                document.getElementById("rso").insertBefore(cardDiv,document.getElementById("rso").firstChild)
            }
            for(var g in [...Array(document.getElementById("rso").children.length).keys()]){
                try{
                    document.getElementById("rso").children[g].classList.toggle("invisible")
                }catch(e){
                    console.log(g);
                }
            }
        }
    }
})();