Update citation helper to also support both "key" and "bibtex-key" attribute names

src/components/d-cite.js

@@ -129,7 +129,9 @@ export class Cite extends T(HTMLElement) {
   }
 
   get keys() {
-    return this.key.split(",");
+    const result = this.key.split(",");
+    console.log(result);
+    return result;
   }
 
   /* Setters & Rendering */

src/controller.js

@@ -12,45 +12,46 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { FrontMatter, mergeFromYMLFrontmatter } from './front-matter';
-import { DMath } from './components/d-math';
-import { collect_citations } from './helpers/citation.js';
-import { domContentLoaded } from './helpers/domContentLoaded.js';
-import { parseFrontmatter } from './components/d-front-matter';
-import optionalComponents from './transforms/optional-components';
+import { FrontMatter, mergeFromYMLFrontmatter } from "./front-matter";
+import { DMath } from "./components/d-math";
+import { collect_citations } from "./helpers/citation.js";
+import { domContentLoaded } from "./helpers/domContentLoaded.js";
+import { parseFrontmatter } from "./components/d-front-matter";
+import optionalComponents from "./transforms/optional-components";
 
 const frontMatter = new FrontMatter();
 
-
 export const Controller = {
-
   frontMatter: frontMatter,
   waitingOn: {
     bibliography: [],
-    citations: [],
+    citations: []
   },
   listeners: {
-
     onCiteKeyCreated(event) {
       const [citeTag, keys] = event.detail;
 
       // ensure we have citations
       if (!frontMatter.citationsCollected) {
         // console.debug('onCiteKeyCreated, but unresolved dependency ("citations"). Enqueing.');
-        Controller.waitingOn.citations.push(() => Controller.listeners.onCiteKeyCreated(event));
+        Controller.waitingOn.citations.push(() =>
+          Controller.listeners.onCiteKeyCreated(event)
+        );
         return;
       }
 
       // ensure we have a loaded bibliography
       if (!frontMatter.bibliographyParsed) {
         // console.debug('onCiteKeyCreated, but unresolved dependency ("bibliography"). Enqueing.');
-        Controller.waitingOn.bibliography.push(() => Controller.listeners.onCiteKeyCreated(event));
+        Controller.waitingOn.bibliography.push(() =>
+          Controller.listeners.onCiteKeyCreated(event)
+        );
         return;
       }
 
-      const numbers = keys.map( key => frontMatter.citations.indexOf(key) );
+      const numbers = keys.map(key => frontMatter.citations.indexOf(key));
       citeTag.numbers = numbers;
-      const entries = keys.map( key => frontMatter.bibliography.get(key) );
+      const entries = keys.map(key => frontMatter.bibliography.get(key));
       citeTag.entries = entries;
     },
 
@@ -65,21 +66,23 @@ export const Controller = {
       }
 
       // update bibliography
-      const citationListTag = document.querySelector('d-citation-list');
-      const bibliographyEntries = new Map(frontMatter.citations.map( citationKey => {
-        return [citationKey, frontMatter.bibliography.get(citationKey)];
-      }));
+      const citationListTag = document.querySelector("d-citation-list");
+      const bibliographyEntries = new Map(
+        frontMatter.citations.map(citationKey => {
+          return [citationKey, frontMatter.bibliography.get(citationKey)];
+        })
+      );
       citationListTag.citations = bibliographyEntries;
 
-      const citeTags = document.querySelectorAll('d-cite');
+      const citeTags = document.querySelectorAll("d-cite");
       for (const citeTag of citeTags) {
+        console.log(citeTag);
         const keys = citeTag.keys;
-        const numbers = keys.map( key => frontMatter.citations.indexOf(key) );
+        const numbers = keys.map(key => frontMatter.citations.indexOf(key));
         citeTag.numbers = numbers;
-        const entries = keys.map( key => frontMatter.bibliography.get(key) );
+        const entries = keys.map(key => frontMatter.bibliography.get(key));
         citeTag.entries = entries;
       }
-
     },
 
     onCiteKeyRemoved(event) {
@@ -87,7 +90,7 @@ export const Controller = {
     },
 
     onBibliographyChanged(event) {
-      const citationListTag = document.querySelector('d-citation-list');
+      const citationListTag = document.querySelector("d-citation-list");
 
       const bibliography = event.detail;
 
@@ -99,19 +102,23 @@ export const Controller = {
 
       // ensure we have citations
       if (!frontMatter.citationsCollected) {
-        Controller.waitingOn.citations.push( function() {
-          Controller.listeners.onBibliographyChanged({target: event.target, detail: event.detail});
+        Controller.waitingOn.citations.push(function() {
+          Controller.listeners.onBibliographyChanged({
+            target: event.target,
+            detail: event.detail
+          });
         });
         return;
       }
 
-
-      if (citationListTag.hasAttribute('distill-prerendered')) {
-        console.debug('Citation list was prerendered; not updating it.');
+      if (citationListTag.hasAttribute("distill-prerendered")) {
+        console.debug("Citation list was prerendered; not updating it.");
       } else {
-        const entries = new Map(frontMatter.citations.map( citationKey => {
-          return [citationKey, frontMatter.bibliography.get(citationKey)];
-        }));
+        const entries = new Map(
+          frontMatter.citations.map(citationKey => {
+            return [citationKey, frontMatter.bibliography.get(citationKey)];
+          })
+        );
         citationListTag.citations = entries;
       }
     },
@@ -119,9 +126,9 @@ export const Controller = {
     onFootnoteChanged() {
       // const footnote = event.detail;
       //TODO: optimize to only update current footnote
-      const footnotesList = document.querySelector('d-footnote-list');
+      const footnotesList = document.querySelector("d-footnote-list");
       if (footnotesList) {
-        const footnotes = document.querySelectorAll('d-footnote');
+        const footnotes = document.querySelectorAll("d-footnote");
         footnotesList.footnotes = footnotes;
       }
     },
@@ -130,25 +137,25 @@ export const Controller = {
       const data = event.detail;
       mergeFromYMLFrontmatter(frontMatter, data);
 
-      const interstitial = document.querySelector('d-interstitial');
+      const interstitial = document.querySelector("d-interstitial");
       if (interstitial) {
-        if (typeof frontMatter.password !== 'undefined') {
+        if (typeof frontMatter.password !== "undefined") {
           interstitial.password = frontMatter.password;
         } else {
           interstitial.parentElement.removeChild(interstitial);
         }
       }
 
-      const prerendered = document.body.hasAttribute('distill-prerendered');
+      const prerendered = document.body.hasAttribute("distill-prerendered");
       if (!prerendered && domContentLoaded()) {
         optionalComponents(document, frontMatter);
 
-        const appendix = document.querySelector('distill-appendix');
+        const appendix = document.querySelector("distill-appendix");
         if (appendix) {
           appendix.frontMatter = frontMatter;
         }
 
-        const byline = document.querySelector('d-byline');
+        const byline = document.querySelector("d-byline");
         if (byline) {
           byline.frontMatter = frontMatter;
         }
@@ -157,25 +164,30 @@ export const Controller = {
           DMath.katexOptions = data.katex;
         }
       }
-
     },
 
     DOMContentLoaded() {
       if (Controller.loaded) {
-        console.warn('Controller received DOMContentLoaded but was already loaded!');
+        console.warn(
+          "Controller received DOMContentLoaded but was already loaded!"
+        );
         return;
       } else if (!domContentLoaded()) {
-        console.warn('Controller received DOMContentLoaded at document.readyState: ' + document.readyState + '!');
+        console.warn(
+          "Controller received DOMContentLoaded at document.readyState: " +
+            document.readyState +
+            "!"
+        );
         return;
       } else {
         Controller.loaded = true;
-        console.debug('Runlevel 4: Controller running DOMContentLoaded');
+        console.debug("Runlevel 4: Controller running DOMContentLoaded");
       }
 
-      const frontMatterTag = document.querySelector('d-front-matter');
+      const frontMatterTag = document.querySelector("d-front-matter");
       if (frontMatterTag) {
         const data = parseFrontmatter(frontMatterTag);
-        Controller.listeners.onFrontMatterChanged({detail: data});
+        Controller.listeners.onFrontMatterChanged({ detail: data });
       }
 
       // Resolving "citations" dependency due to initial DOM load
@@ -191,13 +203,11 @@ export const Controller = {
         }
       }
 
-      const footnotesList = document.querySelector('d-footnote-list');
+      const footnotesList = document.querySelector("d-footnote-list");
       if (footnotesList) {
-        const footnotes = document.querySelectorAll('d-footnote');
+        const footnotes = document.querySelectorAll("d-footnote");
         footnotesList.footnotes = footnotes;
       }
     }
-
-  }, // listeners
-
+  } // listeners
 }; // Controller

src/helpers/citation.js

@@ -16,7 +16,9 @@ export function collect_citations(dom = document) {
   const citations = new Set();
   const citeTags = dom.querySelectorAll("d-cite");
   for (const tag of citeTags) {
-    for (const key of tag.keys) {
+    const keyString = tag.getAttribute("key") || tag.getAttribute("bibtex-key");
+    const keys = keyString.split(",").map(k => k.trim());
+    for (const key of keys) {
       citations.add(key);
     }
   }