diff --git a/css/examples.css b/css/examples.css index d885e758..6b7f61ab 100644 --- a/css/examples.css +++ b/css/examples.css @@ -36,6 +36,7 @@ div.textHTMLContent { width:800px; } + img.example { border:1px solid #dddddd; width:250px; @@ -43,16 +44,6 @@ img.example { border-radius:10px; margin-top:10px; } - -img.timeline_example { - border: 1px solid #dddddd; - border-radius: 10px; - margin-top: 10px; - max-height: 150px; - width: 100%; - max-width: 250px; -} - div.exampleTitle { position:relative; top:-7px; diff --git a/examples/timeline/editing/individualEditableItems.html b/examples/timeline/editing/individualEditableItems.html index c004473a..d6210305 100644 --- a/examples/timeline/editing/individualEditableItems.html +++ b/examples/timeline/editing/individualEditableItems.html @@ -34,21 +34,16 @@
diff --git a/examples/timeline/editing/overrideEditingItems.html b/examples/timeline/editing/overrideEditingItems.html deleted file mode 100644 index 636bd3e8..00000000 --- a/examples/timeline/editing/overrideEditingItems.html +++ /dev/null @@ -1,99 +0,0 @@ - - - - Timeline | Individual editable items - - - - - - - - - -

Specify individual items to be editable or readonly. Toggle edit options and override behavior from timeline.editable

- -
-

-

-Timeline.editable = {
-add
-remove
-updateGroup
-updateTime
-overrideItems
-} -
-

- - - diff --git a/examples/timeline/groups/groupsEditable.html b/examples/timeline/groups/groupsEditable.html index d8a578ad..a7d275fa 100644 --- a/examples/timeline/groups/groupsEditable.html +++ b/examples/timeline/groups/groupsEditable.html @@ -28,8 +28,7 @@

- This example demonstrates editable groups (reordering and hiding). - + This example demonstrates editable groups (for now only reordering).

@@ -56,14 +55,7 @@ {"content": "WEC", "id": "WEC", "value": 18, className:'endurance'}, {"content": "GP2", "id": "GP2", "value": 19, className:'openwheel'} ]); - - // function to make all groups visible again - function showAllGroups(){ - groups.forEach(function(group){ - groups.update({id: group.id, visible: true}); - }) - }; - + // create a dataset with items // note that months are zero-based in the JavaScript Date object, so month 3 is April var items = new vis.DataSet([ @@ -307,20 +299,6 @@ a.value = b.value; b.value = v; }, - groupTemplate: function(group){ - var container = document.createElement('div'); - var label = document.createElement('span'); - label.innerHTML = group.content + ' '; - container.insertAdjacentElement('afterBegin',label); - var hide = document.createElement('button'); - hide.innerHTML = 'hide'; - hide.style.fontSize = 'small'; - hide.addEventListener('click',function(){ - groups.update({id: group.id, visible: false}); - }); - container.insertAdjacentElement('beforeEnd',hide); - return container; - }, orientation: 'both', editable: true, groupEditable: true, diff --git a/examples/timeline/groups/nestedGroups.html b/examples/timeline/groups/nestedGroups.html deleted file mode 100644 index f8abfb1a..00000000 --- a/examples/timeline/groups/nestedGroups.html +++ /dev/null @@ -1,113 +0,0 @@ - - - - Timeline | Nested Groups example - - - - - - - - - - -

- This example demonstrate using groups. Note that a DataSet is used for both - items and groups, allowing to dynamically add, update or remove both items - and groups via the DataSet. -

-
- - - - \ No newline at end of file diff --git a/examples/timeline/groups/subgroups.html b/examples/timeline/groups/subgroups.html index da2670ed..0056705d 100644 --- a/examples/timeline/groups/subgroups.html +++ b/examples/timeline/groups/subgroups.html @@ -1,10 +1,7 @@ - Timeline | Subgroups - - - + Timeline | Background areas + + + +

This example shows the workings of the subgroups. Subgroups do not use stacking, and only work when stacking is disabled.

