Skip to content

Commit b13dd25

Browse files
committed
Add copy function
Signed-off-by: Jay Wang <jay@zijie.wang>
1 parent 3ce730a commit b13dd25

File tree

3 files changed

+35
-4
lines changed

3 files changed

+35
-4
lines changed

src/components/article/Article.svelte

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,15 @@
1212
import iconDuke from '../../imgs/logo-duke.svg?raw';
1313
import iconUBC from '../../imgs/logo-ubc.svg?raw';
1414
import iconCopy from '../../imgs/icon-copy.svg?raw';
15+
import iconCheckBox from '../../imgs/icon-check-box.svg?raw';
1516
import text from './ArticleText.yml';
1617
1718
let component: HTMLElement | null = null;
1819
let currentPlayer = null;
1920
let curDataset = 'compas';
2021
let timbertrekTransitioning = false;
2122
let showIFrame = false;
23+
let bibtexCopied = false;
2224
2325
const datasets = ['compas', 'fico', 'car evaluation', 'my own set'];
2426
@@ -204,9 +206,26 @@
204206
<p>{@html text.cite['intro']}</p>
205207
<div class="bibtex-block">
206208
{@html text.cite['bibtex']}
207-
<div class="block-overlay">
208-
<span class="svg-icon">{@html iconCopy}</span>
209-
<span>Click to copy</span>
209+
<div
210+
class="block-overlay"
211+
on:click={() => {
212+
navigator.clipboard.writeText(text.cite['bibtex']).then(() => {
213+
bibtexCopied = true;
214+
});
215+
}}
216+
on:mouseleave={() => {
217+
setTimeout(() => {
218+
bibtexCopied = false;
219+
}, 500);
220+
}}
221+
>
222+
{#if bibtexCopied}
223+
<span class="svg-icon">{@html iconCheckBox}</span>
224+
<span>Copied!</span>
225+
{:else}
226+
<span class="svg-icon">{@html iconCopy}</span>
227+
<span>Click to copy</span>
228+
{/if}
210229
</div>
211230
</div>
212231
</div>

src/components/article/ArticleText.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -413,7 +413,7 @@ video {
413413
width: 100%;
414414
height: 100%;
415415
display: flex;
416-
gap: 10px;
416+
gap: 16px;
417417
background-color: hsla(0, 0%, 0%, 0.54);
418418
opacity: 0;
419419
transition: background-color 150ms, opacity 100ms;

src/imgs/icon-check-box.svg

Lines changed: 12 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)