BlogPaginator 1.1 Gadgetized for Blogger.com

BlogPaginatorGadget.xml

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
    <ModulePrefs title="Blog Paginator" height="350" />
    <Content type="html">
        <![CDATA[
        <script type="text/javascript">

        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(".pagelist")) {

                                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>
        ]]>
    </Content>
</Module>