COREBlog のカレンダーを Ajax 化 2

COREBlog のカレンダーを Ajax 化に続いて。
前のではカレンダー部分の月を表示している箇所の左右に矢印をもうけ、カレンダー部分のみを読み替えるようにしました。今回のでは、カレンダー部分のリンクになっている日付の部分にマウスカーソルを持っていくと、カレンダーの下部にその日のエントリで書いたタイトルが表示され、それをクリックするとそのエントリ自体に飛ぶようにしてみました。

若干問題点はあって、ある日（例えば1月9日とか）にカーソルを持っていくと、カレンダー下部にエントリへのリンク（例えば「- 車山」）が現れます。で、それなら読んでみようかとカーソルを移動する際に、その下にある日（例えば1月16日）の上を通ってしまい、カレンダー下部には異なるエントリへのリンク（例えば「- のびのび手袋」）が表示されてしまうというわけです。まあ、下部に表れるタイトルを見て、読んでみても良いと思ってもらえたら、その時点で日付をクリックしていただければ良い話ではあるのですが。

というわけで、やったこと。

- modules/calendar を編集
各日を表示するための

<a href="<dtml-var blogurl missing="">

/daylist_html?year=<dtml-var calendar_year>

&amp;month=<dtml-var calendar_month>

&amp;day=<dtml-var day>">

の箇所を

<a href="<dtml-var blogurl missing="">

/daylist_html?year=<dtml-var calendar_year>

&amp;month=<dtml-var calendar_month>

&amp;day=<dtml-var day>">

 onmouseover="javascript:show_topics(<dtml-var calendar_year>,

<dtml-var calendar_month>, <dtml-var day>);">

とし、マウスカーソルのonoverをハンドリングして　show_topics 関数を実行するように。

また、タイトルを表示したいところに

<div id="topics"></div>

を追加。

- 前回作ったcalendar.jsを編集

function show_topics(y, m, d) {

 var topics = '';

 var path = '<dtml-var blogurl>/daylist_xml?year='+y+'&amp;month='+m+'&amp;day='+d;

 var xmlhttp = createHttpRequest();

 xmlhttp.open("GET", path, true);



 xmlhttp.onreadystatechange=function() {

  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

   xmldocs = xmlhttp.responseXML;

   var entries = xmlhttp.responseXML.getElementsByTagName('entry');

   for (var i=0; i<entries.length; i++) {

    var e = entries[i];

    topics += '- <a href="'+e.getAttribute('link')+'">'+e.getAttribute("title")+'
';

   }

   document.getElementById("topics").innerHTML = topics;

  }

 }

 xmlhttp.send(null)

}

という関数を追加。

- DTMLメソッド daylist_xml を追加
内容は

<dtml-call "RESPONSE.setHeader('content-type', 'text/xml')">

<?xml version="1.0" encoding="utf-8" ?>

<items>

<dtml-in "day_entry_items(year=year,month=month,day=day)">

<dtml-var entry_body_xml>

</dtml-in>

</items>

というもの。場所は daylist_html があるところ。

- DTMLメソッド entry_body_xml を追加。
内容は

 <entry title="<dtml-var entry_title>" link="<dtml-var blogurl>/<dtml-var id>" />

というもの。場所は daylist_xml と同じところ。


実際の作業手順は下から順の方が良いかな。また、 modules/calendar の編集のとこはレイアウトが崩れるので適当に改行を入れたので、そのままだとダメなところもあるかも。onmouseover のあたりとか？

Name:

Email Address:

URL:

Title:

Comments:

Remember your info. on cookie?