Browse Source

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

flowchartTest
Alex de Mulder 9 years ago
parent
commit
af448ca3f2
6 changed files with 39 additions and 24 deletions
  1. +2
    -2
      examples/timeline/18_range_overflow.html
  2. +9
    -10
      gulpfile.js
  3. +13
    -5
      lib/timeline/component/css/item.css
  4. +6
    -3
      lib/timeline/component/item/BackgroundItem.js
  5. +7
    -2
      lib/timeline/component/item/RangeItem.js
  6. +2
    -2
      test/timeline.html

+ 2
- 2
examples/timeline/18_range_overflow.html View File

@ -11,7 +11,7 @@
font-family: sans-serif; font-family: sans-serif;
} }
.vis-item.vis-range {
.vis-item .vis-item-frame {
overflow: visible; overflow: visible;
} }
</style> </style>
@ -22,7 +22,7 @@
In case of ranges being spread over a wide range of time, it can be interesting to have the text contents of the ranges overflow the box. This can be achieved by changing the overflow property of the contents to visible with css: In case of ranges being spread over a wide range of time, it can be interesting to have the text contents of the ranges overflow the box. This can be achieved by changing the overflow property of the contents to visible with css:
</p> </p>
<pre> <pre>
.vis.timeline .item.range {
.vis-item .vis-item-frame {
overflow: visible; overflow: visible;
} }
</pre> </pre>

+ 9
- 10
gulpfile.js View File

@ -80,16 +80,15 @@ gulp.task('bundle-js', ['clean'], function (cb) {
if (err) { if (err) {
gutil.log(err.toString()); gutil.log(err.toString());
} }
if (stats !== undefined) {
if (stats['compilation'] !== undefined) {
// output soft errors
stats.compilation.errors.forEach(function (err) {
gutil.log(err);
});
if (err || stats.compilation.errors.length > 0) {
gutil.beep(); // TODO: this does not work on my system
}
if (stats && stats.compilation && stats.compilation.errors) {
// output soft errors
stats.compilation.errors.forEach(function (err) {
gutil.log(err);
});
if (err || stats.compilation.errors.length > 0) {
gutil.beep(); // TODO: this does not work on my system
} }
} }
cb(); cb();

+ 13
- 5
lib/timeline/component/css/item.css View File

@ -6,7 +6,7 @@
border-width: 1px; border-width: 1px;
background-color: #D5DDF6; background-color: #D5DDF6;
display: inline-block; display: inline-block;
overflow: hidden;
/*overflow: hidden;*/
} }
.vis-item.vis-selected { .vis-item.vis-selected {
@ -57,17 +57,23 @@
margin: 0; margin: 0;
} }
.vis-item .vis-item-frame {
position: relative;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
.vis-item.vis-range .vis-item-content { .vis-item.vis-range .vis-item-content {
position: relative; position: relative;
display: inline-block; display: inline-block;
max-width: 100%;
} }
.vis-item.background .vis-item-content { .vis-item.background .vis-item-content {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
max-width: 100%;
margin: 5px;
} }
.vis-item.vis-line { .vis-item.vis-line {
@ -81,7 +87,7 @@
.vis-item .vis-item-content { .vis-item .vis-item-content {
white-space: nowrap; white-space: nowrap;
box-sizing: border-box; box-sizing: border-box;
padding: 5px;
margin: 5px;
} }
.vis-item .vis-delete { .vis-item .vis-delete {
@ -98,6 +104,7 @@
position: absolute; position: absolute;
width: 24px; width: 24px;
max-width: 20%; max-width: 20%;
min-width: 2px;
height: 100%; height: 100%;
top: 0; top: 0;
left: -4px; left: -4px;
@ -109,6 +116,7 @@
position: absolute; position: absolute;
width: 24px; width: 24px;
max-width: 20%; max-width: 20%;
min-width: 2px;
height: 100%; height: 100%;
top: 0; top: 0;
right: -4px; right: -4px;

+ 6
- 3
lib/timeline/component/item/BackgroundItem.js View File

@ -33,8 +33,6 @@ function BackgroundItem (data, conversion, options) {
} }
Item.call(this, data, conversion, options); Item.call(this, data, conversion, options);
this.emptyContent = false;
} }
BackgroundItem.prototype = new Item (null, null, null); BackgroundItem.prototype = new Item (null, null, null);
@ -66,10 +64,15 @@ BackgroundItem.prototype.redraw = function() {
dom.box = document.createElement('div'); dom.box = document.createElement('div');
// className is updated in redraw() // className is updated in redraw()
// frame box (to prevent the item contents from overflowing
dom.frame = document.createElement('div');
dom.frame.className = 'vis-item-frame';
dom.box.appendChild(dom.frame);
// contents box // contents box
dom.content = document.createElement('div'); dom.content = document.createElement('div');
dom.content.className = 'vis-item-content'; dom.content.className = 'vis-item-content';
dom.box.appendChild(dom.content);
dom.frame.appendChild(dom.content);
// Note: we do NOT attach this item as attribute to the DOM, // Note: we do NOT attach this item as attribute to the DOM,
// such that background items cannot be selected // such that background items cannot be selected

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

@ -60,10 +60,15 @@ RangeItem.prototype.redraw = function() {
dom.box = document.createElement('div'); dom.box = document.createElement('div');
// className is updated in redraw() // className is updated in redraw()
// frame box (to prevent the item contents from overflowing
dom.frame = document.createElement('div');
dom.frame.className = 'vis-item-frame';
dom.box.appendChild(dom.frame);
// contents box // contents box
dom.content = document.createElement('div'); dom.content = document.createElement('div');
dom.content.className = 'vis-item-content'; dom.content.className = 'vis-item-content';
dom.box.appendChild(dom.content);
dom.frame.appendChild(dom.content);
// attach this item as attribute // attach this item as attribute
dom.box['timeline-item'] = this; dom.box['timeline-item'] = this;
@ -100,7 +105,7 @@ RangeItem.prototype.redraw = function() {
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
this.overflow = window.getComputedStyle(dom.content).overflow !== 'hidden';
this.overflow = window.getComputedStyle(dom.frame).overflow !== 'hidden';
// recalculate size // recalculate size
// turn off max-width to be able to calculate the real width // turn off max-width to be able to calculate the real width

+ 2
- 2
test/timeline.html View File

@ -108,13 +108,13 @@
title: 'hello title!' title: 'hello title!'
}, },
{ {
_id: 4.1, content: 'item 4.1 test overflow foo bar foo bar foo bar foo bar foo bar',
_id: 4.1, content: 'item 4.1 test overflow foo bar foo bar foo bar',
start: now.clone().add(0, 'days').toDate(), start: now.clone().add(0, 'days').toDate(),
end: now.clone().add(1, 'days').toDate(), end: now.clone().add(1, 'days').toDate(),
title: 'hello title!' title: 'hello title!'
}, },
{ {
_id: 4.2, content: 'item 4.2 test overflow foo bar foo bar foo bar foo bar foo bar',
_id: 4.2, content: 'item 4.2 test overflow foo bar foo bar foo bar',
start: now.clone().add(1, 'days').toDate(), start: now.clone().add(1, 'days').toDate(),
end: now.clone().add(1, 'days').add(1, 'minutes').toDate(), end: now.clone().add(1, 'days').add(1, 'minutes').toDate(),
title: 'hello title!' title: 'hello title!'

Loading…
Cancel
Save