jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Added css class `vis-editable`, created an example demonstrating individually editable items (see #980)

flowchartTest
jos 10 years ago
parent
07fd970bf6
commit
b750d2e4dc
6 changed files with 67 additions and 5 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +5
    -1
      HISTORY.md
  2. +1
    -1
      docs/timeline/index.html
  3. +58
    -0
      examples/timeline/editing/individualEditableItems.html
  4. +1
    -1
      lib/timeline/component/item/BoxItem.js
  5. +1
    -1
      lib/timeline/component/item/PointItem.js
  6. +1
    -1
      lib/timeline/component/item/RangeItem.js

+ 5
- 1
HISTORY.md View File

@ -2,7 +2,7 @@
http://visjs.org http://visjs.org
## NOT YET RELEASED, version 4.2.1--SNAPSHOT
## NOT YET RELEASED, version 4.2.1-SNAPSHOT
### General ### General
@ -13,6 +13,10 @@ http://visjs.org
- Fixed #942, #966: bug when data is empty. - Fixed #942, #966: bug when data is empty.
### Timeline
- Implemented `editable` option for individual items. Thanks @danbertolini.
## 2015-06-05, version 4.2.0 ## 2015-06-05, version 4.2.0

+ 1
- 1
docs/timeline/index.html View File

@ -769,7 +769,7 @@ function (option, path) {
<td class="indent">orientation.axis</td> <td class="indent">orientation.axis</td>
<td>String</td> <td>String</td>
<td><code>'bottom'</code></td> <td><code>'bottom'</code></td>
<td>Orientation of the timeline axis: 'top', 'bottom' (default), or 'both'. If orientation is 'bottom', the time axis is drawn at the bottom. When 'top', the axis is drawn on top. When 'both', two axes are drawn, both on top and at the bottom.</td>
<td>Orientation of the timeline axis: 'top', 'bottom' (default), 'both', or 'none'. If orientation is 'bottom', the time axis is drawn at the bottom. When 'top', the axis is drawn on top. When 'both', two axes are drawn, both on top and at the bottom. In case of 'none', no axis is drawn at all.</td>
</tr> </tr>
<tr parent="orientation" class="hidden"> <tr parent="orientation" class="hidden">
<td class="indent">orientation.item</td> <td class="indent">orientation.item</td>

+ 58
- 0
examples/timeline/editing/individualEditableItems.html View File

@ -0,0 +1,58 @@
<!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="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head>
<body>
<p>Specify individual items to be editable or readonly.</p>
<div id="visualization"></div>
<script>
// create a DataSet with items
var items = new vis.DataSet([
{id: 1, content: 'Editable', editable: true, start: '2010-08-23'},
{id: 2, content: 'Editable', editable: true, start: '2010-08-23T23:00:00'},
{id: 3, content: 'Read-only', editable: false, start: '2010-08-24T16:00:00'},
{id: 4, content: 'Read-only', editable: false, start: '2010-08-26', end: '2010-09-02'},
{id: 5, content: 'Editable', editable: true, start: '2010-08-28'},
{id: 6, content: 'Read-only', editable: false, start: '2010-08-29'},
{id: 7, content: 'Editable', editable: true, start: '2010-08-31', end: '2010-09-03'},
{id: 8, content: 'Read-only', editable: false, start: '2010-09-04T12:00:00'}
]);
var container = document.getElementById('visualization');
var options = {
editable: true // default for all items
};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

+ 1
- 1
lib/timeline/component/item/BoxItem.js View File

@ -118,7 +118,7 @@ BoxItem.prototype.redraw = function() {
// update class // update class
var className = (this.data.className? ' ' + this.data.className : '') + var className = (this.data.className? ' ' + this.data.className : '') +
(this.selected ? ' vis-selected' : '') + (this.selected ? ' vis-selected' : '') +
(editable ? ' vis-editable' : '');
(editable ? ' vis-editable' : ' vis-readonly');
dom.box.className = 'vis-item vis-box' + className; dom.box.className = 'vis-item vis-box' + className;
dom.line.className = 'vis-item vis-line' + className; dom.line.className = 'vis-item vis-line' + className;
dom.dot.className = 'vis-item vis-dot' + className; dom.dot.className = 'vis-item vis-dot' + className;

+ 1
- 1
lib/timeline/component/item/PointItem.js View File

@ -107,7 +107,7 @@ PointItem.prototype.redraw = function() {
// update class // update class
var className = (this.data.className ? ' ' + this.data.className : '') + var className = (this.data.className ? ' ' + this.data.className : '') +
(this.selected ? ' vis-selected' : '') + (this.selected ? ' vis-selected' : '') +
(editable ? ' vis-editable' : '');
(editable ? ' vis-editable' : ' vis-readonly');
dom.point.className = 'vis-item vis-point' + className; dom.point.className = 'vis-item vis-point' + className;
dom.dot.className = 'vis-item vis-dot' + className; dom.dot.className = 'vis-item vis-dot' + className;

+ 1
- 1
lib/timeline/component/item/RangeItem.js View File

@ -107,7 +107,7 @@ RangeItem.prototype.redraw = function() {
// update class // update class
var className = (this.data.className ? (' ' + this.data.className) : '') + var className = (this.data.className ? (' ' + this.data.className) : '') +
(this.selected ? ' vis-selected' : '') + (this.selected ? ' vis-selected' : '') +
(editable ? ' vis-editable' : '');
(editable ? ' vis-editable' : ' vis-readonly');
dom.box.className = this.baseClassName + className; dom.box.className = this.baseClassName + className;
// determine from css whether this box has overflow // determine from css whether this box has overflow

Write Preview
Loading…
Cancel
Save