Merge pull request #13996 from MoonE/bootstrap-5

Update to bootstrap 5.2
openlayers · Aug 22, 2022 · 62914bb · 62914bb
2 parents 547ec35 + ebfee35
commit 62914bb
Show file tree

Hide file tree

Showing 59 changed files with 492 additions and 446 deletions.
diff --git a/config/jsdoc/api/template/static/scripts/bootstrap.bundle.min.js b/config/jsdoc/api/template/static/scripts/bootstrap.bundle.min.js
diff --git a/config/jsdoc/api/template/static/scripts/jquery.min.js b/config/jsdoc/api/template/static/scripts/jquery.min.js
diff --git a/config/jsdoc/api/template/static/scripts/jquery.min.map b/config/jsdoc/api/template/static/scripts/jquery.min.map
diff --git a/config/jsdoc/api/template/tmpl/container.tmpl b/config/jsdoc/api/template/tmpl/container.tmpl
@@ -46,7 +46,7 @@
         <script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CE7DV53U&placement=openlayersorg" id="_carbonads_js"></script>
       </div>
     <?js if (doc.classdesc) { ?>
-      <div class="class-description col-lg-7 align-self-center pl-0"><?js= doc.classdesc ?></div>
+      <div class="class-description col-lg-7 align-self-center ps-0"><?js= doc.classdesc ?></div>
     <?js } ?>
     </div>
 </header>

diff --git a/config/jsdoc/api/template/tmpl/layout.tmpl b/config/jsdoc/api/template/tmpl/layout.tmpl
@@ -4,13 +4,13 @@ var version = obj.packageInfo.version;
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
+    <meta charset="UTF-8">
     <title>OpenLayers v<?js= version ?> API - <?js= title ?></title>
     <script src="scripts/prettify/prettify.js"></script>
     <script src="scripts/prettify/lang-css.js"></script>
-    <script src="scripts/jquery.min.js"></script>
-    <script src="scripts/bootstrap.bundle.min.js"></script>
-    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
@@ -21,42 +21,42 @@ var version = obj.packageInfo.version;
     <link rel="stylesheet" type="text/css" href="/theme/site.css">
   </head>
   <body>
-    <div class="container-fluid">
-      <header class="navbar navbar-expand-sm navbar-dark mb-3 py-0 fixed-top" role="navigation">
-        <a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70" alt="">&nbsp;OpenLayers</a>
-
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon"></span>
-        </button>
+    <header class="navbar navbar-expand-sm navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
+      <a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70" alt="">&nbsp;OpenLayers</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
 
-        <!-- menu items that get hidden below 768px width -->
-        <nav class="collapse navbar-collapse" id="olmenu">
-          <ul class="navbar-nav ml-auto">
+      <!-- menu items that get hidden below 768px width -->
+      <nav class="collapse navbar-collapse" id="olmenu">
+        <ul class="navbar-nav ms-auto">
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
-            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="docdropdown">
+            <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
+            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="docdropdown">
               <a class="dropdown-item" href="/doc/">Docs</a>
               <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
-                <a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
-                <a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
-                <a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
+                <a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>Quick Start</a>
+                <a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
+                <a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
+                <a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw me-2 fa-lg"></i>Workshop</a>
                 <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
+                <a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
             </div>
           </li>
           <li class="nav-item"><a class="nav-link" href="../examples/">Examples</a></li>
-          <li class="nav-item active"><a class="nav-link" href="../apidoc/"><i class="fa fa-sitemap mr-1"></i>API</a></li>
+          <li class="nav-item active"><a class="nav-link" href="../apidoc/"><i class="fa fa-sitemap me-1"></i>API</a></li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
-            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="codedropdown">
-              <a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw mr-2 fa-lg"></i>Repository</a>
-              <a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
+            <a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
+            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="codedropdown">
+              <a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw me-2 fa-lg"></i>Repository</a>
+              <a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
             </div>
-           </li>
-          </ul>
-        </nav>
-      </header>
+          </li>
+        </ul>
+      </nav>
+    </header>
+
+    <div class="container-fluid">
       <div id="wrap" class="row">
         <div class="navigation col-md-4 col-lg-3">
           <div class="search-wrapper">
@@ -80,17 +80,17 @@ var version = obj.packageInfo.version;
         </div>
 
         <div class="main col-md-8 col-lg-9">
-            <h1 class="page-title" data-filename="<?js= filename ?>"><?js= title ?></h1>
-            <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
-              <button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-              This documentation is for OpenLayers v<span id="package-version"><?js= version ?></span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
-            </div>
-            <?js= content ?>
+          <h1 class="page-title" data-filename="<?js= filename ?>"><?js= title ?></h1>
+          <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
+            <button id="latest-dismiss" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            This documentation is for OpenLayers v<span id="package-version"><?js= version ?></span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
+          </div>
+          <?js= content ?>
         </div>
       </div>
-      <script>prettyPrint();</script>
-      <script src="scripts/linenumber.js"></script>
-      <script src="scripts/main.js"></script>
     </div>
