Skip to content

Commit

Permalink
feat: add a share copy button which copies citation value to clipboard (
Browse files Browse the repository at this point in the history 
#530)

* feat: add a button which copies citation value to clipboard

* style: add citationKey in config and make small code style changes

* fix: show info message on hover and show copied message after clicking the button

* fix: place the tooltip inline with the text and set the message in absolute pos

* chore: restore the icons as they were

* chore: add copy icon and remove some other attributes (like h, w)

* fix: align the icon in the same height as text

* fix: add a new icon

* fix: show the tooltip below the icon

* fix: select the metadata view using conditional filtering on view's connector id

* fix: position the tooltip below the center of the copy button

---------

Co-authored-by: orlinmalkja <[email protected]>
  • Loading branch information
@orlinmalkja
orlinmalkja and orlinmalkja authored Jan 8, 2025
1 parent 22e5160 commit b697eba
Show file tree
Hide file tree
Showing 5 changed files with 289 additions and 177 deletions.
340 changes: 176 additions & 164 deletions examples/ahiqar-arabic-karshuni-local.html
View file
Original file line number Diff line number Diff line change
@@ -1,175 +1,187 @@
<!DOCTYPE html>
<html>
<head><title>TIDO</title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="initial-scale=1,maximum-scale=5,minimum-scale=1,width=device-width">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="dist/tido.css">
<style>
html, body {
margin: 0;
}
#app {
height: 100vh;
}
</style>
</head>
<body>
<noscript><strong>We're sorry but TIDO doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong></noscript>
<head>
<title>TIDO</title>
<meta charset="utf-8" />
<meta name="description" content="" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=5,minimum-scale=1,width=device-width"
/>
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="dist/tido.css" />
<style>
html,
body {
margin: 0;
}
#app {
height: 100vh;
}
</style>
</head>
<body>
<noscript
><strong
>We're sorry but TIDO doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong
></noscript
>

<div id="app"></div>
<script src="dist/tido.js"></script>
<script>
window.addEventListener('load', function () {
window.tido = new window.Tido({
"collection": "http://localhost:8181/ahiqar/textapi/ahiqar/arabic-karshuni/collection.json",
"labels": {
"item": "Sheet",
"manifest": "Manuscript"
},
"colors": {
"forceMode": "light",
"primary": "#1a3771"
},
"panels": [
{
"label": "contents_and_metadata",
"views": [
{
"id": "tree",
"label": "contents",
"connector": {
"id": 1
}
<div id="app"></div>
<script src="dist/tido.js"></script>
<script>
window.addEventListener("load", function () {
window.tido = new window.Tido({
collection:
"http://localhost:8181/ahiqar/textapi/ahiqar/arabic-karshuni/collection.json",
labels: {
item: "Sheet",
manifest: "Manuscript",
},
colors: {
forceMode: "light",
primary: "#1a3771",
},
{
"id": "metadata",
"label": "metadata",
"connector": {
"id": 2,
"options": {
"collection": {
"all": true
panels: [
{
label: "contents_and_metadata",
views: [
{
id: "tree",
label: "contents",
connector: {
id: 1,
},
},
"manifest": {
"all": true
{
id: "metadata",
label: "metadata",
connector: {
id: 2,
options: {
collection: {
all: true,
},
manifest: {
all: true,
},
item: {
all: true,
},
citationKey: "Citation",
},
},
},
"item": {
"all": true
}
}
}
}
]
},
{
"label": "image",
"views": [
{
"id": "image",
"label": "Image",
"connector": {
"id": 3
}
}]
},
{
"label": "text",
"views": [
{
"id": "text1",
"label": "Transcription",
"default": true,
"connector": {
"id": 4,
"options": {
"type": "transcription"
}
}
},
{
"id": "text2",
"label": "Transliteration",
"connector": {
"id": 4,
"options": {
"type": "transliteration"
}
}
}
]
},
{
"label": "annotations",
"views": [
{
"id": "annotations1",
"label": "Editorial",
"connector": {
"id": 5,
"options": {
"types": [
{
"name": "Person",
"icon": "person"
],
},
{
label: "image",
views: [
{
id: "image",
label: "Image",
connector: {
id: 3,
},
{
"name": "Place",
"icon": "marker"
},
],
},
{
label: "text",
views: [
{
id: "text1",
label: "Transcription",
default: true,
connector: {
id: 4,
options: {
type: "transcription",
},
},
{
"name": "Editorial Comment",
"icon": "chat"
},
{
id: "text2",
label: "Transliteration",
connector: {
id: 4,
options: {
type: "transliteration",
},
},
{
"name": "Reference",
"icon": "externalLink"
}
]
}
}
},
{
"id": "annotations2",
"label": "Motif",
"connector": {
"id": 5,
"options": {
"types": [
{
"name": "Motif",
"icon": "pen"
}
]
}
}
},
],
},
{
label: "annotations",
views: [
{
id: "annotations1",
label: "Editorial",
connector: {
id: 5,
options: {
types: [
{
name: "Person",
icon: "person",
},
{
name: "Place",
icon: "marker",
},
{
name: "Editorial Comment",
icon: "chat",
},
{
name: "Reference",
icon: "externalLink",
},
],
},
},
},
{
id: "annotations2",
label: "Motif",
connector: {
id: 5,
options: {
types: [
{
name: "Motif",
icon: "pen",
},
],
},
},
},
{
id: "annotations3",
label: "Variants",
connector: {
id: 6,
},
},
],
},
],
translations: {
en: {
contents_and_metadata: "Contents & Metadata",
next_item: "Next Sheet",
previous_item: "Previous Sheet",
next_manifest: "Next Manuscript",
previous_manifest: "Previous Manuscript",
item: "Sheet",
},
},
{
"id": "annotations3",
"label": "Variants",
"connector": {
"id": 6
}
}
]
}
],
"translations": {
"en": {
"contents_and_metadata": "Contents & Metadata",
"next_item": "Next Sheet",
"previous_item": "Previous Sheet",
"next_manifest": "Next Manuscript",
"previous_manifest": "Previous Manuscript",
"item": "Sheet"
}
}
});
});
</script>
</body>
});
});
</script>
</body>
</html>
Loading

0 comments on commit b697eba

Please sign in to comment.