Q: Add pagination to the top of display posts page -- new & improved

Hello

Here's my javascript which now includes cloning pagination in header. The function pagination_in_header() along with relevant style rules injected by CSSStyleSheet.insertRule() does the job. You may adjust the positioning of the cloned element by CSSRule defined in javascript.

cf.

Document Object Model (DOM) Level 2 Style Specification

https://www.w3.org/TR/DOM-Level-2-Style/

// ==UserScript==
// @name            ASC thread content view (d2)
// @namespace       bubo-bubo/gmscripts
// @description     ASC - disable jquery animation, initially show all replies, hide rollup solved answer in page 2 or later, clone pagination navigator in header.
// @grant           unsafeWindow
// @run-at          document-end
// @include         https://discussions.apple.com/*
// @include         https://discussionsjapan.apple.com/*
// @include         https://discussionskorea.apple.com/*
// @include         https://discussionschinese.apple.com/*
// @include         https://communities.apple.com/*
// @version         0.2.1
// ==/UserScript==

var _debug = 0;
var $ = unsafeWindow.jQuery;
var watchdog1, watchdog2, watchdog3;
var watch_interval          = 300; // [ms]
var re_thread               = new RegExp('^https://[^/]+/thread/');
var re_thread_or_message    = new RegExp('^https://[^/]+/(thread|message)/');

// disable jquery animation (globally)
$.fx.off = true;

// supplementary styles for pagination nagivator cloned in header (.thread-container-wrapper)
// pagination navigator
document.styleSheets[0].insertRule(
'.thread-container-wrapper .j-pagination.top {\
    position: absolute !important;\
    top: -10px !important;\
    right: 0px !important;\
}', 0);
// loading gear icon
document.styleSheets[0].insertRule(
'.thread-container-wrapper .j-loading-big {\
    position: absolute;\
    top: -6px;\
    left: 0;\
    margin-left: -60px;\
    z-index: -1;\
}', 0);


// modify thread content view behaviour (in post-load phase)
window.onload = function() {
    // register event listeners
    window.addEventListener('unload', function(e) {
        if (_debug) console.log('unload is observed');
        stop_watchdog(watchdog1);
        stop_watchdog(watchdog2);
        stop_watchdog(watchdog3);
        window.removeEventListener('_locationchange', _locationchange_handler, true);
        window.removeEventListener(e.type, arguments.callee, true);
    }, true);

    window.addEventListener('_locationchange', _locationchange_handler, true);
    function _locationchange_handler(e) {
        if (_debug) console.log('_locationchange is observed');
        var href = window.location.href;
        if ( href.match(re_thread) ) {
            setTimeout(show_all_replies, 100);
        }
        if ( href.match(re_thread_or_message) ) {
            setTimeout(hide_solved_p2, 100);
            setTimeout(pagination_in_header, 100);
        }
    }

    // _locationchange watch dog
    var prev_href = '';
    watchdog1 = setInterval( function() {
        // watch for location to change
        var curr_href = window.location.href;
        if (curr_href != prev_href) {
            if (_debug) console.log('_locationchange is issued');
            window.dispatchEvent(new Event('_locationchange'));
            prev_href = curr_href;
        }
    }, watch_interval);
};

function show_all_replies() {
    window.addEventListener('_helpfuldisplay', function(e) {
        if (_debug) console.log('_helpfuldisplay is observed');
        $('.helpful-all-switch li.helpful').addClass('inactive').removeClass('active').hide();
        $('.helpful-all-switch li.all-replies').addClass('active').removeClass('inactive').show();
        $('#helpful-container').hide();
        $('.all-replies-container').show();
        window.removeEventListener(e.type, arguments.callee, true);
    }, true);

    watchdog2 = setInterval( function() {
        // watch for helpful container to appear
        if (_debug) console.log('watchdog (for helpful container) is active : ' + watchdog2);
        if ($('#helpful-container').css('display') != 'none') {
            if (_debug) console.log('_helpfuldisplay is issued');
            window.dispatchEvent(new Event('_helpfuldisplay'));
            stop_watchdog(watchdog2);
        }
    }, watch_interval);
    setTimeout(stop_watchdog, 3000, watchdog2);
}

function hide_solved_p2() {
    var u = window.location.href;
    var re = /[?&]start=([0-9]+)/;
    var m = re.exec(u);
    var p = m ? m[1] : 0;
    if (_debug) console.log('current start post numebr = ' + p);
    var div = $('.j-answer-rollup.recommended-answers.span-full-width');
    if (!div) { return; }
    p > 0 ? div.hide() : div.show();
}

function pagination_in_header() {
    window.addEventListener('_pagereday', function(e) {
        if (_debug) console.log('_pagereday is observed');
        var pg = $('.all-replies-container .j-pagination.top');
        if (pg) {
            $('.thread-container-wrapper .j-pagination.top').remove();
            pg.clone(true).appendTo($('.thread-container-wrapper'));
        }
        window.removeEventListener(e.type, arguments.callee, true);
    }, true);

    watchdog3 = setInterval( function() {
        // watch for reply container opacity to be 1 (which is .5 while loading)
        if (_debug) console.log('watchdog (for page ready) is active : ' + watchdog3);
        if ($('.all-replies-container').css('opacity') == 1) {
            if (_debug) console.log('_pagereday is issued');
            window.dispatchEvent(new Event('_pagereday'));
            stop_watchdog(watchdog3);
        }
    }, watch_interval);
//  setTimeout(stop_watchdog, 5000, watchdog3);
}

function stop_watchdog(dog) {
    clearInterval(dog);
    if (_debug) console.log('watchdog is inactive : ' + dog);
}

Tested with Greasemonkey 3.9 and Firefox 45.3.0esr under OS X 10.6.8.

All the best,

Hiroto

Hello

I'd be glad if it serves good people.

The DOM 2 Style Specification specfically covers the interface CSSStyleSheet.insertRule(). Initially I tried to use jQuery's css() function just becase it seems handy but it turned out that .css() is being defective and unable to set rule with priority, i.e., "!important;" rule. We can reliably use DOM 2's CSSStlyeSheet.insertRule() and/or CSSStyleDeclaration.setProperty() interfaces to define style rule with priority.

---

The following single line disables all annoying animation effects such as in auto page scrolling implemented by jQuery:

$.fx.off = true;

when executed in the context of target jQuery instance loaded by site, which is obtained by unsafeWindow.jQuery in Greasemonkey.

Regarding the event-driven style of javascript coding, it is commonly used to treat asynchronous document objects in consistent manner. Basically, my javascript takes less intrusive approach firstly to let the site script have its job done and then to modify the results.

E.g., as for showing all replies, firstly site script loads all replies and then show promoted helpful replies and hide others if there's any helpful or recommended answer; and then my script undoes the latter - to hide the promoted helpful replies and show all replies.

As for cloning pagination navigator, timing is important. We have to wait for the new page data to be loaded and pagination navigator to be updated before cloning it. To do that reliably, I introduced _pageready event based upon the opacity of .all-repies-container.

You can investigate what site script is doing by inspecting the javascript files, especially the one of a random name, such as 8beb245c18f36f997c732bc23ab9421d.js, and of the largest size. I use js-beautify to clean the obfuscated javascript.

https://github.com/einars/js-beautify

All the best,

H

Howdy Hiroto

Your post reminded my of an old thread where the OP has "severe sensory sensitivity" issues

Re: Apple Won't Provide Support Because I Can't Use Phones?

I wonder if you could "play doctor" there... I have offered all advice that my level of expertise allows

Thanks

ÇÇÇ