@web-widget/web-widget
Version:
Web front-end application container
219 lines (214 loc) • 7.92 kB
JavaScript
import {
__privateAdd,
__privateGet,
__privateMethod,
__privateSet
} from "./chunk-PFFVE7GG.js";
// src/inspector.ts
function findContainer(el) {
return el == null ? void 0 : el.closest("web-widget[import]");
}
function findBox(el) {
const display = getComputedStyle(el).display;
const isDisplayContents = display === "contents";
return isDisplayContents ? el.firstElementChild : el;
}
function openInEditor(path, srcDir) {
const resolvedURL = new URL(path, document.baseURI);
if (resolvedURL.origin === location.origin) {
const params = new URLSearchParams();
params.set("file", srcDir + resolvedURL.pathname);
fetch("/__open-in-editor?" + params.toString());
} else {
location.href = resolvedURL.href;
}
}
var _pressedKeys, _hoveredElement, _HTMLWebWidgetInspectorElement_instances, addKeysHandleEvent_fn, deleteKeysHandleEvent_fn, clearKeysHandleEvent_fn, hoveredHandleEvent_fn, clickHandEvent_fn, updateOverlayHandEvent_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() {
const hotKeys = this.keys;
__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: " + hotKeys.join(" + ")
})
);
document.addEventListener("keydown", __privateMethod(this, _HTMLWebWidgetInspectorElement_instances, addKeysHandleEvent_fn).bind(this), {
capture: true
});
document.addEventListener("keyup", __privateMethod(this, _HTMLWebWidgetInspectorElement_instances, deleteKeysHandleEvent_fn).bind(this), {
capture: true
});
window.addEventListener("blur", __privateMethod(this, _HTMLWebWidgetInspectorElement_instances, clearKeysHandleEvent_fn).bind(this), {
capture: true
});
document.addEventListener(
"mouseover",
__privateMethod(this, _HTMLWebWidgetInspectorElement_instances, hoveredHandleEvent_fn).bind(this),
{ capture: true }
);
document.addEventListener("click", __privateMethod(this, _HTMLWebWidgetInspectorElement_instances, clickHandEvent_fn).bind(this), {
capture: true
});
document.addEventListener(
"contextmenu",
__privateMethod(this, _HTMLWebWidgetInspectorElement_instances, clearKeysHandleEvent_fn).bind(this),
{ capture: true }
);
window.addEventListener("resize", __privateMethod(this, _HTMLWebWidgetInspectorElement_instances, updateOverlayHandEvent_fn).bind(this));
document.addEventListener(
"scroll",
__privateMethod(this, _HTMLWebWidgetInspectorElement_instances, updateOverlayHandEvent_fn).bind(this)
);
}
};
_pressedKeys = new WeakMap();
_hoveredElement = new WeakMap();
_HTMLWebWidgetInspectorElement_instances = new WeakSet();
addKeysHandleEvent_fn = function(event) {
__privateGet(this, _pressedKeys).add(event.code);
__privateMethod(this, _HTMLWebWidgetInspectorElement_instances, updateOverlay_fn).call(this);
};
deleteKeysHandleEvent_fn = function(event) {
__privateGet(this, _pressedKeys).delete(event.code);
__privateMethod(this, _HTMLWebWidgetInspectorElement_instances, updateOverlay_fn).call(this);
};
clearKeysHandleEvent_fn = function() {
__privateGet(this, _pressedKeys).clear();
__privateMethod(this, _HTMLWebWidgetInspectorElement_instances, updateOverlay_fn).call(this);
};
hoveredHandleEvent_fn = function(event) {
const target = findContainer(event.target);
if (target) {
__privateSet(this, _hoveredElement, target);
} else {
__privateSet(this, _hoveredElement, void 0);
}
__privateMethod(this, _HTMLWebWidgetInspectorElement_instances, updateOverlay_fn).call(this);
};
clickHandEvent_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.setProperty("cursor", "progress");
openInEditor(inspectUrl, this.dir);
}
}
};
updateOverlayHandEvent_fn = function() {
__privateMethod(this, _HTMLWebWidgetInspectorElement_instances, updateOverlay_fn).call(this);
};
isActive_fn = function() {
const activeKeys = Array.from(__privateGet(this, _pressedKeys)).map(
(key) => key ? key.replace(/(Left|Right)$/g, "") : void 0
);
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.setProperty("height", rect.height + "px");
overlay.style.setProperty("width", rect.width + "px");
overlay.style.setProperty("top", rect.top + "px");
overlay.style.setProperty("left", rect.left + "px");
overlay.style.setProperty("visibility", "visible");
document.body.style.setProperty("cursor", "pointer");
} else {
overlay.style.setProperty("height", "0px");
overlay.style.setProperty("width", "0px");
overlay.style.setProperty("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