From ec0a0779f2218f907e2f83c001cda58dbf431dff Mon Sep 17 00:00:00 2001 From: Anders Pettersson <158568901+ra-anders@users.noreply.github.com> Date: Wed, 10 Jul 2024 16:46:37 +0200 Subject: [PATCH] Added copy to clipboard functionality for TextRightPanel. --- .../theme/theme.less | 1 + .../TextRightPanel.ts | 56 ++++++++++++++++++ .../uv-textrightpanel-module/css/styles.less | 37 ++++++++++-- .../img/copy_overlay.png | Bin 0 -> 606 bytes src/uv-iiif-config.json | 3 +- 5 files changed, 90 insertions(+), 7 deletions(-) create mode 100644 src/content-handlers/iiif/modules/uv-textrightpanel-module/img/copy_overlay.png diff --git a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/theme/theme.less b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/theme/theme.less index b5c5a7269..b4912533a 100644 --- a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/theme/theme.less +++ b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/theme/theme.less @@ -1,5 +1,6 @@ @import '../../../modules/uv-dialogues-module/css/styles.less'; @import '../../../modules/uv-moreinforightpanel-module/css/styles.less'; +@import '../../../modules/uv-textrightpanel-module/css/styles.less'; @import '../../../modules/uv-pagingheaderpanel-module/css/styles.less'; @import '../../../modules/uv-openseadragoncenterpanel-module/css/styles.less'; @import '../../../modules/uv-contentleftpanel-module/css/styles.less'; diff --git a/src/content-handlers/iiif/modules/uv-textrightpanel-module/TextRightPanel.ts b/src/content-handlers/iiif/modules/uv-textrightpanel-module/TextRightPanel.ts index 19f5c1455..a0a57c8f9 100644 --- a/src/content-handlers/iiif/modules/uv-textrightpanel-module/TextRightPanel.ts +++ b/src/content-handlers/iiif/modules/uv-textrightpanel-module/TextRightPanel.ts @@ -4,11 +4,15 @@ import { TextRightPanel as TextRightPanelConfig } from "../../BaseConfig"; import { Events } from "../../../../Events"; import OpenSeadragonExtension from "../../extensions/uv-openseadragon-extension/Extension"; import OpenSeadragon from "openseadragon"; +import { Clipboard } from "@edsilv/utils"; export class TextRightPanel extends RightPanel { $transcribedText: JQuery; $existingAnnotation: JQuery = $(); + $copyButton: JQuery; + $copiedText: JQuery; currentCanvasIndex: number = 0; + clipboardText: string = ''; constructor($element: JQuery) { super($element); @@ -19,6 +23,44 @@ export class TextRightPanel extends RightPanel { super.create(); + if (this.config.options.copyToClipboardEnabled && Clipboard.supportsCopy()) { + this.$copyButton = $( + '
' + ); + + this.$copiedText = $( + '
' + + this.config.content.copiedToClipboard + + '
' + ); + this.$copiedText.hide(); + this.$copyButton.hide(); + + this.$copyButton.append(this.$copiedText); + + const that = this; + this.$top.on('mouseenter', () => { + that.$copyButton.show(); + }); + this.$top.on('mouseleave', () => { + that.$copyButton.hide(); + }); + this.$copyButton.on('mouseleave', () => { + that.$copiedText.hide(); + }); + + this.$copyButton.on('click', () => { + let text = that.$transcribedText.attr('data-text'); + this.copyText(text); + }); + + this.$top.append(this.$copyButton); + } + this.extensionHost.on(Events.LOAD, async (e) => { if (this.currentCanvasIndex == this.extension.helper.canvasIndex) { this.$existingAnnotation = $('.lineAnnotation.current'); @@ -28,6 +70,7 @@ export class TextRightPanel extends RightPanel { this.currentCanvasIndex = this.extension.helper.canvasIndex; this.$main.html(''); + this.clipboardText = ''; this.removeLineAnnotationRects(); let canvases = this.extension.getCurrentCanvases(); canvases.sort((a, b) => (a.index as number - b.index as number)); @@ -56,6 +99,7 @@ export class TextRightPanel extends RightPanel { }); this.setTitle(this.config.content.title); + this.$top.parent().addClass('rightTextPanel'); } toggleFinish(): void { @@ -95,6 +139,7 @@ export class TextRightPanel extends RightPanel { const width = Number(e.getAttribute('WIDTH')); const height = Number(e.getAttribute('HEIGHT')); let text = t.join(' '); + this.clipboardText += text; let line = $('

' + text + '

'); @@ -137,6 +182,7 @@ export class TextRightPanel extends RightPanel { } if (lines.length > 0) { this.$transcribedText.append(lines); + this.$transcribedText.attr('data-text', this.clipboardText); } else { this.$transcribedText.append($('
' + this.content.textNotFound + '
')); } @@ -155,6 +201,16 @@ export class TextRightPanel extends RightPanel { } } + copyText(text: string): void { + Clipboard.copy(text); + + this.$copiedText.show(); + + setTimeout(() => { + this.$copiedText.hide(); + }, 2000); + } + setCurrentLineAnnotationRect(e: any): void { $('div.lineAnnotationRect').each((i: Number, lineAnnotationRect: any) => { if ($(lineAnnotationRect).hasClass('current')) { diff --git a/src/content-handlers/iiif/modules/uv-textrightpanel-module/css/styles.less b/src/content-handlers/iiif/modules/uv-textrightpanel-module/css/styles.less index 0311aad74..ac2a34720 100644 --- a/src/content-handlers/iiif/modules/uv-textrightpanel-module/css/styles.less +++ b/src/content-handlers/iiif/modules/uv-textrightpanel-module/css/styles.less @@ -1,10 +1,37 @@ @import "@iiif/iiif-metadata-component/dist-css/styles.less"; .uv { - .rightPanel { + .rightTextPanel { .top { + display: flex; + + .copyText { + position: absolute; + background-image: data-uri('../img/copy_overlay.png') !important; + width: 15px; + height: 15px; + right: 40px; + top: 10px; + cursor: pointer; + } + + .copiedText { + color: @text-color !important; + position: absolute; + top: 18px; + right: -10px; + white-space: nowrap; + padding: 4px; + text-transform: none; + background-color: #343434; + z-index: 1; + border: 1px solid #9a9a9a; + border-radius: 2px; + } + .title { text-transform: uppercase; + position: relative; } } @@ -21,13 +48,11 @@ } .noData { - padding: 0 @padding-medium-horizontal (@padding-medium-vertical * 2) - @padding-medium-horizontal; + padding: 0 @padding-medium-horizontal (@padding-medium-vertical * 2) @padding-medium-horizontal; } .groups { - padding: @padding-medium-vertical @padding-medium-horizontal - (@padding-medium-vertical * 2) @padding-medium-horizontal; + padding: @padding-medium-vertical @padding-medium-horizontal (@padding-medium-vertical * 2) @padding-medium-horizontal; .group { .header { @@ -65,4 +90,4 @@ } } } -} +} \ No newline at end of file diff --git a/src/content-handlers/iiif/modules/uv-textrightpanel-module/img/copy_overlay.png b/src/content-handlers/iiif/modules/uv-textrightpanel-module/img/copy_overlay.png new file mode 100644 index 0000000000000000000000000000000000000000..ed4c3006f4bd06b65b8c78c2967a9955591693e3 GIT binary patch literal 606 zcmV-k0-^nhP)Px#1ZP1_K>z@;j|==^1poj532;bRa{vHDBme+JBmqEY#8dzP0rN>jK~y+TjZ;l) z8etH2*H6?oOC=RVkU-JHUV2gxgc91|A+#3@x#W~Wz*Db<{(#yvKO)d`*y2giB6x{n z1ik1^n2h%)B$R+;BKNs8*}jilRKxb$!MGkh;U+ zkfPD(TZ_dqHSGXbC=_n3R;%XqdM_ad;PK#V-EQ}}+wK15a=H4Xv)ODTzu%wZd0u5) z6PL|qR_DXv@EecEbA#C)jYgwq zi^bwGDzRWJ3Uk~5g3s}8J1q!P{Xx6kevNIq3WY*RK@gg-ubN8P01g{@iXZC52ANQ= s*WdN~{r6amALPu`D>C|`h@yD@8?0vl?M^G0ZvX%Q07*qoM6N<$f~Ry7MF0Q* literal 0 HcmV?d00001 diff --git a/src/uv-iiif-config.json b/src/uv-iiif-config.json index 96a07e4e2..8fe8b28e0 100644 --- a/src/uv-iiif-config.json +++ b/src/uv-iiif-config.json @@ -63,7 +63,8 @@ }, "textRightPanel": { "options": { - "panelExpandedWidth": 270 + "panelExpandedWidth": 270, + "copyToClipboardEnabled": true } }, "moreInfoRightPanel": {