224 lines
8.6 KiB
JavaScript
224 lines
8.6 KiB
JavaScript
var __defProp = Object.defineProperty;
|
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
var __export = (target, all) => {
|
|
for (var name in all)
|
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
};
|
|
var __copyProps = (to, from, except, desc) => {
|
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
for (let key of __getOwnPropNames(from))
|
|
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
}
|
|
return to;
|
|
};
|
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
var media_tooltip_exports = {};
|
|
__export(media_tooltip_exports, {
|
|
Attributes: () => Attributes,
|
|
default: () => media_tooltip_default
|
|
});
|
|
module.exports = __toCommonJS(media_tooltip_exports);
|
|
var import_element_utils = require("./utils/element-utils.js");
|
|
var import_server_safe_globals = require("./utils/server-safe-globals.js");
|
|
const Attributes = {
|
|
PLACEMENT: "placement",
|
|
BOUNDS: "bounds"
|
|
};
|
|
const template = import_server_safe_globals.document.createElement("template");
|
|
template.innerHTML = /*html*/
|
|
`
|
|
<style>
|
|
:host {
|
|
--_tooltip-background-color: var(--media-tooltip-background-color, var(--media-secondary-color, rgba(20, 20, 30, .7)));
|
|
--_tooltip-background: var(--media-tooltip-background, var(--_tooltip-background-color));
|
|
--_tooltip-arrow-half-width: calc(var(--media-tooltip-arrow-width, 12px) / 2);
|
|
--_tooltip-arrow-height: var(--media-tooltip-arrow-height, 5px);
|
|
--_tooltip-arrow-background: var(--media-tooltip-arrow-color, var(--_tooltip-background-color));
|
|
position: relative;
|
|
pointer-events: none;
|
|
display: var(--media-tooltip-display, inline-flex);
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
z-index: var(--media-tooltip-z-index, 1);
|
|
background: var(--_tooltip-background);
|
|
color: var(--media-text-color, var(--media-primary-color, rgb(238 238 238)));
|
|
font: var(--media-font,
|
|
var(--media-font-weight, 400)
|
|
var(--media-font-size, 13px) /
|
|
var(--media-text-content-height, var(--media-control-height, 18px))
|
|
var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif));
|
|
padding: var(--media-tooltip-padding, .35em .7em);
|
|
border: var(--media-tooltip-border, none);
|
|
border-radius: var(--media-tooltip-border-radius, 5px);
|
|
filter: var(--media-tooltip-filter, drop-shadow(0 0 4px rgba(0, 0, 0, .2)));
|
|
white-space: var(--media-tooltip-white-space, nowrap);
|
|
}
|
|
|
|
:host([hidden]) {
|
|
display: none;
|
|
}
|
|
|
|
img, svg {
|
|
display: inline-block;
|
|
}
|
|
|
|
#arrow {
|
|
position: absolute;
|
|
width: 0px;
|
|
height: 0px;
|
|
border-style: solid;
|
|
display: var(--media-tooltip-arrow-display, block);
|
|
}
|
|
|
|
:host(:not([placement])),
|
|
:host([placement="top"]) {
|
|
position: absolute;
|
|
bottom: calc(100% + var(--media-tooltip-distance, 12px));
|
|
left: 50%;
|
|
transform: translate(calc(-50% - var(--media-tooltip-offset-x, 0px)), 0);
|
|
}
|
|
:host(:not([placement])) #arrow,
|
|
:host([placement="top"]) #arrow {
|
|
top: 100%;
|
|
left: 50%;
|
|
border-width: var(--_tooltip-arrow-height) var(--_tooltip-arrow-half-width) 0 var(--_tooltip-arrow-half-width);
|
|
border-color: var(--_tooltip-arrow-background) transparent transparent transparent;
|
|
transform: translate(calc(-50% + var(--media-tooltip-offset-x, 0px)), 0);
|
|
}
|
|
|
|
:host([placement="right"]) {
|
|
position: absolute;
|
|
left: calc(100% + var(--media-tooltip-distance, 12px));
|
|
top: 50%;
|
|
transform: translate(0, -50%);
|
|
}
|
|
:host([placement="right"]) #arrow {
|
|
top: 50%;
|
|
right: 100%;
|
|
border-width: var(--_tooltip-arrow-half-width) var(--_tooltip-arrow-height) var(--_tooltip-arrow-half-width) 0;
|
|
border-color: transparent var(--_tooltip-arrow-background) transparent transparent;
|
|
transform: translate(0, -50%);
|
|
}
|
|
|
|
:host([placement="bottom"]) {
|
|
position: absolute;
|
|
top: calc(100% + var(--media-tooltip-distance, 12px));
|
|
left: 50%;
|
|
transform: translate(calc(-50% - var(--media-tooltip-offset-x, 0px)), 0);
|
|
}
|
|
:host([placement="bottom"]) #arrow {
|
|
bottom: 100%;
|
|
left: 50%;
|
|
border-width: 0 var(--_tooltip-arrow-half-width) var(--_tooltip-arrow-height) var(--_tooltip-arrow-half-width);
|
|
border-color: transparent transparent var(--_tooltip-arrow-background) transparent;
|
|
transform: translate(calc(-50% + var(--media-tooltip-offset-x, 0px)), 0);
|
|
}
|
|
|
|
:host([placement="left"]) {
|
|
position: absolute;
|
|
right: calc(100% + var(--media-tooltip-distance, 12px));
|
|
top: 50%;
|
|
transform: translate(0, -50%);
|
|
}
|
|
:host([placement="left"]) #arrow {
|
|
top: 50%;
|
|
left: 100%;
|
|
border-width: var(--_tooltip-arrow-half-width) 0 var(--_tooltip-arrow-half-width) var(--_tooltip-arrow-height);
|
|
border-color: transparent transparent transparent var(--_tooltip-arrow-background);
|
|
transform: translate(0, -50%);
|
|
}
|
|
|
|
:host([placement="none"]) #arrow {
|
|
display: none;
|
|
}
|
|
|
|
</style>
|
|
<slot></slot>
|
|
<div id="arrow"></div>
|
|
`;
|
|
class MediaTooltip extends import_server_safe_globals.globalThis.HTMLElement {
|
|
constructor() {
|
|
super();
|
|
// Adjusts tooltip position relative to the closest specified container
|
|
// such that it doesn't spill out of the left or right sides. Only applies
|
|
// to 'top' and 'bottom' placed tooltips.
|
|
this.updateXOffset = () => {
|
|
var _a;
|
|
if (!(0, import_element_utils.isElementVisible)(this, { checkOpacity: false, checkVisibilityCSS: false }))
|
|
return;
|
|
const placement = this.placement;
|
|
if (placement === "left" || placement === "right") {
|
|
this.style.removeProperty("--media-tooltip-offset-x");
|
|
return;
|
|
}
|
|
const tooltipStyle = getComputedStyle(this);
|
|
const containingEl = (_a = (0, import_element_utils.closestComposedNode)(this, "#" + this.bounds)) != null ? _a : (0, import_element_utils.getMediaController)(this);
|
|
if (!containingEl)
|
|
return;
|
|
const { x: containerX, width: containerWidth } = containingEl.getBoundingClientRect();
|
|
const { x: tooltipX, width: tooltipWidth } = this.getBoundingClientRect();
|
|
const tooltipRight = tooltipX + tooltipWidth;
|
|
const containerRight = containerX + containerWidth;
|
|
const offsetXVal = tooltipStyle.getPropertyValue(
|
|
"--media-tooltip-offset-x"
|
|
);
|
|
const currOffsetX = offsetXVal ? parseFloat(offsetXVal.replace("px", "")) : 0;
|
|
const marginVal = tooltipStyle.getPropertyValue(
|
|
"--media-tooltip-container-margin"
|
|
);
|
|
const currMargin = marginVal ? parseFloat(marginVal.replace("px", "")) : 0;
|
|
const leftDiff = tooltipX - containerX + currOffsetX - currMargin;
|
|
const rightDiff = tooltipRight - containerRight + currOffsetX + currMargin;
|
|
if (leftDiff < 0) {
|
|
this.style.setProperty("--media-tooltip-offset-x", `${leftDiff}px`);
|
|
return;
|
|
}
|
|
if (rightDiff > 0) {
|
|
this.style.setProperty("--media-tooltip-offset-x", `${rightDiff}px`);
|
|
return;
|
|
}
|
|
this.style.removeProperty("--media-tooltip-offset-x");
|
|
};
|
|
if (!this.shadowRoot) {
|
|
this.attachShadow({ mode: "open" });
|
|
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
|
}
|
|
this.arrowEl = this.shadowRoot.querySelector("#arrow");
|
|
if (Object.prototype.hasOwnProperty.call(this, "placement")) {
|
|
const placement = this.placement;
|
|
delete this.placement;
|
|
this.placement = placement;
|
|
}
|
|
}
|
|
static get observedAttributes() {
|
|
return [Attributes.PLACEMENT, Attributes.BOUNDS];
|
|
}
|
|
/**
|
|
* Get or set tooltip placement
|
|
*/
|
|
get placement() {
|
|
return (0, import_element_utils.getStringAttr)(this, Attributes.PLACEMENT);
|
|
}
|
|
set placement(value) {
|
|
(0, import_element_utils.setStringAttr)(this, Attributes.PLACEMENT, value);
|
|
}
|
|
/**
|
|
* Get or set tooltip container ID selector that will constrain the tooltips
|
|
* horizontal position.
|
|
*/
|
|
get bounds() {
|
|
return (0, import_element_utils.getStringAttr)(this, Attributes.BOUNDS);
|
|
}
|
|
set bounds(value) {
|
|
(0, import_element_utils.setStringAttr)(this, Attributes.BOUNDS, value);
|
|
}
|
|
}
|
|
if (!import_server_safe_globals.globalThis.customElements.get("media-tooltip")) {
|
|
import_server_safe_globals.globalThis.customElements.define("media-tooltip", MediaTooltip);
|
|
}
|
|
var media_tooltip_default = MediaTooltip;
|