Browse Source

feat(timeline): refactor tooltip to only use one dom-element (#2662)

runTests
Lewis B 7 years ago
committed by Alexander Wunschik
parent
commit
8bd597138a
6 changed files with 22 additions and 43 deletions
  1. +22
    -17
      lib/timeline/component/ItemSet.js
  2. +0
    -1
      lib/timeline/component/item/BackgroundItem.js
  3. +0
    -1
      lib/timeline/component/item/BoxItem.js
  4. +0
    -22
      lib/timeline/component/item/Item.js
  5. +0
    -1
      lib/timeline/component/item/PointItem.js
  6. +0
    -1
      lib/timeline/component/item/RangeItem.js

+ 22
- 17
lib/timeline/component/ItemSet.js View File

@ -157,6 +157,8 @@ function ItemSet(body, options) {
this.selection = []; // list with the ids of all selected nodes this.selection = []; // list with the ids of all selected nodes
this.stackDirty = true; // if true, all items will be restacked on next redraw this.stackDirty = true; // if true, all items will be restacked on next redraw
this.popup = null;
this.touchParams = {}; // stores properties while dragging this.touchParams = {}; // stores properties while dragging
this.groupTouchParams = {}; this.groupTouchParams = {};
// create the HTML DOM // 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 // remove by id here, it is possible that an item has no id defined
// itself, so better not delete by the item itself // itself, so better not delete by the item itself
dataset.remove(id); 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; 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; var container = this.body.dom.centerContainer;
item.popup.setPosition(
this.popup.setPosition(
event.clientX - util.getAbsoluteLeft(container) + container.offsetLeft, event.clientX - util.getAbsoluteLeft(container) + container.offsetLeft,
event.clientY - util.getAbsoluteTop(container) + container.offsetTop 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', { this.body.emitter.emit('itemover', {
@ -1928,8 +1933,8 @@ ItemSet.prototype._onMouseOut = function (event) {
return; return;
} }
if (item.popup != null) {
item.popup.hide();
if (this.popup != null) {
this.popup.hide();
} }
this.body.emitter.emit('itemout', { this.body.emitter.emit('itemout', {
@ -1942,14 +1947,14 @@ ItemSet.prototype._onMouseMove = function (event) {
if (!item) return; if (!item) return;
if (this.options.tooltip.followMouse) { 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; var container = this.body.dom.centerContainer;
item.popup.setPosition(
this.popup.setPosition(
event.clientX - util.getAbsoluteLeft(container) + container.offsetLeft, event.clientX - util.getAbsoluteLeft(container) + container.offsetLeft,
event.clientY - util.getAbsoluteTop(container) + container.offsetTop event.clientY - util.getAbsoluteTop(container) + container.offsetTop
); );
item.popup.show(); // Redraw
this.popup.show(); // Redraw
} }
} }
} }

+ 0
- 1
lib/timeline/component/item/BackgroundItem.js View File

@ -100,7 +100,6 @@ BackgroundItem.prototype.redraw = function() {
// - the item is selected/deselected // - the item is selected/deselected
if (this.dirty) { if (this.dirty) {
this._updateContents(this.dom.content); this._updateContents(this.dom.content);
this._updateTitle();
this._updateDataAttributes(this.dom.content); this._updateDataAttributes(this.dom.content);
this._updateStyle(this.dom.box); this._updateStyle(this.dom.box);

+ 0
- 1
lib/timeline/component/item/BoxItem.js View File

@ -118,7 +118,6 @@ BoxItem.prototype.redraw = function() {
// - the item is selected/deselected // - the item is selected/deselected
if (this.dirty) { if (this.dirty) {
this._updateContents(this.dom.content); this._updateContents(this.dom.content);
this._updateTitle();
this._updateDataAttributes(this.dom.box); this._updateDataAttributes(this.dom.box);
this._updateStyle(this.dom.box); this._updateStyle(this.dom.box);

+ 0
- 22
lib/timeline/component/item/Item.js View File

@ -23,7 +23,6 @@ function Item (data, conversion, options) {
this.displayed = false; this.displayed = false;
this.groupShowing = true; this.groupShowing = true;
this.dirty = true; this.dirty = true;
this.popup = null;
this.top = null; this.top = null;
this.right = 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 * Process dataAttributes timeline option and set as data- attributes on dom.content
* @param {Element} element HTML element to which the attributes will be attached * @param {Element} element HTML element to which the attributes will be attached
@ -498,13 +485,4 @@ Item.prototype.getTitle = function () {
return this.data.title; 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; module.exports = Item;

+ 0
- 1
lib/timeline/component/item/PointItem.js View File

@ -96,7 +96,6 @@ PointItem.prototype.redraw = function() {
// - the item is selected/deselected // - the item is selected/deselected
if (this.dirty) { if (this.dirty) {
this._updateContents(this.dom.content); this._updateContents(this.dom.content);
this._updateTitle();
this._updateDataAttributes(this.dom.point); this._updateDataAttributes(this.dom.point);
this._updateStyle(this.dom.point); this._updateStyle(this.dom.point);

+ 0
- 1
lib/timeline/component/item/RangeItem.js View File

@ -100,7 +100,6 @@ RangeItem.prototype.redraw = function() {
// - the item is selected/deselected // - the item is selected/deselected
if (this.dirty) { if (this.dirty) {
this._updateContents(this.dom.content); this._updateContents(this.dom.content);
this._updateTitle();
this._updateDataAttributes(this.dom.box); this._updateDataAttributes(this.dom.box);
this._updateStyle(this.dom.box); this._updateStyle(this.dom.box);

Loading…
Cancel
Save