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

examples/timeline/18_range_overflow.html

@@ -11,7 +11,7 @@
       font-family: sans-serif;
     }
 
-    .vis-item.vis-range {
+    .vis-item .vis-item-frame {
       overflow: visible;
     }
   </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:
 </p>
 <pre>
-.vis.timeline .item.range {
+.vis-item .vis-item-frame {
   overflow: visible;
 }
 </pre>

gulpfile.js

@@ -80,16 +80,15 @@ gulp.task('bundle-js', ['clean'], function (cb) {
     if (err) {
       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();

lib/timeline/component/css/item.css

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

lib/timeline/component/item/BackgroundItem.js

@@ -33,8 +33,6 @@ function BackgroundItem (data, conversion, options) {
   }
 
   Item.call(this, data, conversion, options);
-
-  this.emptyContent = false;
 }
 
 BackgroundItem.prototype = new Item (null, null, null);
@@ -66,10 +64,15 @@ BackgroundItem.prototype.redraw = function() {
     dom.box = document.createElement('div');
     // 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
     dom.content = document.createElement('div');
     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,
     //       such that background items cannot be selected

lib/timeline/component/item/RangeItem.js

@@ -60,10 +60,15 @@ RangeItem.prototype.redraw = function() {
     dom.box = document.createElement('div');
     // 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
     dom.content = document.createElement('div');
     dom.content.className = 'vis-item-content';
-    dom.box.appendChild(dom.content);
+    dom.frame.appendChild(dom.content);
 
     // attach this item as attribute
     dom.box['timeline-item'] = this;
@@ -100,7 +105,7 @@ RangeItem.prototype.redraw = function() {
     dom.box.className = this.baseClassName + className;
 
     // 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
     // turn off max-width to be able to calculate the real width

test/timeline.html

@@ -108,13 +108,13 @@
       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(),
       end: now.clone().add(1, 'days').toDate(),
       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(),
       end: now.clone().add(1, 'days').add(1, 'minutes').toDate(),
       title: 'hello title!'