-
@@ -66,16 +66,11 @@ start: '2014-01-10', end: '2014-02-10', editable: true, - stack: false, - stackSubgroups: true + stack: false }; var timeline = new vis.Timeline(container, items, groups, options); - function toggleStackSubgroups() { - options.stackSubgroups = !options.stackSubgroups; - timeline.setOptions(options); - } \ No newline at end of file diff --git a/examples/timeline/groups/verticalItemsHide.html b/examples/timeline/groups/verticalItemsHide.html index 5f0523b9..1f38fffe 100644 --- a/examples/timeline/groups/verticalItemsHide.html +++ b/examples/timeline/groups/verticalItemsHide.html @@ -106,6 +106,12 @@ maxHeight: 400, start: new Date(), end: new Date(1000*60*60*24 + (new Date()).valueOf()), + editable: true, + margin: { + item: 10, // minimal margin between items + axis: 5 // minimal margin between items and the axis + }, + orientation: 'top' }; diff --git a/examples/timeline/interaction/eventListeners.html b/examples/timeline/interaction/eventListeners.html index 50ed1e9e..f3a9bcc5 100644 --- a/examples/timeline/interaction/eventListeners.html +++ b/examples/timeline/interaction/eventListeners.html @@ -15,7 +15,7 @@

- This example listens for events select, click, doubleClick, rangechange, and rangechanged of the Timeline (other possible events: mouseDown, mouseUp, mouseOver, mouseMove), and listens for changes in the DataSet (add, update, or remove items). + This example listens for events select, rangechange, and rangechanged of the Timeline, and listens for changes in the DataSet (add, update, or remove items).

@@ -57,28 +57,6 @@ setHoveredItem('none'); }); - timeline.on('click', function (properties) { - logEvent('click', properties); - }); - - timeline.on('doubleClick', function (properties) { - logEvent('doubleClick', properties); - }); - - timeline.on('contextmenu', function (properties) { - logEvent('contextmenu', properties); - }); - - // other possible events: - - // timeline.on('mouseOver', function (properties) { - // logEvent('mouseOver', properties); - // }); - - // timeline.on("mouseMove", function(properties) { - // logEvent('mouseMove', properties); - // }); - items.on('*', function (event, properties) { logEvent(event, properties); }); diff --git a/examples/timeline/interaction/rollingMode.html b/examples/timeline/interaction/rollingMode.html deleted file mode 100644 index 80b599f4..00000000 --- a/examples/timeline/interaction/rollingMode.html +++ /dev/null @@ -1,45 +0,0 @@ - - - Timeline | rolling mode Option - - - - - - - - - -

⛶Timeline rolling mode option

- -
- - - - - - diff --git a/examples/timeline/items/expectedVsActualTimesItems.html b/examples/timeline/items/expectedVsActualTimesItems.html deleted file mode 100644 index 8ef427cc..00000000 --- a/examples/timeline/items/expectedVsActualTimesItems.html +++ /dev/null @@ -1,111 +0,0 @@ - - - - Timeline | expected vs actual times items - - - - - - - - -
- - - - \ No newline at end of file diff --git a/examples/timeline/items/tooltip.html b/examples/timeline/items/tooltip.html deleted file mode 100644 index 3e767838..00000000 --- a/examples/timeline/items/tooltip.html +++ /dev/null @@ -1,49 +0,0 @@ - - - - Timeline | Tooltips - - - - - - - - - -

Tooltips

- -

- Setting the tooltip in various ways. -

