Use es6 class inheritance in examples

Instead of using the deprecated `inherits` function.

examples/custom-controls.js

@@ -1,4 +1,3 @@
-import {inherits} from '../src/ol/util.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {defaults as defaultControls, Control} from '../src/ol/control.js';
@@ -6,13 +5,6 @@ import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
 
 
-/**
- * Define a namespace for the application.
- */
-window.app = {};
-const app = window.app;
-
-
 //
 // Define rotate to north control.
 //
@@ -23,32 +15,31 @@ const app = window.app;
  * @extends {module:ol/control/Control~Control}
  * @param {Object=} opt_options Control options.
  */
-app.RotateNorthControl = function(opt_options) {
+class RotateNorthControl extends Control {
 
-  const options = opt_options || {};
+  constructor(opt_options) {
+    const options = opt_options || {};
 
-  const button = document.createElement('button');
-  button.innerHTML = 'N';
+    const button = document.createElement('button');
+    button.innerHTML = 'N';
 
-  const this_ = this;
-  const handleRotateNorth = function() {
-    this_.getMap().getView().setRotation(0);
-  };
+    const element = document.createElement('div');
+    element.className = 'rotate-north ol-unselectable ol-control';
+    element.appendChild(button);
 
-  button.addEventListener('click', handleRotateNorth, false);
-  button.addEventListener('touchstart', handleRotateNorth, false);
+    super({
+      element: element,
+      target: options.target
+    });
 
-  const element = document.createElement('div');
-  element.className = 'rotate-north ol-unselectable ol-control';
-  element.appendChild(button);
+    button.addEventListener('click', this.handleRotateNorth.bind(this), false);
+  }
 
-  Control.call(this, {
-    element: element,
-    target: options.target
-  });
+  handleRotateNorth() {
+    this.getMap().getView().setRotation(0);
+  }
 
-};
-inherits(app.RotateNorthControl, Control);
+}
 
 
 //
@@ -62,7 +53,7 @@ const map = new Map({
       collapsible: false
     }
   }).extend([
-    new app.RotateNorthControl()
+    new RotateNorthControl()
   ]),
   layers: [
     new TileLayer({

examples/custom-interactions.js

@@ -1,4 +1,3 @@
-import {inherits} from '../src/ol/util.js';
 import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
@@ -9,58 +8,51 @@ import {TileJSON, Vector as VectorSource} from '../src/ol/source.js';
 import {Fill, Icon, Stroke, Style} from '../src/ol/style.js';
 
 
-/**
- * Define a namespace for the application.
- */
-const app = {};
-
-
 /**
  * @constructor
  * @extends {module:ol/interaction/Pointer}
  */
-app.Drag = function() {
+class Drag extends PointerInteraction {
+  constructor() {
+    super({
+      handleDownEvent: handleDownEvent,
+      handleDragEvent: handleDragEvent,
+      handleMoveEvent: handleMoveEvent,
+      handleUpEvent: handleUpEvent
+    });
 
-  PointerInteraction.call(this, {
-    handleDownEvent: app.Drag.prototype.handleDownEvent,
-    handleDragEvent: app.Drag.prototype.handleDragEvent,
-    handleMoveEvent: app.Drag.prototype.handleMoveEvent,
-    handleUpEvent: app.Drag.prototype.handleUpEvent
-  });
+    /**
+     * @type {module:ol/pixel~Pixel}
+     * @private
+     */
+    this.coordinate_ = null;
 
-  /**
-   * @type {module:ol/pixel~Pixel}
-   * @private
-   */
-  this.coordinate_ = null;
+    /**
+     * @type {string|undefined}
+     * @private
+     */
+    this.cursor_ = 'pointer';
 
-  /**
-   * @type {string|undefined}
-   * @private
-   */
-  this.cursor_ = 'pointer';
+    /**
+     * @type {module:ol/Feature~Feature}
+     * @private
+     */
+    this.feature_ = null;
 
-  /**
-   * @type {module:ol/Feature~Feature}
-   * @private
-   */
-  this.feature_ = null;
-
-  /**
-   * @type {string|undefined}
-   * @private
-   */
-  this.previousCursor_ = undefined;
-
-};
-inherits(app.Drag, PointerInteraction);
+    /**
+     * @type {string|undefined}
+     * @private
+     */
+    this.previousCursor_ = undefined;
+  }
+}
 
 
 /**
  * @param {module:ol/MapBrowserEvent~MapBrowserEvent} evt Map browser event.
  * @return {boolean} `true` to start the drag sequence.
  */
-app.Drag.prototype.handleDownEvent = function(evt) {
+function handleDownEvent(evt) {
   const map = evt.map;
 
   const feature = map.forEachFeatureAtPixel(evt.pixel,
@@ -74,13 +66,13 @@ app.Drag.prototype.handleDownEvent = function(evt) {
   }
 
   return !!feature;
-};
+}
 
 
 /**
  * @param {module:ol/MapBrowserEvent~MapBrowserEvent} evt Map browser event.
  */
-app.Drag.prototype.handleDragEvent = function(evt) {
+function handleDragEvent(evt) {
   const deltaX = evt.coordinate[0] - this.coordinate_[0];
   const deltaY = evt.coordinate[1] - this.coordinate_[1];
 
@@ -89,13 +81,13 @@ app.Drag.prototype.handleDragEvent = function(evt) {
 
   this.coordinate_[0] = evt.coordinate[0];
   this.coordinate_[1] = evt.coordinate[1];
-};
+}
 
 
 /**
  * @param {module:ol/MapBrowserEvent~MapBrowserEvent} evt Event.
  */
-app.Drag.prototype.handleMoveEvent = function(evt) {
+function handleMoveEvent(evt) {
   if (this.cursor_) {
     const map = evt.map;
     const feature = map.forEachFeatureAtPixel(evt.pixel,
@@ -113,17 +105,17 @@ app.Drag.prototype.handleMoveEvent = function(evt) {
       this.previousCursor_ = undefined;
     }
   }
-};
+}
 
 
 /**
  * @return {boolean} `false` to stop the drag sequence.
  */
-app.Drag.prototype.handleUpEvent = function() {
+function handleUpEvent() {
   this.coordinate_ = null;
   this.feature_ = null;
   return false;
-};
+}
 
 
 const pointFeature = new Feature(new Point([0, 0]));
@@ -137,7 +129,7 @@ const polygonFeature = new Feature(
 
 
 const map = new Map({
-  interactions: defaultInteractions().extend([new app.Drag()]),
+  interactions: defaultInteractions().extend([new Drag()]),
   layers: [
     new TileLayer({
       source: new TileJSON({