RubyGems - visjs-rails - Versions diffs - 4.16.1.0 → 4.21.0.0 - Mend

visjs-rails 4.16.1.0 → 4.21.0.0

Files changed (388) hide show

data/examples_for_vis/timeline/editing/editingItemsCallbacks.html ADDED

@@ -0,0 +1,172 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Manipulation callbacks</title>
+  <style type="text/css">
+    body,
+    html {
+      font-family: sans-serif;
+      font-size: 11pt;
+    }
+  </style>
+  <script src="http://t4t5.github.io/sweetalert/dist/sweetalert.min.js"></script>
+  <link href="http://t4t5.github.io/sweetalert/dist/sweetalert.css" rel="stylesheet" type="text/css" />
+  <script src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+  <p style="max-width: 800px;">
+    This example shows how to use callback functions
+    <code>onAdd</code>,
+    <code>onMove</code>,
+    <code>onMoving</code>,
+    <code>onUpdate</code>, and
+    <code>onRemove</code>. The
+    <code>onMoving</code> function updates an item while dragging, and can be used to prevent the item from being drawn at disallowed
+    or infeasible timeslots. In this example, the items cannot be moved outside of the month April 2013. The other callback
+    functions are called after an add, move, update, or remove action has taken place, and can be used to cancel these actions.
+  </p>
+  <div id="visualization"></div>
+  <p></p>
+  <div id="log"></div>
+  <script type="text/javascript">
+    // note that months are zero-based in the JavaScript Date object, so month 3 is April
+    var items = new vis.DataSet([{
+        id: 1,
+        content: 'item 1',
+        start: new Date(2013, 3, 20)
+      },
+      {
+        id: 2,
+        content: 'item 2',
+        start: new Date(2013, 3, 14)
+      },
+      {
+        id: 3,
+        content: 'item 3',
+        start: new Date(2013, 3, 18)
+      },
+      {
+        id: 4,
+        content: 'item 4',
+        start: new Date(2013, 3, 16),
+        end: new Date(2013, 3, 19)
+      },
+      {
+        id: 5,
+        content: 'item 5',
+        start: new Date(2013, 3, 25)
+      },
+      {
+        id: 6,
+        content: 'item 6',
+        start: new Date(2013, 3, 27)
+      }
+    ]);
+    var min = new Date(2013, 3, 1); // 1 april
+    var max = new Date(2013, 3, 30, 23, 59, 59); // 30 april
+    var container = document.getElementById('visualization');
+    var options = {
+      editable: true,
+      onAdd: function (item, callback) {
+        prettyPrompt('Add item', 'Enter text content for new item:', item.content, function (value) {
+          if (value) {
+            item.content = value;
+            callback(item); // send back adjusted new item
+          } else {
+            callback(null); // cancel item creation
+          }
+        });
+      },
+      onMove: function (item, callback) {
+        var title = 'Do you really want to move the item to\n' +
+          'start: ' + item.start + '\n' +
+          'end: ' + item.end + '?';
+        prettyConfirm('Move item', title, function (ok) {
+          if (ok) {
+            callback(item); // send back item as confirmation (can be changed)
+          } else {
+            callback(null); // cancel editing item
+          }
+        });
+      },
+      onMoving: function (item, callback) {
+        if (item.start < min) item.start = min;
+        if (item.start > max) item.start = max;
+        if (item.end > max) item.end = max;
+        callback(item); // send back the (possibly) changed item
+      },
+      onUpdate: function (item, callback) {
+        prettyPrompt('Update item', 'Edit items text:', item.content, function (value) {
+          if (value) {
+            item.content = value;
+            callback(item); // send back adjusted item
+          } else {
+            callback(null); // cancel updating the item
+          }
+        });
+      },
+      onRemove: function (item, callback) {
+        prettyConfirm('Remove item', 'Do you really want to remove item ' + item.content + '?', function (ok) {
+          if (ok) {
+            callback(item); // confirm deletion
+          } else {
+            callback(null); // cancel deletion
+          }
+        });
+      }
+    };
+    var timeline = new vis.Timeline(container, items, options);
+    items.on('*', function (event, properties) {
+      logEvent(event, properties);
+    });
+    function logEvent(event, properties) {
+      var log = document.getElementById('log');
+      var msg = document.createElement('div');
+      msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' +
+        'properties=' + JSON.stringify(properties);
+      log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
+    }
+    function prettyConfirm(title, text, callback) {
+      swal({
+        title: title,
+        text: text,
+        type: 'warning',
+        showCancelButton: true,
+        confirmButtonColor: "#DD6B55"
+      }, callback);
+    }
+    function prettyPrompt(title, text, inputValue, callback) {
+      swal({
+        title: title,
+        text: text,
+        type: 'input',
+        showCancelButton: true,
+        inputValue: inputValue
+      }, callback);
+    }
+  </script>
+</body>
+</html>

