XBOOKS BETTER

make it easier to read books!

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

ستحتاج إلى تثبيت إضافة مثل Stylus لتثبيت هذا النمط.

ستحتاج إلى تثبيت إضافة لإدارة أنماط المستخدم لتتمكن من تثبيت هذا النمط.

ستحتاج إلى تثبيت إضافة لإدارة أنماط المستخدم لتثبيت هذا النمط.

ستحتاج إلى تثبيت إضافة لإدارة أنماط المستخدم لتثبيت هذا النمط.

(لدي بالفعل مثبت أنماط للمستخدم، دعني أقم بتثبيته!)

// ==UserScript==
// @name         XBOOKS BETTER
// @namespace    https://greasyfork.org/ja/scripts/376240-xbooks-better
// @version      1.1
// @description  make it easier to read books!
// @author       badfalcon
// @match        http://xbooks.to/*
// @grant GM_setValue
// @grant GM_getValue
/* load jQuery */
// @require https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
// @require https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js
// ==/UserScript==

(function () {
    'use strict';


    //remove ads
    $('#main2col center,#ad_tsuibi, #ad_tsuibi2,#wrap > div[style = "margin: -15px auto 15px; width: 920px;"],#wrap > div[style = "width:900px; height:250px; margin: -15px auto 15px auto;"] ,#sidebar .box:nth-child(n+4) , #one_col > center > div > iframe,#wrap > iframe,#wrap > h2,#wrap > div.content_line.markerbox,#bookpreview > center > div > iframe,div.movie-in-ad, .adbox.left, .adbox.right,#wrap > div > h2,#wrap > div > div.content_line.markerbox,#one_col > center > div,#bookpreview > center').hide();

    //add cookie
    Cookies.set("pop", "open", {expires: 7, path: "/"});

    var loc = $(location).attr('pathname').match(/(?:\/)([^\/]+)(?:\/)/);

    //todo インチキ修正
    if (loc == null) {
        loc = ['tops', 'tops'];
    }

    var listPages = ['tops', 'Tops', 'search', 'Search', 'mybook'];
    if ($.inArray(loc[1], listPages) != -1) {
        //------------------------------top page------------------------------

        // Your code here...
        var modal = false;
        var scrollPos;

        var bookLink = $('#main2col > div.content_list > .list > a');
        bookLink.attr('target', 'bookFrame');
        bookLink.on('click', function (event) {
            //        event.preventDefault();
            openModal();
        });

        $('body').css({});
        var modalContent = $('<div>').attr('id', 'modalWindow')
            .css({
                'position': 'fixed',
                'z-index': '110',
                'background-color': 'rgba(0,0,0,0.8)',
                'width': '100%',
                'height': '100%',
                'display': 'flex',
                'justify-content': 'center',
                'align-items': 'center',
            });

        var frame = $('<iframe>')
            .attr({
                'id': 'modalFrame',
                'name': 'bookFrame',
                'scrolling': 'no',
                'frameborder': 'no',
            })
            .css({
                'width': '90%',
                'height': '100%',
                'border': 'outset 3px #fff',
            });
        modalContent.append(frame);
        $('body').prepend(modalContent);
        modalContent.hide();

        function openModal() {
            modalContent.show();
            scrollPos = $(window).scrollTop();
            $('#container').css({
                'position': 'fixed',
                'top': -scrollPos + 'px',
            });
            modal = true;
        }

        function closeModal() {
            modalContent.hide();
            $('#container').css({
                'position': '',
                'top': '',
            });
            $(window).scrollTop(scrollPos);
            modal = false;
        }

        $('#modalWindow').on('click', function (e) {
            if (!$(e.target).closest('#modalFrame').length) {
                // フェードやスライドなどの処理方法を記述;
                closeModal();
            }
        });
        var keywordLink = $('.keyword_list > li > a');
        keywordLink.attr('target', '_blank');

        $(window).on('keydown', function (e) {
            var keycode = e.keyCode;
            switch (keycode) {
                case 27:
                    // esc
                    if (modal) {
                        closeModal();
                    }
                    break;
                default:
                    break;
            }
        });

        var start_pos = 0;

        $(window).on('scroll', function (e) {
            var current_pos = $(this).scrollTop();
            if (current_pos > start_pos) {
                //                console.log('down');
            } else {
                //                console.log('up');
            }
            start_pos = current_pos;
            var bottom = $(document).innerHeight() - $(window).innerHeight(); //ページ全体の高さ - ウィンドウの高さ = ページの最下部トップ位置
            if (current_pos <= 0) {
            } else if (bottom <= current_pos) {
                //一番下までスクロールした時に実行
                $('#nextPage')[0].click();
            } else {

            }
        });

    } else if (loc[1] == 'detail') {
        //------------------------------detail page------------------------------

        var fullscreen = true;
        var slideshow = false;
        var expandSidemenu = GM_getValue('expandSidemenu', false);
        console.log(expandSidemenu);

        /*
    function getSettings(){
        fullscreen = GM_getValue('fullscreen',true);
        GM_setValue('fullscreen',false);
        console.log(fullscreen);
    }
    getSettings();
    */

        var loading = false;

        var totalPages = parseInt($('#page_num').text().match(/\((.+)\/(.+)\)/i)[2]);

        var currentPage = 1;
        var calledPages = 0;
        var finishedPages = 0;
        var preloadNum = 100;
        var intervalTime = 100; // millisec
        var slideshowInterval = GM_getValue('slideshowInterval', 1.5); // sec
        var interval = false;
        var resizeTimer;
        var imageWidth = 0;
        var imageHeight = 0;
        var imageRatio = 0;
        var windowWidth = 0;
        var windowHeight = 0;
        var windowRatio = 0;
        var showTags = GM_getValue('showTags', true);
        resizeTimer = false;

        var debug = false;


        $('#wrap > div:nth-child(1)').remove();
        $('.movie-in-ad').remove();
        $('#main2col > iframe').remove();


        var modalWindow = $('<div>').attr('id', 'modalWindow')
            .css({
                'position': 'fixed',
                'z-index': '100',
                'background-color': 'rgba(0,0,0,0.8)',
                'width': '100%',
                'height': '100%',
            });

        var mainBlock = $('<div>').attr('id', 'mainBlock')
            .css({
                'display': 'flex',
                'justify-content': 'center',
                'width': '100%',
                'height': '100%',
            });

        var statusBlock = $('<div>').attr('id', 'statusBlock')
            .css({
                'color': 'white',
                'width': '100%',
                'background-color': 'rgba(0,0,0,0.6)',
                'display': 'flex',
                'flex-direction': 'column',
                'justify-content': 'center',
            });

        function getSerfaceText(selector) {
            var elem = $(selector[0].outerHTML);
            elem.children().empty();
            return elem.text();
        }

        var rawTitle = getSerfaceText($('#one_col > h2')).trim();
        var titleReg = rawTitle.match(/([^\[\]【】]*)?([\[【]([^\[\]【】]+)[\]】])?(.+)$/);

        var titleBlock = $('<div>').attr('id', 'titleBlock');

        var circleLink = $('<a>').attr({
            'target': '_blank',
            'id': 'circleSearchLink',
            'href': 'http://xbooks.to/search/index/word:' + titleReg[3]
        }).text(titleReg[2]);
        var bookTitle = $('<span>').text(titleReg[4]);

        titleBlock.append($('<span>').text(titleReg[1])).append(circleLink).append($('<span>').text(titleReg[4]));

        var popupBlock = $('<div>').attr('id', 'popupBlock')
            .css({
                'color': 'white',
                'position': 'fixed',
                'background-color': 'rgba(0,0,0,0.6)',
                'display': 'flex',
                'justify-content': 'center',
                'border-radius': '0px 0px 5px 5px',
            });
        var statusPopup = $('<div>').attr('id', 'statusPopup')
            .css({
                'color': 'white',
                'padding': '5px',
            });
        var statusTimeoutID = null;

        function showStatus(str, timer) {
            statusPopup.text(str);
            popupBlock.css('left', (windowWidth - statusPopup.width()) / 2);
            popupBlock.slideDown("fast", function () {
                if (statusTimeoutID !== null) {
                    clearTimeout(statusTimeoutID);
                }
                if (timer) {
                    statusTimeoutID = setTimeout(function () {
                        popupBlock.slideUp('normal', function () {
                        });
                    }, 2000);
                } else {

                }
            });
        }

        function hideOverlay() {
            fullscreen = false;
            if (slideshow) {
                slideshowButton.click();
            }
            modalWindow.hide();
        }

        function showOverlay() {
            fullscreen = true;
            modalWindow.show();
        }

        var openButton = $('<button>').text('fullscreen');
        openButton.on('click', function () {
            showOverlay();
        });
        $('#one_col > h2:nth-child(1) > span').after(openButton);

        var sideMenu = $('<div>').attr('id', 'sideMenu').css({
            "display": "flex",
            "flex-direction": "row",
            "position": "fixed",
        });

        var sideList = $('<div>').attr('id', 'sideList').css({
            "display": "flex",
            "flex-direction": "column",
            "width": "80px",
            "height": "100%",
            "background-color": "rgba(0,0,0,0.5)",
        });

        var toggleButton = $('<button>').attr('id', 'toggleButton').text('<');
        toggleButton.on('click', function () {
            if (sideList.is(':visible')) {
                // 表示されている場合の処理
                sideList.hide();
                $(this).text('>');
                expandSidemenu = false;
            } else {
                // 非表示の場合の処理
                sideList.show();
                $(this).text('<');
                expandSidemenu = true;
            }
            GM_setValue('expandSidemenu', expandSidemenu);
        });

        var status = $('<div>').attr('id', 'statusText').html('C(' + currentPage + '/' + calledPages + ':' + totalPages + ')').css('color', 'white');

        function updateStatus() {
            var slideshowStatus = slideshow ? 'playing ' : '';
            status.html(slideshowStatus + 'C(' + currentPage + '/' + calledPages + ':' + totalPages + ')');
        }

        var reloadButton = $('<button>').attr('id', 'reloadButton').text('reload');
        reloadButton.on('click', function () {
            reloadImages();
        });

        var oldTimeValue = null;
        var slideshowTime = $('<input>', {
            id: 'slideshowTime',
            type: "text",
            pattern: "^[0-9]+\.[0-9]+$",
            value: slideshowInterval
        }).css('text-align', 'center');
        slideshowTime.on('focus', function () {
            console.log("focus");
            oldTimeValue = $(this).val();
            console.log("recorded : " + oldTimeValue);
        });
        slideshowTime.on("change paste", function () {
            console.log("paste");
            var timeVal = $(this).val();
            if (timeVal.match(/^[0-9]+.[0-9]+$/)) {
                console.log("matched");
                slideshowInterval = timeVal;
                GM_setValue('slideshowInterval', timeVal);
            } else {
                console.log("unmatched");
                console.log($(this).eq(0));
                $(this).eq(0).val(oldTimeValue);
            }
        });

        var slideshowTimeoutID = null;
        var slideshowButton = $('<button>').attr('id', 'slideshowButton').text('play');
        slideshowButton.on('click', function () {
            slideshow = !slideshow;
            updateStatus();
            if (slideshow) {
                slideshowTime.prop('disabled', true);
                slideshowButton.text('stop');
                slideshowTimeoutID = setInterval(function () {
                    thumbNext(totalPages);
                    //                showStatus("play (" + currentPage + "/" + totalPages + ")",true);
                }, slideshowInterval * 1000);
            } else {
                slideshowTime.prop('disabled', false);
                slideshowButton.text('play');
                clearInterval(slideshowTimeoutID);
            }
        });


        var closeButton = $('<button>').attr('id', 'closeButton').text('×');
        closeButton.on('click', function () {
            hideOverlay();
        });

        var downloadButton = $('<button>').attr('id', 'downloadButton').text('dlZip');
        downloadButton.on('click', function () {
            $('#download > li:nth-child(2) > a')[0].click();
        });

        var favoriteButton;
        var t = $('#download > li.bookshelf > a > img').attr('src');
        if (t != null) {
            var favorited = $('#download > li.bookshelf > a > img').attr('src').includes('set');

            favoriteButton = $('<button>').attr('id', 'favoriteButton').text('fav');

            function updateFavButton() {
                if (favorited) {
                    favoriteButton.text('unfav');
                } else {
                    favoriteButton.text('fav');
                }
            }

            favoriteButton.on('click', function () {
                $('#download > li.bookshelf > a')[0].click();
                favorited = !favorited;
                updateFavButton();
            });
            updateFavButton();
        }

        var loadAllButton = $('<button>').attr('id', 'loadAllButton').text('loadAll');
        loadAllButton.on('click', function () {
            loadImages(calledPages, totalPages);
        });

        var tags = $('<div>').attr('id', 'tags').text('△tags').css({'color': 'white', 'cursor': 'pointer'});
        var tagList = $('#detail > ul.tag_list').clone(true).css({
            'color': 'white',
            'display': 'flex',
            'flex-direction': 'column'
        });
        tags.on('click', function () {
            showTags = !showTags;
            GM_setValue('showTags', showTags);
            updateTags();
        });

        function updateTags() {
            if (showTags) {
                tags.text('△tags');
                tagList.show();
            } else {
                tags.text('▽tags');
                tagList.hide();
            }
        }

        updateTags();

        statusBlock.append(titleBlock);
        statusBlock.append(status);
        modalWindow.append(statusBlock);
        popupBlock.append(statusPopup);
        modalWindow.append(popupBlock);
        popupBlock.hide();

        //    sideList.append(status);
        sideList.append(closeButton);
        sideList.append(loadAllButton);
        sideList.append(slideshowTime);
        sideList.append(slideshowButton);
        sideList.append(downloadButton);
        if (t != null) {
            sideList.append(favoriteButton);
        }
        sideList.append(tags);
        sideList.append(tagList);

        sideMenu.append(sideList).append(toggleButton);

        if (!expandSidemenu) {
            sideList.hide();
            toggleButton.text('>');
        }

        var mainImage = $('<div>')
        //    .attr({'':'',
        //          })
            .css({
                'display': 'flex',
                'justify-content': 'center',
                //          'align-items':'center',
                '': '',
            });
        mainImage.append($('#thumbnail1').clone(true));
        mainBlock.append(mainImage);

        modalWindow.append(sideMenu).append(mainBlock);

        $('#container').before(modalWindow);
        //    $('#container').before($('#thumbnail1').clone(true));

        //    toggleButton.click();

        if (!debug) {

            //            preload();
            loadImages(0, preloadNum);
        }

        function loadImages(start, num) {
            if (!loading) {
                loadAllButton.prop('disabled', true);
                if (finishedPages == totalPages) {
                    reloadImages();
                } else {
                    console.log("load start:" + (finishedPages + 1) + "~" + (finishedPages + num));
                    loading = true;
                    var url = $('#thumbnail1').attr('src');
                    var match = url.match(/(http.+\/)(\d{5})\.(jpg|jpeg|gif|png)/i);
                    var index = parseInt(match[2]);
                    var finished = 0;
                    if (interval) {
                        var i = 1;
                        var id = setInterval(function () {
                            if (calledPages + 1 > totalPages) {
                                clearInterval(id); //idをclearIntervalで指定している
                                console.log("preload finished to " + calledPages + " pages");
                            } else {
                                calledPages++;
                            }
                            $('<img>').attr('src', match[1] + ("0000" + calledPages).slice(-5) + "." + match[3]).on('load', function () {
                                finished++;
                                finishedPages++;
                                if (finished == num || finishedPages == totalPages) {
                                    loading = false;
                                    loadAllButton.prop('disabled', false);
                                    showStatus("load finished", true);
                                } else {
                                    showStatus('Loading (' + finishedPages + '/' + totalPages + ')', true);
                                }
                                updateStatus();
                            });
                            if (i < num) {
                                i++;
                            } else {
                                clearInterval(id); //idをclearIntervalで指定している
                                console.log("preload finished to " + calledPages + " pages");
                            }
                        }, intervalTime);
                    } else {
                        for (var i = start + 1; i <= num; i++) {
                            if (calledPages + 1 > totalPages) {
                                break;
                            } else {
                                calledPages++;
                            }
                            $('<img>').attr('src', match[1] + ("0000" + calledPages).slice(-5) + "." + match[3]).on('load', function () {
                                finished++;
                                finishedPages++;
                                if (finished == num || finishedPages == totalPages) {
                                    loading = false;
                                    loadAllButton.prop('disabled', false);
                                    if (finishedPages == totalPages) {
                                        showStatus("all loaded", true);
                                        loadAllButton.text("reload");
                                    } else {
                                        showStatus("load finished", true);
                                    }
                                } else {
                                    showStatus('Loading (' + finishedPages + '/' + totalPages + ')', true);
                                }
                                updateStatus();
                            });
                        }
                    }
                }
            }
        }

        function reloadImages() {
            if (!loading) {
                loadAllButton.prop('disabled', true);
                loading = true;
                var currentTotal = calledPages;
                calledPages = 0;
                var finished = 0;
                finishedPages = 0;
                var url = $('#thumbnail1').attr('src');
                var match = url.match(/(http.+\/)(\d{5})\.(jpg|jpeg|gif|png)/i);
                var index = parseInt(match[2]);
                if (interval) {
                    var i = 1;
                    var id = setInterval(function () {
                        if (calledPages + 1 > totalPages) {
                            clearInterval(id); //idをclearIntervalで指定している
                        } else {
                            calledPages++;
                        }
                        $('<img>').attr('src', match[1] + ("0000" + calledPages).slice(-5) + "." + match[3]).on('load', function () {
                            finished++;
                            finishedPages++;
                            if (finishedPages == currentTotal) {
                                loading = false;
                                loadAllButton.prop('disabled', false);
                                console.log("reload finished:" + "~" + currentTotal);
                                showStatus("reload finished", true);
                            } else {
                                showStatus('Reloading (' + finishedPages + '/' + currentTotal + ')', true);
                            }
                            updateStatus();
                        });
                        if (i < currentTotal) {
                            i++;
                        } else {
                            clearInterval(id); //idをclearIntervalで指定している
                        }
                    }, intervalTime);
                } else {
                    for (var i = 1; i <= currentTotal; i++) {
                        if (calledPages + 1 > totalPages) {
                            break;
                        } else {
                            calledPages++;
                        }
                        $('<img>').attr('src', match[1] + ("0000" + calledPages).slice(-5) + "." + match[3]).on('load', function () {
                            finished++;
                            finishedPages++;
                            if (finishedPages == currentTotal) {
                                loading = false;
                                loadAllButton.prop('disabled', false);
                                console.log("reload finished:" + "~" + currentTotal);
                                showStatus("reload finished", true);
                            } else {
                                showStatus('Reloading (' + finishedPages + '/' + currentTotal + ')', true);
                            }
                            updateStatus();
                        });
                    }
                }
            }

        }


        // Your code here...
        $(window).on('scroll', function (e) {
            e.stopPropagation();
            e.preventDefault();
            if ($(window).scrollLeft() > 0) {
                $(window).scrollLeft(0);
            }

        });

        function initSize() {
            imageWidth = $('#thumbnail1').width();
            imageHeight = $('#thumbnail1').height();
            imageRatio = imageWidth / imageHeight;
            onResize();
        }


        function onResize() {
            if (resizeTimer !== false) {
                clearTimeout(resizeTimer);
            }
            resizeTimer = setTimeout(function () {
                // 何らかの処理
                windowWidth = $(window).outerWidth(true);
                windowHeight = $(window).outerHeight(true) - $('#statusBlock').height();
                modalWindow.css('width', '100%').css('height', '100%');
                popupBlock.css('left', (windowWidth - statusPopup.width()) / 2);
                windowRatio = windowWidth / windowHeight;
                if (windowRatio >= imageRatio) {
                    $('#thumbnail1').css('width', windowHeight * imageRatio);
                    $('#thumbnail1').css('height', windowHeight);
                } else {
                    $('#thumbnail1').css('width', windowWidth);
                    $('#thumbnail1').css('height', windowWidth / imageRatio);
                }
                //            statusBar.css('left',(windowWidth-statusBar.width())/2);
            }, 200);
        }

        initSize();

        window.addEventListener('resize', onResize);

        $(window).on('keydown', function (e) {
            var keycode = e.keyCode;
            switch (keycode) {
                case 27:
                    // esc
                    if (fullscreen) {
                        hideOverlay();
                    } else {
                        showOverlay();
                    }
                    break;
                default:
                    break;
            }
            if (fullscreen) {
                switch (keycode) {
                    case 38:
                        // ↑
                        thumbPre(totalPages);
                        return false;
                    case 40:
                        // ↓
                        thumbNext(totalPages);
                        return false;
                    case 116:
                        // F5
                        loadAllButton.click();
                        return false;
                    default:
                        break;
                }
            }
        });

        function thumbPre(pages) {
            var url = $('#thumbnail1').attr('src');
            var match = url.match(/(http.+\/)(\d{5})\.(jpg|jpeg|gif|png)/i);
            var num = parseInt(match[2]) - 1;
            if (num == 0 && totalPages == finishedPages) {
                num = totalPages;
            }
            if (num > 0) {
                num = ('0000' + num).slice(-5);
                $('#thumbnail1').attr('src', match[1] + num + '.' + match[3]);

            }
            page_nation(pages);
        }

        var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
        $(document).on(mousewheelevent, function (e) {
            var num = parseInt($('.wheel').text());
            if (fullscreen) {
                e.preventDefault();
                var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
                if (delta < 0) {
                    thumbNext(totalPages);
                    return false;
                } else {
                    thumbPre(totalPages);
                    return false;
                }
            }
        });

        $('#page_num').on('DOMSubtreeModified propertychange', kd);

        function kd() {
            var pageMatch = $('#page_num').text().match(/\((.+)\/(.+)\)/i);
            if (pageMatch != null) {
                if (currentPage != pageMatch[1]) {
                    currentPage = pageMatch[1];
                    updateStatus();
                    if (currentPage >= calledPages - (preloadNum / 2) && calledPages !== totalPages) {
                        loadImages(0, preloadNum);
                    }
                }
            }
        }


    } else {
        console.log('unknown page :' + loc[1]);
    }

})();