@web-widget/web-widget
Version:
Web front-end application container
203 lines (198 loc) • 7.05 kB
JavaScript
import {
__privateAdd,
__privateGet,
__privateMethod,
__privateSet
} from "./chunk-EAUID5A7.js";
// src/inspector.ts
function findContainer(el) {
return el == null ? void 0 : el.closest("web-widget[import]");
}
function findBox(el) {
return getComputedStyle(el).display === "contents" ? el.firstElementChild : el;
}
function openInEditor(path, srcDir) {
const resolvedURL = new URL(path, document.baseURI);
if (resolvedURL.origin === location.origin) {
fetch(`/__open-in-editor?file=${srcDir + resolvedURL.pathname}`);
} else {
location.href = resolvedURL.href;
}
}
var _pressedKeys, _hoveredElement, _HTMLWebWidgetInspectorElement_instances, handleKeyEvent_fn, clearKeys_fn, handleHoverEvent_fn, handleClickEvent_fn, isActive_fn, updateOverlay_fn, showInfo_fn;
var HTMLWebWidgetInspectorElement = class extends HTMLElement {
constructor() {
super(...arguments);
__privateAdd(this, _HTMLWebWidgetInspectorElement_instances);
__privateAdd(this, _pressedKeys, /* @__PURE__ */ new Set());
__privateAdd(this, _hoveredElement);
this.styles = `
web-widget-inspector {
display: contents;
}
web-widget-inspector-overlay {
position: fixed;
background: repeating-linear-gradient(
45deg,
rgba(68, 206, 246, 0.5),
rgba(68, 206, 246, 0.5) 5px,
rgba(255, 255, 255, 0.5) 5px,
rgba(255, 255, 255, 0.5) 10px
);
pointer-events: none;
box-sizing: border-box;
border: 1px solid rgba(68, 206, 246, 0.9);
contain: strict;
cursor: pointer;
z-index: 999999;
}
web-widget-inspector-info {
position: fixed;
bottom: 10px;
right: 10px;
font-family: monospace;
background: #000000c2;
color: white;
padding: 10px 20px;
border-radius: 8px;
box-shadow:
0 20px 25px -5px rgb(0 0 0 / 34%),
0 8px 10px -6px rgb(0 0 0 / 24%);
backdrop-filter: blur(4px);
animation: fadeOut 0.3s 3s ease-in-out forwards;
z-index: 999999;
contain: layout;
}
fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
visibility: hidden;
}
}`;
}
get dir() {
return this.getAttribute("dir") || "";
}
set dir(value) {
this.setAttribute("dir", value);
}
get keys() {
return JSON.parse(this.getAttribute("keys") || "[]");
}
set keys(value) {
this.setAttribute("keys", JSON.stringify(value));
}
connectedCallback() {
__privateMethod(this, _HTMLWebWidgetInspectorElement_instances, showInfo_fn).call(this);
this.appendChild(
Object.assign(document.createElement("style"), {
textContent: this.styles
})
);
this.appendChild(
Object.assign(document.createElement("web-widget-inspector-info"), {
textContent: `Click-to-Source: ${this.keys.join(" + ")}`
})
);
document.addEventListener("keydown", (e) => __privateMethod(this, _HTMLWebWidgetInspectorElement_instances, handleKeyEvent_fn).call(this, e, true), {
capture: true
});
document.addEventListener("keyup", (e) => __privateMethod(this, _HTMLWebWidgetInspectorElement_instances, handleKeyEvent_fn).call(this, e, false), {
capture: true
});
window.addEventListener("blur", __privateMethod(this, _HTMLWebWidgetInspectorElement_instances, clearKeys_fn).bind(this), {
capture: true
});
document.addEventListener("mouseover", __privateMethod(this, _HTMLWebWidgetInspectorElement_instances, handleHoverEvent_fn).bind(this), {
capture: true
});
document.addEventListener("click", __privateMethod(this, _HTMLWebWidgetInspectorElement_instances, handleClickEvent_fn).bind(this), {
capture: true
});
document.addEventListener("contextmenu", __privateMethod(this, _HTMLWebWidgetInspectorElement_instances, clearKeys_fn).bind(this), {
capture: true
});
window.addEventListener("resize", __privateMethod(this, _HTMLWebWidgetInspectorElement_instances, updateOverlay_fn).bind(this));
document.addEventListener("scroll", __privateMethod(this, _HTMLWebWidgetInspectorElement_instances, updateOverlay_fn).bind(this));
}
};
_pressedKeys = new WeakMap();
_hoveredElement = new WeakMap();
_HTMLWebWidgetInspectorElement_instances = new WeakSet();
handleKeyEvent_fn = function(event, add) {
if (add) {
__privateGet(this, _pressedKeys).add(event.code);
} else {
__privateGet(this, _pressedKeys).delete(event.code);
}
__privateMethod(this, _HTMLWebWidgetInspectorElement_instances, updateOverlay_fn).call(this);
};
clearKeys_fn = function() {
__privateGet(this, _pressedKeys).clear();
__privateMethod(this, _HTMLWebWidgetInspectorElement_instances, updateOverlay_fn).call(this);
};
handleHoverEvent_fn = function(event) {
__privateSet(this, _hoveredElement, findContainer(event.target) || void 0);
__privateMethod(this, _HTMLWebWidgetInspectorElement_instances, updateOverlay_fn).call(this);
};
handleClickEvent_fn = function(event) {
if (__privateMethod(this, _HTMLWebWidgetInspectorElement_instances, isActive_fn).call(this)) {
__privateGet(this, _pressedKeys).clear();
const target = findContainer(event.target);
const inspectUrl = target == null ? void 0 : target.getAttribute("import");
if (inspectUrl) {
event.preventDefault();
document.body.style.cursor = "progress";
openInEditor(inspectUrl, this.dir);
}
}
};
isActive_fn = function() {
const activeKeys = Array.from(__privateGet(this, _pressedKeys)).map(
(key) => key.replace(/(Left|Right)$/g, "")
);
return this.keys.every((key) => activeKeys.includes(key));
};
updateOverlay_fn = function() {
let overlay = this.querySelector(
"web-widget-inspector-overlay"
);
if (!overlay) {
overlay = document.createElement("web-widget-inspector-overlay");
overlay.setAttribute("aria-hidden", "true");
this.appendChild(overlay);
}
if (__privateGet(this, _hoveredElement) && __privateMethod(this, _HTMLWebWidgetInspectorElement_instances, isActive_fn).call(this)) {
const rect = findBox(__privateGet(this, _hoveredElement)).getBoundingClientRect();
overlay.style.cssText = `
height: ${rect.height}px;
width: ${rect.width}px;
top: ${rect.top}px;
left: ${rect.left}px;
visibility: visible;
`;
document.body.style.cursor = "pointer";
} else {
overlay.style.cssText = `
height: 0px;
width: 0px;
visibility: hidden;
`;
document.body.style.removeProperty("cursor");
}
};
showInfo_fn = function() {
console.debug(
"%c \u21F1 Web Widget Click-To-Source ",
"background: linear-gradient(315deg,#afd760 25%,#0074a6); color: white; padding: 2px 3px; border-radius: 2px; font-size: 0.8em;",
`Hold-press the ${this.keys.join(" + ")} key${this.keys.length > 1 ? "s" : ""} and click a component to jump directly to the source code in your IDE!`
);
};
customElements.define("web-widget-inspector", HTMLWebWidgetInspectorElement);
export {
HTMLWebWidgetInspectorElement
};
//# sourceMappingURL=inspector.js.map