data/examples_for_vis/timeline/editing/individualEditableItems.html ADDED

@@ -0,0 +1,131 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Individual editable items</title>
+  <style>
+    body,
+    html {
+      font-family: arial, sans-serif;
+      font-size: 11pt;
+    }
+    div.vis-editable,
+    div.vis-editable.vis-selected {
+      /* custom styling for editable items... */
+    }
+    div.vis-readonly,
+    div.vis-readonly.vis-selected {
+      /* custom styling for readonly items... */
+      background-color: #ff4500;
+      border-color: red;
+      color: white;
+    }
+  </style>
+  <script src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+  <p>Specify individual items to be editable or readonly.</p>
+  <div id="visualization"></div>
+  <script>
+    // create groups to highlight groupUpdate
+    var groups = new vis.DataSet([{
+        id: 1,
+        content: 'Group 1'
+      },
+      {
+        id: 2,
+        content: 'Group 2'
+      }
+    ]);
+    // create a DataSet with items
+    var items = new vis.DataSet([{
+        id: 1,
+        content: 'Editable',
+        editable: true,
+        start: '2010-08-23',
+        group: 1
+      },
+      {
+        id: 2,
+        content: 'Editable',
+        editable: true,
+        start: '2010-08-23T23:00:00',
+        group: 2
+      },
+      {
+        id: 3,
+        content: 'Read-only',
+        editable: false,
+        start: '2010-08-24T16:00:00',
+        group: 1
+      },
+      {
+        id: 4,
+        content: 'Read-only',
+        editable: false,
+        start: '2010-08-26',
+        end: '2010-09-02',
+        group: 2
+      },
+      {
+        id: 5,
+        content: 'Edit Time Only',
+        editable: {
+          updateTime: true,
+          updateGroup: false,
+          remove: false
+        },
+        start: '2010-08-28',
+        group: 1
+      },
+      {
+        id: 6,
+        content: 'Edit Group Only',
+        editable: {
+          updateTime: false,
+          updateGroup: true,
+          remove: false
+        },
+        start: '2010-08-29',
+        group: 2
+      },
+      {
+        id: 7,
+        content: 'Remove Only',
+        editable: {
+          updateTime: false,
+          updateGroup: false,
+          remove: true
+        },
+        start: '2010-08-31',
+        end: '2010-09-03',
+        group: 1
+      },
+      {
+        id: 8,
+        content: 'Default',
+        start: '2010-09-04T12:00:00',
+        group: 2
+      }
+    ]);
+    var container = document.getElementById('visualization');
+    var options = {
+      editable: true // default for all items
+    };
+    var timeline = new vis.Timeline(container, items, groups, options);
+  </script>
+</body>
+</html>

data/examples_for_vis/timeline/editing/itemsAlwaysDraggable.html ADDED

@@ -0,0 +1,44 @@
+<html>
+<head>
+    <title>Timeline | itemsAlwaysDraggable Option</title>
+    <meta charset="utf-8">
+    <script src="../../../vendor/assets/javascripts/vis.js"></script>
+    <link href="../../../vendor/assets/stylesheets/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+    <p>The
+        <code>itemsAlwaysDraggable</code> option allows to drag items around without first selecting them. When
+        <code>itemsAlwaysDraggable.range</code> is set to
+        <code>true</code>, the range can be changed without selection as well.</p>
+    <div id="mytimeline"></div>
+    <script>
+        var container = document.getElementById('mytimeline'),
+            items = new vis.DataSet();
+        for (var i = 10; i >= 0; i--) {
+            var start = new Date(new Date().getTime() + i * 100000);
+            items.add({
+                id: i,
+                content: "item " + i,
+                start: start,
+                end: new Date(start.getTime() + 100000)
+            });
+        }
+        var options = {
+            start: new Date(),
+            end: new Date(new Date().getTime() + 1000000),
+            editable: true,
+            itemsAlwaysDraggable: {
+                item: true,
+                range: true
+            }
+        };
+        var timeline = new vis.Timeline(container, items, null, options);
+    </script>
+</body>
+</html>

