Skip to content

Instantly share code, notes, and snippets.

@linglung

linglung/CardStyleView_inGoogleResult.user.js

Forked from yume-yu/CardStyleView_inGoogleResult.user.js
Created May 20, 2019 17:28
Show Gist options
  • Save linglung/675bf4ebe279e8b736371c27eb35491d to your computer and use it in GitHub Desktop.
Save linglung/675bf4ebe279e8b736371c27eb35491d to your computer and use it in GitHub Desktop.
Download ZIP
Card style View in Google result for Tampermonkey
Raw
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);
}
}
}
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment