Repaired last couple of regressions with Phase II Xetthecum viz - che…

…cklist formatting and audio links
IMERSS · Sep 16, 2024 · 21c2fc1 · 21c2fc1
1 parent 87d91b3
commit 21c2fc1
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 14 deletions.
diff --git a/docs/css/xetthecum.css b/docs/css/xetthecum.css
@@ -388,6 +388,10 @@ body {
     border: none;
 }
 
+.imerss-taxonDisplay audio {
+    padding-top: 4px;
+}
+
 .taxonDisplay-row {
     padding-left: 1rem;
     padding-right: 1rem;

diff --git a/docs/js/imerss-viz-all.js b/docs/js/imerss-viz-all.js
diff --git a/docs/js/imerss-viz-all.js.map b/docs/js/imerss-viz-all.js.map
diff --git a/docs/js/imerss-viz-new.js b/docs/js/imerss-viz-new.js
diff --git a/docs/js/imerss-viz-new.js.map b/docs/js/imerss-viz-new.js.map
diff --git a/src/client/css/xetthecum.css b/src/client/css/xetthecum.css
@@ -388,6 +388,10 @@ body {
     border: none;
 }
 
+.imerss-taxonDisplay audio {
+    padding-top: 4px;
+}
+
 .taxonDisplay-row {
     padding-left: 1rem;
     padding-right: 1rem;

diff --git a/src/client/js/checklist.js b/src/client/js/checklist.js
@@ -32,10 +32,9 @@ hortis.checklistItem = function (entry, selectedId, simple) {
     // we promote e.g. a genus-level obs to species level so it appears inline
     const rank = record.rank && !(simple && record.taxonName) ? record.rank : "species";
     const selectedClass = rank === "species" && record.id === selectedId ? " class=\"checklist-selected\"" : "";
-    const header = "<li " + selectedClass + ">";
+    const header = `<li class="checklist-row checklist-rank-${rank}${selectedClass}">`;
     const render = rank === "species" ? hortis.renderSpeciesName : fluid.identity;
-    let name = "<p " + styleprop + rowid + " class=\"checklist-rank-" +
-        rank + "\">" + render(hortis.encodeHTML(hortis.rowToScientific(record))) + "</p>";
+    let name = "<p " + styleprop + rowid + " class=\"checklist-scientific-name\">" + render(hortis.encodeHTML(hortis.rowToScientific(record))) + "</p>";
     if (record.commonName) {
         name += " - <p " + styleprop + rowid + " class=\"checklist-common-name\">" + record.commonName + "</p>";
     }

diff --git a/src/client/js/imerss-viz.js b/src/client/js/imerss-viz.js
@@ -686,24 +686,30 @@ hortis.renderMedia = function (media) {
     return mediaBlocks.join("\n");
 };
 
-hortis.drivePlayer = "<iframe frameborder=\"0\" width=\"360\" height=\"55\" src=\"%url\"></iframe>";
+hortis.drivePlayerTemplate = "<iframe frameborder=\"0\" width=\"360\" height=\"55\" src=\"%url\"></iframe>";
 
+hortis.audioPlayerTemplate = `<audio controls><source src="%url" type="audio/mpeg"></audio>`;
 
 hortis.driveToPreview = function (url) {
     const lastSlash = url.lastIndexOf("/");
     return url.substring(0, lastSlash) + "/preview";
 };
 
+// TODO: Backport of Phase III-style audio links so that we can still view Phase II viz with media
+hortis.renderAudioLinkBackport = function (audioLink) {
+    return audioLink ? fluid.stringTemplate(hortis.audioPlayerTemplate, {
+        url: "https://imerss.github.io/xetthecum-storymap-story/" + audioLink
+    }) : "";
+};
+
 hortis.hulqValues = ["food", "medicinal", "spiritual", "material", "trade", "indicator"];
 
 hortis.hulqValueItem = "<div class=\"imerss-cultural-value\"><div role=\"img\" class=\"imerss-value-%img imerss-cultural-value-img\"></div><div class=\"imerss-cultural-value-text\">%label</div></div>";
 
 hortis.hulqValueBlock = "<div class=\"imerss-cultural-values\">%valueBlocks</div>";
 
 hortis.dumpHulqName = function (row, markup) {
-    const player = row.audioLink ? fluid.stringTemplate(hortis.drivePlayer, {
-        url: hortis.driveToPreview(row.audioLink)
-    }) : "";
+    const player = hortis.renderAudioLinkBackport(row.audioLink);
     const nameRow = hortis.dumpRow("hulqName", row.hulqName + player, markup);
     return nameRow;
 };

diff --git a/src/client/js/new/taxonDisplay.js b/src/client/js/new/taxonDisplay.js
@@ -177,9 +177,9 @@ hortis.hulqValueItem = `
 
 hortis.hulqValueBlock = `<div class="imerss-cultural-values">%valueBlocks</div>`;
 
-hortis.drivePlayer = `<iframe frameborder="0" width="360" height="55" src="%url"></iframe>`;
+hortis.drivePlayerTemplate = `<iframe frameborder="0" width="360" height="55" src="%url"></iframe>`;
 
-hortis.audioPlayer = `<audio controls><source src="%url" type="audio/mpeg"></audio>`;
+hortis.audioPlayerTemplate = `<audio controls><source src="%url" type="audio/mpeg"></audio>`;
 
 hortis.driveToPreview = function (url) {
     const lastSlash = url.lastIndexOf("/");
@@ -188,7 +188,7 @@ hortis.driveToPreview = function (url) {
 
 
 hortis.renderAudioLink = function (audioLink) {
-    return audioLink ? fluid.stringTemplate(hortis.audioPlayer, {
+    return audioLink ? fluid.stringTemplate(hortis.audioPlayerTemplate, {
         url: audioLink
     }) : "";
 };