+    <script>prettyPrint();</script>
+    <script src="scripts/linenumber.js"></script>
+    <script src="scripts/main.js"></script>
   </body>
 </html>
diff --git a/config/jsdoc/api/template/tmpl/navigation.tmpl b/config/jsdoc/api/template/tmpl/navigation.tmpl
@@ -49,7 +49,7 @@ function listContent(item, title, listItemPrinter) {
 } ?>
 <li class="item item-<?js= item.type ?><?js= obj.classes || '' ?>" data-longname="<?js= item.longname ?>" data-name="<?js= item.prettyname.toLowerCase() ?>">
     <span class="title toggle">
-        <span class="fa <?js= getItemCssClass(item.type) ?> mr-2 mt-1"></span>
+        <span class="fa <?js= getItemCssClass(item.type) ?> me-2 mt-1"></span>
         <span><?js= self.linkto(item.longname, item.prettyname.replace(/[.~\/]/g, '\u200b$&')) ?></span>
     </span><?js
 listContent(item, 'Members', printListItem);

diff --git a/examples/.eslintrc b/examples/.eslintrc
@@ -2,14 +2,15 @@
   "globals": {
     "$": false,
     "arc": false,
-    "common": false,
+    "bootstrap": false,
     "chroma": false,
+    "common": false,
     "createMapboxStreetsV6Style": false,
     "d3": false,
-    "html2canvas": false,
     "geojsonvt": false,
     "gifler": false,
     "GyroNorm": false,
+    "html2canvas": false,
     "jspdf": false,
     "jsts": false,
     "JSZip": false,

diff --git a/examples/button-title.css b/examples/button-title.css
diff --git a/examples/button-title.html b/examples/button-title.html
@@ -3,12 +3,11 @@
 title: Custom Tooltips
 shortdesc: This example shows how to customize the buttons tooltips with Bootstrap.
 docs: >
-  This example shows how to customize the buttons tooltips with <a href="https://getbootstrap.com/docs/4.5/components/tooltips/">Bootstrap</a>.
+  This example shows how to customize the buttons tooltips with <a href="https://getbootstrap.com/docs/5.2/components/tooltips/">Bootstrap</a>.
   For the tooltips to work in fullscreen mode, set the container property to a selector that matches the map target.
 tags: "custom, tooltip"
 resources:
-  - https://code.jquery.com/jquery-3.5.1.min.js
-  - https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
-  - https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js
+  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
+  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
 ---
 <div id="map" class="map"></div>
diff --git a/examples/button-title.js b/examples/button-title.js
@@ -17,11 +17,10 @@ const map = new Map({
   }),
 });
 
-$('.ol-zoom-in, .ol-zoom-out').tooltip({
-  placement: 'right',
-  container: '#map',
-});
-$('.ol-rotate-reset, .ol-attribution button[title]').tooltip({
-  placement: 'left',
-  container: '#map',
-});
+document
+  .querySelectorAll('.ol-zoom-in, .ol-zoom-out, .ol-rotate-reset')
+  .forEach(function (el) {
+    new bootstrap.Tooltip(el, {
+      container: '#map',
+    });
+  });
diff --git a/examples/cartodb.html b/examples/cartodb.html
@@ -5,22 +5,21 @@
 docs: >
   A simple example with an anonymous cartodb map
 tags: "simple, openstreetmap, attribution"
+resources:
+  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-    <div>
-    <form class="form-horizontal">
-      <label>
-        Show countries larger than
-        <select id="country-area" class="form-control">
-          <option value="0" default>0 ㎢</option>
-          <option value="5000">5000 ㎢</option>
-          <option value="10000">10000 ㎢</option>
-          <option value="50000">50000 ㎢</option>
-          <option value="100000">100000 ㎢</option>
-        </select>
-      </label>
-    </form>
+<div id="map" class="map"></div>
+<form class="row">
+  <div class="col-auto">
+    <div class="input-group">
+      <label for="country-area" class="input-group-text">Show european countries larger than</label>
+      <select id="country-area" class="form-select">
+        <option value="0" default>0 ㎢</option>
+        <option value="5000">5000 ㎢</option>
+        <option value="10000">10000 ㎢</option>
+        <option value="50000">50000 ㎢</option>
+        <option value="100000">100000 ㎢</option>
+      </select>
+    </div>
   </div>
-</div>
+</form>
diff --git a/examples/chaikin.html b/examples/chaikin.html
@@ -12,7 +12,7 @@
 tags: "smooth, smoothing, chaikin"
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
+<form>
   <label for="shall-smoothen">Smooth drawn geometry?</label>
   <input id="shall-smoothen" type="checkbox" checked><br>
   <label for="iterations">Number of smoothings</label>

diff --git a/examples/cluster.html b/examples/cluster.html
@@ -5,19 +5,21 @@
 docs: >
   This example shows how to do clustering on point features.
 tags: "cluster, vector"
+resources:
+  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
 ---
 <div id="map" class="map"></div>
 <form>
   <div class="form-group">
