feat(timeline): add an option to make the custom marker editable #117
Conversation
| 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 () { |
There was a problem hiding this comment.
Doing focus() is necessary since the default is prevented by here.
If you have any better ideas, please share it.
|
@mojoaxel |
| @@ -0,0 +1,50 @@ | |||
| <!DOCTYPE HTML> | |||
There was a problem hiding this comment.
This example file needs to be added to the example overview.
There was a problem hiding this comment.
Fixed in 4a52f8b
| @@ -0,0 +1,41 @@ | |||
| <!DOCTYPE HTML> | |||
There was a problem hiding this comment.
This example file needs to be added to the example overview.
There was a problem hiding this comment.
Fixed in 4a52f8b
|
|
||
| <script type="text/javascript"> | ||
| var container = document.getElementById('visualization'); | ||
| var items = new vis.DataSet(); |
There was a problem hiding this comment.
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);There was a problem hiding this comment.
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.
There was a problem hiding this comment.
you are write, I copied the wrong example code. Feel free to add some data-points or leave it as it is.
|
|
||
| <script type="text/javascript"> | ||
| var container = document.getElementById('visualization'); | ||
| var items = new vis.DataSet(); |
There was a problem hiding this comment.
please add some dummy-data (see above).
| var id1 = "foo"; | ||
| var id2 = "bar"; |
There was a problem hiding this comment.
There was a problem hiding this comment.
Fixed in 9cf487a
Closes #105
Demo
https://visjs.github.io/vis-timeline/examples/timeline/markers/customTimeMarkersEditable.html