Changed gelbooru.com main theme to dark theme, similar to konachan style.
Ajankohdalta
// ==UserScript==
// @name Gelbooru KonaStyle
// @namespace http://Aestellar.homepage/
// @version 0.1
// @description Changed gelbooru.com main theme to dark theme, similar to konachan style.
// @author Aestellar
// @match *://gelbooru.com/*
// @resource gelbooruCss1 https://userstyles.org/styles/109424/gelbooru-konastyle.css
// @run-at document-start
// ==/UserScript==
(function(){
var win = window;
var ls = localStorage;
if(!!!win){
console.log(win + "Failed to load window object");
return;
}
if(win.self != win.top){
return;
}
var css = GM_getResourceText ("gelbooruCss1");
addStyle(css);
document.addEventListener("DOMContentLoaded",updateUI, false);
function loadPrereq(){
var hrefVar = win.location.href;
if(/(htt[ps]:\/\/gelbooru\.com[\/]*)$/.test(hrefVar)){
document.body.className = 'main-page';
}
var t = document.createElement('d');
//Font awesome support Don't work with @requ
t.innerHTML = '<link rel="stylesheet" type="text/css" media="screen" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css" />';
t = t.children[0];
document.head.appendChild(t);
}
function checkLastVisit(){
var timer = 7200000;
var lastVisit = parseInt(ls.getItem('lastVisit'));
var prevVisit = parseInt(ls.getItem('preLastVisit'));
var currentVisit = new Date().valueOf();
if ((!lastVisit)||(!prevVisit)) {
updateLastVisit();
}
if ((lastVisit + timer) < currentVisit) {
updateLastVisit();
}
}
function updateLastVisit(){
var posts = 'http://gelbooru.com/index.php?page=post&s=list&tags=all';
handleXHRDoc(posts, function(doc){
var lastIdElt = doc.getElementsByClassName('thumb')[0];
var lastID = lastIdElt.getAttribute('id');
lastID = lastID.replace('s', '');
if (!!ls.getItem('lastVisit')) {
ls.setItem('preLastVisit',ls.getItem('lastVisit'));
}
else{
ls.setItem('preLastVisit',new Date().valueOf());
}
if (ls.getItem('lastImageId')) {
ls.setItem('preImageId',ls.getItem('lastImageId'));
}
else{
ls.setItem('preImageId',lastID);
}
localStorage.setItem('lastVisit',new Date().valueOf());
localStorage.setItem('lastImageId', lastID);
});
}
function getLastVisit(){
var t = localStorage.getItem('preLastVisit');
return parseInt(t);
}
function getLastImageId(){
var t = localStorage.getItem('preImageId');
return parseInt(t);
}
function submit(e){
var textElt = _$('#stags')||_$('#tags');
text = textElt.value;
console.log(text);
text = applySearchFilters(text);
textElt.value = text;
}
function applySearchFilters(text)
{
if (ls.getItem('onlyNewSearch')==='true') {
if (!!getLastImageId()) {
text+=' id:>' + getLastImageId() + ' ';
};
};
return text;
}
function replaceSubmit(){
var form = _$('.sidebar3 form');
form.onsubmit = submit;
}
function updateUI(){
loadPrereq();
checkLastVisit();
replaceSubmit();
updateNav();
}
function updateNav() {
var navBar = _$('#navbar');
var navBtn = document.createElement("li");
navBtn.classList.add('collapse-button');
navBar.insertBefore(navBtn, navBar.firstChild);
var sett = {name:'navCollapse', glyphOff:'fa fa-minus-square-o', glyphOn:'fa fa-plus-square-o', callbackOff:showNav, callbackOn:hideNav};
var collapseBtn = makeToggleButton(navBtn,sett);
makeUserNavBar();
function hideNav(btn) {
var li, i;
for (i = 0; i < navBar.children.length; ++i) {
li = navBar.children[i];
if (!((hasClass(li, 'current-page'))
|| (hasClass(li, 'collapse-button')))) {
li.style.display = 'none';
}
}
var subNav = document.getElementById('subnavbar');
if(!!subNav){
subNav.style.display = 'none';
}
}
function showNav(btn) {
var li, i;
for (i = 0; i < navBar.children.length; ++i) {
li = navBar.children[i];
if (!((hasClass(li, 'current-page'))
|| (hasClass(li, 'collapse-button')))) {
li.style.display = 'inline-block';
}
}
var subNav = document.getElementById('subnavbar');
if(!!subNav){
subNav.style.display = 'block';
}
}
}
function makeUserNavBar()
{
var userBar = document.createElement('ul');
userBar.className = 'flat-list';
userBar.setAttribute('id', 'usernavbar');
var navBar = _$('#navbar');
var navParent = navBar.parentNode;
navParent.appendChild(userBar);
var fitBtn = document.createElement("li");
userBar.appendChild(fitBtn);
var imageFit = makeToggleButton(fitBtn, {name:'fitImage',
glyphOff:'fa fa-compress',
glyphOn:'fa fa-expand',
callbackOff:fit,
callbackOn:fit});
var img = _$('#image');
function fit(){
var img = _$('#image');
if (img === undefined) {
return;
}
img.removeAttribute('width');
img.removeAttribute('height');
if ((localStorage.getItem('fitImage')==='true')) {
//img.setAttribute('max-width','100%');
img.style.maxWidth = '100%';
}
else{
img.style.maxWidth = '';
//img.removeAttribute('max-width');
}
}
if(!!img){
img.addEventListener('load', fit, false);
}
var advSearch = document.createElement('div');
advSearch.innerHTML = '<div id = "adv-search">\
<span>Advanced Search: </span>\
<span id = "only-new" style = "padding-right:3px;">Only new image </span>\
</div>';
advSearch = advSearch.firstChild;
userBar.appendChild(advSearch);
var onlyNew = document.getElementById('only-new');
makeToggleButton(onlyNew, {name:'onlyNewSearch',
glyphOff:'fa fa-square-o',
glyphOn:'fa fa-check-square-o',
callbackOff:null,
callbackOn:null});
}
function makeAdvSearchPane()
{
}
function makeToggleButton(elem, settings){
var btn = new ButtonToggle(settings);
btn.bindElement(elem);
btn.load();
elem.addEventListener('click', btn.handlerClick, false);
return btn;
}
function ButtonToggle(settings) {
var self = this;
this.name = settings.name;
this.active = false;
this.bindedElt = null;
this.glyphElt = document.createElement('i');
this.bindElement = function (elem) {
self.bindedElt = elem;
if (self.bindedElt.length > 0) {
elem.insertChildBefore(self.glyphElt, elem.FirstChild);
}
else {
elem.appendChild(self.glyphElt);
}
};
this.glyphOn = settings.glyphOn;
this.glyphOff = settings.glyphOff;
this.callbackOn = settings.callbackOn;
this.callbackOff = settings.callbackOff;
this.save = function () {
localStorage.setItem(self.name, self.active);
};
this.load = function () {
var t = localStorage.getItem(self.name);
if (t === 'true') {
self.setActive(true);
}
else {
self.setActive(false);
}
};
this.handlerClick = function (e) {
if (self.active) {
self.setActive(false);
}
else {
self.setActive(true);
}
};
this.setActive = function (val) {
val = !!val;
self.active = val;
self.save(val);
if (val) {
if (!!self.bindedElt) {
self.bindedElt.classList.add('active');
self.glyphElt.className = self.glyphOn;
}
if (!!self.callbackOn) {
self.callbackOn(self);
}
}
else {
if (!!self.bindedElt) {
self.bindedElt.classList.remove('active');
self.glyphElt.className = self.glyphOff;
}
if (!!self.callbackOff) {
self.callbackOff(self);
}
}
};
}
})();
function handleXHRDoc(reqString, callback){
var doc = document.implementation.createHTMLDocument("example");
var xmlhttp = new XMLHttpRequest();
xmlhttp.open('GET', reqString, true);
xmlhttp.send(null);
xmlhttp.onreadystatechange = handle;
function handle(){
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
doc.documentElement.innerHTML = xmlhttp.responseText;
console.log(doc);
callback(doc);
}
else{
console.log('Error xhr of ' + reqString);
}
}
}
}
//from http://stackoverflow.com/questions/2246901/how-can-i-use-jquery-in-greasemonkey-scripts-in-google-chrome
function load(a, b, c) {
var d;
d = document.createElement("script"), d.setAttribute("src", a), b !== null && d.addEventListener("load", b), c !== null && d.addEventListener("error", c), document.body.appendChild(d);
return d;
}
function execute(a) {
var b, c;
typeof a == "function" ? b = "(" + a + ")();" : b = a, c = document.createElement("script"), c.textContent = b, document.body.appendChild(c);
return c;
}
function loadAndExecute(a, b) {
return load(a, function () {
return execute(b);
});
}
//
function _$(selector){
return document.querySelectorAll(selector)[0];
}
function hasClass(elem, name) {
if (!!elem) {
if (!!elem.classList) {
if (elem.classList.contains(name)) {
return true;
}
}
}
return false;
}
function addStyle(css){
if (typeof GM_addStyle != "undefined") {
GM_addStyle(css);
} else if (typeof PRO_addStyle != "undefined") {
PRO_addStyle(css);
} else if (typeof addStyle != "undefined") {
addStyle(css);
} else {
var node = document.createElement("style");
node.type = "text/css";
node.appendChild(document.createTextNode(css));
var heads = document.getElementsByTagName("head");
if (heads.length > 0) {
heads[0].appendChild(node);
} else {
// no head yet, stick it whereever
document.documentElement.appendChild(node);
}
}
}