BlogPaginator 1.1

BlogPaginator.html

<script>
// <![CDATA[
jQuery(function ($) {

    const UUID_RE = /^.*(uuid\:([\w-]+)).*$/i;

    const PAGE_RE = /^.*(page(\d+|All)).*$/i;

    const SECTION_RE = /^.*(section-(\d+(:?_\d+)+)).*$/i;

    $body = $("body");

    var $posts = $("div.post-body"); // ...this is the element to target on Google Blogger!
    if (!$posts.length) {
        $posts = $("body");
    }

    function createPageLinkList($post, id) {

        var uuid = $post.data("uuid");
        var $pageLinkList = $('<p><b>Pages: <span ' + (id ? 'id='+ uuid +' ' : '') + 'class="uuid:' + uuid + ' pageLinkList" style="color: #3d85c6;"></span></b></p>');
        return $pageLinkList;
    }

    function createPage($post, pageId) {

        var $page = $('<div />')
                .addClass("uuid:" + $post.data("uuid"))
                .addClass("page" + pageId);
        return $page;
    }

    function createLink($post, pageId, text) {

        var $link = $('<a href="#" />')
            .addClass("uuid:" + $post.data("uuid"))
            .addClass("page" + pageId)
            .text(pageId === "All" ? "Show All" : text ? text : pageId);
        $link.click(linkClicked);
        return $link;
    }

    function createMarker($post, pageId, text) {

        var $marker = $("<span />")
            .addClass("uuid:" + $post.data("uuid"))
            .addClass("page" + pageId)
            .css("color", "#3d85c6")
            .text(pageId === 'All' ? 'Show All' : text ? text : pageId);
        return $marker;
    }

    function createSectionId(pageCount, sectionCount) {

        return pageCount + "_" + sectionCount;
    }

    function createSectionLabel($t, pageCount) {

        return $.trim($t.text()) + " - p." + pageCount;
    }

    function restorePageLinks($post) {

        var $selectedPageLink = $post.data("selectedPageLink");
        if ($selectedPageLink) {

            var uuid = $post.data("uuid");
            var page = $post.data("selectedPage");
            var pageId = $post.data("selectedPageId");

            var $selectedPageMarkers = $("span[class*='uuid:"+ uuid+"'][class*='"+ page +"']").not(".pending");

            $selectedPageMarkers.each(function() {

                var $marker = $(this);
                var classes = $marker.attr("class");

                var sectionMatch = SECTION_RE.exec(classes);
                var section = sectionMatch && sectionMatch[1];

                var $pageLink = createLink($post, pageId, $marker.text());
                if (section) {

                    $pageLink.addClass(section);
                }
                $marker.replaceWith($pageLink);
            });
            $selectedPageLink.remove();
        }
    }

    function selectPageLink($post, page, $t, pageId) {

        restorePageLinks($post);

        $post.data("selectedPage", page);
        $post.data("selectedPageId", pageId);
        $post.data("selectedPageLink", $t.first());

        var $selectedPageLinks = $("a[class*='uuid:"+$post.data("uuid")+"'][class*='"+page+"']");

        $selectedPageLinks.each(function() {

            var $pageLink = $(this);
            var classes = $pageLink.attr("class");

            var sectionMatch = SECTION_RE.exec(classes);
            var section = sectionMatch && sectionMatch[1];

            var $marker = createMarker($post, pageId, $pageLink.text());
            if (section) {

                $marker.addClass(section);
            }
            $pageLink.replaceWith($marker);
        });
    }

    function showPage($post, $section) {

        var uuid = $post.data("uuid");
        var $pageHeader = $("#"+ uuid);

        if ($pageHeader.offset()) {

            var properties = {};
            if ($pageHeader.offset().top < $(window).scrollTop()) {

                properties.scrollTop = $pageHeader.offset().top + 20;
            }

            var sectionProperties = {};

            $post.animate(properties, 500, function() {

                var page = $post.data("selectedPage");
                var $pages = $("div[class*='uuid:"+uuid+"'][class*='page']");
                if ("pageAll" === page) {

                    $pages.fadeIn("fast");
                }
                else {

                    var $page = $("div[class^='uuid:"+$post.data("uuid")+" "+page+"']");
                    $page.fadeIn("fast", function() {

                        if ($section && $section.offset().top > $(window).scrollTop()) {

                            sectionProperties.scrollTop = $section.offset().top + 20;
                        }

                        $("html, body").animate(sectionProperties, 500);
                    });
                }
            });
        }
    }

    function linkClicked(e) {

        var $t = $(this);
        var classes = $t.attr("class");

        var uuidMatch = UUID_RE.exec(classes);
        var uuid = uuidMatch[2];

        var $post = $body.data(uuid);
        if ($post) {

            var pageMatch = PAGE_RE.exec(classes);
            var page = pageMatch[1];
            var pageId = pageMatch[2];

            if ($post.data("selectedPage") !== page) {

                selectPageLink($post, page, $t, pageId);

                var $pages = $("div[class*='uuid:" + uuid + "'][class*='page']");
                $pages.hide();

                var sectionMatch = SECTION_RE.exec(classes);
                var section = sectionMatch && sectionMatch[1];

                showPage($post, section && $("h2."+section));
            }
        }

        e.preventDefault();
        return false;
    }

    function selectPage($post, pageId) {

        $("a[class^='page"+pageId+" uuid:"+$post.data("uuid")+"']").first().click();
    }

    var $pageLinks = $();
    var $page;
    var pageCount = 0;
    var sectionCount = 0;

    var $toc;
    var $item;
    var $header;

    $posts
        .each(function() {

            var $post = $(this);
            var uuid = $.uuid();
            $post.data("uuid", uuid);
            $body.data(uuid, $post);

            $post.addClass("uuid:"+$post.data("uuid"));

            $pageLinks = $();
            $page = null;
            pageCount = 0;

            $toc =  $('<ul class=" uuid:' + uuid + ' toc" />');
            $header = createPageLinkList($post, uuid);

            $post.contents()
                .each(function() {

                    var $t = $(this);
                    if ($t.is(".pagebreak")) {

                        pageCount++;
                        sectionCount++;
                        $t.removeClass("pagebreak");
                        $t.addClass("pageheader");
                        $page = createPage($post, pageCount);
                        $page.insertAfter($t);
                        $page.append($t);
                        var $pageLink = createLink($post, pageCount);
                        $pageLinks.push($pageLink[0]);

                        if (1 === pageCount) {

                            $toc.insertBefore($page);
                            $header.insertBefore($page);
                        }

                        $item = $("<li>").appendTo($toc);
                        $item.append(createLink($post, pageCount, createSectionLabel($t, pageCount)));
                    }
                    else if ($t.is(".sectionbreak")) {

                        sectionCount++;
                        $t.removeClass("pagebreak");
                        var sectionId = createSectionId(pageCount, sectionCount);
                        $t.addClass("section-"+sectionId);
                        $page.append($t);
                        $item = $("<li>").appendTo($toc);
                        var sectionLabel = createSectionLabel($t, pageCount);

                        if ($t.is(".pending")) {

                            var $pendingMarker = createMarker($post, pageCount, sectionLabel + " [Coming Soon]");
                            $pendingMarker
                                .addClass("pending")
                                .css("color", "grey");
                            $item.append($pendingMarker);
                        }
                        else {

                            var $sectionLink = createLink($post, pageCount, sectionLabel);
                            $sectionLink.addClass("section-"+sectionId);
                            $item.append($sectionLink);
                        }
                    }
                    else if ($t.is(".pagelinks")) {

                        var $showAllLink = createLink($post, "All");

                        $t.replaceWith(createPageLinkList($post));
                        var $pageLinkLists = $("span[class^='uuid:" + uuid + " pageLinkList']");
                        $pageLinkLists.each(function() {

                            var $pageLinkList = $(this);
                            $pageLinks.each(function() {

                                $pageLink = $(this).clone(true);
                                $pageLinkList.append($pageLink);
                                $pageLinkList.append("|");
                            });
                            $pageLinkList.append($showAllLink.clone(true));
                        });

                        $page = null;
                    }
                    else if ($page) {

                        $page.append($t);
                    }
            });

            selectPage($post, 1);
        });
});
// ]]>
</script>