@syncfusion/ej2-progressbar
Version:
Essential JS 2 ProgressBar Component
253 lines (232 loc) • 11.8 kB
text/typescript
import { Tooltip as SVGTooltip } from '@syncfusion/ej2-svg-base';
import { ProgressBar } from '../progressbar';
import { Animation, AnimationOptions, extend } from '@syncfusion/ej2-base';
import { effect, ProgressLocation} from '../utils/helper';
import { tooltipRender } from './constant';
import { ITooltipRenderEventArgs } from './progress-interface';
import { FontModel } from './progress-base-model';
/**
* class for tooltip.
*/
export class ProgressTooltip {
private control: ProgressBar;
/**
* Constructor for progress tooltip.
*
* @param {ProgressBar} control
*/
constructor(control: ProgressBar) {
this.control = control;
}
// Defines text collection passed to svg tooltip.
private text: string[] = [];
// Represents tooltip control.
private svgTooltip: SVGTooltip;
// Defines formatted text.
private textFormat: string;
// Defines whether the tooltip is rendered or not.
public isRendered: boolean;
// Defines interval to tooltip fadein.
private fadeInInterval: number;
// Defines the previous left value of tooltip.
private previousPosition: number = 0;
/**
* Method to render the tooltip for progress bar.
*/
public tooltip(e?: PointerEvent | TouchEvent): void {
const svgElement: HTMLElement = document.getElementById(this.control.element.id + '_tooltip');
const isTooltip: boolean = (svgElement && parseInt(svgElement.getAttribute('opacity'), 10) > 0);
this.previousPosition = svgElement.style.left ? parseInt(svgElement.style.left, 10) : 0;
this.renderTooltip(e, this.control, !isTooltip);
if (this.control.tooltip.enable && this.control.type === 'Circular' && this.control.animation.enable && !(this.control.tooltip.showTooltipOnHover)) {
svgElement.style.visibility = 'hidden';
const delay : number = this.control.secondaryProgress ? this.control.circular.delay + this.control.animation.duration :
this.control.animation.duration;
this.tooltipDelay(this.control, svgElement, delay);
}
if (this.control.animation.enable && !(this.control.tooltip.showTooltipOnHover) && !(this.control.type === 'Circular')) {
const delay : number = this.control.secondaryProgress ? this.control.linear.delay : this.control.animation.delay;
if (this.control.secondaryProgress) {
svgElement.style.visibility = 'hidden';
}
this.toolTipAnimation(svgElement, this.control, delay);
}
}
/**
* Function to delay tooltip at initial stage of circular progress.
*/
private tooltipDelay(progress: ProgressBar, element: Element, delay: number): void {
const animation: Animation = new Animation({});
animation.animate(<HTMLElement>element, {
duration: progress.animation.duration,
delay: delay,
progress: (args: AnimationOptions): void => {
args.element.style.visibility = 'visible';
}
});
}
/**
* Function to animate tooltip.
*/
private toolTipAnimation(element: HTMLElement, progress: ProgressBar, delay: number): void {
const animation: Animation = new Animation({});
const endValue: number = parseInt(element.style.left, 10);
const tooltipSVG: HTMLElement = document.getElementById(this.control.element.id + '_tooltip_svg');
const width: number = parseInt(tooltipSVG.getAttribute('width'), 10);
animation.animate(<HTMLElement>element, {
duration: progress.animation.duration,
delay: delay,
progress: (args: AnimationOptions): void => {
progress.cancelResize = true;
args.name = 'SlideRight';
if (progress.type === 'Linear') {
if (args.timeStamp >= args.delay) {
args.element.style.visibility = 'visible';
const start: number = this.previousPosition ? this.previousPosition :
(0 - (width / 2 - this.control.progressRect.x - 5));
const end: number = this.previousPosition ? endValue - start :
endValue + (width / 2 - this.control.progressRect.x - 5);
const value: number = effect(args.timeStamp, start, end, args.duration, progress.enableRtl);
args.element.style.left = '';
args.element.style.left = value + 'px'.toString();
}
}
},
end: (args: AnimationOptions) => {
progress.cancelResize = false;
args.element.style.left = '';
args.element.style.left = endValue + 'px'.toString();
}
});
}
private renderTooltip(e: PointerEvent | TouchEvent, chart: ProgressBar, isFirst: boolean): void {
this.textFormat = this.format((this.control.tooltip.showTooltipOnHover) ? (e.target as Element).id.indexOf('Linearbuffer') >= 0 || (e.target as Element).id.indexOf('Circularbuffer') >= 0 ? this.control.secondaryProgress : this.control.value : this.control.value);
this.triggerTooltipRender(e, isFirst, this.textFormat);
}
/**
* Function to get format of tooltip text.
*/
private format(formatValue: number): string {
let currentFormat: string = formatValue.toString();
let value: RegExp;
if (this.control.tooltip.format) {
currentFormat = this.control.tooltip.format;
value = new RegExp('${value' + '}', 'gm');
currentFormat = currentFormat.replace(value.source, formatValue.toString());
}
return currentFormat;
}
/**
* Function to remove tooltip.
*/
public removeTooltip(duration: number): void {
const tooltipElement: HTMLElement = document.getElementById(this.control.element.id + '_tooltip');
if (tooltipElement) {
this.fadeInInterval = +setTimeout(
(): void => {
if (this.svgTooltip) {
this.svgTooltip.fadeOut();
}
},
duration);
}
}
/**
* Function to get arguments of tooltip.
*/
private triggerTooltipRender(e: PointerEvent | TouchEvent, isFirst: boolean, textCollection: string): void {
const padding: number = 5;
const argsData: ITooltipRenderEventArgs = {
cancel: false, name: tooltipRender, text: textCollection + '%'
};
this.control.trigger(tooltipRender, argsData);
textCollection = argsData.text;
if (!argsData.cancel) {
this.text = [].concat(argsData.text);
if (this.control.type === 'Linear') {
const linearEndPointX: number = (this.control.linear.linearProgressWidth - padding / 2 + (this.control.progressRect.x));
const linearEndPointY: number = (this.control.cornerRadius === 'Round4px') ? (this.control.progressRect.y + padding) : (this.control.progressRect.y + (this.control.progressRect.height / 2)) -
(this.control.progressThickness ? this.control.progressThickness : this.control.themeStyle.linearProgressThickness) / 2 +
padding;
this.createTooltip(this.control, isFirst, (this.control.tooltip.enable && !this.control.tooltip.showTooltipOnHover || !((e.target as Element).id.indexOf('Linearbuffer') >= 0)) ? (new ProgressLocation((this.control.cornerRadius === 'Round4px') ? linearEndPointX - padding : linearEndPointX, linearEndPointY)) : (new ProgressLocation(this.control.linear.bufferWidth - (padding / 2) + (this.control.progressRect.x), linearEndPointY)), this.control.initialClipRect);
}
else {
const circularEndPointX: number = this.control.circular.endPosition.x - padding / 2;
const circularEndPointY: number = this.control.circular.endPosition.y + this.control.progressRect.y - padding / 2;
this.createTooltip(this.control, isFirst, (this.control.tooltip.enable && !this.control.tooltip.showTooltipOnHover || !((e.target as Element).id.indexOf('Circularbuffer') >= 0)) ? (new ProgressLocation(circularEndPointX, circularEndPointY)) : (new ProgressLocation(this.control.circular.bufferEndPosition.x - padding / 2, this.control.circular.bufferEndPosition.y + this.control.progressRect.y - padding / 2)), this.control.initialClipRect);
}
}
this.isRendered = true;
}
/**
* Function to pass arguments into svg tooltip.
*
* @param {ProgressBar} chart - The progress bar chart for which the tooltip is being created.
* @param {boolean} isFirst - A flag indicating whether this is the first tooltip.
* @param {ProgressLocation} location - The location where the tooltip should be displayed.
* @param {ProgressLocation} bounds - The bounds within which the tooltip should be confined.
* @returns {void}
* @private
*/
public createTooltip(
chart: ProgressBar, isFirst: boolean, location: ProgressLocation, bounds: ProgressLocation): void {
const tooltipFont: FontModel = extend({}, this.control.tooltip.textStyle, null, true) as FontModel;
tooltipFont.fontWeight = tooltipFont.fontWeight || this.control.themeStyle.tooltipLabelFont.fontWeight;
if (isFirst) {
this.svgTooltip = new SVGTooltip(
{
opacity: this.control.tooltip.textStyle.opacity ? this.control.tooltip.textStyle.opacity : ((this.control.theme === 'Material3' || this.control.theme === 'Material3Dark' || this.control.theme.indexOf('Bootstrap5') > -1) ? 1 : 0.75),
header: '',
content: this.text,
fill: this.control.tooltip.fill,
border: this.control.tooltip.border,
enableAnimation: true,
location: location,
theme: this.control.theme,
areaBounds: bounds,
template: null,
// To set tooltip location.
offset: 7.5,
// To set left and right margin of tooltip.
marginX: 8,
// To set top margin of tooltip.
marginY: 4.5,
textStyle: tooltipFont,
arrowPadding: 7,
availableSize: this.control.progressSize,
duration: 300,
blazorTemplate: { name: 'Template', parent: this.control.tooltip },
controlInstance: this.control,
enableRTL: chart.enableRtl,
controlName: 'Progressbar'
},
'#' + this.control.element.id + '_tooltip');
} else {
if (this.svgTooltip) {
this.svgTooltip.location = location;
this.svgTooltip.content = this.text;
this.svgTooltip.header = '';
this.svgTooltip.offset = 7.5;
this.svgTooltip.textStyle = tooltipFont;
this.svgTooltip.areaBounds = bounds;
this.svgTooltip.arrowPadding = 7;
this.svgTooltip.dataBind();
}
}
}
/**
* Get module name.
*/
protected getModuleName(): string {
return 'ProgressTooltip';
}
/**
* To destroy the annotation.
*
* @returns {void}
* @private
*/
public destroy(): void {
// Destroy method performed here
}
}