blob: cd10f4d81908eedc6843d66f1edf025cac5f3bb0 [file] [log] [blame]
/**
* @license
* Copyright 2016 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import '../../../elements/shared/gr-tooltip/gr-tooltip';
import {GrTooltip} from '../../../elements/shared/gr-tooltip/gr-tooltip';
import {fire} from '../../../utils/event-util';
import {css, html, LitElement} from 'lit';
import {customElement, property, query, state} from 'lit/decorators.js';
import {sharedStyles} from '../../../styles/shared-styles';
declare global {
interface HTMLElementTagNameMap {
'gr-selection-action-box': GrSelectionActionBox;
}
interface HTMLElementEventMap {
/** Fired when the comment creation action was taken (click). */
'create-comment-requested': CustomEvent<{}>;
}
}
@customElement('gr-selection-action-box')
export class GrSelectionActionBox extends LitElement {
@query('#tooltip')
tooltip?: GrTooltip;
@property({type: Boolean})
positionBelow = false;
/**
* We need to absolutely position the element before we can show it. So
* initially the tooltip must be invisible.
*/
@state() private invisible = true;
constructor() {
super();
// See https://crbug.com/gerrit/4767
this.addEventListener('mousedown', e => this.handleMouseDown(e));
}
static override get styles() {
return [
sharedStyles,
css`
:host {
cursor: pointer;
font-family: var(--font-family);
position: absolute;
width: 20ch;
}
gr-tooltip[invisible] {
visibility: hidden;
}
`,
];
}
override render() {
return html`
<gr-tooltip
id="tooltip"
?invisible=${this.invisible}
text="Press c to comment"
?position-below=${this.positionBelow}
></gr-tooltip>
`;
}
async placeAbove(el: Text | Element | Range) {
if (!this.tooltip) return;
await this.tooltip.updateComplete;
const rect = this.getTargetBoundingRect(el);
const boxRect = this.tooltip.getBoundingClientRect();
const parentRect = this.getParentBoundingClientRect();
if (parentRect === null) {
return;
}
this.style.top = `${rect.top - parentRect.top - boxRect.height - 6}px`;
this.style.left = `${
rect.left - parentRect.left + (rect.width - boxRect.width) / 2
}px`;
this.invisible = false;
}
async placeBelow(el: Text | Element | Range) {
if (!this.tooltip) return;
await this.tooltip.updateComplete;
const rect = this.getTargetBoundingRect(el);
const boxRect = this.tooltip.getBoundingClientRect();
const parentRect = this.getParentBoundingClientRect();
if (parentRect === null) {
return;
}
this.style.top = `${rect.top - parentRect.top + boxRect.height - 6}px`;
this.style.left = `${
rect.left - parentRect.left + (rect.width - boxRect.width) / 2
}px`;
this.invisible = false;
}
private getParentBoundingClientRect() {
// With native shadow DOM, the parent is the shadow root, not the gr-diff
// element
if (this.parentElement) {
return this.parentElement.getBoundingClientRect();
}
if (this.parentNode !== null) {
return (this.parentNode as ShadowRoot).host.getBoundingClientRect();
}
return null;
}
// visible for testing
getTargetBoundingRect(el: Text | Element | Range) {
let rect;
if (el instanceof Text) {
const range = document.createRange();
range.selectNode(el);
rect = range.getBoundingClientRect();
range.detach();
} else {
rect = el.getBoundingClientRect();
}
return rect;
}
// visible for testing
handleMouseDown(e: MouseEvent) {
if (e.button !== 0) {
return;
} // 0 = main button
e.preventDefault();
e.stopPropagation();
fire(this, 'create-comment-requested', {});
}
}