mirror of https://github.com/rancher/ui.git
96 lines
2.5 KiB
JavaScript
96 lines
2.5 KiB
JavaScript
import { later, cancel, next } from '@ember/runloop';
|
|
import $ from 'jquery';
|
|
import { observer } from '@ember/object';
|
|
import { inject as service } from '@ember/service';
|
|
import Component from '@ember/component';
|
|
import layout from './template';
|
|
|
|
const DELAY = 100;
|
|
|
|
export default Component.extend({
|
|
tooltipService: service('tooltip'),
|
|
layout,
|
|
classNameBindings: ['inlineBlock:vertical-middle', 'clip:clip'],
|
|
tagName: 'span',
|
|
inlineBlock: false,
|
|
clip: false,
|
|
model: null,
|
|
size: 'default',
|
|
ariaRole: ['tooltip'],
|
|
textChangedEvent: null,
|
|
tooltipFor: null,
|
|
|
|
showTimer: null,
|
|
|
|
textChanged: observer('textChangedEvent', function() {
|
|
this.show(this.get('textChangedEvent'));
|
|
}),
|
|
|
|
modelObserver: observer('model', 'textChangedEvent', function() {
|
|
let opts = this.get('tooltipService.tooltipOpts');
|
|
|
|
if ((opts) && this.get('tooltipFor') === opts.tooltipFor ) {
|
|
next(() => {
|
|
this.set('tooltipService.tooltipOpts.model', this.get('model'));
|
|
});
|
|
}
|
|
}),
|
|
mouseEnter(evt) {
|
|
if ( !this.get('tooltipService.requireClick') ) {
|
|
let tgt = $(evt.currentTarget);
|
|
|
|
if (this.get('tooltipService.tooltipOpts')) {
|
|
this.set('tooltipService.tooltipOpts', null);
|
|
}
|
|
|
|
if (this.get('model')) {
|
|
// Wait for a little bit of time so that the mouse can pass through
|
|
// another tooltip-element on the way to the dropdown trigger of a
|
|
// tooltip-action-menu without changing the tooltip.
|
|
this.set('showTimer', later(() => {
|
|
this.show(tgt);
|
|
}, DELAY));
|
|
}
|
|
}
|
|
},
|
|
|
|
show(node) {
|
|
if ( this.isDestroyed || this.isDestroying ) {
|
|
return;
|
|
}
|
|
|
|
let svc = this.get('tooltipService');
|
|
|
|
this.set('showTimer', null);
|
|
svc.cancelTimer();
|
|
|
|
let out = {
|
|
type: this.get('type'),
|
|
baseClass: this.get('baseClass'),
|
|
eventPosition: node.offset(),
|
|
originalNode: node,
|
|
model: this.get('model'),
|
|
template: this.get('tooltipTemplate'),
|
|
tooltipFor: this.get('tooltipFor'),
|
|
placement: this.get('placement'),
|
|
};
|
|
|
|
if ( this.get('isCopyTo') ) {
|
|
out.isCopyTo = true;
|
|
}
|
|
|
|
svc.set('tooltipOpts', out);
|
|
},
|
|
|
|
mouseLeave() {
|
|
if (!this.get('tooltipService.openedViaContextClick')) {
|
|
if ( this.get('showTimer') ) {
|
|
cancel(this.get('showTimer'));
|
|
} else {
|
|
this.get('tooltipService').leave();
|
|
}
|
|
}
|
|
},
|
|
|
|
});
|