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

Removed the option `padding` for Timeline, is now redundant (can be done purely with css now)

flowchartTest
jos 9 years ago
parent
491e40c958
commit
cf8c299d11
4 changed files with 26 additions and 27 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -13
      docs/timeline.html
  2. +2
    -6
      lib/timeline/component/ItemSet.js
  3. +3
    -4
      lib/timeline/component/item/RangeItem.js
  4. +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> <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>
<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> <tr>
<td>selectable</td> <td>selectable</td>
<td>Boolean</td> <td>Boolean</td>

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

@ -66,8 +66,7 @@ function ItemSet(body, options) {
vertical: 10 vertical: 10
}, },
axis: 20 axis: 20
},
padding: 5
}
}; };
// options is shared by this ItemSet and all its items // options is shared by this ItemSet and all its items
@ -243,9 +242,6 @@ ItemSet.prototype._create = function(){
* and vertical direction. Default is 10. * and vertical direction. Default is 10.
* {Number} margin * {Number} margin
* Set margin for both axis and items in pixels. * 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 * {Boolean} selectable
* If true (default), items can be selected. * If true (default), items can be selected.
* {Boolean} editable * {Boolean} editable
@ -276,7 +272,7 @@ ItemSet.prototype._create = function(){
ItemSet.prototype.setOptions = function(options) { ItemSet.prototype.setOptions = function(options) {
if (options) { if (options) {
// copy all options that we know // 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); util.selectiveExtend(fields, this.options, options);
if ('orientation' in options) { if ('orientation' in options) {

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

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

+ 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> <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> <body>
<div>
<p>
<label for="orientation">Orientation</label> <label for="orientation">Orientation</label>
<select id="orientation"> <select id="orientation">
<option value="both" selected>both</option> <option value="both" selected>both</option>
<option value="bottom">bottom</option> <option value="bottom">bottom</option>
<option value="top">top</option> <option value="top">top</option>
</select> </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> <script>
var o = document.getElementById('orientation'); var o = document.getElementById('orientation');
o.onchange = function () { o.onchange = function () {
@ -59,11 +68,19 @@
orientation: o.value orientation: o.value
}); });
}; };
var a = document.getElementById('align');
a.onchange = function () {
timeline.setOptions({
align: a.value
});
};
</script> </script>
<div>
<p>
<label for="currenttime"><input id="currenttime" type="checkbox" checked="true"> Show current time</label> <label for="currenttime"><input id="currenttime" type="checkbox" checked="true"> Show current time</label>
</div>
</p>
<script> <script>
var currenttime = document.getElementById('currenttime'); var currenttime = document.getElementById('currenttime');
currenttime.onchange = function () { currenttime.onchange = function () {

Write Preview
Loading…
Cancel
Save