alice.pds.demo.boltless.dev
This repository has no description
1{{ define "fragments/line-quote-button" }}
2<button
3 id="line-quote-btn"
4 type="button"
5 aria-label="Quote line in comment"
6 class="hidden fixed z-50 p-0.5 rounded bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-600 cursor-pointer shadow-sm transition-opacity opacity-0 flex flex-col items-start"
7 style="pointer-events: none;"
8>
9 {{ i "message-square-quote" "w-3.5 h-3.5" }}
10 <span id="line-quote-btn-end" class="hidden mt-auto rotate-180 opacity-50">
11 {{ i "message-square-quote" "w-3.5 h-3.5" }}
12 </span>
13</button>
14<script>
15 (() => {
16 const btn = document.getElementById('line-quote-btn');
17 if (!btn) return;
18 const btnEnd = document.getElementById('line-quote-btn-end');
19
20 const textarea = () =>
21 Array.from(document.querySelectorAll('form[hx-post="/comment"] textarea'))
22 .find(ta => ta.offsetParent !== null) || null;
23
24 const lineOf = (el) =>
25 el?.closest?.('span[id*="-O"]')
26 || el?.closest?.('span[id*="-N"]');
27
28 const anchorOf = (el) => {
29 const link = el.querySelector('a[href^="#"]');
30 return link ? link.getAttribute('href').slice(1) : el.id || null;
31 };
32
33 const fileOf = (el) => {
34 const d = el.closest('details[id^="file-"]');
35 return d ? d.id.replace(/^file-/, '') : null;
36 };
37
38 const lineNumOf = (el) => anchorOf(el)?.match(/(\d+)(?:-[ON]?\d+)?$/)?.[1];
39
40 const columnOf = (el) => el.closest('.flex-col');
41
42 const linesInColumn = (col) =>
43 Array.from(col.querySelectorAll('span[id*="-O"], span[id*="-N"]'))
44 .filter(s => s.querySelector('a[href^="#"]'));
45
46 let dragLines = null;
47
48 const rangeBetween = (a, b) => {
49 const col = columnOf(a);
50 if (!col || col !== columnOf(b)) return [];
51 const all = dragLines || linesInColumn(col);
52 const ai = all.indexOf(a);
53 const bi = all.indexOf(b);
54 if (ai === -1 || bi === -1) return [];
55 return all.slice(Math.min(ai, bi), Math.max(ai, bi) + 1);
56 };
57
58 const clearHl = (cls) =>
59 document.querySelectorAll(`.${cls}`).forEach(el => el.classList.remove(cls));
60
61 const applyHl = (a, b, cls) => {
62 clearHl(cls);
63 const sel = rangeBetween(a, b);
64 sel.forEach(el => el.classList.add(cls));
65 return sel;
66 };
67
68 const highlightFromHash = () => {
69 clearHl('line-range-hl');
70 let hash;
71 try { hash = decodeURIComponent(window.location.hash.slice(1)); } catch (e) { return; }
72 if (!hash) return;
73 if (hash.startsWith('comment-') || hash.startsWith('round-')) return;
74 const parts = hash.split('~');
75 const startEl = document.getElementById(parts[0]);
76
77 if (!startEl) {
78 const params = new URLSearchParams(window.location.search);
79 const hasCombined = parts.some(p => /-O\d+-N\d+$/.test(p));
80 if (hasCombined && params.get('diff') !== 'unified') {
81 params.set('diff', 'unified');
82 window.location.replace(
83 `${window.location.pathname}?${params}${window.location.hash}`
84 );
85 }
86 return;
87 }
88
89 const endEl = parts.length === 2 ? document.getElementById(parts[1]) : startEl;
90 if (!endEl) return;
91
92 const details = startEl.closest('details');
93 if (details) details.open = true;
94
95 applyHl(startEl, endEl, 'line-range-hl');
96 requestAnimationFrame(() =>
97 startEl.scrollIntoView({ behavior: 'smooth', block: 'center' }));
98 };
99
100 if (document.readyState === 'loading') {
101 document.addEventListener('DOMContentLoaded', highlightFromHash);
102 } else {
103 highlightFromHash();
104 }
105 window.addEventListener('hashchange', highlightFromHash);
106
107 let dragging = false;
108 let dragAnchor = null;
109 let dragCurrent = null;
110 let hoverTarget = null;
111
112 const commentToggle = () =>
113 document.querySelector('label[for^="comment-toggle-"]');
114
115 const openCommentForm = () => {
116 const ta = textarea();
117 if (ta) return Promise.resolve(ta);
118 const trigger = commentToggle();
119 if (!trigger) return Promise.resolve(null);
120 trigger.click();
121 return new Promise(resolve =>
122 requestAnimationFrame(() => resolve(textarea())));
123 };
124
125 const showBtn = (lineEl) => {
126 if ((!textarea() && !commentToggle()) || !anchorOf(lineEl)) return;
127 const rect = lineEl.getBoundingClientRect();
128 Object.assign(btn.style, {
129 top: `${rect.top + rect.height / 2 - btn.offsetHeight / 2}px`,
130 left: `${rect.left + 4}px`,
131 height: '',
132 opacity: '1',
133 pointerEvents: 'auto',
134 });
135 btn.classList.remove('hidden');
136 };
137
138 const hideBtn = () => {
139 if (dragging) return;
140 Object.assign(btn.style, { opacity: '0', pointerEvents: 'none', height: '' });
141 btnEnd.classList.add('hidden');
142 setTimeout(() => { if (btn.style.opacity === '0') btn.classList.add('hidden'); }, 150);
143 };
144
145 const stretchBtn = (a, b) => {
146 const aRect = a.getBoundingClientRect();
147 const bRect = b.getBoundingClientRect();
148 const top = Math.min(aRect.top, bRect.top);
149 const bottom = Math.max(aRect.bottom, bRect.bottom);
150 const multiLine = a !== b;
151 Object.assign(btn.style, {
152 top: `${top}px`,
153 left: `${aRect.left + 4}px`,
154 height: `${bottom - top}px`,
155 });
156 if (multiLine) { btnEnd.classList.remove('hidden'); }
157 else { btnEnd.classList.add('hidden'); }
158 };
159
160 document.addEventListener('mouseover', (e) => {
161 if (dragging || e.target === btn || btn.contains(e.target)) return;
162 const el = lineOf(e.target);
163 if (el && el !== hoverTarget) { hoverTarget = el; showBtn(el); }
164 });
165
166 document.addEventListener('mouseout', (e) => {
167 if (dragging) return;
168 const el = lineOf(e.target);
169 if (!el || lineOf(e.relatedTarget) === el || e.relatedTarget === btn || btn.contains(e.relatedTarget)) return;
170 hoverTarget = null;
171 hideBtn();
172 });
173
174 btn.addEventListener('mouseleave', (e) => {
175 if (!dragging && !lineOf(e.relatedTarget)) { hoverTarget = null; hideBtn(); }
176 });
177
178 btn.addEventListener('mousedown', (e) => {
179 if (e.button !== 0 || !hoverTarget) return;
180 e.preventDefault();
181 dragging = true;
182 dragAnchor = dragCurrent = hoverTarget;
183 const col = columnOf(hoverTarget);
184 dragLines = col ? linesInColumn(col) : null;
185 applyHl(dragAnchor, dragCurrent, 'line-quote-hl');
186 btn.style.pointerEvents = 'none';
187 document.body.style.userSelect = 'none';
188 });
189
190 document.addEventListener('mousemove', (e) => {
191 if (!dragging) return;
192 const el = lineOf(document.elementFromPoint(e.clientX, e.clientY));
193 if (!el || el === dragCurrent) return;
194 if (columnOf(el) !== columnOf(dragAnchor)) return;
195 dragCurrent = el;
196 applyHl(dragAnchor, dragCurrent, 'line-quote-hl');
197 stretchBtn(dragAnchor, dragCurrent);
198 });
199
200 const insertIntoTextarea = (ta, selected) => {
201 const first = selected[0];
202 const last = selected[selected.length - 1];
203 const fNum = lineNumOf(first);
204 const firstAnchor = anchorOf(first);
205
206 if (!fNum || !firstAnchor) return;
207
208 const file = fileOf(first);
209 const lNum = lineNumOf(last);
210 const lastAnchor = anchorOf(last);
211
212 const label = selected.length === 1
213 ? (file ? `${file}:${fNum}` : `L${fNum}`)
214 : (file ? `${file}:${fNum}-${lNum}` : `L${fNum}-${lNum}`);
215
216 const fragment = selected.length === 1
217 ? firstAnchor
218 : `${firstAnchor}~${lastAnchor}`;
219
220 const linkBase = document.getElementById('round-link-base')?.value
221 || (window.location.pathname + window.location.search);
222 const md = `[\`${label}\`](${linkBase}#${fragment})`;
223
224 const { selectionStart: s, selectionEnd: end, value } = ta;
225 const before = value.slice(0, s);
226 const after = value.slice(end);
227 let pre = '', suf = '';
228 if (s === end && before.length > 0) {
229 const cur = before.slice(before.lastIndexOf('\n') + 1);
230 if (cur.length > 0) {
231 const nextNl = after.indexOf('\n');
232 const rest = nextNl === -1 ? after : after.slice(0, nextNl);
233 if (rest.trim().length === 0) { pre = '\n'; }
234 else { pre = before.endsWith(' ') ? '' : ' '; suf = after.startsWith(' ') ? '' : ' '; }
235 }
236 }
237 ta.value = before + pre + md + suf + after;
238 ta.selectionStart = ta.selectionEnd = s + pre.length + md.length + suf.length;
239 ta.focus();
240 ta.dispatchEvent(new Event('input', { bubbles: true }));
241 };
242
243 document.addEventListener('mouseup', () => {
244 if (!dragging) return;
245 dragging = false;
246 document.body.style.userSelect = '';
247
248 const selected = rangeBetween(dragAnchor, dragCurrent);
249 if (selected.length > 0) {
250 openCommentForm().then(ta => {
251 if (ta) insertIntoTextarea(ta, selected);
252 });
253 }
254
255 clearHl('line-quote-hl');
256 dragLines = null;
257 dragAnchor = dragCurrent = hoverTarget = null;
258 hideBtn();
259 });
260
261 btn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); });
262
263 const cancelDrag = () => {
264 if (!dragging) return;
265 dragging = false;
266 document.body.style.userSelect = '';
267 clearHl('line-quote-hl');
268 dragLines = null;
269 dragAnchor = dragCurrent = hoverTarget = null;
270 hideBtn();
271 };
272 window.addEventListener('blur', cancelDrag);
273 })();
274</script>
275{{ end }}