BloggerをGoogle検索結果風にページングする④

残りの関数は、以下で全てです。

//--------------------------------------------------
// 前・後方リンク生成とコールバックScriptの書き出し
//--------------------------------------------------
function getPrevNext(vector){
   var startIndex = 0;
   var scriptStr = '<script &alt="json-in-script'" &callback="redirectPrevPage';" ){="" *="" +="(pageNo-1)" 1="" ;="" if(="" maxresults="" prev"="" span="" src="';
   var srcStr = feedUrl + 1 + '&amp;start-index=';
   var span = '&lt;span class=" srcstr="" vector="=">
<a href="javascript:void();" id="prevPageLink">' + vector + '</a></span>';
   }else{
      srcStr += (pageNo+1) * maxResults 
           + '&alt=json-in-script'
           + '&callback=redirectNextPage';
      span += 'naviLinkNext">'
           + '<a href="javascript:void();" id="nextPageLink">' + vector + '</a></span>';  
   }
   blogPager.innerHTML += span;
   scriptStr += srcStr + '" type="text/javascript">
</script>';
   document.write(scriptStr);
}
//-------------------------------
// 前方リンク用コールバック関数
//-------------------------------
function redirectPrevPage( result ){
   var targetLink = document.getElementById("prevPageLink");
   var date = encodeDate( result.feed.entry[0].published.$t );// 記事公開日付
   if( pageNo == 1) targetLink.href =  blogUrl + '#PageNo=1';
   else targetLink.href =  blogUrl + '&amp;updated-max=' + date  + '#PageNo=' + pageNo ;
}
//-------------------------------
// 後方リンク用コールバック関数
//-------------------------------
function redirectNextPage( result ){
   var targetLink = document.getElementById("nextPageLink");
   var date = encodeDate( result.feed.entry[0].published.$t );// 記事公開日付
   
   targetLink.href =  blogUrl + '&amp;updated-max=' + date  + '#PageNo=' + (pageNo + 2);
}
//-------------------------------
// 各ページリンク用コールバック関数
//-------------------------------
function redirectTargetPage( result ){
   var startIndex = parseInt(result.feed.openSearch$startIndex.$t, 10);
   var targetPage = parseInt( startIndex / maxResults );
   var targetLink = document.getElementById("targetPageLink" + startIndex );   
   var feed = result.feed;   
   var date = encodeDate( feed.entry[0].published.$t );// 記事公開日付
   if( startIndex == 1) targetLink.href =  blogUrl + '#PageNo=' + targetLink.innerHTML;
   else targetLink.href =  blogUrl + '&amp;updated-max=' + date + '#PageNo=' + targetLink.innerHTML;
}
//---------------------------------------
// 日時文字列をURIエンコードして返します
//--------------------------------------
function encodeDate(dateStr){
   dateStr = dateStr.substring(0, 19) + dateStr.substring(23, 29);
   return encodeURIComponent( dateStr );
}

コードの実装方法

Bloggerの管理ツールからテンプレートHtmlの編集で「</body>」を検索し、その直前に以下の全コードをコピー＆ペーストして下さい。
~~次に、ページナビゲーションを表示するためのタグ「~~~~<div id="blogPager"><span class="blogPager"/></div>~~

~~」を適宜表示したい場所へ配置します。~~
既にテンプレートに「id='blog-pager'」のタグが記載されていると思います。
リスト表示になるページでは、その中身をクリアしてページナビゲーションが表示されます。

好みに応じて、全コード内のスタイルを調整してやれば完成です。
※　アーカイブページではページング動作しませんので、必要に応じて改造してご使用下さい。

対応ブラウザ

@Explorer
@Chrome
@Safari
@Firefox（スクリプト外部ファイル化により動作確認できました）
@Opera

全コード

※　最大リンク表示数で範囲制限とカレントページをセンタリングする機能を付加しました。(2010/03/28)

