From 0585fc4d34d12748e058e7fa4941ce1f9d601cc8 Mon Sep 17 00:00:00 2001 From: jos Date: Wed, 29 Apr 2015 12:07:15 +0200 Subject: [PATCH 1/2] Fixed delete button not being visible --- examples/timeline/18_range_overflow.html | 4 ++-- gulpfile.js | 19 +++++++++---------- lib/timeline/Core.js | 1 - lib/timeline/component/css/item.css | 14 +++++++++++--- lib/timeline/component/item/RangeItem.js | 9 +++++++-- test/timeline.html | 4 ++-- 6 files changed, 31 insertions(+), 20 deletions(-) diff --git a/examples/timeline/18_range_overflow.html b/examples/timeline/18_range_overflow.html index a5a37240..e5fe2fd5 100644 --- a/examples/timeline/18_range_overflow.html +++ b/examples/timeline/18_range_overflow.html @@ -11,7 +11,7 @@ font-family: sans-serif; } - .vis-item.vis-range { + .vis-item.vis-range .vis-item-frame { overflow: visible; } @@ -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: 

-.vis.timeline .item.range {
+.vis-item.vis-range .vis-item-frame {
   overflow: visible;
 }
diff --git a/gulpfile.js b/gulpfile.js index 9462e594..88eb0fc0 100644 --- a/gulpfile.js +++ b/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(); diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js index 61ed6eaa..11bed710 100644 --- a/lib/timeline/Core.js +++ b/lib/timeline/Core.js @@ -141,7 +141,6 @@ Core.prototype._create = function (container) { // emulate a touch event (emitted before the start of a pan, pinch, tap, or press) hammerUtil.onTouch(this.hammer, function (event) { - console.log('touch', event) me.emit('touch', event); }.bind(this)); diff --git a/lib/timeline/component/css/item.css b/lib/timeline/component/css/item.css index 46f852da..8cbd0703 100644 --- a/lib/timeline/component/css/item.css +++ b/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 { @@ -60,7 +60,15 @@ .vis-item.vis-range .vis-item-content { position: relative; display: inline-block; - max-width: 100%; + overflow: hidden; + /*max-width: 100%;*/ +} + +.vis-item.vis-range .vis-item-frame { + position: relative; + width: 100%; + height: 100%; + overflow: hidden; } .vis-item.background .vis-item-content { @@ -81,7 +89,7 @@ .vis-item .vis-item-content { white-space: nowrap; box-sizing: border-box; - padding: 5px; + margin: 5px; } .vis-item .vis-delete { diff --git a/lib/timeline/component/item/RangeItem.js b/lib/timeline/component/item/RangeItem.js index 625c805d..4a4fc72d 100644 --- a/lib/timeline/component/item/RangeItem.js +++ b/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 diff --git a/test/timeline.html b/test/timeline.html index 1d7315ae..3e4dd1ca 100644 --- a/test/timeline.html +++ b/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!' From 1d3ec56c4909b8f56b95328d09daa9d57387b224 Mon Sep 17 00:00:00 2001 From: jos Date: Wed, 29 Apr 2015 12:19:10 +0200 Subject: [PATCH 2/2] Added extra div to background items too --- examples/timeline/18_range_overflow.html | 4 ++-- lib/timeline/component/css/item.css | 18 +++++++++--------- lib/timeline/component/item/BackgroundItem.js | 9 ++++++--- 3 files changed, 17 insertions(+), 14 deletions(-) diff --git a/examples/timeline/18_range_overflow.html b/examples/timeline/18_range_overflow.html index e5fe2fd5..b1636ad7 100644 --- a/examples/timeline/18_range_overflow.html +++ b/examples/timeline/18_range_overflow.html @@ -11,7 +11,7 @@ font-family: sans-serif; } - .vis-item.vis-range .vis-item-frame { + .vis-item .vis-item-frame { overflow: visible; } @@ -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: 

-.vis-item.vis-range .vis-item-frame {
+.vis-item .vis-item-frame {
   overflow: visible;
 }
diff --git a/lib/timeline/component/css/item.css b/lib/timeline/component/css/item.css index 8cbd0703..c69ecb0c 100644 --- a/lib/timeline/component/css/item.css +++ b/lib/timeline/component/css/item.css @@ -57,25 +57,23 @@ margin: 0; } -.vis-item.vis-range .vis-item-content { +.vis-item .vis-item-frame { position: relative; - display: inline-block; + width: 100%; + height: 100%; + padding: 0; + margin: 0; overflow: hidden; - /*max-width: 100%;*/ } -.vis-item.vis-range .vis-item-frame { +.vis-item.vis-range .vis-item-content { position: relative; - width: 100%; - height: 100%; - overflow: hidden; + display: inline-block; } .vis-item.background .vis-item-content { position: absolute; display: inline-block; - max-width: 100%; - margin: 5px; } .vis-item.vis-line { @@ -106,6 +104,7 @@ position: absolute; width: 24px; max-width: 20%; + min-width: 2px; height: 100%; top: 0; left: -4px; @@ -117,6 +116,7 @@ position: absolute; width: 24px; max-width: 20%; + min-width: 2px; height: 100%; top: 0; right: -4px; diff --git a/lib/timeline/component/item/BackgroundItem.js b/lib/timeline/component/item/BackgroundItem.js index 6ab6e165..62493dc6 100644 --- a/lib/timeline/component/item/BackgroundItem.js +++ b/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