[#229][Crum/Flashcards] Add Classes to the Output HTML.

We add the following classes: - "root-type" refers to the root type. - "marcion" refers to the full entry block. - "meaning" refers to the meaning block. - "dictionary" refers to the dictionary pages blocks. - "crum" refers to the string "Crum". - "dawoud" refers to the string "Dawoud". - "dawoud-page-external" refers to the Dawoud page numbers right beneath the scans. - "dawoud-page-img" refers to the Dawoud page images. NOTE: "dawoud-page-external" uses to refer to the images. We modify it to maintain consistency with Crum.
pishoyg · Sep 4, 2024 · 907c378 · 907c378
1 parent 5ce9d85
commit 907c378
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 16 deletions.
diff --git a/flashcards/constants.py b/flashcards/constants.py
@@ -216,22 +216,24 @@ def _explanatory_alt(path: str) -> str:
             field.cat(
                 # Type.
                 field.fmt(
-                    "(<b>{type_parsed}</b>)",
+                    '(<b><span class="root-type">{type_parsed}</span></b>)',
                     {"type_parsed": roots_col("type-parsed")},
                 ),
                 "<br/>",
                 # Meaning.
+                '<span class="meaning">',
                 field.apl(
                     greek,
                     roots_col("en-parsed", line_br=True, force=False),
                 ),
+                "</span>",
                 "<br/>",
                 # Dictionary pages.
                 field.cat(
-                    '<span class="right">',
+                    '<span class="right dictionary">',
                     field.cat(
                         field.aon(
-                            '<b><a href="#crum" class="hover-link">Crum: </a></b>',
+                            '<b><a href="#crum" class="crum hover-link">Crum: </a></b>',
                             field.fmt(
                                 '<span class="crum-page">{crum}</span>',
                                 {"crum": roots_col("crum", force=False)},
@@ -241,7 +243,7 @@ def _explanatory_alt(path: str) -> str:
                         ),
                         field.aon(
                             "<br/>",
-                            '<b><a href="#dawoud" class="hover-link">Dawoud: </a></b>',
+                            '<b><a href="#dawoud" class="dawoud hover-link">Dawoud: </a></b>',
                             field.apl(
                                 lambda pages: DICTIONARY_PAGE_RE.sub(
                                     r'<span class="dawoud-page">\1</span>',
@@ -281,7 +283,9 @@ def _explanatory_alt(path: str) -> str:
                 # Horizontal line.
                 "<hr/>",
                 # Full entry.
+                '<span class="marcion">',
                 roots_col("word-parsed-classify", line_br=True),
+                "</span>",
                 # Derivations.
                 field.apl(
                     greek,
@@ -290,9 +294,9 @@ def _explanatory_alt(path: str) -> str:
                 # Crum's pages.
                 field.aon(
                     "<hr/>",
-                    '<span id="crum" class="right">',
+                    '<span id="crum" class="right dictionary">',
                     field.aon(
-                        "<b>Crum: </b>",
+                        '<b><span class="crum">Crum: </span></b>',
                         field.apl(
                             lambda pages: INTEGER_RE.sub(
                                 r'<span class="crum-page">\1</span>',
@@ -311,8 +315,8 @@ def _explanatory_alt(path: str) -> str:
                             ],
                         ),
                         fmt_args=lambda path: {
-                            "caption": '<span class="crum-page-external">{crum}</span>'.format(
-                                crum=int(utils.stem(path)) - 20,
+                            "caption": '<span class="crum-page-external">{page_num}</span>'.format(
+                                page_num=int(utils.stem(path)) - 20,
                             ),
                             "id": f"crum{int(utils.stem(path)) - 20}",
                             "class": "crum-page-img",
@@ -325,9 +329,9 @@ def _explanatory_alt(path: str) -> str:
                 # Dawoud's pages.
                 field.aon(
                     "<hr/>",
-                    '<span id="dawoud" class="right">',
+                    '<span id="dawoud" class="right dictionary">',
                     field.aon(
-                        "<b>Dawoud: </b>",
+                        '<b><span class="dawoud">Dawoud: </span></b>',
                         field.apl(
                             lambda pages: DICTIONARY_PAGE_RE.sub(
                                 r'<span class="dawoud-page">\1</span>',
@@ -344,9 +348,11 @@ def _explanatory_alt(path: str) -> str:
                             for k in _page_numbers(page_ranges=page_ranges)
                         ],
                         fmt_args=lambda path: {
-                            "caption": int(utils.stem(path)) - 16,
+                            "caption": '<span class="dawoud-page-external">{page_num}</span>'.format(
+                                page_num=int(utils.stem(path)) - 16,
+                            ),
                             "id": f"dawoud{int(utils.stem(path)) - 16}",
-                            "class": "dawoud-page-external",
+                            "class": "dawoud-page-img",
                             "alt": int(utils.stem(path)) - 16,
                             "width": DICT_WIDTH,
                         },

diff --git a/flashcards/constants/a_coptic_dictionary/script.ts b/flashcards/constants/a_coptic_dictionary/script.ts
@@ -9,7 +9,7 @@
 // Whether or not to retain this convention can be decided later.
 const CLS_CRUM_PAGE = 'crum-page';
 const CLS_CRUM_PAGE_EXTERNAL = 'crum-page-external';
-const CLS_DAWOUD_PAGE_EXTERNAL = 'dawoud-page-external';
+const CLS_DAWOUD_PAGE_IMG = 'dawoud-page-img';
 const CLS_CRUM_PAGE_IMG = 'crum-page-img';
 const CLS_EXPLANATORY = 'explanatory';
 const CLS_COPTIC = 'coptic';
@@ -168,7 +168,7 @@ Array.prototype.forEach.call(
 
 // Handle CLS_DAWOUD_PAGE_EXTERNAL class.
 Array.prototype.forEach.call(
-  document.getElementsByClassName(CLS_DAWOUD_PAGE_EXTERNAL),
+  document.getElementsByClassName(CLS_DAWOUD_PAGE_IMG),
   (el: HTMLElement): void => {
     el.classList.add(CLS_LINK);
     el.onclick = (): void => {

diff --git a/flashcards/data/build/a_coptic_dictionary/script.js b/flashcards/data/build/a_coptic_dictionary/script.js
@@ -1,7 +1,7 @@
 'use strict';
 const CLS_CRUM_PAGE = 'crum-page';
 const CLS_CRUM_PAGE_EXTERNAL = 'crum-page-external';
-const CLS_DAWOUD_PAGE_EXTERNAL = 'dawoud-page-external';
+const CLS_DAWOUD_PAGE_IMG = 'dawoud-page-img';
 const CLS_CRUM_PAGE_IMG = 'crum-page-img';
 const CLS_EXPLANATORY = 'explanatory';
 const CLS_COPTIC = 'coptic';
@@ -101,7 +101,7 @@ Array.prototype.forEach.call(document.getElementsByClassName(CLS_CRUM_PAGE_EXTER
     window_open(`https://coptot.manuscriptroom.com/crum-coptic-dictionary/?docID=800000&pageID=${el.innerHTML}`);
   };
 });
-Array.prototype.forEach.call(document.getElementsByClassName(CLS_DAWOUD_PAGE_EXTERNAL), (el) => {
+Array.prototype.forEach.call(document.getElementsByClassName(CLS_DAWOUD_PAGE_IMG), (el) => {
   el.classList.add(CLS_LINK);
   el.onclick = () => {
     window_open('https://coptic-treasures.com/book/coptic-dictionary-moawad-abd-al-nour/');