Skip to content

Commit 1ce793d

Browse files
SyedIshmumAhnafSyedIshmumAhnaf
committed
refactor(citation): use popover with vertical citation list
Signed-off-by: Syed Ishmum Ahnaf <syedishmum15@gmail.com>
1 parent 6d23c0f commit 1ce793d

3 files changed

Lines changed: 79 additions & 193 deletions

File tree

‎sass/_citation.scss‎

Lines changed: 39 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,6 @@
55
* SPDX-License-Identifier: Apache-2.0
66
*/
77

8-
.cite-checkbox,
9-
.cite-format-radio {
10-
display: none;
11-
}
12-
138
.citation {
149
display: inline-block;
1510
margin-top: 0.5rem;
@@ -34,44 +29,32 @@
3429
}
3530
}
3631

37-
.cite-copy-btn {
38-
font-size: 0.78rem;
39-
cursor: pointer;
40-
}
41-
42-
// overlay
43-
44-
.cite-overlay {
45-
display: none;
46-
position: fixed;
47-
inset: 0;
48-
z-index: 400;
49-
background: rgba(0, 0, 0, 0.5);
50-
cursor: default;
51-
}
52-
53-
// modal
54-
5532
.cite-modal {
56-
display: none;
57-
position: fixed;
58-
inset: 0;
59-
z-index: 800;
60-
pointer-events: none;
61-
align-items: center;
62-
justify-content: center;
33+
inset: 50% auto auto 50%;
34+
width: min(90vw, 640px);
35+
max-height: min(90vh, 44rem);
36+
margin: 0;
37+
padding: 0;
38+
color: var(--color-text);
39+
background: transparent;
40+
border: 0;
41+
overflow: visible;
42+
transform: translate(-50%, -50%);
43+
44+
&::backdrop {
45+
background: rgba(0, 0, 0, 0.5);
46+
}
6347
}
6448

