Skip to content

Instantly share code, notes, and snippets.

@Pandry
Created December 29, 2019 11:23
Show Gist options
  • Save Pandry/72d69ff7e3c2ec75f0194325b54824aa to your computer and use it in GitHub Desktop.
Save Pandry/72d69ff7e3c2ec75f0194325b54824aa to your computer and use it in GitHub Desktop.
A script to put on top of casper theme to have .g.svg ending images to be the background of a post
//Taken from https://stackoverflow.com/a/41042412
function colourIsLight(pixel) {
// Counting the perceptive luminance
// human eye favors green color...
pixel[3] = pixel[3]==undefined?255:pixel[3];
var a = 1 - (0.299 * pixel[0] + 0.587 * pixel[1] + 0.114 * pixel[2]) / pixel[3];
return (a < 0.5);
}
function getPropBgImage(e){
return window.getComputedStyle(e, null).getPropertyValue("background-image") != "none"? window.getComputedStyle(e, null).getPropertyValue("background-image") : e.style["background-image"]!= ""?e.style["background-image"]:null ;
}
function getPropBgColor(e){
return window.getComputedStyle(e, null).getPropertyValue("background-color").endsWith("0, 0, 0)") == false? window.getComputedStyle(e, null).getPropertyValue("background-color") : e.style["background-color"]!= ""?e.style["background-color"]:null ;
}
//Returns pixel[4] or null
function getBgColor (element){
if (imgSrc = getPropBgImage(element) != null){
var img = document.createElement('img');
img.width = element.width;
img.height = element.height;
img.src = imgSrc;
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
return canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height,0,0)
.getImageData(img.width/2, img.width/2, 1, 1).data;
//Get the color at the center
} else if ((bgColor = getPropBgColor(element)) != null){return bgColor.substring(bgColor.indexOf("(")+1,bgColor.length-1).split(",") }
else {
//Element has no background
var elemParent = element.parentElement;
while (true){
if (imgSrc = getPropBgImage(elemParent) != null) {
//Get element position compared to the father
fatherPos = elemParent.getBoundingClientRect();
elementPosition = element.getBoundingClientRect();
var img = document.createElement('img');
img.width = element.width;
img.height = element.height;
img.src = imgSrc;
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height)
return ctx.getImageData(fatherPos.right - elementPosition.right, fatherPos.top - elementPosition.top, 1, 1).data;
} else
if (getPropBgColor(elemParent) != null) {} else
{
elemParent = elemParent.parentElement;
if (elemParent.nodeName == "body"){
//Abort, root of page reached
return
}
}
}
}
}
document.querySelectorAll("article").forEach(function(e){
var imgSource = e.querySelector(".post-card-image").src;
if (
//Chech it's a gradient and it's the same origin
imgSource.startsWith(window.location.origin) &&
//it is a gradient that has been uploaded multiple times,
(imgSource.endsWith(".g.svg") ||
//or, if it's a svg
imgSource.endsWith(".svg")
//and the last-1 dot-splitted array cell stars with g- (uploaded uplitple time)
&& imgSource.split(".").slice(0,-1).pop().startsWith("g-") )) {
//Remove the svg from being a separate image
e.querySelector(".post-card-image").remove();
//e.querySelector("a.post-card-image-link").remove();
//Set the SVG to be the background of the article card
e.querySelector(".post-card-content").style["background-image"] = "url('" + imgSource + "')";
e.querySelector(".post-card-content").style["padding-top"] = "68%";
e.querySelector(".post-card-content-link").style["color"] = colourIsLight(getBgColor(e))? "black":"white";
var readigTime = e.querySelector(".reading-time");
readigTime.style.color = colourIsLight(getBgColor(readigTime))? "black":"white";
e.querySelector("a.post-card-image-link").remove();
e.classList.remove("post-card-large");
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment