iichan catalog

Add catalog featureto http://iichan.hk/;

当前为 2015-07-24 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         iichan catalog
// @namespace    http://your.homepage/
// @version      0.1
// @description  Add catalog featureto http://iichan.hk/;
// @author       You
// @match        http://iichan.hk/*
// @grant        none
// @run-at document-idle
// ==/UserScript==
/*jshint multistr: true */
var formElt = null;
var catalogElt = null;
var catalogFlag = false;

var scrollBuffer = 600;
var timeToFailure = 1500;
var noNextPage = false;
var activeDoc;
var pending;

init();

function init(){
    scrollBuffer += window.innerHeight;
    pending = false; 
    activeDoc = document;    

    if(!isMainFrame()){
        return;
    }
    var adminbar = qs('.adminbar')[0];
    if(!adminbar){
        return;
    }
    //console.log(adminbar);

    makeCatalogLink(adminbar);
    formElt = getFormFromDoc(document);
    makeCatalogElement();
    
    var firstPage = getFirstPage(getPagePane(document));     
    buildCatalog(getFormFromDoc(activeDoc));
    
    handleXHRDoc(firstPage, nextDoc);

    window.addEventListener("scroll", testScrollPosition, false);
    //testScrollPosition();
}

function nextDoc(doc){
    activeDoc = doc;
}

function appendNextPage(href){
    if(!href){
        return;
    }
    function addNextPage(doc){
        buildCatalog(getFormFromDoc(doc));
        nextDoc(doc);
    }

    handleXHRDoc(href, addNextPage);    
}

function testScrollPosition(){

    if( noNextPage ){
        return;
        //testScrollPosition = function(){};
    }

    if(isCatalogMode()){
        //Take the max of the two heights for browser compatibility
        if( !pending && window.pageYOffset + scrollBuffer > Math.max( document.documentElement.scrollHeight, document.documentElement.offsetHeight ) )
        {	
            pending = true;
            timeout = setTimeout( function(){pending=false;testScrollPosition();}, timeToFailure );
            console.log('test position');
            console.log(getNextPage());
            var nextPage = getNextPage();
            if(!!nextPage){
                appendNextPage(nextPage);
            }
            else{
                noNextPage = true;
            }
            //handleXHRDoc(firstPage, appendNextPage);
        }
    }  
}

function showCatalog(){
    catalogFlag = true;
     console.log(catalogElt);
    formElt.innerHTML ='';
    formElt.appendChild(catalogElt);
}

function makeCatalogLink(adminbar){
    var catalogLink = document.createElement('span');
    catalogLink.innerHTML =  '[<a href="#" id="id_catalog">Каталог</a>]';
    //console.log(catalogLink);
    adminbar.appendChild(catalogLink);
    catalogLink.onclick = function(e){
        //console.log(document.querySelector('form#delform'));
        showCatalog();
        e.preventDefault();
    };
}

function getThreadsList(form){
    //    var form = document.querySelector('form#delform');
    var tempList = form.querySelectorAll('div');
    var threadList = [];
    for(var i =0; i<tempList.length;++i){
        if(tempList[i].querySelector('.reflink')){
            threadList.push(tempList[i]);
        }
    }
    return threadList;


}

function makeCatalogElement(){        
    catalogElt = document.createElement('div');
    var style = '<style>\
.thread_wrap{text-align:center; display:inline-block; overflow: hidden; height: 400px; position:relative; vertical-align: top; margin:5px; }\
.thread_wrap:hover{overflow: visible; z-index: 900;}\
</style>';
catalogElt.innerHTML = style;
}


function getCatalogElement(){    
    if(!catalogElt){
        throw new Error('Catalog element is null');
    }
    return catalogElt;
}

function buildCatalog(form){

    var catalogElement = getCatalogElement();
    var threadList = getThreadsList(form);
    var i;
    var post = null;
    for(i =0; i< threadList.length;++i){
        post = buildCatalogPost(threadList[i]);
        catalogElement.appendChild(post);
    }
    console.log(catalogElement);
    return catalogElement;

}

function getFormFromDoc(doc){
    var form =  doc.querySelectorAll('form#delform')[0];
    if(!form){
        throw new Error('Form element not found');
    }
    return form;
    
}

function getForm(){
    return formElt;
}

function buildCatalogPost(thread){
    var threadLink = thread.querySelector('.reflink a');   
    threadLink = threadLink.getAttribute('href');

    var imgSrc = thread.querySelector('a img');
    imgSrc = imgSrc.getAttribute('src');

    var threadName = thread.querySelector('.filetitle');
    threadName = threadName.textContent;
    var threadText = thread.querySelector('blockquote');
    threadText = threadText.innerHTML;
    var backgroundColor = '#F0E0D6';
    /*    var template = '<div style="width:220px; height: 400px; border:1px solid black; margin:5px; padding:5px; text-align:center;\
        display:inline-block;word-wrap: break-word; overflow: hidden;">\
<a href="'+ threadLink+ '"><img src="' + imgSrc+'" class="thumb"  style=" display: block; margin: 0 auto; float:none;"></a>\
<span class="filetitle" style=" display:inline-block">'+threadName+'</span>\
<blockquote>' + threadText + '</blockquote></div>';*/

    var template = '<div class = "thread_wrap"><div style="width:220px; min-height:400px; border:1px solid black; overflow:hidden;\
-webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;\
padding:5px; text-align:center; display:inline-block;word-wrap: break-word; background:'+backgroundColor+';">\
<a href="'+ threadLink+ '"><img src="' + imgSrc+'" class="thumb"  style=" display: block; margin: 0 auto; float:none;"></a>\
<span class="filetitle" style=" display:inline-block">'+threadName+'</span>\
<span>' + threadText + '</span></div></div>';

    //console.log(template);
    var post = document.createElement('div');
    post.innerHTML = template; 
    post = post.firstChild;
    return post; 
}


//console.log(document.querySelectorAll('form#postform'));

function isMainFrame(){
    if(qs('form#delform').length){
        console.log('iichan main frame');
        return true;
    }

    return false;
}

function getNextPage(pagePane){
    pagePane = getPagePane();
    var pageList = pagePane.querySelectorAll('td')[2];
    var next = pageList.querySelectorAll('td form')[0];

    if(!next){
        return false;
    }
    href = next.getAttribute('action');   
    console.log(href);

    return href;
}


function getFirstPage(pagePane){
    var pageList = pagePane.querySelectorAll('td')[1];

    var first = pageList.querySelectorAll('a')[0];

    href = first.getAttribute('href');   
    console.log(href);

    return href;
}

function getPagePane(doc){
    doc = activeDoc;
    var paginator = doc.querySelector('body>table>tbody>tr');
    //console.log(pagePane);
    return paginator;
}

function isCatalogMode(){
    return catalogFlag;
}

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


function qs(selector){
    return document.querySelectorAll(selector);
}