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 all 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
4 changes: 4 additions & 0 deletions examples/timeline/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@ <h3>groups</h3>
<a href="./groups/visibleGroups.html">visible groups</a><br />
<a href="./groups/subgroupsVisibility.html">subgroup visibility</a><br />

<h3>custom time markers</h3>
<a href="./markers/customTimeMarkers.html">custom time markers</a><br />
<a href="./markers/customTimeMarkersEditable.html">editable custom time markers</a><br />

<h3>styling</h3>
<a href="./styling/axisOrientation.html">axis orientation</a><br />
<a href="./styling/customCss.html">custom CSS</a><br />
Expand Down
50 changes: 50 additions & 0 deletions examples/timeline/markers/customTimeMarkers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE HTML>
Copy link
Member

Choose a reason for hiding this comment

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

This example file needs to be added to the example overview.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed in 4a52f8b

<html>
<head>
<title>Timeline | Markers example</title>

<style type="text/css">
body, html {
font-family: sans-serif;
font-size: 11pt;
}
</style>

<script src="../../../dist/vis-timeline-graph2d.min.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />

</head>
<body>

<p>The Timeline has a function to add multiple custom time markers which can be dragged by the user.</p>
<p>In this example, you can add new markers by double-clicking the timeline below and delete the markers by double-clicking it.</p>
<p>
<input type="text" id="markerText" placeholder="marker text">
</p>

<div id="visualization"></div>

<script type="text/javascript">
var container = document.getElementById('visualization');
var items = new vis.DataSet();
Copy link
Member

Choose a reason for hiding this comment

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

It would be nice if some dummy-data would be displayed.
Something like this

var items = [
    {x: '2014-06-11', y: 10},
    {x: '2014-06-12', y: 25},
    {x: '2014-06-13', y: 30},
    {x: '2014-06-14', y: 10},
    {x: '2014-06-15', y: 15},
    {x: '2014-06-16', y: 30}
  ];
  var dataset = new vis.DataSet(items);

Copy link
Contributor Author

@ryamaguchi0220 ryamaguchi0220 Oct 4, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

I think so too.
However, I'm not sure if it would be nice to use vis.Graph2d instead of vis.Timeline like this since these examples are the timeline documents, not the graph2d documents.

Copy link
Member

Choose a reason for hiding this comment

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

you are write, I copied the wrong example code. Feel free to add some data-points or leave it as it is.

var customDate = new Date();
var options = {
start: new Date(Date.now() - 1000 * 60 * 60 * 24),
end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)
};
var timeline = new vis.Timeline(container, items, options);

timeline.on('doubleClick', function (properties) {
var eventProps = timeline.getEventProperties(properties.event);
if (eventProps.what === 'custom-time') {
timeline.removeCustomTime(eventProps.customTime);
} else {
var id = new Date().getTime();
var markerText = document.getElementById('markerText').value || undefined;
timeline.addCustomTime(eventProps.time, id);
timeline.setCustomTimeMarker(markerText, id);
}
});
</script>
</body>
</html>
41 changes: 41 additions & 0 deletions examples/timeline/markers/customTimeMarkersEditable.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE HTML>
Copy link
Member

Choose a reason for hiding this comment

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

This example file needs to be added to the example overview.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed in 4a52f8b

<html>
<head>
<title>Timeline | Editable markers</title>

<style type="text/css">
body, html {
font-family: sans-serif;
font-size: 11pt;
}
</style>

<script src="../../../dist/vis-timeline-graph2d.min.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />

</head>
<body>

<p>Custom time markers have an option to make the title editable.</p>

<div id="visualization"></div>

<script type="text/javascript">
var container = document.getElementById('visualization');
var items = new vis.DataSet();
Copy link
Member

Choose a reason for hiding this comment

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

please add some dummy-data (see above).

var customDate = new Date();
var options = {
start: new Date(Date.now() - 1000 * 60 * 60 * 24),
end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)
};
var timeline = new vis.Timeline(container, items, options);

var id1 = new Date().getTime();
var id2 = new Date().getTime();
timeline.addCustomTime(new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 2), id1);
timeline.setCustomTimeMarker("This is editable", id1, true);
timeline.addCustomTime(new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 3), id2);
timeline.setCustomTimeMarker("This is not editable", id2, false);
</script>
</body>
</html>
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