Inside ASCADE は Drupla 5.1 で構築されておりますが、Drupal 4.X 向けにリリースされている timeline moduleを Drupal 5.1 に適応した際のメモ（というか差分）です。
ちなみに、timeline は MIT の SIMILE(Semantic Interoperability of Metadata and Information in unLike Environments) Project の 1プロダクトで、timeline module は それを drupal のコンテンツ表示に利用したモジュールです。
timeline at SIMILE
timeline module at drupal.org
timeline/ timeline/tests/ timeline/tests/feed.test timeline/CHANGELOG.txt timeline/INSTALL.txt timeline/README.txt timeline/timeline.css timeline/timeline.info timeline/timeline.install timeline/timeline.js timeline/timeline.module timeline/timeline.theme.inc timeline/timeline.views.inc timeline/LICENSE.txt
timeline/timeline.install timeline/timeline.js timeline/timeline.theme.inc
まずは timeline.install ファイルです。Drupal 5.x 系から module_exist は module_existsに変更になりました。
if (!module_exist('views'))
if (!module_exists('views'))
続いて timeline.js ファイルです。Timeline.create 関数に渡す第一パラメータを document.getElementById(id) に変更します。
var widget = Timeline.create($(id),
bandInfos,
orientation);
var widget = Timeline.create(document.getElementById(id),
bandInfos,
orientation);
次に timeline.theme.inc ファイルです。theme_add_style 関数は Drupal 5.X では drupal_add_css ですのでこれを変更します。
theme_add_style(drupal_get_path('module', 'timeline') . '/timeline.css');
drupal_add_css(drupal_get_path('module', 'timeline') . '/timeline.css');
timeline widget を生成する箇所のスクリプトを修正します。参考にしたのはこちらのページ。というわけでここは after のみ掲載します。
$output = "
<div id=\"$timeline->id\" class=\"timeline\" style=\"$style\">
</div>
<script type=\"text/javascript\">
var createWidgetFunction = function() {
return createTimelineWidget(\"$timeline->id\",
Timeline.$timeline->orientation,
\"$timeline->start_date\",
'+9',
\"$url\",
\"json\");
}
setTimeout(createWidgetFunction, 1);
</script>
";
以上で、Drupal 4.X 用 timeline モジュールが Drupal 5.1 で動作するようになります。
patch file を作成しましたので、ファイルをダウンロードし、以下のように適用してください。download
patch < timeline-4.7.x-1.0.patch
Drupal 5.1 への対応とは別に、Inside ASCADE でのユーザビリティ向上のため調整した箇所を例示します。
timeline/timeline.js timeline/timeline.theme.inc timeline/timeline.module
Inside ASCADE のコンテンツ更新頻度は週１本程度ですので、timeline 導入によりコンテンツの時系列による見栄え、操作性を考慮し、intervalUnit 及び intervalPixels を表示具合を確認しながら設定しました。
var bandInfos = [
Timeline.createBandInfo({
width: '75%',
intervalUnit: Timeline.DateTime.DAY,
intervalPixels: 200,
eventSource: eventSource,
date: initialDate,
timeZone: timeZone,
theme: theme
}),
Timeline.createBandInfo({
width: '25%',
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 200,
eventSource: eventSource,
date: initialDate,
timeZone: timeZone,
theme: theme,
showEventText: false,
trackHeight: 0.5,
trackGap: 0.2
})
];
var bandInfos = [
Timeline.createBandInfo({
width: '75%',
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 220,
eventSource: eventSource,
date: initialDate,
timeZone: timeZone,
theme: theme
}),
Timeline.createBandInfo({
width: '25%',
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 500,
eventSource: eventSource,
date: initialDate,
timeZone: timeZone,
theme: theme,
showEventText: false,
trackHeight: 0.5,
trackGap: 0.2
})
];
表示時に現在時刻が中心になるよう timeline オブジェクトに start_date を追加し、現在時刻を設定します。上記のcreateTimelineWidget へ渡す基準時刻も initial_date から start_date に変更になっています。
if (empty($timeline->initial_date)) {
$timeline->initial_date =
date('D M d Y G:i:s') . ' GMT' . date('O');
}
if (empty($timeline->start_date)) {
$timeline->start_date =
date('D M d Y G:i:s') . ' GMT' . date('O');
}
表示する高さもデフォルトだと少し高すぎるので調整しました。
define('TIMELINE_HEIGHT',
variable_get('timeline_default_height', '400px'));
define('TIMELINE_HEIGHT',
variable_get('timeline_default_height', '250px'));