-    <label for="distance" class="col-form-label">Cluster distance</label>
-    <input id="distance" class="form-control-range" type="range" min="0" max="200" step="1" value="40"/>
+    <label for="distance" class="col-form-label pb-0">Cluster distance</label>
+    <input id="distance" class="form-range" type="range" min="0" max="200" step="1" value="40"/>
     <small class="form-text text-muted">
       The distance within which features will be clustered together.
     </small>
   </div>
   <div class="form-group">
-    <label for="min-distance" class="col-form-label">Minimum distance</label>
-    <input id="min-distance" class="form-control-range" type="range" min="0" max="200" step="1" value="20"/>
+    <label for="min-distance" class="col-form-label pb-0">Minimum distance</label>
+    <input id="min-distance" class="form-range" type="range" min="0" max="200" step="1" value="20"/>
     <small class="form-text text-muted">
       The minimum distance between clusters. Can't be larger than the configured distance.
     </small>

diff --git a/examples/draw-and-modify-features.html b/examples/draw-and-modify-features.html
@@ -7,7 +7,7 @@
 tags: "draw, edit, modify, vector, featureoverlay"
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
+<form>
   <label for="type">Geometry type &nbsp;</label>
   <select id="type">
     <option value="Point">Point</option>

diff --git a/examples/draw-and-modify-geodesic.html b/examples/draw-and-modify-geodesic.html
@@ -13,7 +13,7 @@
 tags: "draw, edit, modify, vector, circle, sphere, geodesic"
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
+<form>
   <label for="type">Geometry type &nbsp;</label>
   <select id="type">
     <option value="Point">Point</option>

diff --git a/examples/draw-features.html b/examples/draw-features.html
@@ -8,16 +8,22 @@
   point. To activate freehand drawing for lines, polygons, and circles, hold
   the `Shift` key. To remove the last point of a line or polygon, press "Undo".
 tags: "draw, edit, freehand, vector"
+resources:
+  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
-  <label for="type">Geometry type: &nbsp;</label>
-  <select class="form-control mr-2 mb-2 mt-2" id="type">
-    <option value="Point">Point</option>
-    <option value="LineString">LineString</option>
-    <option value="Polygon">Polygon</option>
-    <option value="Circle">Circle</option>
-    <option value="None">None</option>
-  </select>
-  <input class="form-control mr-2 mb-2 mt-2" type="button" value="Undo" id="undo">
-</form>
+<div class="row">
+  <div class="col-auto">
+    <span class="input-group">
+      <label class="input-group-text" for="type">Geometry type:</label>
+      <select class="form-select" id="type">
+        <option value="Point">Point</option>
+        <option value="LineString">LineString</option>
+        <option value="Polygon">Polygon</option>
+        <option value="Circle">Circle</option>
+        <option value="None">None</option>
+      </select>
+      <input class="form-control" type="button" value="Undo" id="undo">
+    </span>
+  </div>
+</div>
diff --git a/examples/draw-freehand.html b/examples/draw-freehand.html
@@ -11,7 +11,7 @@
 tags: "draw, edit, freehand, vector"
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
+<form>
   <label for="type">Geometry type &nbsp;</label>
   <select id="type">
     <option value="LineString">LineString</option>

diff --git a/examples/draw-shapes.html b/examples/draw-shapes.html
@@ -12,16 +12,22 @@
   circle. Star drawing uses a custom geometry function that converts a circle
   into a star using the center and radius provided by the draw interaction.
 tags: "draw, edit, freehand, vector"
+resources:
+  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
-  <label for="type">Shape type: &nbsp;</label>
-  <select class="form-control mr-2 mb-2 mt-2" id="type">
-    <option value="Circle">Circle</option>
-    <option value="Square">Square</option>
-    <option value="Box">Box</option>
-    <option value="Star">Star</option>
-    <option value="None">None</option>
-  </select>
-  <input class="form-control mr-2 mb-2 mt-2" type="button" value="Undo" id="undo">
-</form>
+<div class="row">
+  <div class="col-auto">
+    <span class="input-group">
+      <label class="input-group-text" for="type">Shape type:</label>
+      <select class="form-select" id="type">
+        <option value="Circle">Circle</option>
+        <option value="Square">Square</option>
+        <option value="Box">Box</option>
+        <option value="Star">Star</option>
+        <option value="None">None</option>
+      </select>
+      <input class="form-control" type="button" value="Undo" id="undo">
+    </span>
+  </div>
+</div>
diff --git a/examples/export-map.html b/examples/export-map.html
@@ -6,10 +6,10 @@
   Example of exporting a map as a PNG image.
 tags: "export, png, openstreetmap"
 resources:
-  - https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
+  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
   - https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css
   - https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css
 ---
 <div id="map" class="map"></div>
-<a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>
+<a id="export-png" class="btn btn-outline-dark" role="button"><i class="fa fa-download"></i> Download PNG</a>
 <a id="image-download" download="map.png"></a>
diff --git a/examples/geographic.html b/examples/geographic.html
@@ -8,9 +8,8 @@
   not geographic).
 tags: "geographic"
 resources:
-  - https://code.jquery.com/jquery-3.5.1.min.js
-  - https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
-  - https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js
+  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
+  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
 ---
 <div id="map" class="map">
   <div id="popup"></div>