Merge pull request #22 from adam-vessey/feature/alterability

Make the mirador config more easily alterable, Drupal-side.
Islandora · Jul 4, 2023 · 38570cc · 38570cc
2 parents 844d6d7 + 7013307
commit 38570cc
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 61 deletions.
diff --git a/islandora_mirador.libraries.yml b/islandora_mirador.libraries.yml
@@ -15,6 +15,7 @@ viewer:
     theme:
       css/mirador.css: {}
   dependencies:
+    - core/once
     - core/drupal
     - core/drupalSettings
     - islandora_mirador/mirador
diff --git a/islandora_mirador.module b/islandora_mirador.module
@@ -27,11 +27,10 @@ function islandora_mirador_theme() {
 }
 
 /**
- * Implements template_preprocess_*().
+ * Preprocess variables for mirador templates.
  */
 function template_preprocess_mirador(&$variables) {
   $variables['mirador_view_id'] = Html::getUniqueId($variables['mirador_view_id']);
-  $variables['#attached']['drupalSettings']['mirador_view_id'] = $variables['mirador_view_id'];
 
   /**
    * @var \Drupal\islandora_mirador\IslandoraMiradorPluginManager
@@ -41,11 +40,11 @@ function template_preprocess_mirador(&$variables) {
   /**
    * @var \Drupal\Core\Config\ImmutableConfig
    */
-  $config = Drupal::service('config.factory')->get('islandora_mirador.settings');
+  $config = \Drupal::service('config.factory')->get('islandora_mirador.settings');
 
   $mirador_plugins = $mirador_plugin_manager->getDefinitions();
   $enabled_plugins = $config->get('mirador_enabled_plugins');
-  $variables['#attached']['drupalSettings']['mirador_enabled_plugins'] = array_filter(array_values($enabled_plugins));
+  $variables['#attached']['drupalSettings']['mirador']['enabled_plugins'] = array_filter(array_values($enabled_plugins));
 
   $window_config = [];
   foreach ($mirador_plugins as $plugin_id => $plugin_definition) {
@@ -57,7 +56,32 @@ function template_preprocess_mirador(&$variables) {
       $plugin_instance->windowConfigAlter($window_config);
     }
   }
+
+  // XXX: Maintain the original properties, for now.
+  $variables['#attached']['drupalSettings']['mirador_view_id'] = $variables['mirador_view_id'];
   $variables['#attached']['drupalSettings']['mirador_window_settings'] = $window_config;
+  $variables['#attached']['drupalSettings']['mirador_enabled_plugins'] = $variables['#attached']['drupalSettings']['mirador']['enabled_plugins'];
+
+  // mirador.window_settings ... isn't presently used on its own?
+  $variables['#attached']['drupalSettings']['mirador']['window_settings'] = $window_config;
+
+  // mirador.viewers is an associative array mapping CSS/jQuery/once selectors
+  // to objects of mirador configuration.
+  $variables['#attached']['drupalSettings']['mirador']['viewers']["#{$variables['mirador_view_id']}"] = [
+    'id' => $variables['mirador_view_id'],
+    'manifests' => [
+      $variables['iiif_manifest_url'] => [
+        'provider' => 'Islandora'
+      ],
+    ],
+    'window' => $window_config,
+    'windows' => [
+      [
+        'manifestId' => $variables['iiif_manifest_url'],
+        'thumbnailNavigationPosition' => 'far-bottom',
+      ],
+    ]
+  ];
 }
 
 /**

diff --git a/js/mirador_viewer.js b/js/mirador_viewer.js
@@ -1,57 +1,30 @@
-/*jslint browser: true*/
-/*global Mirador, textOverlayPlugin, Drupal*/
+/*jslint browser: true, esversion: 6 */
+/*global Mirador, Drupal, once*/
 /**
  * @file
  * Displays Mirador viewer.
  */
