Improve and condense related controls
This commit is contained in:
@@ -34,6 +34,21 @@
|
||||
<span class="icon is-small"><i class="{{ manual_icon_class }}"></i></span>
|
||||
<span>AI Workspace</span>
|
||||
</a>
|
||||
{% if ai_workspace_widget_url %}
|
||||
<button
|
||||
type="button"
|
||||
class="button is-light is-rounded is-small js-widget-spawn-trigger is-hidden"
|
||||
data-widget-url="{{ ai_workspace_widget_url }}"
|
||||
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
||||
hx-get="{{ ai_workspace_widget_url }}"
|
||||
hx-target="#widgets-here"
|
||||
hx-swap="afterend"
|
||||
title="Open AI Person widget here"
|
||||
aria-label="Open AI Person widget here">
|
||||
<span class="icon is-small"><i class="fa-solid fa-table-cells-large"></i></span>
|
||||
<span>Widget</span>
|
||||
</button>
|
||||
{% endif %}
|
||||
{% if render_mode == "page" %}
|
||||
<a class="button is-light is-rounded" href="{{ compose_workspace_url }}">
|
||||
<span class="icon is-small"><i class="fa-solid fa-table-cells-large"></i></span>
|
||||
@@ -109,6 +124,32 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="{{ panel_id }}-lightbox" class="compose-lightbox is-hidden" aria-hidden="true">
|
||||
<button
|
||||
type="button"
|
||||
id="{{ panel_id }}-lightbox-prev"
|
||||
class="compose-lightbox-nav compose-lightbox-prev"
|
||||
aria-label="Previous image">
|
||||
<span class="icon is-small"><i class="fa-solid fa-chevron-left"></i></span>
|
||||
</button>
|
||||
<button type="button" class="compose-lightbox-close" aria-label="Close image preview">
|
||||
<span class="icon is-small"><i class="fa-solid fa-xmark"></i></span>
|
||||
</button>
|
||||
<figure class="compose-lightbox-frame">
|
||||
<img
|
||||
id="{{ panel_id }}-lightbox-image"
|
||||
class="compose-lightbox-image"
|
||||
src=""
|
||||
alt="Conversation attachment preview">
|
||||
</figure>
|
||||
<button
|
||||
type="button"
|
||||
id="{{ panel_id }}-lightbox-next"
|
||||
class="compose-lightbox-nav compose-lightbox-next"
|
||||
aria-label="Next image">
|
||||
<span class="icon is-small"><i class="fa-solid fa-chevron-right"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="{{ panel_id }}-glance"
|
||||
@@ -340,6 +381,86 @@
|
||||
border: 1px solid rgba(0, 0, 0, 0.14);
|
||||
object-fit: cover;
|
||||
background: #f8f8f8;
|
||||
cursor: zoom-in;
|
||||
transition: filter 120ms ease;
|
||||
}
|
||||
#{{ panel_id }} .compose-image:hover {
|
||||
filter: brightness(0.97);
|
||||
}
|
||||
#{{ panel_id }}-lightbox.compose-lightbox {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 160;
|
||||
background: rgba(10, 12, 16, 0.82);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
#{{ panel_id }}-lightbox.compose-lightbox.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
#{{ panel_id }}-lightbox .compose-lightbox-frame {
|
||||
margin: 0;
|
||||
max-width: min(96vw, 70rem);
|
||||
max-height: 88vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#{{ panel_id }}-lightbox .compose-lightbox-image {
|
||||
display: block;
|
||||
max-width: min(96vw, 70rem);
|
||||
max-height: 88vh;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
|
||||
object-fit: contain;
|
||||
background: #111;
|
||||
}
|
||||
#{{ panel_id }}-lightbox .compose-lightbox-close {
|
||||
position: absolute;
|
||||
top: 0.8rem;
|
||||
right: 0.8rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.24);
|
||||
background: rgba(10, 12, 16, 0.62);
|
||||
color: #fff;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
#{{ panel_id }}-lightbox .compose-lightbox-nav {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.24);
|
||||
background: rgba(10, 12, 16, 0.62);
|
||||
color: #fff;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: opacity 120ms ease-out;
|
||||
}
|
||||
#{{ panel_id }}-lightbox .compose-lightbox-prev {
|
||||
left: 0.8rem;
|
||||
}
|
||||
#{{ panel_id }}-lightbox .compose-lightbox-next {
|
||||
right: 0.8rem;
|
||||
}
|
||||
#{{ panel_id }}-lightbox .compose-lightbox-nav:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
#{{ panel_id }} .compose-body {
|
||||
margin: 0 0 0.2rem 0;
|
||||
@@ -687,6 +808,12 @@
|
||||
#{{ panel_id }} .compose-qi-chip .k {
|
||||
color: #657283;
|
||||
font-size: 0.67rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
}
|
||||
#{{ panel_id }} .compose-qi-chip .v {
|
||||
font-size: 0.78rem;
|
||||
@@ -735,6 +862,25 @@
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
}
|
||||
#{{ panel_id }} .compose-qi-doc-dot {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
min-width: 0.5rem;
|
||||
border-radius: 50%;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: #7a94b4;
|
||||
cursor: help;
|
||||
opacity: 0.85;
|
||||
transform: translateY(0.02rem);
|
||||
}
|
||||
#{{ panel_id }} .compose-qi-doc-dot:hover,
|
||||
#{{ panel_id }} .compose-qi-doc-dot:focus-visible {
|
||||
opacity: 1;
|
||||
outline: 1px solid rgba(52, 101, 164, 0.45);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
#{{ panel_id }} .compose-qi-row-meta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -870,7 +1016,14 @@
|
||||
const glanceNode = document.getElementById(panelId + "-glance");
|
||||
const popover = document.getElementById(panelId + "-popover");
|
||||
const popoverBackdrop = document.getElementById(panelId + "-popover-backdrop");
|
||||
const lightbox = document.getElementById(panelId + "-lightbox");
|
||||
const lightboxImage = document.getElementById(panelId + "-lightbox-image");
|
||||
const lightboxPrev = document.getElementById(panelId + "-lightbox-prev");
|
||||
const lightboxNext = document.getElementById(panelId + "-lightbox-next");
|
||||
const csrfToken = "{{ csrf_token }}";
|
||||
if (lightbox && lightbox.parentElement !== document.body) {
|
||||
document.body.appendChild(lightbox);
|
||||
}
|
||||
|
||||
window.giaComposePanels = window.giaComposePanels || {};
|
||||
const previousState = window.giaComposePanels[panelId];
|
||||
@@ -889,13 +1042,19 @@
|
||||
if (previousState && previousState.resizeHandler) {
|
||||
window.removeEventListener("resize", previousState.resizeHandler);
|
||||
}
|
||||
if (previousState && previousState.lightboxKeyHandler) {
|
||||
document.removeEventListener("keydown", previousState.lightboxKeyHandler);
|
||||
}
|
||||
const panelState = {
|
||||
timer: null,
|
||||
polling: false,
|
||||
socket: null,
|
||||
websocketReady: false,
|
||||
activePanel: null,
|
||||
engageToken: ""
|
||||
engageToken: "",
|
||||
lightboxKeyHandler: null,
|
||||
lightboxImages: [],
|
||||
lightboxIndex: -1,
|
||||
};
|
||||
window.giaComposePanels[panelId] = panelState;
|
||||
const triggerButtons = Array.from(panel.querySelectorAll(".js-ai-trigger"));
|
||||
@@ -942,6 +1101,84 @@
|
||||
}
|
||||
return String(Math.floor(ts / 60000));
|
||||
};
|
||||
const collectLightboxImages = function () {
|
||||
return Array.from(thread.querySelectorAll(".compose-image"));
|
||||
};
|
||||
const syncLightboxNav = function () {
|
||||
const total = panelState.lightboxImages.length;
|
||||
const index = panelState.lightboxIndex;
|
||||
if (lightboxPrev) {
|
||||
lightboxPrev.disabled = total < 2 || index <= 0;
|
||||
}
|
||||
if (lightboxNext) {
|
||||
lightboxNext.disabled = total < 2 || index >= (total - 1);
|
||||
}
|
||||
};
|
||||
const openLightboxAt = function (index) {
|
||||
if (!lightbox || !lightboxImage) {
|
||||
return;
|
||||
}
|
||||
const images = collectLightboxImages();
|
||||
if (!images.length) {
|
||||
return;
|
||||
}
|
||||
const safeIndex = Math.max(0, Math.min(Number(index) || 0, images.length - 1));
|
||||
const imageNode = images[safeIndex];
|
||||
const source = String(imageNode.currentSrc || imageNode.src || "").trim();
|
||||
if (!source) {
|
||||
return;
|
||||
}
|
||||
panelState.lightboxImages = images;
|
||||
panelState.lightboxIndex = safeIndex;
|
||||
lightboxImage.src = source;
|
||||
lightbox.classList.remove("is-hidden");
|
||||
lightbox.setAttribute("aria-hidden", "false");
|
||||
syncLightboxNav();
|
||||
};
|
||||
const openLightboxFromElement = function (imageNode) {
|
||||
const images = collectLightboxImages();
|
||||
if (!images.length) {
|
||||
return;
|
||||
}
|
||||
const idx = images.indexOf(imageNode);
|
||||
openLightboxAt(idx >= 0 ? idx : 0);
|
||||
};
|
||||
const stepLightbox = function (delta) {
|
||||
if (!lightbox || lightbox.classList.contains("is-hidden")) {
|
||||
return;
|
||||
}
|
||||
if (!panelState.lightboxImages.length) {
|
||||
panelState.lightboxImages = collectLightboxImages();
|
||||
}
|
||||
if (!panelState.lightboxImages.length) {
|
||||
return;
|
||||
}
|
||||
openLightboxAt(panelState.lightboxIndex + delta);
|
||||
};
|
||||
const closeLightbox = function () {
|
||||
if (!lightbox) {
|
||||
return;
|
||||
}
|
||||
lightbox.classList.add("is-hidden");
|
||||
lightbox.setAttribute("aria-hidden", "true");
|
||||
if (lightboxImage) {
|
||||
lightboxImage.removeAttribute("src");
|
||||
}
|
||||
panelState.lightboxImages = [];
|
||||
panelState.lightboxIndex = -1;
|
||||
syncLightboxNav();
|
||||
};
|
||||
const openLightbox = function (srcValue) {
|
||||
const source = String(srcValue || "").trim();
|
||||
if (!source) {
|
||||
return;
|
||||
}
|
||||
const images = collectLightboxImages();
|
||||
const idx = images.findIndex(function (img) {
|
||||
return String(img.currentSrc || img.src || "").trim() === source;
|
||||
});
|
||||
openLightboxAt(idx >= 0 ? idx : 0);
|
||||
};
|
||||
|
||||
let lastTs = toInt(thread.dataset.lastTs);
|
||||
let glanceState = {
|
||||
@@ -1017,6 +1254,27 @@
|
||||
if (!scope) {
|
||||
return;
|
||||
}
|
||||
scope.querySelectorAll(".compose-image").forEach(function (img) {
|
||||
if (img.dataset.lightboxBound === "1") {
|
||||
return;
|
||||
}
|
||||
img.dataset.lightboxBound = "1";
|
||||
img.setAttribute("role", "button");
|
||||
img.setAttribute("tabindex", "0");
|
||||
img.setAttribute("aria-label", "Open image preview");
|
||||
img.addEventListener("click", function (event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
openLightboxFromElement(img);
|
||||
});
|
||||
img.addEventListener("keydown", function (event) {
|
||||
if (event.key !== "Enter" && event.key !== " ") {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
openLightboxFromElement(img);
|
||||
});
|
||||
});
|
||||
scope.querySelectorAll(".compose-bubble").forEach(function (bubble) {
|
||||
const fallback = bubble.querySelector(".compose-image-fallback");
|
||||
const refresh = function () {
|
||||
@@ -1642,6 +1900,36 @@
|
||||
const docs = Array.isArray(payload.docs) ? payload.docs : [];
|
||||
container.innerHTML = "";
|
||||
|
||||
const docsTooltip = function (title, calculation, psychology) {
|
||||
const parts = [];
|
||||
if (calculation) {
|
||||
parts.push("How it is calculated: " + String(calculation || ""));
|
||||
}
|
||||
if (psychology) {
|
||||
parts.push("Psychological interpretation: " + String(psychology || ""));
|
||||
}
|
||||
if (!parts.length) {
|
||||
return "";
|
||||
}
|
||||
return String(title || "Metric") + " | " + parts.join(" | ");
|
||||
};
|
||||
|
||||
const appendDocDot = function (target, tooltipText, titleText) {
|
||||
if (!target || !tooltipText) {
|
||||
return;
|
||||
}
|
||||
const dot = document.createElement("button");
|
||||
dot.type = "button";
|
||||
dot.className = "compose-qi-doc-dot";
|
||||
dot.title = String(tooltipText || "");
|
||||
dot.setAttribute("aria-label", "Explain " + String(titleText || "metric"));
|
||||
dot.addEventListener("click", function (ev) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
target.appendChild(dot);
|
||||
};
|
||||
|
||||
const stateFaceMeta = function (stateText) {
|
||||
const state = String(stateText || "").toLowerCase();
|
||||
if (state.includes("balanced")) {
|
||||
@@ -1697,28 +1985,67 @@
|
||||
const head = document.createElement("div");
|
||||
head.className = "compose-qi-head";
|
||||
[
|
||||
{ key: "Platform", value: summary.platform || "-" },
|
||||
{
|
||||
key: "Platform",
|
||||
value: summary.platform || "-",
|
||||
docs: summary.platform_docs || {},
|
||||
},
|
||||
{
|
||||
key: "Participant State",
|
||||
value: summary.state || "-",
|
||||
icon: stateFace.icon,
|
||||
className: stateFace.className,
|
||||
docs: summary.state_docs || {},
|
||||
},
|
||||
{
|
||||
key: "Data Points",
|
||||
value: String(summary.snapshot_count || 0),
|
||||
docs: summary.snapshot_docs || {},
|
||||
},
|
||||
{
|
||||
key: "Thread",
|
||||
value: summary.thread || "-",
|
||||
docs: summary.thread_docs || {},
|
||||
},
|
||||
{ key: "Data Points", value: String(summary.snapshot_count || 0) },
|
||||
{ key: "Thread", value: summary.thread || "-" },
|
||||
].forEach(function (pair) {
|
||||
const chip = document.createElement("div");
|
||||
chip.className = "compose-qi-chip";
|
||||
let valueHtml = String(pair.value || "-");
|
||||
|
||||
const key = document.createElement("p");
|
||||
key.className = "k";
|
||||
const keyText = document.createElement("span");
|
||||
keyText.textContent = String(pair.key || "");
|
||||
key.appendChild(keyText);
|
||||
const pairDocs = pair.docs || {};
|
||||
appendDocDot(
|
||||
key,
|
||||
docsTooltip(
|
||||
pair.key,
|
||||
pairDocs.calculation,
|
||||
pairDocs.psychology
|
||||
),
|
||||
pair.key
|
||||
);
|
||||
chip.appendChild(key);
|
||||
|
||||
const value = document.createElement("p");
|
||||
value.className = "v";
|
||||
if (pair.icon) {
|
||||
valueHtml = (
|
||||
'<span class="' + String(pair.className || "") + '">'
|
||||
+ '<span class="icon is-small"><i class="' + String(pair.icon) + '"></i></span>'
|
||||
+ "</span>"
|
||||
+ "<span>" + valueHtml + "</span>"
|
||||
);
|
||||
const iconWrap = document.createElement("span");
|
||||
iconWrap.className = String(pair.className || "");
|
||||
const icon = document.createElement("span");
|
||||
icon.className = "icon is-small";
|
||||
const glyph = document.createElement("i");
|
||||
glyph.className = String(pair.icon || "");
|
||||
icon.appendChild(glyph);
|
||||
iconWrap.appendChild(icon);
|
||||
value.appendChild(iconWrap);
|
||||
}
|
||||
chip.innerHTML = '<p class="k">' + pair.key + "</p>" + '<p class="v">' + valueHtml + "</p>";
|
||||
const valueText = document.createElement("span");
|
||||
valueText.textContent = String(pair.value || "-");
|
||||
value.appendChild(valueText);
|
||||
chip.appendChild(value);
|
||||
|
||||
head.appendChild(chip);
|
||||
});
|
||||
container.appendChild(head);
|
||||
@@ -1734,24 +2061,72 @@
|
||||
rows.forEach(function (row) {
|
||||
const node = document.createElement("article");
|
||||
node.className = "compose-qi-row";
|
||||
node.innerHTML = (
|
||||
'<div class="compose-qi-row-head">'
|
||||
+ '<p class="compose-qi-row-label"><span class="icon is-small"><i class="'
|
||||
+ String(row.icon || "fa-solid fa-square") + '"></i></span><span>'
|
||||
+ String(row.label || "") + "</span></p>"
|
||||
+ '<p class="compose-qi-row-meta"><span>' + String(row.point_count || 0)
|
||||
+ ' points</span><span class="' + String((row.trend || {}).class_name || "")
|
||||
+ '"><span class="icon is-small"><i class="' + String((row.trend || {}).icon || "")
|
||||
+ '"></i></span> ' + String(row.delta_label || "n/a")
|
||||
+ "</span></p></div>"
|
||||
+ '<div class="compose-qi-row-body">'
|
||||
+ '<p class="compose-qi-value">' + String(row.display_value || "-") + "</p>"
|
||||
+ '<p class="' + String(((row.emotion || {}).class_name) || "")
|
||||
+ '" style="margin:0; font-size:0.72rem;">'
|
||||
+ '<span class="icon is-small"><i class="' + String(((row.emotion || {}).icon) || "")
|
||||
+ '"></i></span> ' + String(((row.emotion || {}).label) || "Unknown")
|
||||
+ "</p></div>"
|
||||
|
||||
const rowHead = document.createElement("div");
|
||||
rowHead.className = "compose-qi-row-head";
|
||||
|
||||
const rowLabel = document.createElement("p");
|
||||
rowLabel.className = "compose-qi-row-label";
|
||||
const rowIcon = document.createElement("span");
|
||||
rowIcon.className = "icon is-small";
|
||||
const rowIconGlyph = document.createElement("i");
|
||||
rowIconGlyph.className = String(row.icon || "fa-solid fa-square");
|
||||
rowIcon.appendChild(rowIconGlyph);
|
||||
rowLabel.appendChild(rowIcon);
|
||||
const rowLabelText = document.createElement("span");
|
||||
rowLabelText.textContent = String(row.label || "");
|
||||
rowLabel.appendChild(rowLabelText);
|
||||
appendDocDot(
|
||||
rowLabel,
|
||||
docsTooltip(row.label, row.calculation, row.psychology),
|
||||
row.label
|
||||
);
|
||||
rowHead.appendChild(rowLabel);
|
||||
|
||||
const rowMeta = document.createElement("p");
|
||||
rowMeta.className = "compose-qi-row-meta";
|
||||
const points = document.createElement("span");
|
||||
points.textContent = String(row.point_count || 0) + " points";
|
||||
rowMeta.appendChild(points);
|
||||
const trend = row.trend || {};
|
||||
const trendNode = document.createElement("span");
|
||||
trendNode.className = String(trend.class_name || "");
|
||||
const trendIcon = document.createElement("span");
|
||||
trendIcon.className = "icon is-small";
|
||||
const trendGlyph = document.createElement("i");
|
||||
trendGlyph.className = String(trend.icon || "");
|
||||
trendIcon.appendChild(trendGlyph);
|
||||
trendNode.appendChild(trendIcon);
|
||||
const trendText = document.createTextNode(" " + String(row.delta_label || "n/a"));
|
||||
trendNode.appendChild(trendText);
|
||||
rowMeta.appendChild(trendNode);
|
||||
rowHead.appendChild(rowMeta);
|
||||
node.appendChild(rowHead);
|
||||
|
||||
const rowBody = document.createElement("div");
|
||||
rowBody.className = "compose-qi-row-body";
|
||||
const rowValue = document.createElement("p");
|
||||
rowValue.className = "compose-qi-value";
|
||||
rowValue.textContent = String(row.display_value || "-");
|
||||
rowBody.appendChild(rowValue);
|
||||
|
||||
const emotion = row.emotion || {};
|
||||
const emotionNode = document.createElement("p");
|
||||
emotionNode.className = String(emotion.class_name || "");
|
||||
emotionNode.style.margin = "0";
|
||||
emotionNode.style.fontSize = "0.72rem";
|
||||
const emotionIconWrap = document.createElement("span");
|
||||
emotionIconWrap.className = "icon is-small";
|
||||
const emotionGlyph = document.createElement("i");
|
||||
emotionGlyph.className = String(emotion.icon || "");
|
||||
emotionIconWrap.appendChild(emotionGlyph);
|
||||
emotionNode.appendChild(emotionIconWrap);
|
||||
emotionNode.appendChild(
|
||||
document.createTextNode(" " + String(emotion.label || "Unknown"))
|
||||
);
|
||||
rowBody.appendChild(emotionNode);
|
||||
node.appendChild(rowBody);
|
||||
|
||||
list.appendChild(node);
|
||||
});
|
||||
container.appendChild(list);
|
||||
@@ -1991,6 +2366,53 @@
|
||||
hideAllCards();
|
||||
});
|
||||
}
|
||||
if (lightbox) {
|
||||
if (lightboxPrev) {
|
||||
lightboxPrev.addEventListener("click", function (event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
stepLightbox(-1);
|
||||
});
|
||||
}
|
||||
if (lightboxNext) {
|
||||
lightboxNext.addEventListener("click", function (event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
stepLightbox(1);
|
||||
});
|
||||
}
|
||||
const closeButton = lightbox.querySelector(".compose-lightbox-close");
|
||||
if (closeButton) {
|
||||
closeButton.addEventListener("click", function (event) {
|
||||
event.preventDefault();
|
||||
closeLightbox();
|
||||
});
|
||||
}
|
||||
lightbox.addEventListener("click", function (event) {
|
||||
if (event.target === lightbox) {
|
||||
closeLightbox();
|
||||
}
|
||||
});
|
||||
panelState.lightboxKeyHandler = function (event) {
|
||||
if (lightbox.classList.contains("is-hidden")) {
|
||||
return;
|
||||
}
|
||||
if (event.key === "Escape") {
|
||||
closeLightbox();
|
||||
return;
|
||||
}
|
||||
if (event.key === "ArrowLeft") {
|
||||
event.preventDefault();
|
||||
stepLightbox(-1);
|
||||
return;
|
||||
}
|
||||
if (event.key === "ArrowRight") {
|
||||
event.preventDefault();
|
||||
stepLightbox(1);
|
||||
}
|
||||
};
|
||||
document.addEventListener("keydown", panelState.lightboxKeyHandler);
|
||||
}
|
||||
panelState.resizeHandler = function () {
|
||||
if (!popover || popover.classList.contains("is-hidden")) {
|
||||
return;
|
||||
@@ -2056,6 +2478,9 @@
|
||||
document.body.removeEventListener("composeMessageSent", panelState.eventHandler);
|
||||
document.body.removeEventListener("composeSendResult", panelState.sendResultHandler);
|
||||
document.removeEventListener("mousedown", panelState.docClickHandler);
|
||||
if (panelState.lightboxKeyHandler) {
|
||||
document.removeEventListener("keydown", panelState.lightboxKeyHandler);
|
||||
}
|
||||
if (panelState.socket) {
|
||||
try {
|
||||
panelState.socket.close();
|
||||
@@ -2063,6 +2488,9 @@
|
||||
// Ignore.
|
||||
}
|
||||
}
|
||||
if (lightbox && lightbox.parentElement === document.body) {
|
||||
lightbox.remove();
|
||||
}
|
||||
delete window.giaComposePanels[panelId];
|
||||
return;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user