Merge pull request #39 from FitzwilliamMuseum/bootstrap_5_migration

Upgraded Bootstrap and migrated breaking changes.
FitzwilliamMuseum · Apr 30, 2022 · c0c16c7 · c0c16c7
2 parents ef86af5 + c7c81a4
commit c0c16c7
Show file tree

Hide file tree

Showing 22 changed files with 187 additions and 260 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "devDependencies": {
         "@xmldom/xmldom": "^0.8.1",
         "axios": ">=0.21.1",
-        "bootstrap": "^4.6.1",
+        "bootstrap": "^5.1.3",
         "cross-env": "^7.0.3",
         "glob-parent": ">=5.1.2",
         "is-svg": ">=4.2.2",

diff --git a/public/css/app.css b/public/css/app.css
diff --git a/public/js/app.js b/public/js/app.js
diff --git a/public/js/app.js.LICENSE.txt b/public/js/app.js.LICENSE.txt
@@ -1,5 +1,5 @@
 /*!
-  * Bootstrap v4.6.1 (https://getbootstrap.com/)
+  * Bootstrap v5.1.3 (https://getbootstrap.com/)
   * Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   */
@@ -34,28 +34,3 @@
  *
  * Date: 2021-03-02T17:08Z
  */
-
-/**!
- * @fileOverview Kickass library to create and place poppers near their reference elements.
- * @version 1.16.1
- * @license
- * Copyright (c) 2016 Federico Zivolo and contributors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,5 +1,5 @@
 {
-    "/js/app.js": "/js/app.js?id=13fe726d1ad85caaa0e7ab62fc066033",
-    "/css/app.css": "/css/app.css?id=5318bbe54a6f1e5749abef9fb0cabb10",
+    "/js/app.js": "/js/app.js?id=16d10c8cf922e7e4dddc5304e163d049",
+    "/css/app.css": "/css/app.css?id=e31ed2519c499fd2c72e0a18d9a69998",
     "/css/fitzwilliam.css": "/css/fitzwilliam.css?id=2292b4049a90525a90e188610c81e708"
 }
diff --git a/public/uv.css b/public/uv.css
diff --git a/public/uv.html b/public/uv.html
@@ -4,89 +4,87 @@
 
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link rel="icon" href="favicon.ico" />
-		<link rel="stylesheet" type="text/css" href="uv.css" />
-		<!-- 
-			resize observer is needed for model-viewer
-			https://github.com/google/model-viewer/issues/1088#issuecomment-599237719
-		-->
-		<script src="https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.js"></script>
-    <script type="text/javascript" src="uv-assets/js/bundle.js"></script>
-    <script type="text/javascript" src="uv-dist-umd/UV.js"></script>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <link rel="icon" href="favicon.ico">
+    <link rel="stylesheet" type="text/css" href="uv.css">
+    <script type="text/javascript" src="lib/offline.js"></script>
+    <script type="text/javascript" src="helpers.js"></script>
     <style>
-      body {
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-      }
+        body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+        }
     </style>
-  </head>
-  <body>
-    <div id="uv" class="uv"></div>
-
     <script type="text/javascript">
+    window.addEventListener('uvLoaded', function(e) { 
+            urlDataProvider = new UV.URLDataProvider(true);
+            var formattedLocales;
+            var locales = urlDataProvider.get('locales', '');
 
-      urlDataProvider = new UV.URLDataProvider(true);
-      var formattedLocales;
-      var locales = urlDataProvider.get("locales", "");
+            if (locales) {
+                var names = locales.split(',');
+                formattedLocales = [];
 
-      if (locales) {
-        var names = locales.split(",");
-        formattedLocales = [];
+                for (var i in names) {
+                    var nameparts = String(names[i]).split(':');
+                    formattedLocales[i] = {name: nameparts[0], label: nameparts[1]};
+                }
+
+            } else {
+                formattedLocales = [
+                    {
+                        name: 'en-GB'
+                    }
+                ]
+            }
 
-        for (var i in names) {
-          var nameparts = String(names[i]).split(":");
-          formattedLocales[i] = { name: nameparts[0], label: nameparts[1] };
-        }
-      } else {
-        formattedLocales = [
-          {
-            name: "en-GB"
-          }
-        ];
-      }
+            uv = createUV('#uv', {
+                root: '.',
+                iiifResourceUri: urlDataProvider.get('manifest'),
+                configUri: urlDataProvider.get('config'),
+                collectionIndex: Number(urlDataProvider.get('c', 0)),
+                manifestIndex: Number(urlDataProvider.get('m', 0)),
+                sequenceIndex: Number(urlDataProvider.get('s', 0)),
+                canvasIndex: Number(urlDataProvider.get('cv', 0)),
+                rangeId: urlDataProvider.get('rid', 0),
+                rotation: Number(urlDataProvider.get('r', 0)),
+                xywh: urlDataProvider.get('xywh', ''),
+                embedded: true,
+                locales: formattedLocales
+            }, urlDataProvider);
 
-      uv = UV.init(
-        "uv",
-        {
-          manifestUri: urlDataProvider.get("manifest"),
-          configUri: urlDataProvider.get("config"),
-          collectionIndex: Number(urlDataProvider.get("c", 0)),
-          manifestIndex: Number(urlDataProvider.get("m", 0)),
-          canvasIndex: Number(urlDataProvider.get("cv", 0)),
-          rangeId: urlDataProvider.get("rid", 0),
-          rotation: Number(urlDataProvider.get("r", 0)),
-          xywh: urlDataProvider.get("xywh", ""),
-          embedded: true,
-          locales: formattedLocales,
-          target: urlDataProvider.get("target")
-        },
-        urlDataProvider
-      );
+        }, false);
     </script>
+</head>    
+<body>
+
+<div id="uv" class="uv"></div>
+
+<script>
 
-    <script>
-      $(function() {
-        var $UV = $("#uv");
+    $(function() {
+
+        var $UV = $('#uv');
 
         function resize() {
-          var windowWidth = window.innerWidth;
-          var windowHeight = window.innerHeight;
-          $UV.width(windowWidth);
-          $UV.height(windowHeight);
+            var windowWidth = window.innerWidth;
+            var windowHeight = window.innerHeight;
+            $UV.width(windowWidth);
+            $UV.height(windowHeight);
         }
 
-        $(window).on("resize", function() {
-          resize();
+        $(window).on('resize', function() {
+            resize();
         });
-
+        
         resize();
-      });
-    </script>
-  </body>
+    });
+
+</script>
+
+<script type="text/javascript" src="uv.js"></script>
+
+</body>
 </html>
diff --git a/resources/views/components/dimension-drawer.blade.php b/resources/views/components/dimension-drawer.blade.php
@@ -2,7 +2,7 @@
   <h3 class="lead collection">Relative size of this object</h3>
   <div>
       {!! $comparison !!}
-      <a data-toggle="collapse" href="#t-ball" class="btn  btn-info btn-sm"><i class="fas fa-question-circle"></i> What does this represent?</a>
+      <a data-bs-toggle="collapse" href="#t-ball" class="btn  btn-info btn-sm"><i class="fas fa-question-circle"></i> What does this represent?</a>
       <p class="collapse" id="t-ball">
         Relative size of this object is displayed using code inspired by
         <a href="https://goodformandspectacle.com/">Good Form and Spectacle</a>'s

diff --git a/resources/views/components/terms-of-use.blade.php b/resources/views/components/terms-of-use.blade.php
@@ -1,5 +1,5 @@
-<h3 class="lead collection">Terms of use</h3>
-<p class="text-info">
+<h3>Terms of use</h3>
+<p class="text-dark">
     These images are provided for non-commercial use under a Creative Commons
     License (BY-NC-ND). To license a high resolution version, please contact
     our <a href="{{ env('MAIN_URL') }}/commercial-services/image-library">image library</a>

diff --git a/resources/views/includes/elements/error.blade.php b/resources/views/includes/elements/error.blade.php
@@ -1,6 +1,6 @@
 <div class="container ">
     <h3 class="lead shadow-sm p-3 mx-auto mb-3 mt-3 rounded">
-        <a data-toggle="collapse" href="#error" role="button" aria-expanded="false" aria-controls="error">
+        <a data-bs-toggle="collapse" href="#error" role="button" aria-expanded="false" aria-controls="error">
             Contact us</a> @include('includes.elements.expander-error')
     </h3>
     <div class="shadow-sm p-3 mx-auto mt-3 rounded collapse" id="error">

diff --git a/resources/views/includes/elements/expander-cite.blade.php b/resources/views/includes/elements/expander-cite.blade.php
@@ -1,5 +1,5 @@
 <!-- https://stackoverflow.com/a/44242233 -->
-<button type="button" class="btn btn-dark btn-circle btn-sm ml-3 float-right" data-toggle="collapse" data-target="#cite"
+<button type="button" class="btn btn-dark btn-circle btn-sm ml-3 float-right" data-bs-toggle="collapse" data-bs-target="#cite"
         aria-expanded="false" aria-controls="cite">
     <span class="collapsed">@fa('plus')</span>
     <span class="expanded">@fa('minus')</span>

diff --git a/resources/views/includes/elements/expander-error.blade.php b/resources/views/includes/elements/expander-error.blade.php
@@ -1,5 +1,5 @@
-<button type="button" class="btn btn-dark btn-circle btn-sm ml-3 float-right" data-toggle="collapse"
-        data-target="#error" aria-expanded="false" aria-controls="error">
+<button type="button" class="btn btn-dark btn-circle btn-sm ml-3 float-right" data-bs-toggle="collapse"
+        data-bs-target="#error" aria-expanded="false" aria-controls="error">
     <span class="collapsed">@fa('plus')</span>
     <span class="expanded">@fa('minus')</span>
 </button>
diff --git a/resources/views/includes/elements/expander-formats.blade.php b/resources/views/includes/elements/expander-formats.blade.php
@@ -1,6 +1,6 @@
 {{-- https://stackoverflow.com/a/44242233 --}}
-<button type="button" class="btn btn-dark btn-circle btn-sm ml-3 float-right" data-toggle="collapse"
-        data-target="#formats" aria-expanded="false" aria-controls="formats">
+<button type="button" class="btn btn-dark btn-circle btn-sm ml-3 float-right" data-bs-toggle="collapse"
+        data-bs-target="#formats" aria-expanded="false" aria-controls="formats">
     <span class="collapsed">@fa('plus')</span>
     <span class="expanded">@fa('minus')</span>
 </button>
diff --git a/resources/views/includes/elements/expander.blade.php b/resources/views/includes/elements/expander.blade.php
@@ -1,7 +1,7 @@
 <!-- https://stackoverflow.com/a/44242233 -->
 <div class="text-center">
-    <button type="button" id="expander" class="btn btn-dark btn-circle btn-xl mb-2" data-toggle="collapse"
-            data-target="#expand-more" aria-expanded="false" aria-controls="expand-more">
+    <button type="button" id="expander" class="btn btn-dark btn-circle btn-xl mb-2" data-bs-toggle="collapse"
+            data-bs-target="#expand-more" aria-expanded="false" aria-controls="expand-more">
         <span class="collapsed">@fa('plus')</span>
         <span class="expanded">@fa('minus')</span>
     </button>

diff --git a/resources/views/includes/elements/machine-cite.blade.php b/resources/views/includes/elements/machine-cite.blade.php
@@ -2,7 +2,7 @@
 
     <div class="container ">
         <h3 class="lead shadow-sm p-3 mx-auto mb-3 mt-3 rounded">
-            <a data-toggle="collapse" href="#cite" role="button" aria-expanded="false" aria-controls="cite">
+            <a data-bs-toggle="collapse" href="#cite" role="button" aria-expanded="false" aria-controls="cite">
                 Cite this record</a>@include('includes.elements.expander-cite')
         </h3>
 
@@ -15,7 +15,7 @@
 
     <div class="container">
         <h3 class="lead shadow-sm p-3 mx-auto  mt-3 rounded">
-            <a data-toggle="collapse" href="#formats" role="button" aria-expanded="false" aria-controls="formats">
+            <a data-bs-toggle="collapse" href="#formats" role="button" aria-expanded="false" aria-controls="formats">
                 Machine readable data</a> @include('includes.elements.expander-formats')
         </h3>
         <div class="shadow-sm p-3 mx-auto mt-3 rounded collapse" id="formats">

diff --git a/resources/views/includes/elements/media-single.blade.php b/resources/views/includes/elements/media-single.blade.php
@@ -6,7 +6,7 @@
     /></a>
   </div>
   <div class="text-center mb-2 mt-2">
-    <a class="btn btn-sm btn-sm btn-dark m-1" href="#download-message" data-toggle="collapse" aria-expanded="false" aria-controls="download-message"
+    <a class="btn btn-sm btn-sm btn-dark m-1" href="#download-message" data-bs-toggle="collapse" aria-expanded="false" aria-controls="download-message"
     ><i class="fas fa-download mr-2"></i> Use this image</a>
       <a class="btn btn-sm btn-sm btn-dark m-1" href="{{ route('record', $object['identifier'][1]['priref']) }}">Back to record</a>
     @if(Arr::has($filtered[0]['processed'], 'zoom'))

diff --git a/resources/views/includes/elements/media.blade.php b/resources/views/includes/elements/media.blade.php
@@ -27,7 +27,7 @@
                        href="{{ route('image.single', $record['_source']['multimedia'][0]['admin']['id']) }}"><i
                             class="fas fa-search mr-2"></i> View image details</a>
 
-                    <a class="btn btn-sm btn-sm btn-dark m-1" href="#download-message" data-toggle="collapse"
+                    <a class="btn btn-sm btn-sm btn-dark m-1" href="#download-message" data-bs-toggle="collapse"
                        aria-expanded="false" aria-controls="download-message"
                     ><i class="fas fa-download mr-2"></i> Use this image</a>
                     {{-- @if(array_key_exists('source',$record['_source']['multimedia'][0]['admin'])) --}}