From acd6a49fb03b2b3bd2b8e05cdf6a98a7bcb4b2bb Mon Sep 17 00:00:00 2001
From: Demian Katz <demian.katz@villanova.edu>
Date: Mon, 22 Jul 2024 10:26:13 -0400
Subject: [PATCH] Add mechanism for entering custom configurations in examples
 view.

---
 src/index.html | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/src/index.html b/src/index.html
index daa7a36df..f08b74a50 100644
--- a/src/index.html
+++ b/src/index.html
@@ -182,6 +182,16 @@ <h2 class="controls-title">Annotations</h2>
             </button>
           </div>
         </div>
+
+        <div class="controls-group">
+          <h2 class="controls-title">Custom Configuration</h2>
+          <textarea id="customConfig" rows="5" class="w-full"></textarea>
+          <div class="mt-2">
+            <button id="setConfigButton" class="controls-button">
+              Apply Configurations
+            </button>
+          </div>
+        </div>
       </div>
 
       <div id="youTubeTab" class="hidden controls-tab-content">
@@ -292,6 +302,8 @@ <h2 class="controls-title">Duration</h2>
         var $clearAnnotationsButton = document.getElementById(
           "clearAnnotationsButton"
         );
+        var $customConfig = document.getElementById("customConfig");
+        var $setConfigButton = document.getElementById("setConfigButton");
         var $setYouTubeVideoIdButton = document.getElementById(
           "setYouTubeVideoIdButton"
         );
@@ -420,6 +432,10 @@ <h2 class="controls-title">Duration</h2>
           });
         }
 
+        function setConfig() {
+          // The configs are loaded as part of the IIIF initialization.
+          activateIIIFTab();
+        }
         $iiifManifestIdSelect.onchange = function() {
           var $selectedOption = document.querySelector(
             "#iiifManifestIdSelect option:checked"
@@ -483,6 +499,9 @@ <h2 class="controls-title">Duration</h2>
           setAnnotations();
         };
 
+        $setConfigButton.onclick = function() {
+          setConfig();
+        };
         $mutedCheckbox.onclick = function(e) {
           muted = e.target.checked;
           uv.set({
@@ -627,6 +646,18 @@ <h2 class="controls-title">Duration</h2>
             });
           });
 
+          // apply custom configs from the form
+          uv.on("configure", function({ config, cb}) {
+            try {
+              if ($customConfig.value.length > 0) {
+                var customConfig = JSON.parse($customConfig.value);
+                cb(customConfig);
+              }
+            } catch (e) {
+              console.error("Could not process user-provided JSON configuration.");
+            }
+          });
+
           uv.on("targetChange", function(target) {
             $target.value = target;
           });