Skip to content

Commit 35f2005

Browse files
ZwiterrionZwiterrion
committed
add export button on home page and version on footer
1 parent 113da0b commit 35f2005

File tree

9 files changed

+133
-87
lines changed

9 files changed

+133
-87
lines changed

‎src/components/AdnoEditor/AdnoEditor.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,6 @@ class AdnoEditor extends Component {
4646
}
4747
}
4848

49-
console.log(this.props.annotations)
50-
5149
OpenSeadragon.setString("Tooltips.FullPage", this.props.t('editor.fullpage'));
5250
OpenSeadragon.setString("Tooltips.Home", this.props.t('editor.home'));
5351
OpenSeadragon.setString("Tooltips.ZoomIn", this.props.t('editor.zoom_in'));

‎src/components/AdnoUrls/manageUrls.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,6 @@ export function readProjectFromIIIFFormat(props, manifest, translation) {
187187
// }))))
188188

189189
const annotations = manifest.items[0]?.annotations[0].items.flatMap(annotation => {
190-
// console.log(annotation)
191190
if (annotation.body)
192191
return {
193192
// "@context": "http://www.w3.org/ns/anno.jsonld",

‎src/components/Exporter/Exporter.jsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { faDownload, faExternalLink } from "@fortawesome/free-solid-svg-icons";
2+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3+
import { createExportProjectJsonFile } from "../../Utils/utils";
4+
5+
export function ExporterModal({ translate, selectedProject, exportIIIF }) {
6+
return <>
7+
<input type="checkbox" id="my-modal" className="modal-toggle" />
8+
<div className="modal">
9+
<div className="modal-box" style={{ "color": "initial" }}>
10+
<label className="btn btn-square btn-sm"
11+
htmlFor="my-modal"
12+
style={{
13+
position: 'absolute',
14+
top: 12,
15+
right: 12
16+
}}>
17+
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" /></svg>
18+
</label>
19+
<h3 className="font-bold text-lg">{translate('navbar.share_project')}</h3>
20+
<p className="py-4">{translate('navbar.share_project_desc1')}</p>
21+
<p className="pb-4">{translate('navbar.share_project_desc2')}</p>
22+
<p className="pb-4">{translate('navbar.share_project_desc3')}
23+
<a className="adno-link" href="https://adno.app/" target="_blank">
24+
<FontAwesomeIcon icon={faExternalLink} size="lg" /></a>
25+
</p>
26+
<p className="my-3 text-center font-bold">{translate('navbar.export_project_to')}</p>
27+
<div className="flex gap-3 justify-center items-center">
28+
<label className="btn btn-success">
29+
{selectedProject &&
30+
selectedProject.id &&
31+
<a id={"download_btn_" + selectedProject.id}
32+
href={createExportProjectJsonFile(selectedProject.id)}
33+
download={selectedProject.title + ".json"}
34+
title={translate('navbar.download_project')}>
35+
Adno
36+
</a>}
37+
</label>
38+
ou
39+
<label className="btn btn-success" onClick={() => exportIIIF()
40+
.then(manifest => generateInputFilesView(manifest, selectedProject))
41+
}>
42+
{translate('navbar.export_project_to_iiif')}<span className="badge badge-md ms-2">BETA</span>
43+
</label>
44+
</div>
45+
<a id="downloadAnchorElem" className="hidden"></a>
46+
</div>
47+
</div>
48+
</>
49+
}
50+
function generateInputFilesView(manifest, selectedProject) {
51+
const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(manifest, null, 4));
52+
const elt = document.getElementById('downloadAnchorElem');
53+
elt.setAttribute("href", dataStr);
54+
elt.setAttribute("download", `${selectedProject.title}.json`);
55+
elt.click();
56+
}
57+
58+
export function Exporter({ translate, selectedProject, separatedModal, btn, ...props }) {
59+
60+
const exportIIIF = () => {
61+
props.exportIIIF()
62+
.then(manifest => generateInputFilesView(manifest, selectedProject))
63+
}
64+
65+
return <>
66+
{btn ? btn :
67+
<div className="tooltip tooltip-bottom z-50" data-tip={translate('navbar.download_project')}>
68+
<button className="btn navbar-button btn-neutral">
69+
<label htmlFor="my-modal" style={{ "background": "none", "border": "none" }} >
70+
<FontAwesomeIcon icon={faDownload} size="xl" /> </label>
71+
</button>
72+
</div>}
73+
74+
{!separatedModal && <ExporterModal translate={translate} selectedProject={selectedProject} exportIIIF={exportIIIF} />}
75+
</>
76+
}

‎src/components/Home/Home.js‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -130,17 +130,17 @@ class Home extends Component {
130130
</div>
131131

132132
{
133-
process.env.ADNO_FOOTER === "TRUE" &&
134-
<footer className="footer footer-center p-4 bg-base-300 text-base-content">
135-
<div>
136-
{
137-
process.env.ADNO_FOOTER_TEXT ?
138-
<p>{process.env.ADNO_FOOTER_TEXT}</p>
139-
: <p><a href="https://adno.app/" target="_blank">adno.app</a></p>
140-
}
141-
</div>
142-
</footer>
143-
}
133+
process.env.ADNO_FOOTER === "TRUE" ?
134+
<footer className="footer footer-center bg-base-300 text-base-content p-2">
135+
{process.env.ADNO_FOOTER_TEXT ?
136+
<p>{process.env.ADNO_FOOTER_TEXT}</p>
137+
: <p><a href="https://adno.app/" target="_blank">adno.app</a></p>}
138+
<p>Version 1.0.0</p>
139+
</footer>
140+
141+
: <footer className="footer footer-center bg-base-300 text-base-content">
142+
<p className="text-center py-2">Version 1.0.0</p>
143+
</footer>}
144144

145145
</div>
146146

‎src/components/LinkGenerator/LinkGenerator.js‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -71,11 +71,6 @@ function LinkGenerator({ t }) {
7171
{generatedURL}
7272
</pre>
7373
</div>
74-
{/* <button type="submit" className="btn" onClick={() => {
75-
console.log(generatedURL)
76-
}}>
77-
{t('link.generate')}
78-
</button> */}
7974
<CopyButton value={generatedURL} />
8075
</div>
8176
</div>

‎src/components/Project/Navbar/Navbar.js‎

Lines changed: 6 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,14 @@ import { Component } from "react";
44
import { withTranslation } from "react-i18next";
55
import { withRouter } from "react-router";
66
import { Link } from "react-router-dom";
7-
import { createExportProjectJsonFile } from "../../../Utils/utils";
7+
import { Exporter } from "../../Exporter/Exporter";
88

99
class Navbar extends Component {
1010
constructor(props) {
1111
super(props);
1212
}
1313

14-
exportIIIF = () => {
15-
this.props.exportIIIF()
16-
.then(manifest => {
17-
const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(manifest, null, 4));
18-
const elt = document.getElementById('downloadAnchorElem');
19-
elt.setAttribute("href", dataStr);
20-
elt.setAttribute("download", `${this.props.selectedProject.title}.json`);
21-
elt.click();
22-
})
23-
}
14+
2415
render() {
2516
return (
2617
<div className="navbar bg-base-300 text-neutral-content">
@@ -30,7 +21,7 @@ class Navbar extends Component {
3021
}}>
3122
<h1>ADNO</h1>
3223
</Link>
33-
24+
3425

3526
<strong className="ms-3 text-neutral" style={{
3627
maxWidth: 400,
@@ -71,54 +62,9 @@ class Navbar extends Component {
7162
}
7263

7364
<div className="ms-auto flex items-center gap-2">
74-
{/* // Display a modal to download and share the current project */}
75-
<div className="tooltip tooltip-bottom z-50" data-tip={this.props.t('navbar.download_project')}>
76-
<button className="btn navbar-button btn-neutral">
77-
<label htmlFor="my-modal" style={{ "background": "none", "border": "none" }} >
78-
<FontAwesomeIcon icon={faDownload} size="xl" /> </label>
79-
</button>
80-
</div>
81-
82-
<input type="checkbox" id="my-modal" className="modal-toggle" />
83-
<div className="modal">
84-
<div className="modal-box" style={{ "color": "initial" }}>
85-
<label className="btn btn-square btn-sm"
86-
htmlFor="my-modal"
87-
style={{
88-
position: 'absolute',
89-
top: 12,
90-
right: 12
91-
}}>
92-
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" /></svg>
93-
</label>
94-
<h3 className="font-bold text-lg">{this.props.t('navbar.share_project')}</h3>
95-
<p className="py-4">{this.props.t('navbar.share_project_desc1')}</p>
96-
<p className="pb-4">{this.props.t('navbar.share_project_desc2')}</p>
97-
<p className="pb-4">{this.props.t('navbar.share_project_desc3')}
98-
<a className="adno-link" href="https://adno.app/" target="_blank"><FontAwesomeIcon icon={faExternalLink} size="lg" /></a>
99-
</p>
100-
<p className="my-3 text-center font-bold">{this.props.t('navbar.export_project_to')}</p>
101-
<div className="flex gap-3 justify-center items-center">
102-
<label className="btn btn-success">
103-
{this.props.selectedProject &&
104-
this.props.selectedProject.id &&
105-
<a id={"download_btn_" + this.props.selectedProject.id}
106-
href={createExportProjectJsonFile(this.props.selectedProject.id)}
107-
download={this.props.selectedProject.title + ".json"}
108-
title={this.props.t('navbar.download_project')}>
109-
Adno
110-
{/* <FontAwesomeIcon icon={faDownload} size="lg" /> */}
111-
</a>}
112-
</label>
113-
ou
114-
<label className="btn btn-success" onClick={this.exportIIIF}>
115-
{this.props.t('navbar.export_project_to_iiif')}<span className="badge badge-md ms-2">BETA</span>
116-
</label>
117-
</div>
118-
<a id="downloadAnchorElem" className="hidden"></a>
119-
</div>
120-
</div>
121-
65+
<Exporter translate={this.props.t}
66+
selectedProject={this.props.selectedProject}
67+
exportIIIF={this.props.exportIIIF} />
12268

12369
<div className="tooltip tooltip-bottom z-50 ms-auto" data-tip={this.props.editMode ? this.props.t('navbar.edit_project') : this.props.t('navbar.show_metadatas')}>
12470
<button

‎src/components/ProjectView/ProjectView.js‎

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,15 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
99
import Swal from 'sweetalert2';
1010

1111
// Import utils
12-
import { deleteProject, createExportProjectJsonFile, duplicateProject, getAllProjectsFromLS, enhancedFetch, insertInLS, migrateTextBody, buildJsonProjectWithManifest } from "../../Utils/utils";
12+
import { deleteProject, createExportProjectJsonFile, duplicateProject, getAllProjectsFromLS, enhancedFetch, insertInLS, migrateTextBody, buildJsonProjectWithManifest, getProjectSettings } from "../../Utils/utils";
1313

1414
// Import CSS
1515
import "./ProjectView.css";
1616

1717
// Add Internationalization
1818
import { withTranslation } from "react-i18next";
19+
import { Exporter, ExporterModal } from "../Exporter/Exporter";
20+
import { exportToIIIF } from "../../services/iiif/exporter";
1921

2022
class ProjectView extends Component {
2123
constructor(props) {
@@ -201,8 +203,20 @@ class ProjectView extends Component {
201203
}
202204

203205
render() {
204-
// console.log(this.props.project.title, this.props.project.id)
205-
return (
206+
const annotations = JSON.parse(localStorage.getItem(`${this.props.project.id}_annotations`)) || [];
207+
208+
const exportedProject = {
209+
annotations,
210+
selectedProject: this.props.project,
211+
settings: getProjectSettings(this.props.project.id)
212+
}
213+
214+
return <>
215+
<ExporterModal
216+
translate={this.props.t}
217+
selectedProject={this.props.project}
218+
exportIIIF={() => exportToIIIF(exportedProject)} />
219+
206220
<div className="card card-side bg-base-100 shadow-xl project-view-card">
207221
<div className="project-card-img" onClick={() => this.props.history.push(`/project/${this.props.project.id}/view`)}>
208222
<img
@@ -232,18 +246,33 @@ class ProjectView extends Component {
232246
</div>
233247
}
234248
<div className="tooltip" data-tip={this.props.t('project.duplicate')}>
235-
<button type="button" className="btn btn-md btn-outline" onClick={() => this.duplicate(this.props.project.id)}><FontAwesomeIcon icon={faCopy} /></button>
249+
<button type="button" className="btn btn-md btn-outline"
250+
onClick={() => this.duplicate(this.props.project.id)}><FontAwesomeIcon icon={faCopy} /></button>
236251
</div>
237252
<div className="tooltip" data-tip={this.props.t('project.download')}>
238-
<a id={"download_btn_" + this.props.project.id} href={createExportProjectJsonFile(this.props.project.id)} download={this.props.project.title + ".json"} className="btn btn-md btn-outline"> <FontAwesomeIcon icon={faDownload} /> </a>
253+
<Exporter
254+
translate={this.props.t}
255+
selectedProject={this.props.project}
256+
exportIIIF={() => exportToIIIF(exportedProject)}
257+
separatedModal
258+
btn={<>
259+
<button type="button" className="btn btn-md btn-outline me-2" onClick={() => {
260+
document.getElementById('my-modal').click()
261+
}}>
262+
<label htmlFor="my-modal" style={{ pointerEvents: 'none' }}>
263+
<FontAwesomeIcon icon={faDownload} />
264+
</label>
265+
</button>
266+
</>}
267+
/>
239268
</div>
240269
<div className="tooltip" data-tip={this.props.t('project.delete')}>
241270
<button type="button" className="btn btn-md btn-outline btn-error" onClick={() => this.deleteProj(this.props.project.id)}> <FontAwesomeIcon icon={faTrash} /> </button>
242271
</div>
243272
</div>
244273
</div>
245274
</div>
246-
)
275+
</>
247276
}
248277
}
249278

‎src/index.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,11 @@ ul {
7272

7373
footer{
7474
position: fixed;
75-
top: calc(100vh - 52px)
75+
bottom: 0;
76+
}
77+
78+
footer {
79+
row-gap: inherit !important;
7680
}
7781

7882
.a9s-annotationlayer .outline-1px .a9s-inner {

‎src/services/iiif/exporter.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ export const exportToIIIF = async (state) => {
77
settings
88
} = state
99

10-
1110
const adnoSettings = btoa(JSON.stringify(settings, null, 4));
1211

1312
const manifest = await enhancedFetch(selectedProject.manifest_url)

0 commit comments

Comments
 (0)