typescript version

Author: jonataswalker

.eslintignore

@@ -1,2 +1,3 @@
 /dist
 /node_modules
+/examples

.eslintrc.cjs

@@ -14,13 +14,26 @@ module.exports = {
         'no-magic-numbers': 'off',
         'no-unused-vars': 'off',
         'no-this-before-super': 'off',
+        'no-use-before-define': 'off',
         'class-methods-use-this': 'off',
         'import/no-unused-modules': 'off',
+        'import/no-extraneous-dependencies': 'off',
         'unicorn/prevent-abbreviations': 'off',
         'unicorn/prefer-dom-node-append': 'off',
         'security/detect-object-injection': 'off',
         '@typescript-eslint/naming-convention': 'off',
         '@typescript-eslint/no-magic-numbers': 'off',
         '@typescript-eslint/prefer-readonly-parameter-types': 'off',
+        '@typescript-eslint/no-use-before-define': [
+            'error',
+            { typedefs: false, ignoreTypeReferences: true },
+        ],
+
+        'import/extensions': [
+            'error',
+            {
+                js: 'ignorePackages',
+            },
+        ],
     },
 };

.gitignore

@@ -1,16 +1,8 @@
-# Logs
 logs
 *.log
 npm-debug.log*
-
-# Dependency directories
 node_modules
-
-# dist
 dist
-
-# Optional npm cache directory
 .npm
-
-# eslint
 .eslintcache
+coverage

.travis.yml

@@ -6,5 +6,8 @@
     "editor.codeActionsOnSave": ["source.fixAll.eslint"],
     "eslint.validate": ["javascript", "javascriptreact", "typescript"],
     "typescript.tsdk": "./node_modules/typescript/lib",
-    "svg.preview.background": "editor"
+    "svg.preview.background": "editor",
+    "[ignore]": {
+        "editor.defaultFormatter": "foxundermoon.shell-format"
+    }
 }

.vscode/settings.json

@@ -1,73 +1,77 @@
 # OpenLayers Custom Context Menu
 
 <p align="center">