<style type='text/css'>
.pageLink ,.currentPageLink, .naviLinkPrev, .naviLinkNext{
line-height: 2.1em;
}
.pageLink a, .currentPageLink a, .naviLinkPrev a, .naviLinkNext a{
color: #333 !important;
text-decoration:none !important;

margin: 0 3px;
padding: 3px;
}
.pageLink, .naviLinkPrev, .naviLinkNext{
color: blue !important;
text-decoration:none !important;
margin: 0 3px;
padding: 3px;
}
.pageLink:hover, .naviLinkPrev:hover, .naviLinkNext:hover{
background-color: skyblue;
}
.pageLink , .naviLinkPrev, .naviLinkNext{
color: #333;
text-decoration: none;
border: 1px solid #ccc;
margin: 0 3px;
padding: 3px;
}
.currentPageLink {
color: #333;
text-decoration: none;
border: 1px solid #ccc;
background-color: #ccc;
margin: 0 3px;
padding: 3px;
}
.currentPageLink .headPager{
margin: 0 3px 0 0;
padding: 3px;
}
</style>

<script type='text/javascript'>
<!--
//-------------------------------------
// Copyright (C) 2010 Hyperhands.com
// This code Created by S.Kobayashi
// License agreement with GNU LGPL
//-------------------------------------
var blogUrl = "/";
var currentUrl = location.href;

var maxResults = 5;// ページ内サマリー数
var maxLinks=10;// 最大リンク表示数
var isHome=false;// ホームページ
var isLabel=false;// ラベルページ
var isStatic=false;// 静的ページ
var isItem=false;// 記事ページ
var labelPrefix = "search/label/";

var pageNo = 0;

if( currentUrl.indexOf("#PageNo=" ) > -1){
   var strNo = currentUrl.substring( currentUrl.indexOf("#PageNo=" )+8);
   pageNo = parseInt( strNo )-1;

}

if ( currentUrl.indexOf( labelPrefix ) > -1 ){
   isLabel=true;
} else if( currentUrl.indexOf( '.html' ) == -1 ){
   isHome=true;
} else if( currentUrl.indexOf( '/p/' )> -1){
   isStatic=true;
} else {
 isItem=true;
}
var feedUrl = blogUrl + "feeds/posts/summary/"; // フィードサマリー取得クエリー
var blogPager = document.getElementById("blog-pager");//既定のページナビのオブジェクトを検索
if( isLabel || isHome ){ 
   if( isLabel ){
      var st = currentUrl.indexOf( labelPrefix ) + labelPrefix.length;
      var labelName = currentUrl.substring( st );
      if( labelName.indexOf("/") > -1){
         labelName = labelName.substring(0,labelName.indexOf("/"));
      }else if( labelName.indexOf("?") > -1 ){
         labelName = labelName.substring(0,labelName.indexOf("?"));
      }
      feedUrl += "-/" + labelName;
      blogUrl += labelPrefix + labelName + "?";
   }else{
      blogUrl = blogUrl + "search?";
   }
   feedUrl = feedUrl + "?orderby=published";
   blogUrl += "orderby=published&max-results=" + maxResults ;

   feedUrl += "&max-results=";
   var srcStr = (feedUrl  + maxResults + "&alt=json-in-script&callback=viewPageNavigation");
   var scriptStr = "<script src='" + srcStr + "' type='text/javascript'></script>";

   //blogPager.innerHTML = srcStr ;// JSONP動作しない場合リクエスト文字列が残ります&#12290;
   document.write( scriptStr );


}

function viewPageNavigation( result ){

   var feed = result.feed;   
   
   var totalResults = parseInt(feed.openSearch$totalResults.$t, 10);
   var startIndex = parseInt(feed.openSearch$startIndex.$t, 10);
   var itemsPerPage  = parseInt(feed.openSearch$itemsPerPage.$t, 10);
   
   var totalPage = parseInt(totalResults / maxResults );
   if( (totalResults % maxResults ) > 0){
      totalPage += 1;
   }
   var head = "<span class='headPager'>Pages( " + totalPage + " )</span>";
   
   blogPager.innerHTML = head;
   
   if( pageNo > 0 ){
      getPrevNext("Prev");
   }
   var startPage = pageNo;
   var endPage= pageNo + maxLinks;
   var offset = parseInt( maxLinks / 2 );
   if( endPage > totalPage){
     if( endPage - totalPage > offset ) offset = endPage - totalPage;
     for(i=0; i < offset; i++ ){
       if( endPage == totalPage ) break;
       if( startPage > 0) startPage--;
       endPage--;
     }
   }else{
     for(i=0; i < offset; i++ ){
       if( startPage == 0 ) break;
       if( startPage > 0) startPage--;
       endPage--;
     }
   }
   for(i=startPage; i < endPage; i++){
      var pager="";
      var className = "pageLink";
      if( pageNo == i) className = "currentPageLink";

      pager += "<span class='" + className + "'>";
      var targetIndex=0;
      var scriptStr ="";
      var srcStr ="";
      if( className != "currentPageLink" ){
         scriptStr = "<script src='" ;
         srcStr = feedUrl + 1 + "&start-index=";
         targetIndex =  (maxResults*i); //+ startIndex -1;
         if( targetIndex ==0) targetIndex =1; 
         srcStr += (targetIndex + "&alt=json-in-script&callback=redirectTargetPage");
         scriptStr += (srcStr + "' type='text/javascript'></script>");
      }
      pager += ("<a id='targetPageLink" + targetIndex + "'>" +( i+1 ) + "</a></span>");
      blogPager.innerHTML += pager;
      if( className != "currentPageLink" ) document.write( scriptStr );
      
   }
   
   if( pageNo<(totalPage-1)){
      getPrevNext("Next");
   }
   
}

