From 8bd597138ad54184c766c8feef99d2cb8fd2a37a Mon Sep 17 00:00:00 2001 From: Lewis B Date: Fri, 3 Feb 2017 19:41:18 +1000 Subject: [PATCH] feat(timeline): refactor tooltip to only use one dom-element (#2662) --- lib/timeline/component/ItemSet.js | 39 +++++++++++-------- lib/timeline/component/item/BackgroundItem.js | 1 - lib/timeline/component/item/BoxItem.js | 1 - lib/timeline/component/item/Item.js | 22 ----------- lib/timeline/component/item/PointItem.js | 1 - lib/timeline/component/item/RangeItem.js | 1 - 6 files changed, 22 insertions(+), 43 deletions(-) diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js index 38bb7028..be95aa7d 100644 --- a/lib/timeline/component/ItemSet.js +++ b/lib/timeline/component/ItemSet.js @@ -157,6 +157,8 @@ function ItemSet(body, options) { this.selection = []; // list with the ids of all selected nodes this.stackDirty = true; // if true, all items will be restacked on next redraw + this.popup = null; + this.touchParams = {}; // stores properties while dragging this.groupTouchParams = {}; // create the HTML DOM @@ -889,12 +891,6 @@ ItemSet.prototype.removeItem = function(id) { // remove by id here, it is possible that an item has no id defined // itself, so better not delete by the item itself dataset.remove(id); - - // Remove it's popup - if (itemObj.popup) { - itemObj.popup.destroy(); - itemObj.popup = null; - } } }); } @@ -1899,17 +1895,26 @@ ItemSet.prototype._onMouseOver = function (event) { return; } - if (item.getTitle()) { - if (item.popup == null) { - item.setPopup(new Popup(this.body.dom.root, this.options.tooltip.overflowMethod || 'flip')); + var title = item.getTitle(); + if (title) { + if (this.popup == null) { + this.popup = new Popup(this.body.dom.root, + this.options.tooltip.overflowMethod || 'flip'); } + this.popup.setText(title); var container = this.body.dom.centerContainer; - item.popup.setPosition( + this.popup.setPosition( event.clientX - util.getAbsoluteLeft(container) + container.offsetLeft, event.clientY - util.getAbsoluteTop(container) + container.offsetTop ); - item.popup.show(); + this.popup.show(); + } else { + // Hovering over item without a title, hide popup + // Needed instead of _just_ in _onMouseOut due to #2572 + if (this.popup != null) { + this.popup.hide(); + } } this.body.emitter.emit('itemover', { @@ -1928,8 +1933,8 @@ ItemSet.prototype._onMouseOut = function (event) { return; } - if (item.popup != null) { - item.popup.hide(); + if (this.popup != null) { + this.popup.hide(); } this.body.emitter.emit('itemout', { @@ -1942,14 +1947,14 @@ ItemSet.prototype._onMouseMove = function (event) { if (!item) return; if (this.options.tooltip.followMouse) { - if (item.popup) { - if (!item.popup.hidden) { + if (this.popup) { + if (!this.popup.hidden) { var container = this.body.dom.centerContainer; - item.popup.setPosition( + this.popup.setPosition( event.clientX - util.getAbsoluteLeft(container) + container.offsetLeft, event.clientY - util.getAbsoluteTop(container) + container.offsetTop ); - item.popup.show(); // Redraw + this.popup.show(); // Redraw } } } diff --git a/lib/timeline/component/item/BackgroundItem.js b/lib/timeline/component/item/BackgroundItem.js index 6d6ce456..f0255415 100644 --- a/lib/timeline/component/item/BackgroundItem.js +++ b/lib/timeline/component/item/BackgroundItem.js @@ -100,7 +100,6 @@ BackgroundItem.prototype.redraw = function() { // - the item is selected/deselected if (this.dirty) { this._updateContents(this.dom.content); - this._updateTitle(); this._updateDataAttributes(this.dom.content); this._updateStyle(this.dom.box); diff --git a/lib/timeline/component/item/BoxItem.js b/lib/timeline/component/item/BoxItem.js index 377b2e06..25b3e3e4 100644 --- a/lib/timeline/component/item/BoxItem.js +++ b/lib/timeline/component/item/BoxItem.js @@ -118,7 +118,6 @@ BoxItem.prototype.redraw = function() { // - the item is selected/deselected if (this.dirty) { this._updateContents(this.dom.content); - this._updateTitle(); this._updateDataAttributes(this.dom.box); this._updateStyle(this.dom.box); diff --git a/lib/timeline/component/item/Item.js b/lib/timeline/component/item/Item.js index edae028a..5ddbd736 100644 --- a/lib/timeline/component/item/Item.js +++ b/lib/timeline/component/item/Item.js @@ -23,7 +23,6 @@ function Item (data, conversion, options) { this.displayed = false; this.groupShowing = true; this.dirty = true; - this.popup = null; this.top = null; this.right = null; @@ -397,18 +396,6 @@ Item.prototype._updateContents = function (element) { } }; -/** - * Set HTML contents for the item - * @private - */ -Item.prototype._updateTitle = function () { - if (this.data.title != null) { - if (this.popup != null) { - this.popup.setText(this.data.title || ''); - } - } -}; - /** * Process dataAttributes timeline option and set as data- attributes on dom.content * @param {Element} element HTML element to which the attributes will be attached @@ -498,13 +485,4 @@ Item.prototype.getTitle = function () { return this.data.title; }; -/** - * Set the popup object, and update the title - * @param {Popup} popup - */ -Item.prototype.setPopup = function (popup) { - this.popup = popup; - this._updateTitle(); -}; - module.exports = Item; diff --git a/lib/timeline/component/item/PointItem.js b/lib/timeline/component/item/PointItem.js index 83c4e67b..959d22da 100644 --- a/lib/timeline/component/item/PointItem.js +++ b/lib/timeline/component/item/PointItem.js @@ -96,7 +96,6 @@ PointItem.prototype.redraw = function() { // - the item is selected/deselected if (this.dirty) { this._updateContents(this.dom.content); - this._updateTitle(); this._updateDataAttributes(this.dom.point); this._updateStyle(this.dom.point); diff --git a/lib/timeline/component/item/RangeItem.js b/lib/timeline/component/item/RangeItem.js index d432376b..b0d71636 100644 --- a/lib/timeline/component/item/RangeItem.js +++ b/lib/timeline/component/item/RangeItem.js @@ -100,7 +100,6 @@ RangeItem.prototype.redraw = function() { // - the item is selected/deselected if (this.dirty) { this._updateContents(this.dom.content); - this._updateTitle(); this._updateDataAttributes(this.dom.box); this._updateStyle(this.dom.box);