☰

Gelbooru KonaStyle

Change gelbooru.com main theme to dark theme, similar to konachan style. Also added buttons to hide submenu and red message in header.

当前为 2015-03-02 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Gelbooru KonaStyle
// @namespace    http://Aestellar.homepage/
// @version      0.13
// @description  Change gelbooru.com main theme to dark theme, similar to konachan style. Also added buttons to hide submenu and red message in header.
// @author       Aestellar
// @include       *://gelbooru.com/*
// @resource    gelbooruCss1 https://userstyles.org/styles/111063/gelbooru-konastyle-test.css
// @grant GM_getResourceText
// @grant GM_addStyle

// @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 @resource
        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 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()) {
                var newId = ' id:>' + getLastImageId() + ' ';
                if (text.indexOf(newId)===-1) {
                    text+=newId; 
                };                
            };
        };
        return text;
    }
    
    function replaceSubmit(){
        var form = _$('.sidebar3 form');
        form.onsubmit = submit;
    }
    
    
    
    
    function updateUI(){       
        loadPrereq();
        checkLastVisit();
        replaceSubmit();   
        updateNav();
    }                
    
    function updateNav() {
        var navBar = _$('.flat-list');
        var subNav = _$('.submenu');
        var navBtn = document.createElement("li");
        var advNav = document.createElement("li");
        navBar.insertBefore(advNav, navBar.firstChild);
        navBar.insertBefore(navBtn, navBar.firstChild);
        
        var sett = {name:'navCollapse', glyphOff:'fa fa-minus-square-o', glyphOn:'fa fa-plus-square-o',
        callbackOff:makeToggleFunc(['.submenu', '.noticeError'], show), callbackOn:makeToggleFunc(['.submenu', '.noticeError'], hide)};

        var sett2 = {name:'advNavCollapse', glyphOff:'fa fa-search-minus', glyphOn:'fa fa-search-plus',
        callbackOff:makeToggleFunc(['#usernavbar'], show), callbackOn:makeToggleFunc(['#usernavbar'], hide)};
        makeUserNavBar();

        var collapseBtn = makeToggleButton(navBtn,sett);
        makeToggleButton(advNav,sett2);
        
        
        function makeToggleFunc(sel,action){

            var activeFoo = function(){
                for (var i = sel.length - 1; i >= 0; i--) {
                    action(_$(sel[i]));
                };            
        }
        return activeFoo;

    }     
}    

function makeUserNavBar(){
    var userBar = document.createElement('ul');
    userBar.className = 'flat-list';
    userBar.setAttribute('id', 'usernavbar');
    var navBar = _$('.submenu'); 
    var navParent = navBar.parentNode;
    navParent.insertBefore(userBar,navBar.nextSibling);

    makeFitImageBtn(userBar);
    makeAdvSearchPane(userBar);

}   

function makeFitImageBtn(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.style.maxWidth = '100%';         
        }
        else{
            img.style.maxWidth = '';
        }
                //console.log(window.Note);
            }

            if(!!img){
                img.addEventListener('load', fit, false);          
            }
        }

        function makeAdvSearchPane(userBar)
        {
            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});
            return advSearch;
        }

        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;

            var modGliph = 'fa-lg';
            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 + ' ' + modGliph;
            this.glyphOff = settings.glyphOff + ' ' + modGliph;
            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);
                    }
                }
            };
        }


// LastVisit functions              
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 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 hide(elt){
    elt.style.display = 'none';
}
function show(elt){
    elt.style.display = '';
}



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);
        }
    }   
}