1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
if( typeof( Application ) === 'undefined' || !Application )
{
var Application = {};
}
Application.chronology = function() {
this._init.apply( this, arguments );
};
// アプリ全体を1つのオブジェクトして扱う。
Application.chronology.prototype = {
_workId : null,
_fileName : null,
_uriBase : 'http://linkdata.org/',
_prpDescription: 'http://purl.org/dc/elements/1.1/description',
_prpBase : null,
_longAgoFlg : null,
_calEvents : [],
_realEvents : {},
_intervalId : null,
_colorPalette : [
'midnightblue', 'seagreen', 'sandybrown', 'indianred', 'indianred', 'dimgray', 'royalblue', 'darkgreen', 'chocolate', 'darkred', 'crimson'
],
// アプリ起動時にのみ起動する
_init : function() {
this._showTblSelecter();
this._update();
},
// 年表のセレクタの初期処理
_showTblSelecter : function() {
var self = this;
var selected = 'selected';
$.each( LinkData.getWorks(), function( i, workId ) {
$.each( LinkData.getFiles( workId ), function( j, fileName ) {
var sbjBase = self._uriBase + 'resource/' + workId + '#';
var prpBase = self._uriBase + 'property/' + workId + '#';
var sbjHead = sbjBase + encodeURIComponent( '[header]' );
var prpName = prpBase + encodeURIComponent( 'event_name' );
var titleArr = LinkData.getObjects( workId, fileName, sbjHead, prpName );
if( titleArr.length === 0 )
//ヘッダー行が見つからない場合は、年表ファイルではないとみなす。
return true;
var title = titleArr[ 0 ];
var tableKey = workId + '|' + fileName;
$( '#tableSelect' ).append( '<option value="' + tableKey + '" ' + selected + ' >' + title + '</option>' );
if( selected === 'selected' )
self._workId = workId;
self._fileName = fileName;
selected = '';
} );
$( '#tableSelect' ).change( function() {
var selected =$( 'option:selected', $( this ) ).val();
var splitedKey = selected.split( '|' );
self._workId = splitedKey[ 0 ];
self._fileName = splitedKey[ 1 ];
self._update();
});
// 新しい年表が選択される度に呼び出される処理
_update : function() {
/* まずはタイマー停止 */
if( this.intervalId !== undefined )
clearInterval( this.intervalId );
// URIの生成
var prpBase = this._uriBase + 'property/' + this._workId + '#';
this._prpBase = prpBase;
var sbjBase = this._uriBase + 'resource/' + this._workId + '#';
this._sbjHead =sbjBase + encodeURIComponent( '[header]' );
this._prpStart = prpBase + encodeURIComponent( 'start' );
this._prpEnd = prpBase + encodeURIComponent( 'end' );
this._prpName = prpBase + encodeURIComponent( 'event_name' );
var now = new Date();
// 今年の始まりと終わりの時刻を取得
this._calHead = new Date( now.getFullYear(), 0,1);
this._calTail = new Date( now.getFullYear() + 1, 0,1 );
// 今年の日数を取得
this._yearDay = ( this._calTail - this._calHead ) / 1000/60/60/24;
// LinkData.org上の年表を取得し、配列に格納
this._createEventTbl();
// 現在を示すイベントを追加
select {
font-size : x-large;
option {
#allArea {
margin-left: 2%;
.hidden {
display : none;
/* ダイアログのxを消す */
.ui-dialog-titlebar-close {
visibility : hidden;
.clock {
font-size : large;
color : seagreen;
font-weight : bolder;
.center {
text-align:center;
font-size : xx-large;
width:100%;
.infoBlock {
background: lightcyan;
.calendarBlock {
background: aliceblue;
/* fullcalendar関連 */
#calendar {
background: beige;
width: 80%;
.fc-event-inner {
cursor: pointer;
.fc-event-title {
.fc-day-number {
.fc-widget-header
.fc-widget-content {
<div>↑本アプリのコンセプト等は上記ReadMeタブをご参照ください。フルスクリーンでの実行を推奨します。</div>
<hr>
<div id="allArea" class="hidden">
<div id="selectArea">
<p> 年表を選択してください。 </p>
<select id="tableSelect"></select>
</div>
<div id="infoArea" class="infoBlock">
<div class="center" >
<div>1年間に圧縮!</div>
<image src="http://app.linkdata.org/asset/4391eb9f.png" />
<div class="calendarBlock">
<h1>歴史圧縮カレンダー</h1>
<div id="clockArea" >
<p id="eventList">
<h3>イベント一覧</h3>
<div>下記リストで選択するとカレンダー上のそのイベントにジャンプします。</div>
<select id="eventSelect" size="4"></select>
</p>
<h3>カレンダー</h3>
イベントや日付をクリックすると詳しい情報が表示されます。
<p id="calendar">
<div id="eventDialog" class="hidden" >
<h3>カレンダー上の時間</h3>
<div id="calDateArea"></div>
<h3>年表上の時間</h3>
<div id="realDateArea"></div>
<h3>解説</h3>
<div id="eventDescriptionArea"></div>
<div id="dialog" class="hidden" >
Click the Browse button or drag and drop to choose files to upload
The Maximum upload size is 1MB.(bmp,gif,jpeg,jpg,png)
*Required field
Add name for another language
You can upload jpg, gif, png file formats
Add description for another language
Fork original application has been updated. >>see
Original application has been updated. >>see
Playing...
Please enter a valid URL