Topic: Mascot changer

Posted under General

Hi, I'm new here. After looking at the mascot changer for the site I wanted to add images to the list with a GM script but ended up rewriting the whole thing due to it using cookies, not being written very well, etc. My script uses HTML5 localStorage and includes a link. It changes the background color too. Just figured I put it here so others could use it or maybe it could be used on the site. Copyright is in the public domain. Just plop it into a GM script and include it at root "www.e621.net/".

var CoolMascot = {
bg_imgs_key: "e621bgimgs",
bg_img_index_key: "e621bgimgindex",
container: document.getElementById("content2"),
default_bgcolor: document.body.style.backgroundColor,

init: function() {
// Uncomment to reset then comment again.
//localStorage.removeItem(this.bg_imgs_key);
var bg_imgs_str = localStorage.getItem(this.bg_imgs_key);
var bg_img_index_str = localStorage.getItem(this.bg_img_index_key);
if(bg_imgs_str && bg_img_index_str) {
this.bg_imgs = JSON.parse(bg_imgs_str);
this.bg_img_index = JSON.parse(bg_img_index_str);
} else {
this.first_init();
}

var citation = document.createElement("div");
citation.setAttribute("id", "citation");
citation.textContent = "Credit: ";
this.container.appendChild(citation);

this.setBgImg(this.bg_img_index);
},

first_init: function() {
var bg_imgs = new Array();
// default
bg_imgs.push(["22762", "data/4e/43/4e436a63e85b3996f1d5599bfb76bdce.png"]);
// site
bg_imgs.push(["109434", "esix1.jpg"]);
bg_imgs.push(["63467", "esix2.jpg"]);
bg_imgs.push(["63403", "raptor1.jpg"]);
bg_imgs.push(["109196", "background_mascot2.gif"]);
bg_imgs.push(["124413", "hexerade.jpg"]);
// tag rave
bg_imgs.push(["71140", "data/38/80/3880d7da9df16ac14a45284b9d5a44d8.jpg"]);
bg_imgs.push(["68922", "data/c6/fe/c6fe9f063cb1aa8dd459ac0189634941.png", "#000000"]);
bg_imgs.push(["68746", "data/78/62/786271e02539cdc631293e27fe9192fe.png", "#000000"]);
bg_imgs.push(["19965", "data/0d/e0/0de0606cef07635514ab00cb10737116.jpg", "#0D2569"]);
bg_imgs.push(["22780", "data/08/96/089676a44fabad20cd44e302ce4edade.jpg"]);
bg_imgs.push(["29024", "data/9f/0a/9f0acf7e44d0608d58fe63cb81eafaee.jpg", "#240B06"]);
bg_imgs.push(["22762", "data/4e/43/4e436a63e85b3996f1d5599bfb76bdce.png"]);
bg_imgs.push(["652", "data/90/d7/90d733ee77960e26090926885c3bdc63.jpg", "#240623"]);
bg_imgs.push(["92534", "data/8c/15/8c15ce857fba0d4687d13051ad825a92.jpg"]);
bg_imgs.push(["92535", "data/7e/b1/7eb13c0d3fadd958a380059aaf652ab4.jpg"]);
bg_imgs.push(["93303", "data/57/f9/57f91314519dba3240ee2925409c1bdc.jpg", "#000000"]);
bg_imgs.push(["96693", "data/7c/15/7c153a6e27c5c6a0b1467d5651bfc50a.png", "#000000"]);
bg_imgs.push(["118875", "data/ee/c3/eec36c6d74061d63ea0e0cec7abbb4d6.jpg", "#000000"]);
bg_imgs.push(["130408", "data/cb/18/cb187938e37f1164ec06a773d0c97119.jpg"]);
bg_imgs.push(["136394", "data/fd/48/fd48250faaab9622c0271c16ecec67db.jpg"]);
bg_imgs.push(["8967", "data/cd/4b/cd4bf0cc64f687b8b4b1296a4f38b78f.jpg"]);
bg_imgs.push(["28959", "data/ce/4f/ce4f49e823c4fb5703993ce72cf86a07.jpg", "#000000"]);
bg_imgs.push(["29023", "data/cf/d4/cfd4a6b7b7930b1ad11add514a6ee952.jpg", "#000000"]);
bg_imgs.push(["30096", "data/ab/ec/abec1a5b55eabe30f93b8129a5f369da.jpg", "#000000"]);
// Add more here. bg_imgs.push([id, url, color]);
// Don't forget to reset after adding.

localStorage.setItem(this.bg_imgs_key, JSON.stringify(bg_imgs));
this.bg_imgs = bg_imgs;
this.bg_img_index = 0;
localStorage.setItem(this.bg_img_index_key, JSON.stringify(this.bg_img_index));
},

setBgImg: function(index) {
var [post_id, URL, color] = this.bg_imgs[index];
document.body.style.backgroundImage = "url(" + URL + ")";
document.body.style.backgroundPosition = "center";
document.body.style.backgroundSize = "contain";
if(color) { document.body.style.backgroundColor = color;
} else { document.body.style.backgroundColor = this.default_bgcolor; };
var post_url = "post/show/" + post_id + "/";
var link = document.createElement("a");
link.textContent = "Link";
link.href = post_url;
var citation = document.getElementById("citation");
var old_link = citation.getElementsByTagName("a")[0];
if(old_link) {
citation.replaceChild(link, citation.getElementsByTagName("a")[0]);
} else {
citation.appendChild(link);
}
},

shiftBgImg: function() {
this.bg_img_index++;
if(this.bg_img_index == this.bg_imgs.length) this.bg_img_index = 0;
this.setBgImg(this.bg_img_index);
localStorage.setItem(this.bg_img_index_key, this.bg_img_index);
}
};
window.addEventListener("load", function() {
CoolMascot.init();
unsafeWindow.bgChange = function() {CoolMascot.shiftBgImg();};
}, false);