data/examples_for_vis/timeline/editing/overrideEditingItems.html ADDED

@@ -0,0 +1,166 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Individual editable items</title>
+  <style>
+    body,
+    html {
+      font-family: arial, sans-serif;
+      font-size: 11pt;
+    }
+    div.vis-editable,
+    div.vis-editable.vis-selected {
+      /* custom styling for editable items... */
+    }
+    div.vis-readonly,
+    div.vis-readonly.vis-selected {
+      /* custom styling for readonly items... */
+      background-color: #ff4500;
+      border-color: red;
+      color: white;
+    }
+  </style>
+  <script src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+  <p>Specify individual items to be editable or readonly. Toggle edit options and override behavior from timeline.editable</p>
+  <div id="visualization"></div>
+  <p>
+    <form>
+      Timeline.editable = {</br>
+      <input name="add" type="checkbox" checked>add</input>
+      </br>
+      <input name="remove" type="checkbox" checked>remove</input>
+      </br>
+      <input name="updateGroup" type="checkbox">updateGroup</input>
+      </br>
+      <input name="updateTime" type="checkbox" checked>updateTime</input>
+      <br>
+      <input name="overrideItems" type="checkbox">overrideItems</input>
+      <br> }
+    </form>
+  </p>
+  <script>
+    // create a DataSet with items
+    var items = new vis.DataSet([{
+        id: 1,
+        content: 'Editable',
+        editable: true,
+        start: '2010-08-23',
+        group: 1
+      },
+      {
+        id: 2,
+        content: 'Editable',
+        editable: true,
+        start: '2010-08-23T23:00:00',
+        group: 2
+      },
+      {
+        id: 3,
+        content: 'Read-only',
+        editable: false,
+        start: '2010-08-24T16:00:00',
+        group: 1
+      },
+      {
+        id: 4,
+        content: 'Read-only',
+        editable: false,
+        start: '2010-08-26',
+        end: '2010-09-02',
+        group: 2
+      },
+      {
+        id: 5,
+        content: 'Editable',
+        editable: true,
+        start: '2010-08-28',
+        group: 1
+      },
+      {
+        id: 6,
+        content: 'Read-only',
+        editable: false,
+        start: '2010-08-29',
+        group: 2
+      },
+      {
+        id: 7,
+        content: 'Editable',
+        editable: true,
+        start: '2010-08-31',
+        end: '2010-09-03',
+        group: 1
+      },
+      {
+        id: 8,
+        content: 'Read-only',
+        editable: false,
+        start: '2010-09-04T12:00:00',
+        group: 2
+      },
+      {
+        id: 9,
+        content: 'Default',
+        start: '2010-09-04',
+        group: 1
+      },
+      {
+        id: 10,
+        content: 'Default',
+        start: '2010-08-24',
+        group: 2
+      }
+    ]);
+    var groups = [{
+        id: 1,
+        content: 'group 1'
+      },
+      {
+        id: 2,
+        content: 'group 2'
+      }
+    ]
+    var container = document.getElementById('visualization');
+    var options = {
+      editable: {
+        add: true,
+        remove: true,
+        updateGroup: false,
+        updateTime: true,
+        overrideItems: false
+      } // default for all items
+    };
+    var timeline = new vis.Timeline(container, items, groups, options);
+    var updateEditOptions = function (e) {
+      var changedOption = e.target.name;
+      var options = {
+        editable: {}
+      };
+      options.editable[changedOption] = e.target.checked;
+      timeline.setOptions(options);
+    };
+    var cbs = document.getElementsByTagName("input");
+    [].forEach.call(cbs, function (cb) {
+      cb.onchange = updateEditOptions;
+    });
+  </script>
+</body>
+</html>