Added handling event of "afterRender".

ka215 · Sep 20, 2017 · 76e72cf · 76e72cf
1 parent 95717f8
commit 76e72cf
Show file tree

Hide file tree

Showing 15 changed files with 253 additions and 54 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -5,6 +5,7 @@
     "jquery": true
   },
   "rules": {
-    "no-unused-vars": ["warn", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }]
+    "no-unused-vars": ["warn", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
+    "no-console" : 1
   }
 }
diff --git a/README.md b/README.md
@@ -23,7 +23,7 @@ jQuery.Timeline supports the following browsers:
 * **Safari** : Recommended latest version as active support
 * **Opera** : Recommended latest version as active support
 * **Edge** : Recommended latest version as active support
-* IE : Not checked the working yet
+* **IE** : Recommended latest version as active support
 
 ## Dependencies
 
@@ -129,6 +129,20 @@ $("#myTimeline").timeline({
 | updateEvent | Updates the contents of the specified event. It is possible to update multiple events simultaneously. | Array, Callback Function (optional) | `$.timeline('updateEvent', [ {eventId:3, start:'2017-5-29 13:00',end:'2017-5-29 15:30', row:1, label:'Updated Event', bgColor:'#aaaab0', color:'#d70035'} ]);` |
 | openEvent | Called back when an event is clicked. | (object) | Unlike other methods, the processing specified by the event parameter callback ([to be described later](#Event Parameters)) is invoked. |
 
+## Handling Events (since v1.0.5)
+
+Since version 1.0.5, the custom events are triggered according to the state of timeline objects. This allows you to bind your own processing to a custom event.
+
+```javascript
+$("#myTimeline").on("afterRender.timeline", function( e, options ) {
+  // Do something
+});
+```
+
+| Event | Description | Arguments |
+|--------|:------------|-----------|
+| afterRender.timeline | Fired after rendering completely a timeline object. | options (object) |
+
 ## Event Parameters
 
 Events placed on the timeline have parameters for display. You can specify this event parameter either by directly marking up in HTML or by using a method.

diff --git a/dist/timeline.min.css b/dist/timeline.min.css
diff --git a/dist/timeline.min.js b/dist/timeline.min.js
diff --git a/docs/css/timeline.min.css b/docs/css/timeline.min.css
diff --git a/docs/index.html b/docs/index.html
@@ -11,7 +11,7 @@
   <!-- 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.4" rel="stylesheet">
+  <link href="./css/timeline.min.css?ver=1.0.5" rel="stylesheet">
   <!-- HTML5 ShimとRespond.js IE8のHTML5要素とメディアクエリのサポート -->
   <!-- 警告：Respond.jsは、file:// 経由でページを表示しても機能しません -->
   <!--[if lt IE 9]>
@@ -118,7 +118,7 @@ <h5 class="modal-title"></h5>
 <!-- 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.4"></script>
+<script src="./js/timeline.min.js?ver=1.0.5"></script>
 <!-- local scripts -->
 <script>
 $(function () {
@@ -128,14 +128,16 @@ <h5 class="modal-title"></h5>
     rangeAlign: 'center'
   });
 
-  // usage bootstrap's popover
-  $('.timeline-node').each(function(){
-    if ( $(this).data('toggle') === 'popover' ) {
-      $(this).attr( 'title', $(this).text() );
-      $(this).popover({
-        trigger: 'hover'
-      });
-    }
+  $("#myTimeline").on('afterRender.timeline', function(){
+    // usage bootstrap's popover
+    $('.timeline-node').each(function(){
+      if ( $(this).data('toggle') === 'popover' ) {
+        $(this).attr( 'title', $(this).text() );
+        $(this).popover({
+          trigger: 'hover'
+        });
+      }
+    });
   });
 
   /* 

diff --git a/docs/index2.html b/docs/index2.html
@@ -11,7 +11,7 @@
   <!-- 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.4" rel="stylesheet">
+  <link href="./css/timeline.min.css?ver=1.0.5" rel="stylesheet">
   <!-- HTML5 ShimとRespond.js IE8のHTML5要素とメディアクエリのサポート -->
   <!-- 警告：Respond.jsは、file:// 経由でページを表示しても機能しません -->
   <!--[if lt IE 9]>
@@ -49,7 +49,7 @@
           <div data-timeline-node="{ eventId:5, start:'2017-7-14 17:30',row:2,margin:12,bdColor:'#942343',relation:{before:4} }">Event Relation 5</div>
           <div data-timeline-node="{ eventId:6, start:'2017-9-26 18:30',row:2,margin:12,bdColor:'#942343',relation:{before:5,after:-1} }">Event Relation 6</div>
           <label>Row 3</label>
-          <div data-timeline-node="{ eventId:7, start:'2016-9-26 7:00',row:3,image:'./imgs/sample-2.jpg' }">Event Relation 7</div>
+          <div data-timeline-node="{ eventId:7, start:'2016-9-26 7:00',row:3,image:'./imgs/sample-2.jpg',extend:{toggle:'popover',placement:'top',content:'It is also possible to bind external custom events.'} }">Event Relation 7</div>
           <div data-timeline-node="{ eventId:8, start:'2016-11-9 8:30',row:3,margin:12,relation:{before:7} }">Event Relation 8</div>
           <div data-timeline-node="{ eventId:9, start:'2017-1-25 11:15',row:3,margin:12,relation:{before:8} }">Event Relation 9</div>
           <div data-timeline-node="{ eventId:10, start:'2017-4-7 14:10',row:3,margin:12,relation:{before:9,after:5} }">Event Relation 10</div>
@@ -126,7 +126,7 @@ <h5 class="modal-title"></h5>
 <!-- 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.4"></script>
+<script src="./js/timeline.min.js?ver=1.0.5"></script>
 <!-- local scripts -->
 <script>
 $(function () {
@@ -139,14 +139,16 @@ <h5 class="modal-title"></h5>
     rangeAlign: 'center'
   });
 
-  // usage bootstrap's popover
-  $('.timeline-node').each(function(){
-    if ( $(this).data('toggle') === 'popover' ) {
-      $(this).attr( 'title', $(this).text() );
-      $(this).popover({
-        trigger: 'hover'
-      });
-    }
+  $("#myTimeline").on("afterRender.timeline", function(){
+    // usage bootstrap's popover
+    $('.timeline-node').each(function(){
+      if ( $(this).data('toggle') === 'popover' ) {
+        $(this).attr( 'title', $(this).text() );
+        $(this).popover({
+          trigger: 'hover'
+        });
+      }
+    });
   });
 
 });

diff --git a/docs/index3.html b/docs/index3.html
@@ -11,7 +11,7 @@
   <!-- 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.4" rel="stylesheet">
+  <link href="./css/timeline.min.css?ver=1.0.5" rel="stylesheet">
   <!-- HTML5 ShimとRespond.js IE8のHTML5要素とメディアクエリのサポート -->
   <!-- 警告：Respond.jsは、file:// 経由でページを表示しても機能しません -->
   <!--[if lt IE 9]>
@@ -46,7 +46,7 @@
           <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-29 16:03',end:'2017-5-29 19:05',row:3,bgColor:'#a1d8e6',color:'#008db7',extend:{toggle:'popover',placement:'top',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>
@@ -118,7 +118,7 @@ <h5 class="modal-title"></h5>
 <!-- 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.4"></script>
+<script src="./js/timeline.min.js?ver=1.0.5"></script>
 <!-- script src="../src/timeline.js?ver=1.0.4"></script -->
 <!-- local scripts -->
 <script>
@@ -131,14 +131,16 @@ <h5 class="modal-title"></h5>
     httpLnaguage: true
   });
 
-  // usage bootstrap's popover
-  $('.timeline-node').each(function(){
-    if ( $(this).data('toggle') === 'popover' ) {
-      $(this).attr( 'title', $(this).text() );
-      $(this).popover({
-        trigger: 'hover'
-      });
-    }
+  $("#myTimeline").on('afterRender.timeline', function(){
+    // usage bootstrap's popover
+    $('.timeline-node').each(function(){
+      if ( $(this).data('toggle') === 'popover' ) {
+        $(this).attr( 'title', $(this).text() );
+        $(this).popover({
+          trigger: 'hover'
+        });
+      }
+    });
   });
 
 });

diff --git a/docs/js/timeline.min.js b/docs/js/timeline.min.js
diff --git a/docs/langs/de-de.json b/docs/langs/de-de.json
@@ -0,0 +1,40 @@
+{
+  "month": {
+    "Jan.": "Januar",
+    "Feb.": "Februar",
+    "März": "März",
+    "Apr.": "April",
+    "Mai": "Mai",
+    "Juni": "Juni",
+    "Juli": "Juli",
+    "Aug.": "August",
+    "Sept.": "September",
+    "Okt.": "Oktober",
+    "Nov.": "November",
+    "Dec.": "December"
+  },
+  "day": {
+    "Mo": "Montag",
+    "Di": "Dienstag",
+    "Mi": "Mittwoch",
+    "Do": "Donnerstag",
+    "Fr": "Freitag",
+    "Sa": "Samstag",
+    "So": "Sonntag"
+  },
+  "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": ""
+  }
+}
diff --git a/docs/langs/en-US.json b/docs/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": ""
+  }
+}
diff --git a/docs/langs/fr-FR.json b/docs/langs/fr-FR.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",
+    "Je": "Jeudi",
+    "Ve": "Vendredi",
+    "Sa": "Samedi",
+    "Di": "Dimanche"
+  },
+  "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": ""
+  }
+}
diff --git a/docs/langs/ja.json b/docs/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": ""
+  }
+}