Updated

Here is some more. Add it under "Add more here."

// kacey
bg_imgs.push(["50677", "data/eb/67/eb6730bb9358848b1a9dfda22aabbb61.jpg"]);
bg_imgs.push(["119556", "data/23/ea/23eacc2538d38a7657d9315f4ea11be3.jpg", "#000000"]);
bg_imgs.push(["92572", "data/53/9e/539e603c608506bc048cb20a4c5499f7.jpg"]);
bg_imgs.push(["77260", "data/b7/1c/b71ca4e550785a1b9f6014f24d718086.jpg", "#661463"]);
bg_imgs.push(["66736", "data/e7/0e/e70e70b18507013dbd798cb0dae79a34.jpg", "#0D3611"]);
bg_imgs.push(["68716", "data/9c/e3/9ce3cb4374ef272648909a287f7fa9bc.jpg", "#B09030"]);
bg_imgs.push(["34548", "data/f5/56/f55651db2e456b872a73b325a1f0050b.jpg"]);
bg_imgs.push(["28307", "data/fb/4e/fb4ea9962c0e6cb0efd92ef3b7becca7.jpg", "#81C4E6"]);
bg_imgs.push(["17181", "data/96/2b/962be9eb0ff76f32042592d6ce45cc87.jpg", "#2E2813"]);
bg_imgs.push(["15148", "data/d2/eb/d2ebed86fd9621518d6fbff9987a3d31.jpg", "#131C36"]);
bg_imgs.push(["19301", "data/46/7b/467bd02d0366bd7eea71fe9dfb36403a.jpg"]);
bg_imgs.push(["4012", "data/e6/ab/e6ab97ea819b8ad2e19f11606f070ea4.jpg", "#171717"]);
bg_imgs.push(["97712", "data/de/8d/de8d6cab3c8c2ab100e198217399cdb3.jpg"]);
// ruaidri
bg_imgs.push(["135497", "data/c0/a5/c0a56b702c2935975b44099fe94e1f17.jpg"]);
bg_imgs.push(["76887", "data/db/f7/dbf7760bb47bc1d208187ca3d3274d4f.jpg"]);
bg_imgs.push(["96844", "data/f3/4b/f34b87d5e49598f31479fd78e2854df5.jpg"]);
bg_imgs.push(["94833", "data/fe/51/fe51756c091f36420f09c09fb6500588.jpg"]);
bg_imgs.push(["94055", "data/0a/99/0a99168dd6a05fb43aa8ced107023461.jpg"]);
bg_imgs.push(["92788", "data/9f/1b/9f1b5f1b6e9a30fecfb1ffe94f22c793.jpg"]);
bg_imgs.push(["109658", "data/bc/14/bc1404a7ae0766c318ca325263731e3a.jpg"]);
bg_imgs.push(["106100", "data/bf/06/bf0638c00304360437f8e8f1b2ade1d5.jpg"]);
bg_imgs.push(["116088", "data/e2/aa/e2aa3011ae4cf3973e409753935350d1.jpg"]);
bg_imgs.push(["135863", "data/b2/f4/b2f466509c0f73dba9d47e95e46ce65d.jpg"]);

Updated by anonymous

ktkr

Former Staff

Awesome! Small request though:
Maybe have it compare 'bg_imgs' with itself from previous page visit and direct to 'localStorage.removeItem(this.bg_imgs_key)' and 'this.first_init()' if irregularities found.

Updated by anonymous

Isn't Aurali programming something that would render that script useless?

Updated by anonymous

If we were to switch to that one, we're still only going to use mascots specifically drawn for the site. Nothing better than an artist visiting us and finding out we're using their characters as mascots for a site they've never even heard of.

Updated by anonymous

@ktkr
The idea is that people can add artwork without changing the script. Some other part of the site could add it to localStorage. Thus first_init is not meant to be edited. But considering that it is not on the site it is easier to edit the script and reset it directly in this case.

@Rarity
Maybe, but unless it is already coded than I think this is still useful. Perhaps it will help to complete that endeavour.

@tony311
Definitely. I wrote it so that "I" could display other artwork then the current ones. If it were used on the site I would not expect it to have anything other than what the site has now. But people can add to it on their own without making a site-wide cookie humongous.

Updated by anonymous

  • 1