6549
.cite-modal__box {
6650
position: relative;
51+
max-height: min(90vh, 44rem);
52+
overflow-y: auto;
6753
background: #fff;
6854
border: 1px solid var(--borders-color);
6955
border-radius: 8px;
7056
padding: 1.5rem;
71-
max-width: 560px;
72-
width: 90%;
7357
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
74-
pointer-events: auto;
7558

7659
h3 {
7760
margin-top: 0;
@@ -82,141 +65,61 @@
8265
position: absolute;
8366
top: 0.75rem;
8467
right: 1rem;
85-
font-size: 1.25rem;
68+
padding: 0;
8669
color: var(--color-text-light);
87-
cursor: pointer;
70+
background: transparent;
71+
border: 0;
72+
font: inherit;
73+
font-size: 1.25rem;
8874
line-height: 1;
75+
cursor: pointer;
8976

9077
&:hover {
9178
color: var(--color-text);
9279
}
9380
}
9481

95-
.cite-checkbox:checked {
96-
~ .cite-overlay {
97-
display: block;
98-
}
99-
100-
~ .cite-modal {
101-
display: flex;
102-
}
103-
}
104-
105-
// tabs
106-
10782
.cite-formats {
83+
display: grid;
84+
gap: 1rem;
10885
margin-top: 1rem;
10986
}
11087

111-
.cite-format-tab {
112-
margin-right: 0.25rem;
113-
margin-bottom: 0.5rem;
114-
cursor: pointer;
115-
display: inline-block;
116-
font-size: 0.78rem;
117-
font-weight: 600;
118-
background-color: #f0f0f0;
119-
border: 1px solid #d2d2d2;
120-
border-radius: 9999px;
121-
padding: 0.3rem 0.9rem;
122-
text-decoration: none;
123-
transition: background-color 0.15s ease, border-color 0.15s ease;
124-
125-
&:hover {
126-
border-color: var(--color-link);
127-
color: var(--color-link);
128-
}
88+
.cite-panel {
89+
display: grid;
90+
gap: 0.5rem;
12991
}
13092

131-
.cite-panel {
132-
display: none;
93+
.cite-panel__heading {
94+
margin: 0;
95+
color: var(--color-text);
96+
font-size: 0.78rem;
97+
font-weight: 700;
98+
line-height: 1.3;
13399
}
134100

135101
.cite-copy-controls {
136102
display: none;
137103
align-items: center;
138104
gap: 0.5rem;
139105
flex-wrap: wrap;
140-
margin-top: 0.5rem;
141106
}
142107

143108
.citation.cite-copy-enabled .cite-copy-controls {
144109
display: flex;
145110
}
146111

112+
.cite-copy-btn {
113+
font-size: 0.78rem;
114+
cursor: pointer;
115+
}
116+
147117
.cite-copy-status {
148118
color: var(--color-text-light);
149119
font-size: 0.78rem;
150120
min-height: 1em;
151121
}
152122

153-
[id$="-apa"]:checked {
154-
~ [for$="-apa"].cite-format-tab {
155-
border-color: var(--color-link);
156-
color: var(--color-link);
157-
background-color: rgba(0, 152, 212, 0.08);
158-
}
159-
160-
~ .cite-formats .cite-panel--apa,
161-
~ .cite-panel--apa {
162-
display: block;
163-
}
164-
}
165-
166-
[id$="-mla"]:checked {
167-
~ [for$="-mla"].cite-format-tab {
168-
border-color: var(--color-link);
169-
color: var(--color-link);
170-
background-color: rgba(0, 152, 212, 0.08);
171-
}
172-
173-
~ .cite-formats .cite-panel--mla,
174-
~ .cite-panel--mla {
175-
display: block;
176-
}
177-
}
178-
179-
[id$="-chicago"]:checked {
180-
~ [for$="-chicago"].cite-format-tab {
181-
border-color: var(--color-link);
182-
color: var(--color-link);
183-
background-color: rgba(0, 152, 212, 0.08);
184-
}
185-
186-
~ .cite-formats .cite-panel--chicago,
187-
~ .cite-panel--chicago {
188-
display: block;
189-
}
190-
}
191-
192-
[id$="-harvard"]:checked {
193-
~ [for$="-harvard"].cite-format-tab {
194-
border-color: var(--color-link);
195-
color: var(--color-link);
196-
background-color: rgba(0, 152, 212, 0.08);
197-
}
198-
199-
~ .cite-formats .cite-panel--harvard,
200-
~ .cite-panel--harvard {
201-
display: block;
202-
}
203-
}
204-
205-
[id$="-bibtex"]:checked {
206-
~ [for$="-bibtex"].cite-format-tab {
207-
border-color: var(--color-link);
208-
color: var(--color-link);
209-
background-color: rgba(0, 152, 212, 0.08);
210-
}
211-
212-
~ .cite-formats .cite-panel--bibtex,
213-
~ .cite-panel--bibtex {
214-
display: block;
215-
}
216-
}
217-
218-
// text
219-
220123
.cite-text {
221124
font-family: monospace;
222125
font-size: 0.82rem;
@@ -227,6 +130,6 @@
227130
border-radius: 4px;
228131
background: #f9f9f9;
229132
white-space: pre-wrap;
230-
word-break: break-all;
133+
word-break: break-word;
231134
color: var(--color-text);
232135
}

‎static/js/citation.js‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
const RESET_DELAY_MS = 2000;
99

10-
function resetCopyFeedback(button, status, timeoutId) {
10+
function resetCopyFeedback(status, timeoutId) {
1111
status.textContent = "";
1212
if (timeoutId !== undefined) {
1313
window.clearTimeout(timeoutId);
@@ -21,41 +21,42 @@ function scheduleReset(button, status) {
2121
}
2222

2323
const timeoutId = window.setTimeout(() => {
24-
resetCopyFeedback(button, status);
24+
resetCopyFeedback(status);
2525
delete button.dataset.resetTimeoutId;
2626
}, RESET_DELAY_MS);
2727

2828
button.dataset.resetTimeoutId = String(timeoutId);
2929
}
3030

3131
function enableCitationCopy(citation) {
32-
const button = citation.querySelector("[data-cite-copy]");
33-
const status = citation.querySelector(".cite-copy-status");
32+
const buttons = citation.querySelectorAll("[data-cite-copy]");
3433

35-
if (!button || !status) {
34+
if (buttons.length === 0) {
3635
return;
3736
}
3837

3938
citation.classList.add("cite-copy-enabled");
4039

41-
button.addEventListener("click", async () => {
42-
const checkedRadio = citation.querySelector(".cite-format-radio:checked");
43-
const activeFormat = checkedRadio?.dataset.citeFormat;
44-
const text = citation.querySelector(`[data-cite-panel="${activeFormat}"] .cite-text`);
40+
for (const button of buttons) {
41+
button.addEventListener("click", async () => {
42+
const panel = button.closest("[data-cite-panel]");
43+
const text = panel?.querySelector(".cite-text");
44+
const status = panel?.querySelector(".cite-copy-status");
4545

46-
if (!activeFormat || !text) {
47-
return;
48-
}
46+
if (!text || !status) {
47+
return;
48+
}
4949

50-
try {
51-
await navigator.clipboard.writeText(text.textContent.trim());
52-
status.textContent = "Copied";
53-
} catch (error) {
54-
status.textContent = "Copy failed";
55-
}
50+
try {
51+
await navigator.clipboard.writeText(text.textContent.trim());
52+
status.textContent = "Copied";
53+
} catch (error) {
54+
status.textContent = "Copy failed";
55+
}
5656

57-
scheduleReset(button, status);
58-
});
57+
scheduleReset(button, status);
58+
});
59+
}
5960
}
6061

6162
if (window.isSecureContext && navigator.clipboard?.writeText) {

0 commit comments

Comments
 (0)