function getPrevNext(vector){
   var startIndex = 0;
   var scriptStr = "<script src='";
   var srcStr = (feedUrl + 1 + "&start-index=");
   var span = "<span class='";

   if( vector.toLowerCase() == "prev" ){
      srcStr += ((pageNo-1) * maxResults + 1)
              + "&alt=json-in-script"
              + "&callback=redirectPrevPage";
      span += "naviLinkPrev'>"
           + "<a href='javascript:void();' id='prevPageLink'>" + vector + "</a></span>";
   }else{
      srcStr += ((pageNo+1) * maxResults)
           + "&alt=json-in-script"
           + "&callback=redirectNextPage";
      span += "naviLinkNext'>"
           + "<a href='javascript:void();' id='nextPageLink'>" + vector + "</a></span>";  
   }
   blogPager.innerHTML += span;
   scriptStr += (srcStr + "' type='text/javascript'></script>");
   document.write(scriptStr);
}

function redirectPrevPage( result ){
   var targetLink = document.getElementById("prevPageLink");
   var date = encodeDate( result.feed.entry[0].published.$t );
   if( pageNo == 1) targetLink.href =  blogUrl + "#PageNo=1";
   else targetLink.href =  blogUrl + "&updated-max=" + date  + "#PageNo=" + pageNo ;
}

function redirectNextPage( result ){
   var targetLink = document.getElementById("nextPageLink");
   var date = encodeDate( result.feed.entry[0].published.$t );
   
   targetLink.href =  blogUrl + "&updated-max=" + date  + "#PageNo=" + (pageNo + 2);
}

function redirectTargetPage( result ){
   var startIndex = parseInt(result.feed.openSearch$startIndex.$t, 10);
   var targetPage = parseInt( startIndex / maxResults );
   var targetLink = document.getElementById("targetPageLink" + startIndex );   
   var feed = result.feed;   
   var date = encodeDate( feed.entry[0].published.$t );
   if( startIndex == 1) targetLink.href =  blogUrl + "#PageNo=" + targetLink.innerHTML;
   else targetLink.href =  blogUrl + "&updated-max=" + date + "#PageNo=" + targetLink.innerHTML;
}

function encodeDate(dateStr){
   dateStr = dateStr.substring(0, 19) + dateStr.substring(23, 29);
   return encodeURIComponent( dateStr );
}
-->
</script>

この記事へのリンク記事を自身のBloggerへ作成する

コメント(1)

hyperhands さんのコメント...: Bloggerテンプレートに埋め込みで動作させていたJavaScriptをカットし、当サイトのガジェットHtml TagEscaperでHtmlエンティティを特殊文字に復元し、テキストファイルに張り付け拡張子を「js」ファイルにして保存。
サーバへ配置し、中身のカットされたスクリプトタグには属性「src」でサーバへ配置したJavascriptファイルのURLを設定した。
要するに中身のコードには一切変更は加えていないのだが、これだけで「Firefox」でもページナビゲーションが正常動作するようになりました。

やれやれ(^^;; 2010年4月8日 23:17

コメントを投稿

Blogger

Javascript

ページング

BloggerをGoogle検索結果風にページングする④

コードの実装方法

対応ブラウザ

全コード

この記事へのリンク記事を自身のBloggerへ作成する

コメント(1)

コメントを投稿

関連記事

Category Menu Ver1.03

考えるコンピュータをつくろう

Html TagEscaper Ver1.01

SiteRoll Links