Various fixes for browser compatibility issues (#12740)

* Replace Math.log2 with ol/math.log2
* TypedArray.from() browser compatibility fallback
* listen for input and change events for range

examples/cluster.js

@@ -77,13 +77,17 @@ const map = new Map({
   }),
 });
 
-distanceInput.addEventListener('input', function () {
+const distanceHandler = function () {
   clusterSource.setDistance(parseInt(distanceInput.value, 10));
-});
+};
+distanceInput.addEventListener('input', distanceHandler);
+distanceInput.addEventListener('change', distanceHandler);
 
-minDistanceInput.addEventListener('input', function () {
+const minDistanceHandler = function () {
   clusterSource.setMinDistance(parseInt(minDistanceInput.value, 10));
-});
+};
+minDistanceInput.addEventListener('input', minDistanceHandler);
+minDistanceInput.addEventListener('change', minDistanceHandler);
 
 map.on('click', (e) => {
   clusters.getFeatures(e.pixel).then((clickedFeatures) => {

examples/color-manipulation.js

@@ -166,10 +166,12 @@ const controlIds = ['hue', 'chroma', 'lightness'];
 controlIds.forEach(function (id) {
   const control = document.getElementById(id);
   const output = document.getElementById(id + 'Out');
-  control.addEventListener('input', function () {
+  const listener = function () {
     output.innerText = control.value;
     raster.changed();
-  });
+  };
+  control.addEventListener('input', listener);
+  control.addEventListener('change', listener);
   output.innerText = control.value;
   controls[id] = control;
 });

examples/disable-image-smoothing.js

@@ -56,10 +56,12 @@ imagery.on('prerender', function (evt) {
 
 const control = document.getElementById('opacity');
 const output = document.getElementById('output');
-control.addEventListener('input', function () {
+const listener = function () {
   output.innerText = control.value;
   imagery.setOpacity(control.value / 100);
-});
+};
+control.addEventListener('input', listener);
+control.addEventListener('change', listener);
 output.innerText = control.value;
 imagery.setOpacity(control.value / 100);
 

examples/igc.js

@@ -179,8 +179,9 @@ const featureOverlay = new VectorLayer({
   }),
 });
 
-document.getElementById('time').addEventListener('input', function () {
+const control = document.getElementById('time');
-  const value = parseInt(this.value, 10) / 100;
+const listener = function () {
+  const value = parseInt(control.value, 10) / 100;
   const m = time.start + time.duration * value;
   vectorSource.forEachFeature(function (feature) {
     const geometry =
@@ -198,4 +199,6 @@ document.getElementById('time').addEventListener('input', function () {
     }
   });
   map.render();
-});
+};
+control.addEventListener('input', listener);
+control.addEventListener('change', listener);

examples/layer-group.js

@@ -49,7 +49,7 @@ function bindInputs(layerid, layer) {
   visibilityInput.prop('checked', layer.getVisible());
 
   const opacityInput = $(layerid + ' input.opacity');
-  opacityInput.on('input', function () {
+  opacityInput.on('input change', function () {
     layer.setOpacity(parseFloat(this.value));
   });
   opacityInput.val(String(layer.getOpacity()));

examples/layer-swipe.js

@@ -57,10 +57,8 @@ aerial.on('postrender', function (event) {
   ctx.restore();
 });
 
-swipe.addEventListener(
+const listener = function () {
-  'input',
+  map.render();
-  function () {
+};
-    map.render();
+swipe.addEventListener('input', listener);
-  },
+swipe.addEventListener('change', listener);
-  false
-);

examples/region-growing.js

@@ -137,7 +137,9 @@ function updateControlValue() {
 }
 updateControlValue();
 
-thresholdControl.addEventListener('input', function () {
+const listener = function () {
   updateControlValue();
   raster.changed();
-});
+};
+thresholdControl.addEventListener('input', listener);
+thresholdControl.addEventListener('change', listener);

examples/sea-level.js

@@ -67,10 +67,12 @@ const map = new Map({
 
 const control = document.getElementById('level');
 const output = document.getElementById('output');
-control.addEventListener('input', function () {
+const listener = function () {
   output.innerText = control.value;
   raster.changed();
-});
+};
+control.addEventListener('input', listener);
+control.addEventListener('change', listener);
 output.innerText = control.value;
 
 raster.on('beforeoperations', function (event) {

examples/shaded-relief.js

@@ -159,10 +159,12 @@ const controls = {};
 controlIds.forEach(function (id) {
   const control = document.getElementById(id);
   const output = document.getElementById(id + 'Out');
-  control.addEventListener('input', function () {
+  const listener = function () {
     output.innerText = control.value;
     raster.changed();
-  });
+  };
+  control.addEventListener('input', listener);
+  control.addEventListener('change', listener);
   output.innerText = control.value;
   controls[id] = control;
 });

examples/webgl-sea-level.js

@@ -71,10 +71,12 @@ const map = new Map({
 
 const control = document.getElementById('level');
 const output = document.getElementById('output');
-control.addEventListener('input', function () {
+const listener = function () {
   output.innerText = control.value;
   elevation.updateStyleVariables({level: parseFloat(control.value)});
-});
+};
+control.addEventListener('input', listener);
+control.addEventListener('change', listener);
 output.innerText = control.value;
 
 const locations = document.getElementsByClassName('location');

examples/webgl-shaded-relief.js

@@ -67,10 +67,12 @@ controlIds.forEach(function (id) {
     variables[id] = Number(control.value);
   }
   updateValues();
-  control.addEventListener('input', () => {
+  const listener = function () {
     updateValues();
     shadedRelief.updateStyleVariables(variables);
-  });
+  };
+  control.addEventListener('input', listener);
+  control.addEventListener('change', listener);
 });
 
 const map = new Map({

examples/webgl-tile-style.js

@@ -38,18 +38,20 @@ const map = new Map({
   }),
 });
 
-for (const name in variables) {
+let variable;
+for (variable in variables) {
+  const name = variable;
   const element = document.getElementById(name);
   const value = variables[name];
   element.value = value.toString();
-  document.getElementById(`${name}-value`).innerText = `(${value})`;
+  document.getElementById(name + '-value').innerText = value.toFixed(2);
-
+  const listener = function (event) {
-  element.addEventListener('input', function (event) {
     const value = parseFloat(event.target.value);
-    document.getElementById(`${name}-value`).innerText = `(${value})`;
+    document.getElementById(name + '-value').innerText = value.toFixed(2);
-
     const updates = {};
     updates[name] = value;
     layer.updateStyleVariables(updates);
-  });
+  };
+  element.addEventListener('input', listener);
+  element.addEventListener('change', listener);
 }

examples/wmts-dimensions.js

@@ -61,13 +61,11 @@ const map = new Map({
   ],
 });
 
-const updateSourceDimension = function (source, sliderVal) {
+const slider = document.getElementById('slider');
-  source.updateDimensions({'threshold': sliderVal});
+const updateSourceDimension = function () {
-  document.getElementById('theinfo').innerHTML = sliderVal + ' meters';
+  wmtsSource.updateDimensions({'threshold': slider.value});
+  document.getElementById('theinfo').innerHTML = slider.value + ' meters';
 };
-
+slider.addEventListener('input', updateSourceDimension);
-updateSourceDimension(wmtsSource, 10);
+slider.addEventListener('change', updateSourceDimension);
-
+updateSourceDimension();
-document.getElementById('slider').addEventListener('input', function () {
-  updateSourceDimension(wmtsSource, this.value);
-});

src/ol/style/expressions.js

@@ -5,6 +5,7 @@
 
 import {Uniforms} from '../renderer/webgl/TileLayer.js';
 import {asArray, isStringColor} from '../color.js';
+import {log2} from '../math.js';
 
 /**
  * Base type used for literal style parameters; can be a number literal or the output of an operator,
@@ -173,7 +174,7 @@ export function getValueType(value) {
  * @return {boolean} True if only one type flag is enabled, false if zero or multiple
  */
 export function isTypeUnique(valueType) {
-  return Math.log2(valueType) % 1 === 0;
+  return log2(valueType) % 1 === 0;
 }
 
 /**

src/ol/webgl/Buffer.js

@@ -73,7 +73,10 @@ class WebGLArrayBuffer {
    * @param {Array<number>} array Numerical array
    */
   fromArray(array) {
-    this.array = getArrayClassForType(this.type).from(array);
+    const arrayClass = getArrayClassForType(this.type);
+    this.array = arrayClass.from
+      ? arrayClass.from(array)
+      : new arrayClass(array);
   }
 
   /**