Add mechanism for entering custom configurations in examples view.

src/content-handlers/iiif/extensions/uv-openseadragon-extension/Extension.ts

@@ -614,8 +614,12 @@ export default class OpenSeadragonExtension extends BaseExtension<Config> {
     // todo: can this be added to store?
     const paged = this.isPagingSettingEnabled();
 
-    const { downloadDialogueOpen, dialogueTriggerButton } =
-      this.store.getState() as OpenSeadragonExtensionState;
+    // Try to initialize using the stored state; exit early if the state is not ready yet:
+    const state: null | OpenSeadragonExtensionState = this.store.getState();
+    if (state === null) {
+      return;
+    }
+    const { downloadDialogueOpen, dialogueTriggerButton } = state;
 
     // todo: can the overlay visibility be added to the store?
     if (downloadDialogueOpen) {

src/index.html

@@ -244,6 +244,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">
@@ -399,6 +409,10 @@ <h2 class="controls-title">Duration</h2>
           "#youtube_setDurationButton"
         );
 
+        // config controls
+        var $customConfig = document.getElementById("customConfig");
+        var $setConfigButton = document.getElementById("setConfigButton");
+
         var annotations = [];
         var urlAdapter;
 
@@ -511,6 +525,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"
@@ -583,6 +601,9 @@ <h2 class="controls-title">Duration</h2>
           setAnnotations();
         };
 
+        $setConfigButton.onclick = function() {
+          setConfig();
+        };
         // youtube inputs
 
         $youtube_mutedCheckbox.onclick = function(e) {
@@ -729,6 +750,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) {
             $iiif_target.value = target;
           });