Skip to content

Commit

Permalink
Merge pull request #3 from ka215/multilingualization
Browse files Browse the repository at this point in the history
Added feature that multilingualization support
  • Loading branch information
ka215 committed Jun 10, 2017
2 parents ad81207 + 39ed672 commit c18d5ec
Show file tree
Hide file tree
Showing 21 changed files with 718 additions and 65 deletions.
54 changes: 53 additions & 1 deletion README.md
Expand Up @@ -13,6 +13,7 @@ For various examples, please see here:

* [Bar Type Timeline](https://ka215.github.io/jquery.timeline/index.html)
* [Point Type Timeline](https://ka215.github.io/jquery.timeline/index2.html)
* [Multi Languages](https://ka215.github.io/jquery.timeline/index3.html)

## Browser Support
jQuery.Timeline supports the following browsers:
Expand Down Expand Up @@ -70,6 +71,7 @@ You can pass options on plugin initialization. For example:
$("#myTimeline").timeline({
startDatetime: '2017-05-25',
rows: 6,
datetimeFormat: { meta: 'g:i A, D F j, Y' },
rangeAlign: 'center'
});
```
Expand All @@ -81,7 +83,7 @@ $("#myTimeline").timeline({
| startDatetime | String | currently | Default set datetime as viewing timetable; format is `"^[-+]d{4}(/\|-)d{2}(/\|-)d{2}\sd{2}:d{2}:d{2}$"` or "**currently**" |
| datetimePrefix | String | | The prefix of the date and time notation displayed in the headline |
| showHeadline | Boolean | true | Whether to display headline |
| datetimeFormat | Object | `{full:"j M Y", year:"Y", month:"M", day:"D, j M", years:"Y", months:"F", days:"j"}` | Available formats are here: [fn.date.js](https://gist.github.com/ka215/20cbab58e4f7d4e5508a07cff8d64b00) |
| datetimeFormat | Object | `{full:"j M Y", year:"Y", month:"M", day:"D, j M", years:"Y", months:"F", days:"j", meta:"Y/m/d H:i", metato:""}` | Available formats are here: [fn.date.js](https://gist.github.com/ka215/20cbab58e4f7d4e5508a07cff8d64b00); Since version 1.0.3, it's able to define the date format displayed in the meta field of the event detail. In addition, it can be specified as a language JSON file for multilingual support. |
| minuteInterval | Integer | 30 | Recommend more than 5 minutes; only if top scale is "days" (Deprecated) |
| zerofillYear | Boolean | false | It's outputted at the "0099" if true, the "99" if false |
| range | Integer | 3 | The default view range of the timetable starting from the "startDatetime" |
Expand All @@ -94,6 +96,7 @@ $("#myTimeline").timeline({
| naviIcon | Object | `{left:"jqtl-circle-left", right:"jqtl-circle-right"}` | Define class name |
| showPointer | Boolean | true | Whether to display needle pointer on the current datetime |
| i18n | Object | (omission) | Define translated text for internationalization of datetime format converted by datetime format. For details, refer to the section on [Internationalization](#Internationalization). |
| langsDir | String | ./langs/ | Since ver.1.0.3, you can specify the path that stores the language files for multilingualization. Please specify by relative path or absolute URL from HTML where js script is loaded. |


## Methods
Expand Down Expand Up @@ -231,6 +234,55 @@ $("#myTimeline").timeline({

> **Note**: The above is an example of defining translation text in German.
### Multilingualization

Since version 1.0.3, multilingual support enhanced. By placing any required language files (as the JSON format) on the "langs" folder, the translated text defined in the JSON file is applied according the language setting of the browser.

```json
{
"month": {
"Jan": "January",
"Feb": "February",
"Mar": "March",
"Apr": "April",
"May": "May",
"Jun": "June",
"Jul": "July",
"Aug": "August",
"Sep": "September",
"Oct": "October",
"Nov": "November",
"Dec": "December"
},
"day": {
"Sun": "Sunday",
"Mon": "Monday",
"Tue": "Tuesday",
"Wed": "Wednesday",
"Thu": "Thurseday",
"Fri": "Friday",
"Sat": "Saturday"
},
"ma": [
"am",
"pm"
],
"format": {
"full": "j M Y",
"year": "Y",
"month": "M Y",
"day": "D, j M",
"years": "Y",
"months": "F",
"days": "j",
"meta": "g:i A, D F j, Y",
"metato": ""
}
}
```

> **Note**: The above is an "en-US.json" that defined translation text in English.
## TIPS

Some practical TIPS are as follows:
Expand Down
40 changes: 40 additions & 0 deletions dist/langs/de-de.json
@@ -0,0 +1,40 @@
{
"month": {
"Jan.": "Janvier",
"Fév.": "Février",
"Mars": "Mars",
"Avr.": "Avril",
"Mai": "Mai",
"Juin": "Juin",
"Juillet": "Juillet",
"Août.": "Août",
"Sept.": "Septembre",
"Oct.": "Octobre",
"Nov.": "Novembre",
"Déc.": "Décembre"
},
"day": {
"Lu": "Lundi",
"Ma": "Mardi",
"Me": "Mercredi",
"Jeudi": "Jeudi",
"Ve": "Vendredi",
"Sa": "Samedi",
"Di": "Dimanche"
},
"ma": [
"vorm.",
"nachm."
],
"format": {
"full": "j M Y",
"year": "Y",
"month": "M Y",
"day": "D, j M",
"years": "Y",
"months": "F",
"days": "j",
"meta": "g:i A, D F j, Y",
"metato": ""
}
}
40 changes: 40 additions & 0 deletions dist/langs/en-US.json
@@ -0,0 +1,40 @@
{
"month": {
"Jan": "January",
"Feb": "February",
"Mar": "March",
"Apr": "April",
"May": "May",
"Jun": "June",
"Jul": "July",
"Aug": "August",
"Sep": "September",
"Oct": "October",
"Nov": "November",
"Dec": "December"
},
"day": {
"Sun": "Sunday",
"Mon": "Monday",
"Tue": "Tuesday",
"Wed": "Wednesday",
"Thu": "Thurseday",
"Fri": "Friday",
"Sat": "Saturday"
},
"ma": [
"am",
"pm"
],
"format": {
"full": "j M Y",
"year": "Y",
"month": "M Y",
"day": "D, j M",
"years": "Y",
"months": "F",
"days": "j",
"meta": "g:i A, D F j, Y",
"metato": ""
}
}
40 changes: 40 additions & 0 deletions dist/langs/ja.json
@@ -0,0 +1,40 @@
{
"month": {
"一月": "睦月",
"二月": "如月",
"三月": "弥生",
"四月": "卯月",
"五月": "皐月",
"六月": "水無月",
"七月": "文月",
"八月": "葉月",
"九月": "長月",
"十月": "神無月",
"十一月": "霜月",
"十二月": "師走"
},
"day": {
"日": "日曜",
"月": "月曜",
"火": "火曜",
"水": "水曜",
"木": "木曜",
"金": "金曜",
"土": "土曜"
},
"ma": [
"午前",
"午後"
],
"format": {
"full": "Y年m月j日",
"year": "Y年",
"month": "Y年M",
"day": "m月j日(D)",
"years": "Y年",
"months": "F",
"days": "j(D)",
"meta": "Y年m月j日 H:i",
"metato": ""
}
}
4 changes: 2 additions & 2 deletions dist/timeline.min.css

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/timeline.min.js

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions docs/css/timeline.min.css

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions docs/index.html
Expand Up @@ -28,6 +28,7 @@
<li class="breadcrumb-item"><a href="https://github.com/ka215/jquery.timeline"><i class="fa fa-plug"></i> jQuery Timeline</a></li>
<li class="breadcrumb-item active"><a href="./index.html"><i class="fa fa-check-square-o"></i> Bar type</a></li>
<li class="breadcrumb-item"><a href="./index2.html">Point type</a></li>
<li class="breadcrumb-item"><a href="./index3.html">Multi Languages</a></li>
</ol>

</nav>
Expand Down
1 change: 1 addition & 0 deletions docs/index2.html
Expand Up @@ -28,6 +28,7 @@
<li class="breadcrumb-item"><a href="https://github.com/ka215/jquery.timeline"><i class="fa fa-plug"></i> jQuery Timeline</a></li>
<li class="breadcrumb-item active"><a href="./index.html">Bar type</a></li>
<li class="breadcrumb-item"><a href="./index2.html"><i class="fa fa-check-square-o"></i> Point type</a></li>
<li class="breadcrumb-item"><a href="./index3.html">Multi Languages</a></li>
</ol>

</nav>
Expand Down
150 changes: 150 additions & 0 deletions docs/index3.html
@@ -0,0 +1,150 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Example jQuery Timeline</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 4.0.0-alpha.6 -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- Font Awesome latest -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery Timeline -->
<link href="./css/timeline.min.css?ver=1.0.2" rel="stylesheet">
<!-- HTML5 ShimとRespond.js IE8のHTML5要素とメディアクエリのサポート -->
<!-- 警告:Respond.jsは、file:// 経由でページを表示しても機能しません -->
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">

<nav class="content-header">

<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="https://github.com/ka215/jquery.timeline"><i class="fa fa-plug"></i> jQuery Timeline</a></li>
<li class="breadcrumb-item"><a href="./index.html">Bar type</a></li>
<li class="breadcrumb-item"><a href="./index2.html">Point type</a></li>
<li class="breadcrumb-item active"><a href="./index3.html"><i class="fa fa-check-square-o"></i> Multi Languages</a></li>
</ol>

</nav>
<!-- /.content-header -->

<section class="row">

<div class="content-main col-lg-12">

<div id="myTimeline">
<ul class="timeline-events">
<li>Not allowed event definition</li>
<li data-timeline-node="{ start:'2017-5-29 8:00',end:'2017-5-29 10:30',content:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus tortor nec bibendum malesuada. Etiam sed libero cursus, placerat est at, fermentum quam. In sed fringilla mauris. Fusce auctor turpis ac imperdiet porttitor. Duis vel pharetra magna, ut mollis libero. Etiam cursus in leo et viverra. Praesent egestas dui a magna eleifend, id elementum felis maximus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum sed elit gravida, euismod nunc id, ullamcorper tellus. Morbi elementum urna faucibus tempor lacinia. Quisque pharetra purus at risus tempor hendrerit. Nam dui justo, molestie quis tincidunt sit amet, eleifend porttitor mauris. Maecenas sit amet ex vitae mi finibus pharetra. Donec vulputate leo eu vestibulum gravida. Ut in facilisis dolor, vitae iaculis dui.' }">Event Label</li>
<li data-timeline-node="{ start:'2017-5-29 10:30',end:'2017-5-29 12:15',bgColor:'#a3d6cc',content:'<p>In this way, you can include <em>HTML tags</em> in the event body.<br><i class=\'fa fa-ellipsis-v\'></i><br><i class=\'fa fa-ellipsis-v\'></i></p>' }">HTML tags is included in the event content</li>
<li data-timeline-node="{ start:'2017-5-29 13:00',content:'For the bar type on the timeline, event blocks are displayed in minimum units unless you specify an event end time.' }">Event with undefined of end date</li>
<li data-timeline-node="{ end:'2017-5-29 15:00',bgColor:'#e6eb94',content:'In this case, no displayed.' }">Event with undefined of start date</li>
<li data-timeline-node="{ start:'2017-5-29 12:45',end:'2017-5-29 16:00',row:2,bgColor:'#89c997',color:'#ffffff',callback:'$(\'#myModal\').modal()',content:'Show modal window via bootstrap' }">Event having callback</li>
<li data-timeline-node="{ start:'2017-5-29 16:03',end:'2017-5-29 19:05',row:3,bgColor:'#a1d8e6',color:'#008db7',extend:{toggle:'popover',placement:'bottom',content:'It is also possible to bind external custom events.'} }">Show popover via bootstrap</li>
<li data-timeline-node="{ start:'2017-5-28 23:00',end:'2017-5-29 5:15',row:3,extend:{'post_id':13,'permalink':'https://www.google.com/'} }">Event having extended params</li>
<li data-timeline-node="{ start:'2017-5-29 5:40',end:'2017-5-29 8:20',row:3,bgColor:'#ef857d',color:'#fff',content:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus tortor nec bibendum malesuada. Etiam sed libero cursus, placerat est at, fermentum quam. In sed fringilla mauris. Fusce auctor turpis ac imperdiet porttitor.' }">Lorem Ipsum</li>
<li data-timeline-node="{ start:'2017-5-29 10:00',end:'2017-5-29 19:00',row:4,bdColor:'#942343' }">Event having image for point type</li>
<li data-timeline-node="{ start:'2017-4-1 20:00',end:'2017-5-29 8:30',row:5 }">Long event from the past over range</li>
<li data-timeline-node="{ start:'2017-5-29 19:00',end:'2017-6-14 1:00',row:5,bgColor:'#fbdac8' }">Long event until the future over range</li>
</ul>
</div>

</div>
<!-- /.content-main -->

<div class="col-lg-6 col-md-12" hidden>

<div class="card mb-3">
<div class"card-block">
<h5><i class="fa fa-cog"></i> Timeline Configuration</h5>
<div class="card-text">
<!-- configuration content -->
</div>
</div>
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-lg-12 col-md-12">

<div class="card mb-3">
<div class="card-block timeline-event-view">
<p class="h1">Timeline Event Detail</p>
<p class="lead">Please click on any event on the above timeline.</p>
</div>
</div>
<!-- /.card -->
</div>
<!-- /.col -->

</section>
<!-- /.row -->

</div>
<!-- /.container-fluid -->

<div class="modal fade" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="timeline-event-view"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- /.modal -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery (latest 3.2.1) -->
<script src="//code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- tether 1.4.0 (for using bootstrap's tooltip component) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap 4.0.0-alpha.6 -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- jQuery Timeline -->
<!--script src="./js/timeline.min.js?ver=1.0.2"></script-->
<script src="../src/timeline.js?ver=1.0.3"></script>
<!-- local scripts -->
<script>
$(function () {

$("#myTimeline").timeline({
startDatetime: '2017-05-28',
rangeAlign: 'center',
datetimeFormat: {
meta: "g:i a, D F j, Y",
metato: "g:i a, D F j"
},
langsDir: "./js/langs/"
});

// usage bootstrap's popover
$('.timeline-node').each(function(){
if ( $(this).data('toggle') === 'popover' ) {
$(this).attr( 'title', $(this).text() );
$(this).popover({
trigger: 'hover'
});
}
});

});
</script>
</body>
</html>

0 comments on commit c18d5ec

Please sign in to comment.