Upload
diff --git a/src/Dashboard/Storage.ts b/src/Dashboard/Storage.ts
index 3b2053fb..6e017de7 100644
--- a/src/Dashboard/Storage.ts
+++ b/src/Dashboard/Storage.ts
@@ -2,6 +2,7 @@ import { v4 as uuidv4 } from 'uuid';
import PouchDB from 'pouchdb';
import { AllDocs, Doc, uploadsInfo } from '../Types';
import * as localManifest from '../../assets/manifest.json';
+import { restoreHufnagelForStorage } from '../utils/ConvertMei';
export const db = new PouchDB('Neon-User-Storage');
@@ -31,6 +32,7 @@ export function createManifest(
title: string,
mei: File,
bg: File,
+ notationType: string,
): Promise {
return new Promise(async (resolve) => {
const manifest = JSON.parse(JSON.stringify(localManifest));
@@ -38,12 +40,12 @@ export function createManifest(
manifest['title'] = title;
manifest['timestamp'] = new Date().toISOString();
- const meiPromise = new Promise((resolve) => {
+ const meiTextPromise = new Promise((resolve) => {
const meiReader = new FileReader();
meiReader.addEventListener('load', () => {
- resolve(meiReader.result);
+ resolve(meiReader.result as string);
});
- meiReader.readAsDataURL(mei);
+ meiReader.readAsText(mei);
});
const bgPromise = new Promise((resolve) => {
@@ -54,9 +56,22 @@ export function createManifest(
bgReader.readAsDataURL(bg);
});
- const meiUri = await meiPromise;
+ const meiText = await meiTextPromise;
+ const meiUri =
+ 'data:application/mei+xml;base64,' +
+ window.btoa(restoreHufnagelForStorage(meiText, notationType));
const bgUri = await bgPromise;
+ // Pre-seed this folio's LocalSettings entry (keyed by id, same format
+ // LocalSettings itself writes) so the Editing page's notation type
+ // dropdown reflects this choice on first open. The Editing page never
+ // reads @notationtype back out of the MEI to initialize the dropdown -
+ // it relies solely on this per-folio localStorage entry - and by the
+ // time it's loaded there, the MEI's real notationtype has already been
+ // stripped to a generic value for Verovio (see ConvertMei.ts), so it
+ // can't be recovered from the MEI at that point either.
+ window.localStorage.setItem(id, JSON.stringify({ notationType }));
+
manifest['image'] = bgUri;
manifest['mei_annotations'] = [
{
diff --git a/src/Dashboard/UploadArea.ts b/src/Dashboard/UploadArea.ts
index e564c6f1..c26fa1fc 100644
--- a/src/Dashboard/UploadArea.ts
+++ b/src/Dashboard/UploadArea.ts
@@ -15,7 +15,12 @@ async function handleUploadUpdate(
const spinner = document.querySelector('#uploading_spinner');
spinner.classList.add('visible');
- handleUploadAllDocuments(currentFolder)
+ const selectedNotationType: HTMLInputElement = document.querySelector(
+ 'input[name="upload_notation_type"]:checked',
+ );
+ const notationType = selectedNotationType?.value ?? 'square';
+
+ handleUploadAllDocuments(currentFolder, notationType)
.then((results) => {
setTimeout(async () => {
await updateDashboard();
diff --git a/src/Dashboard/UploadTools.ts b/src/Dashboard/UploadTools.ts
index f5f5829d..28502390 100644
--- a/src/Dashboard/UploadTools.ts
+++ b/src/Dashboard/UploadTools.ts
@@ -178,12 +178,13 @@ function createPairedFolio(
export async function handleUploadAllDocuments(
currentFolder: IFolder,
+ notationType: string,
): Promise<{ status: string; value?: string; reason?: any }[]> {
const folioPromises = fm
.getFolios()
.map(async ([name, mei, image]: [string, File, File]) => {
const id = uuidv4();
- return await uploadFolio(id, name, mei, image, currentFolder);
+ return await uploadFolio(id, name, mei, image, currentFolder, notationType);
});
const manuscriptPromises = []; //fm.getManuscripts()
@@ -208,13 +209,14 @@ async function uploadFolio(
mei: File,
image: File,
currentFolder: IFolder,
+ notationType: string,
): Promise {
const newName = fnConflictHandler(
name,
FileSystemTools.getAllNames(currentFolder),
);
return (
- createManifest(id, newName, mei, image)
+ createManifest(id, newName, mei, image, notationType)
.then((manifest) => {
const manifestBlob = new Blob([JSON.stringify(manifest, null, 2)], {
type: 'application/ld+json',
diff --git a/src/DisplayPanel/DisplayControls.ts b/src/DisplayPanel/DisplayControls.ts
index 50791b34..c3d9e79b 100644
--- a/src/DisplayPanel/DisplayControls.ts
+++ b/src/DisplayPanel/DisplayControls.ts
@@ -491,6 +491,48 @@ function setBurgerControls(): void {
});
}
+/**
+ * Set click listeners for Notation Type dropdown (Square / Hufnagel).
+ * Update the stored setting and notify the active view when the type changes.
+ */
+export function setNotationTypeControls(): void {
+ const dropdown = document.getElementById('notation-type-dropdown');
+ const label = document.getElementById('notation-type-label');
+
+ function applyNotationType(type: string): void {
+ label.textContent = `\xA0- ${type[0].toUpperCase() + type.slice(1)}`;
+ setSettings({ notationType: type });
+ document.dispatchEvent(
+ new CustomEvent('notationtypechange', { detail: { type } }),
+ );
+ }
+
+ function notationTypeClickaway(): void {
+ document.body.removeEventListener('click', notationTypeClickaway);
+ dropdown.classList.remove('is-active');
+ }
+
+ document.getElementById('notation-type-button').addEventListener('click', (evt) => {
+ evt.stopPropagation();
+ dropdown.classList.toggle('is-active');
+ if (dropdown.classList.contains('is-active')) {
+ document.body.addEventListener('click', notationTypeClickaway);
+ } else {
+ document.body.removeEventListener('click', notationTypeClickaway);
+ }
+ });
+
+ ['square', 'hufnagel'].forEach((type) => {
+ document.getElementById(`notation-type-${type}`).addEventListener('click', () => {
+ dropdown.classList.remove('is-active');
+ document.body.removeEventListener('click', notationTypeClickaway);
+ applyNotationType(type);
+ });
+ });
+
+ applyNotationType(getSettings().notationType ?? 'square');
+}
+
/**
* Set listener for "Display All" button in Display panel.
*/
@@ -583,6 +625,7 @@ export function initDisplayControls(
setHighlightKeyControls();
setDisplayAllListener();
loadHighlightSettings();
+ setNotationTypeControls();
const displayContents = document.getElementById('displayContents');
const toggleDisplay = document.getElementById('toggleDisplay');
diff --git a/src/DisplayPanel/DisplayPanel.ts b/src/DisplayPanel/DisplayPanel.ts
index aa6096c2..6470766e 100644
--- a/src/DisplayPanel/DisplayPanel.ts
+++ b/src/DisplayPanel/DisplayPanel.ts
@@ -135,7 +135,30 @@ function displayControlsPanel(handleZoom: ZoomHandler): string {
-
+
+
+
Notation Type:
+
+
+
+
+
+
+
`;
+ return `