[ADF-1096] added cursor strategy to diagram tooltip (#2227)

* [ADF-1096] - added cursor strategy to diagram tooltip

* [ADF-1096] removed wrong console log

* [ADF-1096] removed wrong console log
This commit is contained in:
Vito 2017-08-17 09:21:59 -07:00 committed by Mario Romano
parent def3cbaee8
commit 22db7bfc08
2 changed files with 14 additions and 5 deletions

View File

@ -93,7 +93,6 @@ export class AnalyticsReportListComponent implements OnInit {
this.reportObserver.next(report); this.reportObserver.next(report);
}); });
if (reportId) { if (reportId) {
console.log('SELEZIONO IL REPORT!');
this.selectReportByReportId(reportId); this.selectReportByReportId(reportId);
} }
if (this.selectFirst) { if (this.selectFirst) {

View File

@ -19,6 +19,7 @@
import { AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild } from '@angular/core'; import { AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild } from '@angular/core';
const POSITION = { BOTTOM: 'bottom', LEFT: 'left', RIGHT: 'right', TOP: 'top'}; const POSITION = { BOTTOM: 'bottom', LEFT: 'left', RIGHT: 'right', TOP: 'top'};
const STRATEGY = { CURSOR: 'cursor', ELEMENT: 'element'};
const IS_ACTIVE_CLASS = 'is-active'; const IS_ACTIVE_CLASS = 'is-active';
@Component({ @Component({
@ -42,6 +43,9 @@ export class DiagramTooltipComponent implements AfterViewInit, OnDestroy {
@Input() @Input()
position: string = 'bottom'; position: string = 'bottom';
@Input()
strategy: string = 'cursor';
/** /**
* Set up event listeners for the target element (defined in the data.id) * Set up event listeners for the target element (defined in the data.id)
*/ */
@ -95,11 +99,17 @@ export class DiagramTooltipComponent implements AfterViewInit, OnDestroy {
* @param event mouseenter/touchend event * @param event mouseenter/touchend event
*/ */
private handleMouseEnter(event): void { private handleMouseEnter(event): void {
const props = event.target.getBoundingClientRect(), let props;
top = props.top + (props.height / 2),
marginLeft = -1 * (this.tooltipElement.offsetWidth / 2),
marginTop = -1 * (this.tooltipElement.offsetHeight / 2);
if(this.strategy === STRATEGY.ELEMENT ) {
props = event.target.getBoundingClientRect();
}else {
props = {top: (event.pageY - 150), left: event.pageX , width: event.layerX, height: 50};
}
let top = props.top + (props.height / 2);
let marginLeft = -1 * (this.tooltipElement.offsetWidth / 2);
let marginTop = -1 * (this.tooltipElement.offsetHeight / 2);
let left = props.left + (props.width / 2); let left = props.left + (props.width / 2);
if (this.position === POSITION.LEFT || this.position === POSITION.RIGHT) { if (this.position === POSITION.LEFT || this.position === POSITION.RIGHT) {