diff --git a/core/templates/partials/compose-panel.html b/core/templates/partials/compose-panel.html index 534e9ee..236cc1a 100644 --- a/core/templates/partials/compose-panel.html +++ b/core/templates/partials/compose-panel.html @@ -1414,43 +1414,48 @@ }; const collectReplyTimingSnapshot = function () { - const rows = Array.from(thread.querySelectorAll(".compose-row")); - if (!rows.length) { + const rows = thread.querySelectorAll(".compose-row"); + const count = rows ? rows.length : 0; + if (!count) { return null; } - const timeline = rows - .map(function (row, idx) { - return { - ts: toInt(row && row.dataset ? row.dataset.ts : 0), - outgoing: !!(row && row.classList && row.classList.contains("is-out")), - order: idx, - }; - }) - .filter(function (item) { - return item.ts > 0; - }) - .sort(function (left, right) { - if (left.ts === right.ts) { - return left.order - right.order; - } - return left.ts - right.ts; - }); - if (!timeline.length) { + const lastRow = rows[count - 1]; + const lastTs = toInt(lastRow && lastRow.dataset ? lastRow.dataset.ts : 0); + if (!lastTs) { return null; } let counterpartBaselineMs = null; - for (let idx = timeline.length - 1; idx > 0; idx -= 1) { - const current = timeline[idx]; - const previous = timeline[idx - 1]; - if (!current.outgoing && previous.outgoing && current.ts >= previous.ts) { - counterpartBaselineMs = current.ts - previous.ts; + for (let idx = count - 1; idx > 0; idx -= 1) { + const currentRow = rows[idx]; + const previousRow = rows[idx - 1]; + const currentOutgoing = !!( + currentRow + && currentRow.classList + && currentRow.classList.contains("is-out") + ); + const previousOutgoing = !!( + previousRow + && previousRow.classList + && previousRow.classList.contains("is-out") + ); + const currentTs = toInt( + currentRow && currentRow.dataset ? currentRow.dataset.ts : 0 + ); + const previousTs = toInt( + previousRow && previousRow.dataset ? previousRow.dataset.ts : 0 + ); + if (!currentOutgoing && previousOutgoing && currentTs >= previousTs) { + counterpartBaselineMs = currentTs - previousTs; break; } } - const last = timeline[timeline.length - 1]; return { - lastTs: last.ts, - isMyTurn: !last.outgoing, + lastTs: lastTs, + isMyTurn: !( + lastRow + && lastRow.classList + && lastRow.classList.contains("is-out") + ), counterpartBaselineMs: counterpartBaselineMs, }; }; @@ -1497,7 +1502,6 @@ isOverTarget: ratio > 1, }; renderReplyTimingChip(); - ensurePriorityGlanceOrder(); }; const collectLightboxImages = function () { return Array.from(thread.querySelectorAll(".compose-image")); @@ -1880,8 +1884,7 @@ glanceNode.appendChild(chip); }); - renderReplyTimingChip(); - ensurePriorityGlanceOrder(); + renderReplyTimingChip({ placeAfterDelay: true }); if (glanceNode.children.length) { glanceNode.classList.remove("is-hidden"); @@ -1890,34 +1893,11 @@ } }; - const ensurePriorityGlanceOrder = function () { - if (!glanceNode) { - return; - } - const children = Array.from(glanceNode.querySelectorAll(".compose-glance-item")); - const delayChip = children.find(function (chip) { - if (chip.classList.contains("is-delay")) { - return true; - } - const key = chip.querySelector(".compose-glance-key"); - return /^delay$/i.test(String(key ? key.textContent : "").trim()); - }) || null; - const replyChip = glanceNode.querySelector(".compose-glance-item-reply"); - - if (delayChip) { - glanceNode.insertBefore(delayChip, glanceNode.firstChild); - } - if (replyChip && delayChip) { - glanceNode.insertBefore(replyChip, delayChip.nextSibling); - } else if (replyChip) { - glanceNode.insertBefore(replyChip, glanceNode.firstChild); - } - }; - - const renderReplyTimingChip = function () { + const renderReplyTimingChip = function (options) { if (!glanceNode) { return; } + const placeAfterDelay = !!(options && options.placeAfterDelay); let chip = glanceNode.querySelector(".compose-glance-item-reply"); if (!chip) { chip = document.createElement("span"); @@ -1945,6 +1925,15 @@ glanceNode.appendChild(chip); } + if (placeAfterDelay) { + const delayChip = glanceNode.querySelector(".compose-glance-item.is-delay"); + if (delayChip && chip !== delayChip.nextSibling) { + glanceNode.insertBefore(chip, delayChip.nextSibling); + } else if (!delayChip && glanceNode.firstChild !== chip) { + glanceNode.insertBefore(chip, glanceNode.firstChild); + } + } + const valueNode = chip.querySelector('[data-role="reply-value"]'); const fillNode = chip.querySelector('[data-role="reply-fill"]'); if (valueNode) {