Browse Source

Merge remote-tracking branch 'origin/v4' into v4

flowchartTest
Alex de Mulder 9 years ago
parent
commit
7d3315b55d
5 changed files with 30 additions and 32 deletions
  1. +0
    -13
      docs/timeline.html
  2. +2
    -6
      lib/timeline/component/ItemSet.js
  3. +3
    -3
      lib/timeline/component/css/item.css
  4. +4
    -6
      lib/timeline/component/item/RangeItem.js
  5. +21
    -4
      test/timeline.html

+ 0
- 13
docs/timeline.html View File

@ -706,19 +706,6 @@ var options = {
<td>Orientation of the timeline items: 'top' or 'bottom' (default). Determines whether items are aligned to the top or bottom of the Timeline.</td>
</tr>
<tr>
<td>padding</td>
<td>Number</td>
<td>5</td>
<td>The padding of items, needed to correctly calculate the size
of item ranges. Must correspond with the css of items, for example when setting <code>options.padding=10</code>, corresponding css is:
<pre class="prettyprint lang-css">
.vis.timeline .item {
padding: 10px;
}</pre>
</td>
</tr>
<tr>
<td>selectable</td>
<td>Boolean</td>

+ 2
- 6
lib/timeline/component/ItemSet.js View File

@ -66,8 +66,7 @@ function ItemSet(body, options) {
vertical: 10
},
axis: 20
},
padding: 5
}
};
// options is shared by this ItemSet and all its items
@ -243,9 +242,6 @@ ItemSet.prototype._create = function(){
* and vertical direction. Default is 10.
* {Number} margin
* Set margin for both axis and items in pixels.
* {Number} padding
* Padding of the contents of an item in pixels.
* Must correspond with the items css. Default is 5.
* {Boolean} selectable
* If true (default), items can be selected.
* {Boolean} editable
@ -276,7 +272,7 @@ ItemSet.prototype._create = function(){
ItemSet.prototype.setOptions = function(options) {
if (options) {
// copy all options that we know
var fields = ['type', 'align', 'order', 'padding', 'stack', 'selectable', 'groupOrder', 'dataAttributes', 'template','hide', 'snap'];
var fields = ['type', 'align', 'order', 'stack', 'selectable', 'groupOrder', 'dataAttributes', 'template','hide', 'snap'];
util.selectiveExtend(fields, this.options, options);
if ('orientation' in options) {

+ 3
- 3
lib/timeline/component/css/item.css View File

@ -87,15 +87,15 @@
.vis-item .vis-item-content {
white-space: nowrap;
box-sizing: border-box;
margin: 5px;
padding: 5px;
}
.vis-item .vis-delete {
background: url('img/timeline/delete.png') no-repeat top center;
background: url('img/timeline/delete.png') no-repeat center;
position: absolute;
width: 24px;
height: 24px;
top: 0;
top: -4px;
right: -24px;
cursor: pointer;
}

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

@ -188,7 +188,7 @@ RangeItem.prototype.repositionX = function(limitSize) {
else {
this.left = start;
this.width = boxWidth;
contentWidth = Math.min(end - start - 2 * this.options.padding, this.props.content.width);
contentWidth = Math.min(end - start, this.props.content.width);
}
this.dom.box.style.left = this.left + 'px';
@ -200,11 +200,11 @@ RangeItem.prototype.repositionX = function(limitSize) {
break;
case 'right':
this.dom.content.style.left = Math.max((boxWidth - contentWidth - 2 * this.options.padding), 0) + 'px';
this.dom.content.style.left = Math.max((boxWidth - contentWidth), 0) + 'px';
break;
case 'center':
this.dom.content.style.left = Math.max((boxWidth - contentWidth - 2 * this.options.padding) / 2, 0) + 'px';
this.dom.content.style.left = Math.max((boxWidth - contentWidth) / 2, 0) + 'px';
break;
default: // 'auto'
@ -219,9 +219,7 @@ RangeItem.prototype.repositionX = function(limitSize) {
}
else {
if (start < 0) {
contentLeft = Math.min(-start,
(end - start - contentWidth - 2 * this.options.padding));
// TODO: remove the need for options.padding. it's terrible.
contentLeft = -start;
}
else {
contentLeft = 0;

+ 21
- 4
test/timeline.html View File

@ -44,14 +44,23 @@
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<body>
<div>
<p>
<label for="orientation">Orientation</label>
<select id="orientation">
<option value="both" selected>both</option>
<option value="bottom">bottom</option>
<option value="top">top</option>
</select>
</div>
</p>
<p>
<label for="align">Content alignment</label>
<select id="align">
<option value="auto" selected>auto</option>
<option value="center">center</option>
<option value="left">left</option>
<option value="right">right</option>
</select>
</p>
<script>
var o = document.getElementById('orientation');
o.onchange = function () {
@ -59,11 +68,19 @@
orientation: o.value
});
};
var a = document.getElementById('align');
a.onchange = function () {
timeline.setOptions({
align: a.value
});
};
</script>
<div>
<p>
<label for="currenttime"><input id="currenttime" type="checkbox" checked="true"> Show current time</label>
</div>
</p>
<script>
var currenttime = document.getElementById('currenttime');
currenttime.onchange = function () {

Loading…
Cancel
Save