Migrate toolbar tools to tahqiq

Princeton-CDH · Sep 11, 2023 · ba32d61 · ba32d61
1 parent e09a638
commit ba32d61
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 43 deletions.
diff --git a/geniza/corpus/templates/corpus/snippets/document_transcription.html b/geniza/corpus/templates/corpus/snippets/document_transcription.html
@@ -123,18 +123,8 @@ <h2>{{ image_info.shelfmark }} {{ image_info.label }}</h2>
                                         </svg>
                                         <span class="sr-only">Pop out</span>
                                     </button>
-                                    <fieldset class="toolbar">
-                                        {# rectangle tool #}
-                                        <label class="rect-tool active-tool">
-                                            <input type="radio" checked />
-                                            <span class="sr-only">Rectangle tool</span>
-                                        </label>
-                                        {# polygon tool #}
-                                        <label class="polygon-tool">
-                                            <input type="radio" />
-                                            <span class="sr-only">Polygon tool</span>
-                                        </label>
-                                    </fieldset>
+                                    {# tahqiq toolbar for switching annotation tools #}
+                                    <fieldset class="tahqiq-toolbar"></fieldset>
                                 {% else %}
                                     {# enlarge button #}
                                     <button class="enlarge-button" type="button"><span class="sr-only">Enlarge image</span></button>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,7 +38,7 @@
     "@recogito/annotorious-openseadragon": "^2.7.12",
     "@recogito/annotorious-toolbar": "^1.2.0",
     "angle-input": "^0.0.1",
-    "annotorious-tahqiq": "^1.1.0",
+    "annotorious-tahqiq": "github:Princeton-CDH/annotorious-tahqiq#47ced4f580fb50fe8b553c2dfa4e1c40350d7831",
     "openseadragon": "^3.0.0",
     "stimulus-use": "^0.50.0-2"
   }

diff --git a/sitemedia/js/controllers/annotation_controller.js b/sitemedia/js/controllers/annotation_controller.js
@@ -91,25 +91,8 @@ export default class extends Controller {
         const { config, canvasURL, manifestId, annotationContainer } = settings;
         const anno = Annotorious(viewer, { disableDeleteKey: true });
 
-        // initialize toolbar tools
-        const rectangleTool = this.element.querySelector(".rect-tool input");
-        rectangleTool.addEventListener("change", (e) => {
-            if (e.target.checked) {
-                anno.setDrawingTool("rect");
-                polygonTool.checked = false;
-                polygonTool.parentElement.classList.remove("active-tool");
-                rectangleTool.parentElement.classList.add("active-tool");
-            }
-        });
-        const polygonTool = this.element.querySelector(".polygon-tool input");
-        polygonTool.addEventListener("change", (e) => {
-            if (e.target.checked) {
-                anno.setDrawingTool("polygon");
-                rectangleTool.checked = false;
-                polygonTool.parentElement.classList.add("active-tool");
-                rectangleTool.parentElement.classList.remove("active-tool");
-            }
-        });
+        // get toolbar element
+        const toolbarContainer = this.element.querySelector(".tahqiq-toolbar");
 
         // Initialize the AnnotationServerStorage plugin
         const annotationServerConfig = {
@@ -134,6 +117,7 @@ export default class extends Controller {
             anno,
             storagePlugin,
             annotationContainer,
+            toolbarContainer,
             config.text_direction,
             config.tiny_api_key
         );

diff --git a/sitemedia/scss/components/_annotation.scss b/sitemedia/scss/components/_annotation.scss
@@ -1,5 +1,6 @@
 /* styles for transcription and annotation */
 
+@use "../base/a11y";
 @use "../base/breakpoints";
 @use "../base/spacing";
 @use "../base/typography";
@@ -112,12 +113,12 @@ main.annotating {
             position: relative;
         }
         // tools
-        .toolbar {
+        fieldset.tahqiq-toolbar {
             display: flex;
             align-items: center;
+            margin-left: 0.5rem;
             gap: 0.5rem;
-            .rect-tool,
-            .polygon-tool {
+            label.tahqiq-tool {
                 cursor: pointer;
                 color: var(--on-background);
                 &.active-tool {
@@ -131,11 +132,15 @@ main.annotating {
                     font-family: "Phosphor" !important;
                     font-size: typography.$text-size-5xl;
                 }
+                // tools are icon-only, so make labels sr-only
+                span {
+                    @include a11y.sr-only;
+                }
             }
-            .rect-tool::before {
+            label.rectangle-tool::before {
                 content: "\f099";
             }
-            .polygon-tool::before {
+            label.polygon-tool::before {
                 content: "\f283";
             }
         }