-  <a href="https://travis-ci.org/jonataswalker/ol-contextmenu">
-    <img src="https://travis-ci.org/jonataswalker/ol-contextmenu.svg?branch=master" alt="build status">
-  </a>
-  <a href="https://www.npmjs.com/package/ol-contextmenu">
-    <img src="https://img.shields.io/npm/v/ol-contextmenu.svg"
-      alt="npm version">
-  </a>
-  <a href="https://github.com/jonataswalker/ol-contextmenu/blob/master/LICENSE">
-    <img src="https://img.shields.io/npm/l/ol-contextmenu.svg"
-      alt="license">
-  </a>
-  <a href="https://david-dm.org/jonataswalker/ol-contextmenu">
-    <img src="https://david-dm.org/jonataswalker/ol-contextmenu/status.svg"
-      alt="dependency status">
-  </a>
-  <a href="https://david-dm.org/jonataswalker/ol-contextmenu">
-    <img src="https://david-dm.org/jonataswalker/ol-contextmenu/dev-status.svg" alt="devDependency status">
-  </a>
+    <a href="https://github.com/jonataswalker/ol-contextmenu/actions/workflows/test.yml">
+        <img src="https://github.com/jonataswalker/ol-contextmenu/actions/workflows/test.yml/badge.svg?branch=master" alt="Build Status">
+    </a>
+    <a href="https://www.npmjs.com/package/ol-contextmenu">
+        <img src="https://img.shields.io/npm/v/ol-contextmenu.svg" alt="npm version">
+    </a>
+    <a href="https://img.shields.io/npm/dm/ol-contextmenu">
+        <img alt="npm" src="https://img.shields.io/npm/dm/ol-contextmenu">
+    </a>
+    <a href="https://github.com/jonataswalker/ol-contextmenu/blob/master/LICENSE">
+        <img src="https://img.shields.io/npm/l/ol-contextmenu.svg" alt="license">
+    </a>
 </p>
 
 A `contextmenu` extension for [OpenLayers](http://openlayers.org/). **Requires** OpenLayers **v3.11.0** or higher.
 
 ![contextmenu anim](https://raw.githubusercontent.com/jonataswalker/ol-contextmenu/screenshot/images/anim.gif)
 
 ## Demo
+
 You can see [here a demo](http://rawgit.com/jonataswalker/ol-contextmenu/master/examples/contextmenu.html) or [JSFiddle](https://jsfiddle.net/jonataswalker/ooxs1w5d/).
 
 ## How to use it?
+
 ##### NPM
+
 `npm install ol-contextmenu`
 
 ##### CDN Hosted - [jsDelivr](https://www.jsdelivr.com/package/npm/ol-contextmenu)
+
 Load CSS and Javascript:
+
 ```HTML
-<link href="https://cdn.jsdelivr.net/npm/ol-contextmenu@latest/dist/ol-contextmenu.min.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/ol-contextmenu@latest/dist/ol-contextmenu.css" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/ol-contextmenu"></script>
 ```
 
 ##### CDN Hosted - UNPKG
+
 Load CSS and Javascript:
+
 ```HTML
-<link href="https://unpkg.com/ol-contextmenu/dist/ol-contextmenu.min.css" rel="stylesheet">
+<link href="https://unpkg.com/ol-contextmenu/dist/ol-contextmenu.css" rel="stylesheet">
 <script src="https://unpkg.com/ol-contextmenu"></script>
 ```
+
 ##### Self hosted
+
 Download [latest release](https://github.com/jonataswalker/ol-contextmenu/releases/latest) and (obviously) load CSS and Javascript.
 
 ##### Instantiate with some options and add the Control
+
 ```javascript
 var contextmenu = new ContextMenu({
-  width: 170,
-  defaultItems: true, // defaultItems are (for now) Zoom In/Zoom Out
-  items: [
-    {
-      text: 'Center map here',
-      classname: 'some-style-class', // add some CSS rules
-      callback: center // `center` is your callback function
-    },
-    {
-      text: 'Add a Marker',
-      classname: 'some-style-class', // you can add this icon with a CSS class
-                                     // instead of `icon` property (see next line)
-      icon: 'img/marker.png',  // this can be relative or absolute
-      callback: marker
-    },
-    '-' // this is a separator
-  ]
+    width: 170,
+    defaultItems: true, // defaultItems are (for now) Zoom In/Zoom Out
+    items: [
+        {
+            text: 'Center map here',
+            classname: 'some-style-class', // add some CSS rules
+            callback: center, // `center` is your callback function
+        },
+        {
+            text: 'Add a Marker',
+            classname: 'some-style-class', // you can add this icon with a CSS class
+            // instead of `icon` property (see next line)
+            icon: 'img/marker.png', // this can be relative or absolute
+            callback: marker,
+        },
+        '-', // this is a separator
+    ],
 });
 map.addControl(contextmenu);
 ```
@@ -78,55 +82,57 @@ If you provide `items {Array}` a submenu will be created as a child of the curre
 
 ```javascript
 var all_items = [
-  {
-    text: 'Some Actions',
-    items: [ // <== this is a submenu
-      {
-        text: 'Action 1',
-        callback: action
-      },
-      {
-        text: 'Other action',
-        callback: action2
-      }
-    ]
-  },
-  {
-    text: 'Add a Marker',
-    icon: 'img/marker.png',
-    callback: marker
-  },
-  '-' // this is a separator
+    {
+        text: 'Some Actions',
+        items: [
+            // <== this is a submenu
+            {
+                text: 'Action 1',
+                callback: action,
+            },
+            {
+                text: 'Other action',
+                callback: action2,
+            },
+        ],
+    },
+    {
+        text: 'Add a Marker',
+        icon: 'img/marker.png',
+        callback: marker,
+    },
+    '-', // this is a separator
 ];
 ```
 
 ##### Would you like to propagate custom data to the callback handler?
+
 ```javascript
 var removeMarker = function (obj) {
-  vectorLayer.getSource().removeFeature(obj.data.marker);
+    vectorLayer.getSource().removeFeature(obj.data.marker);
 };
 var removeMarkerItem = {
-  text: 'Remove this Marker',
-  icon: 'img/marker.png',
-  callback: removeMarker
+    text: 'Remove this Marker',
+    icon: 'img/marker.png',
+    callback: removeMarker,
 };
 
 var restore = false;
 contextmenu.on('open', function (evt) {
-  var feature = map.forEachFeatureAtPixel(evt.pixel, function (ft, l) {
-    return ft;
-  });
-  if (feature) {
-    contextmenu.clear();
-    removeMarkerItem.data = { marker: feature };
-    contextmenu.push(removeMarkerItem);
-    restore = true;
-  } else if (restore) {
-    contextmenu.clear();
-    contextmenu.extend(contextmenu_items);
-    contextmenu.extend(contextmenu.getDefaultItems());
-    restore = false;
-  }
+    var feature = map.forEachFeatureAtPixel(evt.pixel, function (ft, l) {
+        return ft;
+    });
+    if (feature) {
+        contextmenu.clear();
+        removeMarkerItem.data = { marker: feature };
+        contextmenu.push(removeMarkerItem);
+        restore = true;
+    } else if (restore) {
+        contextmenu.clear();
+        contextmenu.extend(contextmenu_items);
+        contextmenu.extend(contextmenu.getDefaultItems());
+        restore = false;
+    }
 });
 ```
 
@@ -137,10 +143,11 @@ contextmenu.on('open', function (evt) {
 #### `new ContextMenu(options)`
 
 ###### `options` is an object with the following possible properties:
-* `eventType`: `contextmenu`; The listening event type (You could use `'click'`, `'dblclick'`)
-* `defaultItems`: `true`; Whether the default items (which are: Zoom In/Out) are enabled
-* `width`: `150`; The menu's width
-* `items`: `[]`; An array of object|string
+
+-   `eventType`: `contextmenu`; The listening event type (You could use `'click'`, `'dblclick'`)
+-   `defaultItems`: `true`; Whether the default items (which are: Zoom In/Out) are enabled
+-   `width`: `150`; The menu's width
+-   `items`: `[]`; An array of object|string
 
 ## Methods
 
@@ -159,17 +166,18 @@ Close the menu programmatically.
 Add items to the menu. This pushes each item in the provided array to the end of the menu.
 
 Example:
+
 ```js
 var contextmenu = new ContextMenu();
 map.addControl(contextmenu);
 
 var add_later = [
-  '-', // this is a separator
-  {
-    text: 'Add a Marker',
-    icon: 'img/marker.png',
-    callback: marker
-  }
+    '-', // this is a separator
+    {
+        text: 'Add a Marker',
+        icon: 'img/marker.png',
+        callback: marker,
+    },
 ];
 contextmenu.extend(add_later);
 ```
@@ -202,43 +210,43 @@ Whether the menu is open.
 
 Update menu's position.
 
-
 ## Events
 
 #### If you want to disable this plugin under certain circumstances, listen to `beforeopen`
 
 ```javascript
 contextmenu.on('beforeopen', function (evt) {
-  var feature = map.forEachFeatureAtPixel(evt.pixel, function (ft, l) {
-    return ft;
-  });
-
-  if (feature) { // open only on features
-    contextmenu.enable();
-  } else {
-    contextmenu.disable();
-  }
+    var feature = map.forEachFeatureAtPixel(evt.pixel, function (ft, l) {
+        return ft;
+    });
+
+    if (feature) {
+        // open only on features
+        contextmenu.enable();
+    } else {
+        contextmenu.disable();
+    }
 });
 ```
 
 #### Listen and make some changes when context menu opens
 
 ```javascript
-contextmenu.on('open', function(evt){
-  var feature = map.forEachFeatureAtPixel(evt.pixel, function (ft, l) {
-    return ft;
-  });
-
-  if (feature) {
-    // add some other items to the menu
-  }
+contextmenu.on('open', function (evt) {
+    var feature = map.forEachFeatureAtPixel(evt.pixel, function (ft, l) {
+        return ft;
+    });
+
+    if (feature) {
+        // add some other items to the menu
+    }
 });
 ```
 
 #### Any action when context menu gets closed?
 
 ```javascript
 contextmenu.on('close', function (evt) {
-  // it's upon you
+    // it's upon you
 });
 ```