Merge pull request #11340 from MoonE/examples-fix-build

Examples fix / improvement

examples/kml-earthquakes.js

@@ -73,11 +73,7 @@ const displayFeatureInfo = function (pixel) {
     return feature;
   });
   if (feature) {
-    info
+    info.attr('data-original-title', feature.get('name')).tooltip('show');
-      .tooltip('hide')
-      .attr('data-original-title', feature.get('name'))
-      .tooltip('fixTitle')
-      .tooltip('show');
   } else {
     info.tooltip('hide');
   }

examples/layer-group.html

@@ -6,7 +6,7 @@ docs: >
   Example of a map with layer group.
 tags: "tilejson, input, bind, group, layergroup"
 resources:
-  - https://code.jquery.com/jquery-2.2.3.min.js
+  - https://code.jquery.com/jquery-3.5.1.min.js
 cloak:
   - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
     value: Your Mapbox access token from https://mapbox.com/ here

examples/topolis.html

@@ -8,7 +8,7 @@ docs: >
 tags: "draw, edit, vector, topology, topolis"
 resources:
   - https://unpkg.com/topolis@0.2.5/dist/topolis.js
-  - https://code.jquery.com/jquery-3.1.1.min.js
+  - https://code.jquery.com/jquery-3.5.1.min.js
   - https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.js
   - https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.css
 ---

examples/vector-esri-edit.html

@@ -6,7 +6,7 @@ docs: >
   This example loads features from ArcGIS REST Feature Service and allows to add new features or update existing features.
 tags: "vector, esri, ArcGIS, REST, Feature, Service, loading, server, edit, updateFeature, addFeature"
 resources:
-  - https://code.jquery.com/jquery-2.2.3.min.js
+  - https://code.jquery.com/jquery-3.5.1.min.js
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">

examples/vector-esri.html

@@ -6,7 +6,7 @@ docs: >
   This example loads new features from ArcGIS REST Feature Service when the view extent changes.
 tags: "vector, esri, ArcGIS, REST, Feature, Service, loading, server"
 resources:
-  - https://code.jquery.com/jquery-2.2.3.min.js
+  - https://code.jquery.com/jquery-3.5.1.min.js
 ---
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>

examples/webpack/example-builder.js

@@ -9,9 +9,11 @@ const promisify = require('util').promisify;
 const RawSource = require('webpack-sources').RawSource;
 
 const readFile = promisify(fs.readFile);
-const isCssRegEx = /\.css$/;
+const isCssRegEx = /\.css(\?.*)?$/;
 const isJsRegEx = /\.js(\?.*)?$/;
 const importRegEx = /^import .* from '(.*)';$/;
+const isTemplateJs = /\/(jquery(-\d+\.\d+\.\d+)?|(bootstrap(\.bundle)?))(\.min)?\.js(\?.*)?$/;
+const isTemplateCss = /\/bootstrap(\.min)?\.css(\?.*)?$/;
 
 handlebars.registerHelper(
   'md',
@@ -361,41 +363,34 @@ class ExampleBuilder {
 
     // add additional resources
     if (data.resources) {
-      const resources = [];
+      const localResources = [];
       const remoteResources = [];
-      const codePenResources = [];
+      data.resources.forEach((resource) => {
-      for (let i = 0, ii = data.resources.length; i < ii; ++i) {
+        const remoteResource = /^https?:\/\//.test(resource)
-        const resource = data.resources[i];
+          ? resource
-        const remoteResource =
+          : `https://openlayers.org/en/v${pkg.version}/examples/${resource}`;
-          resource.indexOf('//') === -1
-            ? `https://openlayers.org/en/v${pkg.version}/examples/${resource}`
-            : resource;
-        codePenResources[i] = remoteResource;
         if (isJsRegEx.test(resource)) {
-          resources[i] = `<script src="${resource}"></script>`;
+          if (!isTemplateJs.test(resource)) {
-          remoteResources[i] = `<script src="${remoteResource}"></script>`;
+            localResources.push(`<script src="${resource}"></script>`);
-        } else if (isCssRegEx.test(resource)) {
-          if (resource.indexOf('bootstrap.min.css') === -1) {
-            resources[i] = '<link rel="stylesheet" href="' + resource + '">';
           }
-          remoteResources[i] =
+          remoteResources.push(`<script src="${remoteResource}"></script>`);
-            '<link rel="stylesheet" href="' + remoteResource + '">';
+        } else if (isCssRegEx.test(resource)) {
+          if (!isTemplateCss.test(resource)) {
+            localResources.push(`<link rel="stylesheet" href="${resource}">`);
+          }
+          remoteResources.push(
+            `<link rel="stylesheet" href="${remoteResource}">`
+          );
         } else {
           throw new Error(
-            'Invalid value for resource: ' +
+            `Invalid resource: '${resource}' is not .js or .css: ${data.filename}`
-              resource +
-              ' is not .js or .css: ' +
-              data.filename
           );
         }
-      }
+      });
       data.extraHead = {
-        local: resources.join('\n'),
+        local: localResources.join('\n'),
         remote: remoteResources.join('\n'),
       };
-      data.extraResources = data.resources.length
-        ? ',' + codePenResources.join(',')
-        : '';
     }
 
     const templatePath = path.join(this.templates, data.layout);