Browse Source

Added possibility to change (or hide) the title of a CustomTime element.

webworkersNetwork
Arno Barzan 9 years ago
parent
commit
3f03ceb9dc
3 changed files with 45 additions and 5 deletions
  1. +9
    -0
      docs/timeline/index.html
  2. +18
    -0
      lib/timeline/Core.js
  3. +18
    -5
      lib/timeline/component/CustomTime.js

+ 9
- 0
docs/timeline/index.html View File

@ -1196,6 +1196,15 @@ document.getElementById('myTimeline').onclick = function (event) {
</td> </td>
</tr> </tr>
<tr>
<td>setCustomTimeTitle(title [, id])</td>
<td>none</td>
<td>Adjust the title attribute of a custom time bar.
Parameter <code>title</code> is the string to be set as title. Use empty string to hide the title completely.
Parameter <code>id</code> is the id of the custom time bar, and is <code>undefined</code> by default.
</td>
</tr>
<tr> <tr>
<td>setData({<br>&nbsp;&nbsp;groups: groups,<br>&nbsp;&nbsp;items: items<br>})</td> <td>setData({<br>&nbsp;&nbsp;groups: groups,<br>&nbsp;&nbsp;items: items<br>})</td>
<td>none</td> <td>none</td>

+ 18
- 0
lib/timeline/Core.js View File

@ -409,6 +409,24 @@ Core.prototype.getCustomTime = function(id) {
return customTimes[0].getCustomTime(); return customTimes[0].getCustomTime();
}; };
/**
* Set a custom title for the custom time bar.
* @param {String} [title] Custom title
* @param {number} [id=undefined] Id of the custom time bar.
*/
Core.prototype.setCustomTimeTitle = function(title, id) {
var customTimes = this.customTimes.filter(function (component) {
return component.options.id === id;
});
if (customTimes.length === 0) {
throw new Error('No custom time bar found with id ' + JSON.stringify(id))
}
if (customTimes.length > 0) {
return customTimes[0].setCustomTitle(title);
}
};
/** /**
* Retrieve meta information from an event. * Retrieve meta information from an event.
* Should be overridden by classes extending Core * Should be overridden by classes extending Core

+ 18
- 5
lib/timeline/component/CustomTime.js View File

@ -23,16 +23,17 @@ function CustomTime (body, options) {
moment: moment, moment: moment,
locales: locales, locales: locales,
locale: 'en', locale: 'en',
id: undefined
id: undefined,
title: undefined
}; };
this.options = util.extend({}, this.defaultOptions); this.options = util.extend({}, this.defaultOptions);
if (options && options.time) { if (options && options.time) {
this.customTime = options.time; this.customTime = options.time;
} else { } else {
this.customTime = new Date();
this.customTime = new Date();
} }
this.eventParams = {}; // stores state parameters while dragging the bar this.eventParams = {}; // stores state parameters while dragging the bar
this.setOptions(options); this.setOptions(options);
@ -123,8 +124,12 @@ CustomTime.prototype.redraw = function () {
locale = this.options.locales['en']; // fall back on english when not available locale = this.options.locales['en']; // fall back on english when not available
} }
var title = locale.time + ': ' + this.options.moment(this.customTime).format('dddd, MMMM Do YYYY, H:mm:ss');
title = title.charAt(0).toUpperCase() + title.substring(1);
var title = this.options.title;
// To hide the title completely use empty string ''.
if (title === undefined) {
title = locale.time + ': ' + this.options.moment(this.customTime).format('dddd, MMMM Do YYYY, H:mm:ss');
title = title.charAt(0).toUpperCase() + title.substring(1);
}
this.bar.style.left = x + 'px'; this.bar.style.left = x + 'px';
this.bar.title = title; this.bar.title = title;
@ -159,6 +164,14 @@ CustomTime.prototype.getCustomTime = function() {
return new Date(this.customTime.valueOf()); return new Date(this.customTime.valueOf());
}; };
/**
* Set custom title.
* @param {Date | number | string} title
*/
CustomTime.prototype.setCustomTitle = function(title) {
this.options.title = title;
};
/** /**
* Start moving horizontally * Start moving horizontally
* @param {Event} event * @param {Event} event

Loading…
Cancel
Save