-(function ($, Drupal) {
+(function (Drupal, once) {
     'use strict';
 
-    /**
-     * If initialized.
-     * @type {boolean}
-     */
-    var initialized;
-    /**
-     * Unique HTML id.
-     * @type {string}
-     */
-    var base;
-
-    function init(context,settings){
-        if (!initialized){
-          initialized = true;
-
-          /*
-           Mirador
-           */
-          var miradorInstance = Mirador.viewer({
-            "id": base,
-            "manifests": {
-              [settings.iiif_manifest_url]: {provider: "Islandora"}
-            },
-            "window": settings.mirador_window_settings,
-            "windows": [
-                    {
-                        "manifestId": settings.iiif_manifest_url,
-                        "thumbnailNavigationPosition": 'far-bottom'
-                    }
-                ]
-            }, window.miradorPlugins);
-        }
-    }
-    Drupal.Mirador = Drupal.Mirador || {};
-
     /**
      * Initialize the Mirador Viewer.
      */
     Drupal.behaviors.Mirador = {
         attach: function (context, settings) {
-            base = settings.mirador_view_id;
-            init(context,settings);
+            Object.entries(settings.mirador.viewers).forEach(entry => {
+              const [base, values] = entry;
+              once('mirador-viewer', base, context).forEach(() =>
+                Mirador.viewer(values, window.miradorPlugins || {})
+              );
+            });
         },
-        detach: function () {
+        detach: function (context, settings) {
+            Object.entries(settings.mirador.viewers).forEach(entry => {
+              const [base, ] = entry;
+              once.remove('mirador-viewer', base, context);
+            });
         }
     };
 
-})(jQuery, Drupal);
+})(Drupal, once);
diff --git a/src/Plugin/Block/MiradorBlock.php b/src/Plugin/Block/MiradorBlock.php
@@ -112,14 +112,10 @@ public function build() {
     $build = [
       "#title" => $this->t('Mirador Viewer'),
       "#description" => $this->t("A div for mirador viewer"),
-      "#theme" => "mirador",
-      '#mirador_view_id' => $id,
-      '#iiif_manifest_url' => $manifest_url,
-      "#attached" => [
-        'drupalSettings' => [
-          'iiif_manifest_url' => $manifest_url,
-          'mirador_view_id' => $id,
-        ],
+      'viewer' => [
+        "#theme" => "mirador",
+        '#mirador_view_id' => $id,
+        '#iiif_manifest_url' => $manifest_url,
       ],
     ];
 

diff --git a/src/Plugin/Field/FieldFormatter/MiradorImageFormatter.php b/src/Plugin/Field/FieldFormatter/MiradorImageFormatter.php
@@ -2,6 +2,7 @@
 
 namespace Drupal\islandora_mirador\Plugin\Field\FieldFormatter;
 
+use Drupal\Core\Cache\CacheableMetadata;
 use Drupal\Core\Config\ConfigFactoryInterface;
 use Drupal\Core\Field\FieldDefinitionInterface;
 use Drupal\Core\Field\FieldItemListInterface;
@@ -119,27 +120,29 @@ public function viewElements(FieldItemListInterface $items, $langcode) {
     if (empty($files)) {
       return $elements;
     }
+
     $iiif_url = $this->configFactory->get('islandora_mirador.settings')->get('iiif_manifest_url');
     $token_service = $this->token;
     foreach ($files as $file) {
+      $cache_meta = CacheableMetadata::createFromObject($file);
+
       $medias = $this->utils->getReferencingMedia($file->id());
       $first_media = array_values($medias)[0];
+      $cache_meta->addCacheableDependency($first_media);
       $node = $first_media->get('field_media_of')->entity;
+      $cache_meta->addCacheableDependency($node);
       $id = 'mirador_' . $node->id();
       $manifest_url = $token_service->replace($iiif_url, ['node' => $node]);
-      $elements[] = [
+      $renderable = [
         '#theme' => 'mirador',
         '#mirador_view_id' => $id,
         '#iiif_manifest_url' => $manifest_url,
-        '#attached' => [
-          'drupalSettings' => [
-            'iiif_manifest_url' => $manifest_url,
-            'mirador_view_id' => $id,
-          ],
-        ],
         '#settings' => $settings,
       ];
+      $cache_meta->applyTo($renderable);
+      $elements[] = $renderable;
     }
+
     return $elements;
   }