Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(timeline): add an option to make the custom marker editable #117

Merged
merged 6 commits into from
Oct 4, 2019
Merged

feat(timeline): add an option to make the custom marker editable #117

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ba9d752
feat(timeline): add an option to make the custom marker editable (#105)
ryamaguchi0220 Sep 29, 2019
cf5a44b
chore(docs): update the timeline document (#105)
ryamaguchi0220 Sep 29, 2019
2f8c9e4
chore(docs): add new example of custom time markers (#105)
ryamaguchi0220 Oct 4, 2019
01e5c06
chore(docs): add new example of editable custom time markers (#105)
ryamaguchi0220 Oct 4, 2019
4a52f8b
chore(docs): add the links to the example overview (#105)
ryamaguchi0220 Oct 4, 2019
9cf487a
fix(docs): don't use foo and bar (#105)
ryamaguchi0220 Oct 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion docs/timeline/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1545,12 +1545,13 @@ <h2 id="Methods">Methods</h2>
</tr>

<tr>
<td>setCustomTimeMarker(title [, id])</td>
<td>setCustomTimeMarker(title [, id, editable])</td>
<td>none</td>
<td>Attach a marker to the custom time bar.
Parameter <code>title</code> is the string to be set as title of the marker.
Parameter <code>id</code> is the id of the custom time bar which the marker is attached to, and is <code>undefined</code> by default.
Any marker's style can be overridden by specifying css selectors such as <code>.vis-custom-time > .vis-custom-time-marker</code>, <code>.${The id of the custom time bar} > .vis-custom-time-marker</code>.
Parameter <code>editable</code> makes the marker editable if true and is <code>false</code> by default.
</td>
</tr>

Expand Down
7 changes: 4 additions & 3 deletions lib/timeline/Core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -593,16 +593,17 @@ class Core {
/**
* Set a custom marker for the custom time bar.
* @param {string} [title] Title of the custom marker.
* @param {number} [id=undefined] Id of the custom time bar.
* @param {number} [id=undefined] Id of the custom marker.
* @param {boolean} [editable=false] Make the custom marker editable.
*/
setCustomTimeMarker(title, id) {
setCustomTimeMarker(title, id, editable) {
const customTimes = this.customTimes.filter(component => 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) {
customTimes[0].setCustomMarker(title);
customTimes[0].setCustomMarker(title, editable);
}
}

Expand Down
11 changes: 9 additions & 2 deletions lib/timeline/component/CustomTime.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,13 +187,20 @@ class CustomTime extends Component {

/**
* Set custom marker.
* @param {string} title
* @param {string} [title] Title of the custom marker
* @param {boolean} [editable] Make the custom marker editable.
*/
setCustomMarker(title) {
setCustomMarker(title, editable) {
const marker = document.createElement('div');
marker.className = `vis-custom-time-marker`;
marker.innerHTML = title;
marker.style.position = 'absolute';
if (editable) {
marker.setAttribute('contenteditable', 'true');
marker.addEventListener('pointerdown', function () {
Copy link
Contributor Author

@ryamaguchi0220 ryamaguchi0220 Oct 2, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doing focus() is necessary since the default is prevented by here.
If you have any better ideas, please share it.

marker.focus();
});
}
this.bar.appendChild(marker);
}

Expand Down