- -
- - - - - diff --git a/examples/timeline/items/visibleFrameTemplateContent.html b/examples/timeline/items/visibleFrameTemplateContent.html deleted file mode 100644 index 67715766..00000000 --- a/examples/timeline/items/visibleFrameTemplateContent.html +++ /dev/null @@ -1,67 +0,0 @@ - - - - Timeline | Dynamic Content - - - - - - - - -
- - - - \ No newline at end of file diff --git a/examples/timeline/other/drag&drop.html b/examples/timeline/other/drag&drop.html index 5810eb9b..81bcb1f1 100644 --- a/examples/timeline/other/drag&drop.html +++ b/examples/timeline/other/drag&drop.html @@ -49,10 +49,6 @@
  • item 3 - range
    • -
  • - item 3 - range - fixed times -
    - (start: now, end: now + 10 min) -
    • @@ -114,16 +110,12 @@ var item = { id: new Date(), type: itemType, - content: event.target.innerHTML.split('-')[0].trim() + content: event.target.innerHTML.split('-')[0].trim(), + start: new Date(), + end: new Date(1000*60*60*24 + (new Date()).valueOf()), }; - var isFixedTimes = (event.target.innerHTML.split('-')[2] && event.target.innerHTML.split('-')[2].trim() == 'fixed times') - if (isFixedTimes) { - item.start = new Date(); - item.end = new Date(1000*60*10 + (new Date()).valueOf()); - } - - event.dataTransfer.setData("text", JSON.stringify(item)); + event.dataTransfer.setData("text/plain", JSON.stringify(item)); } var items = document.querySelectorAll('.items .item'); diff --git a/examples/timeline/other/usingReact.html b/examples/timeline/other/usingReact.html index ba7bb49f..f6d1e1f7 100644 --- a/examples/timeline/other/usingReact.html +++ b/examples/timeline/other/usingReact.html @@ -88,12 +88,10 @@ end: new Date(1000*60*60*24 + (new Date()).valueOf()), editable: true, template: function (item, element) { - if (!item) { return } ReactDOM.unmountComponentAtNode(element); return ReactDOM.render(, element); }, groupTemplate: function (group, element) { - if (!item) { return } ReactDOM.unmountComponentAtNode(element); return ReactDOM.render(, element); } diff --git a/examples/timeline/other/verticalScroll.html b/examples/timeline/other/verticalScroll.html index 78946765..ddf946f0 100644 --- a/examples/timeline/other/verticalScroll.html +++ b/examples/timeline/other/verticalScroll.html @@ -52,13 +52,12 @@ zoomKey: 'ctrlKey' date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4)); var end = new Date(date); - var orderIndex = order + itemsPerGroup * truck items.add({ - id: orderIndex, + id: order + itemsPerGroup * truck, group: truck, start: start, end: end, - content: 'Order ' + orderIndex + content: 'Order ' + order }); } } @@ -71,10 +70,15 @@ zoomKey: 'ctrlKey' maxHeight: 200, start: new Date(), end: new Date(1000*60*60*24 + (new Date()).valueOf()), + editable: true, + margin: { + item: 10, // minimal margin between items + axis: 5 // minimal margin between items and the axis + }, + orientation: 'top' }; // create a Timeline - options1 = Object.assign({}, options) var container1 = document.getElementById('mytimeline1'); timeline1 = new vis.Timeline(container1, items, groups, options1); diff --git a/images/exampleScreenshots/timeline/editing/tooltipOnItemChange.png b/images/exampleScreenshots/timeline/editing/tooltipOnItemChange.png deleted file mode 100644 index a1b52ed2..00000000 Binary files a/images/exampleScreenshots/timeline/editing/tooltipOnItemChange.png and /dev/null differ diff --git a/images/exampleScreenshots/timeline/groups/verticalItemsHide.png b/images/exampleScreenshots/timeline/groups/verticalItemsHide.png deleted file mode 100644 index cbb86dcd..00000000 Binary files a/images/exampleScreenshots/timeline/groups/verticalItemsHide.png and /dev/null differ diff --git a/images/exampleScreenshots/timeline/other/drag&drop.png b/images/exampleScreenshots/timeline/other/drag&drop.png deleted file mode 100644 index 1202a3c6..00000000 Binary files a/images/exampleScreenshots/timeline/other/drag&drop.png and /dev/null differ diff --git a/images/exampleScreenshots/timeline/other/functionLabelFormats.png b/images/exampleScreenshots/timeline/other/functionLabelFormats.png deleted file mode 100644 index 31a341b9..00000000 Binary files a/images/exampleScreenshots/timeline/other/functionLabelFormats.png and /dev/null differ diff --git a/images/exampleScreenshots/timeline/other/horizontalScroll.png b/images/exampleScreenshots/timeline/other/horizontalScroll.png deleted file mode 100644 index 67a2122a..00000000 Binary files a/images/exampleScreenshots/timeline/other/horizontalScroll.png and /dev/null differ diff --git a/images/exampleScreenshots/timeline/other/usingReact.png b/images/exampleScreenshots/timeline/other/usingReact.png deleted file mode 100644 index 9e177719..00000000 Binary files a/images/exampleScreenshots/timeline/other/usingReact.png and /dev/null differ diff --git a/images/exampleScreenshots/timeline/other/verticalScroll.png b/images/exampleScreenshots/timeline/other/verticalScroll.png deleted file mode 100644 index dc7df997..00000000 Binary files a/images/exampleScreenshots/timeline/other/verticalScroll.png and /dev/null differ diff --git a/images/exampleScreenshots/timeline/styling/axisOrientation.png b/images/exampleScreenshots/timeline/styling/axisOrientation.png index a4e058ee..ec9dcb0a 100644 Binary files a/images/exampleScreenshots/timeline/styling/axisOrientation.png and b/images/exampleScreenshots/timeline/styling/axisOrientation.png differ diff --git a/images/exampleScreenshots/timeline/styling/gridStyling.png b/images/exampleScreenshots/timeline/styling/gridStyling.png index b461f0b9..1de251a4 100644 Binary files a/images/exampleScreenshots/timeline/styling/gridStyling.png and b/images/exampleScreenshots/timeline/styling/gridStyling.png differ diff --git a/timeline_examples.html b/timeline_examples.html index 05950fc2..ed5ea7ef 100644 --- a/timeline_examples.html +++ b/timeline_examples.html @@ -1,404 +1,129 @@ - - - - Timeline Examples - - - - - - + + + + Timeline Examples + + + + + + - - - -
    -
    + + + + + + +
    +
    -
    +
    -
    +

    Timeline Examples

    This page contains examples which show how to use Timeline. For the documentation, please click the button below:

    View docs ยป -

    basic usage

    -
    -
    - - -
    basic usage
    -     -
    -
    - -

    data handling

    -
    -
    - - -
    data serialization
    -     -
    - -
    - - -
    load external data
    -     -
    -
    - -

    editing

    -
    -
    - - -
    data serialization
    -     -
    - -
    - - -
    editing items
    -     -
    - -
    - - -
    editing items callbacks
    -     -
    - -
    - - -
    individual editable items
    -     -
    - -
    - - -
    update data on event
    -     -
    - -
    - - -
    tooltip on item change
    -     -
    -
    - -

    groups

    -
    -
    - - -
    groups
    -     -
    - -
    - - -
    groups editable
    -     -
    - -
    - - -
    groups ordering
    -     -
    - -
    - - -
    subgroups
    -     -
    - -
    - - -
    vertical items hide
    -     -
    -
    - -

    interaction

    -
    -
    - - -
    animate window
    -     -
    - -
    - - -
    click to use
    -     -
    - -
    - - -
    event listeners
    -     -
    - -
    - - -
    limit move and zoom
    -     -
    - -
    - - -
    navigation menu
    -     -
    - -
    - - -
    set selection
    -     -
    +

    basic usage

    + basic usage
    + +

    interaction

    + animate window
    + click to use
    + event listeners
    + limit move and zoom of the window
    + navigation menu
    + set selection
    + +

    editing

    + custom snapping of items
    + editing items
    + editing items, manipulate using callbacks
    + individually editable items
    + update data on event
    + +

    items

    + HTML contents
    + point items
    + background areas
    + background areas with groups
    + item ordering
    + range overflow item
    + +

    groups

    + groups
    + ordering of groups
    + subgroups
    + editable groups
    + +

    styling

    + item class names
    + item templates
    + axis orientation
    + custom CSS
    + grid styling
    + +

    data handling

    + data serialization
    + load external data
    + +

    other

    + custom time bars
    + data attributes
    + all data attributes
    + hiding periods
    + localization
    + performance
    + performance of groups
    + require.js example
    + right to left (rtl)
    + timezone
    +
    -

    items

    -
    -
    - - -
    background areas
    -     -
    - -
    - - -
    background areas with groups
    -     -
    - -
    - - -
    html contents
    -     -
    - -
    - - -
    item ordering
    -     -
    - -
    - - -
    point items
    -     -
    - -
    - - -
    range over flow item
    -     -
    -
    - -

    other

    -
    -
    - - -
    require js
    -     -
    - -
    - - -
    custom time bars
    -     -
    - -
    - - -
    data attributes
    -     -
    - -
    - - -
    data attributes all
    -     -
    - -
    - - -
    groups performance
    -     -
    - -
    - - -
    hiding periods
    -     -
    - -
    - - -
    localization
    -     -
    - -
    - - -
    performance
    -     -
    - -
    - - -
    rtl
    -     -
    - -
    - - -
    timezone
    -     -
    - -
    - - -
    drag & drop
    -     -
    - -
    - - -
    function label formats
    -     -
    - -
    - - -
    horizontal scroll
    -     -
    - -
    - - -
    using react
    -     -
    - -
    - - -
    vertical sroll
    -     -
    -
    - -

    styling

    -
    -
    - - -
    exis orientation
    -     -
    - -
    - - -
    custom css
    -     -
    - -
    - - -
    grid styling
    -     -
    - -
    - - -
    item class names
    -     -
    - -
    - - -
    item templates
    -     -
    -
    - + + + + +