Skip to content

Commit 5d29f80

Browse files
GustryGustry
authored
Merge pull request #58 from neo-garaix/add-EsLint
Add EsLint
2 parents bfe3128 + 85623be commit 5d29f80

34 files changed

+3743
-2719
lines changed

‎.github/workflows/test-lint-js.yml

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
name: ESLint 🔍
2+
3+
on:
4+
push:
5+
pull_request:
6+
7+
jobs:
8+
eslint:
9+
name: "ESLint 🇯‌🇸‌"
10+
runs-on: ubuntu-latest
11+
steps:
12+
13+
- uses: actions/checkout@v4
14+
15+
- name: Install modules
16+
run: npm install
17+
18+
- name: Run ESLint
19+
run: npm run eslint-fix

‎CONTRIBUTING.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,24 @@
44

55
Before the next part, you must have installed the dependencies with `npm install` and `composer install` at the project root.
66

7+
### ESLint for Javascript
8+
9+
If you want to see all your issues on the Javascript code without fixing it, you
10+
can run the following command:
11+
12+
```bash
13+
npm run eslint-check
14+
```
15+
16+
If you want to fix the issues automatically, you can run the following command:
17+
18+
```bash
19+
npm run eslint-fix
20+
```
21+
22+
_Note : The command `npm run eslint-fix` may not fix all the issues and print them on the screen.
23+
You'll need to fix them manually._
24+
725
### StyleLint for CSS
826

927
If you want to see all your issues on the CSS code without fixing it, you

‎eslint.config.mjs

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import js from "@eslint/js";
2+
import jsdoc from "eslint-plugin-jsdoc";
3+
export default [
4+
js.configs.recommended,
5+
jsdoc.configs['flat/recommended'],
6+
7+
{
8+
plugins: {
9+
jsdoc,
10+
},
11+
languageOptions: {
12+
ecmaVersion: 2020,
13+
sourceType: "module",
14+
globals: {
15+
Atomics: "readonly",
16+
SharedArrayBuffer: "readonly",
17+
OpenLayers: "readonly",
18+
lizMap: "readonly",
19+
lizDict: "readonly",
20+
lizUrls: "readonly",
21+
lizProj4: "readonly",
22+
23+
window: "readonly",
24+
document: "readonly",
25+
HTMLElement: "readonly",
26+
Node: "readonly",
27+
console: "readonly",
28+
setTimeout: "readonly",
29+
clearTimeout: "readonly",
30+
Event: "readonly",
31+
32+
$: "readonly",
33+
jQuery: "readonly",
34+
},
35+
},
36+
rules: {
37+
"indent": ["error", 4, {
38+
"SwitchCase": 1,
39+
"ignoredNodes": ["TemplateLiteral *"],
40+
}],
41+
"no-prototype-builtins": "off",
42+
"no-undef": "off",
43+
'jsdoc/require-description': 'warn',
44+
},
45+
},
46+
];

‎mapBuilder/www/js/components/AdminControls/SelectExtentControl.js

Lines changed: 101 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -4,126 +4,108 @@ import {createBox} from "ol/interaction/Draw";
44
import {transformExtent} from "ol/proj";
55

66
/**
7-
* Class representing a button to draw an extent on the map.
8-
* @extends Control
7+
* @augments Control
8+
* @typedef {object} HTMLButtonElement
9+
* @typedef {object} Vector
10+
* @typedef {object} QueueExtent
11+
* @property {Draw} _draw Draw.
12+
* @property {boolean} _isActive Is active.
13+
* @property {HTMLButtonElement} _button Button.
14+
* @property {Vector} _source Source.
15+
* @property {QueueExtent} _history History of extent.
16+
* @property {Map} _map Map.
917
*/
1018
export class SelectExtentControl extends Control {
11-
/**
12-
* @type {Draw}
13-
*/
14-
#draw;
15-
/**
16-
* @type {boolean}
17-
*/
18-
#isActive;
19-
/**
20-
* @type {HTMLButtonElement}
21-
*/
22-
#button;
23-
/**
24-
* @type {VectorSource}
25-
*/
26-
#source;
27-
/**
28-
* @type {QueueExtent}
29-
*/
30-
#history;
31-
/**
32-
* @type {Map}
33-
*/
34-
#map;
35-
36-
/**
37-
* @typedef {Object} Options
38-
* @property {VectorSource} [source] Source.
39-
* @property {QueueExtent} [history] History of extent.
40-
*/
41-
constructor(opt_options) {
42-
43-
let options = opt_options || {};
44-
45-
let button = document.createElement('button');
46-
button.className = 'fas fa-pen-square';
47-
button.title = 'Once clicked, select the extent you wish on the map';
48-
49-
let element = document.createElement('div');
50-
element.className = 'ol-select-extent ol-unselectable ol-control';
51-
element.appendChild(button);
52-
53-
super({
54-
element: element,
55-
target: options.target,
56-
});
57-
58-
this.#button = button;
59-
60-
this.#isActive = false;
61-
62-
this.#source = options.source;
63-
64-
this.#draw = new Draw({
65-
source: this.#source,
66-
type: 'Circle',
67-
geometryFunction: createBox()
68-
});
69-
70-
this.#history = options.history;
71-
72-
//Clear the source when the user starts to draw a new extent
73-
this.#draw.on('drawstart', () => {
74-
this.#source.clear();
75-
76-
//Disable buttons to prevent bugs from user
77-
this.#button.disabled = true;
78-
this.#button.id = "control-button-disabled";
79-
let undoElement = document.querySelector(".ol-do-control-undo")
80-
undoElement.id = "control-button-disabled";
81-
undoElement.disabled = true;
82-
let redoElement = document.querySelector(".ol-do-control-redo")
83-
redoElement.id = "control-button-disabled";
84-
redoElement.disabled = true;
85-
});
86-
87-
//Set the extent in the input field when the user finishes to draw an extent
88-
this.#draw.on('drawend', (e) => {
89-
let tmpExtent = e.feature.getGeometry().getExtent();
90-
$('#jforms_mapBuilderAdmin_config_extent').val(transformExtent(tmpExtent, 'EPSG:3857', 'EPSG:4326'));
91-
92-
//Enable button
93-
this.#button.disabled = false;
94-
this.#button.id = "";
95-
96-
this.#history.deleteAllAfter(this.#history.getIndex());
97-
98-
this.#history.increaseIndex();
99-
this.#history.addElement(tmpExtent);
100-
101-
let undoElement = document.querySelector(".ol-do-control-undo")
102-
undoElement.id = "";
103-
undoElement.disabled = false;
104-
});
105-
106-
this.#button.addEventListener('click', this.handleSelectExtent.bind(this), false);
107-
}
108-
109-
//Handle the click event on the button
110-
handleSelectExtent() {
111-
if (this.#isActive) {
112-
this.#map.removeInteraction(this.#draw);
113-
this.#isActive = false;
114-
document.querySelector(".fas.fa-pen-square").style.backgroundColor = '';
115-
} else {
116-
this.#map.addInteraction(this.#draw);
117-
this.#isActive = true;
118-
document.querySelector(".fas.fa-pen-square").style.backgroundColor = '#FFCDCD';
19+
/**
20+
* Class representing a button to draw an extent on the map.
21+
* @param {object} opt_options Control options.
22+
*/
23+
constructor(opt_options) {
24+
25+
let options = opt_options || {};
26+
27+
let button = document.createElement('button');
28+
button.className = 'fas fa-pen-square';
29+
button.title = 'Once clicked, select the extent you wish on the map';
30+
31+
let element = document.createElement('div');
32+
element.className = 'ol-select-extent ol-unselectable ol-control';
33+
element.appendChild(button);
34+
35+
super({
36+
element: element,
37+
target: options.target,
38+
});
39+
40+
this._button = button;
41+
42+
this._isActive = false;
43+
44+
this._source = options.source;
45+
46+
this._draw = new Draw({
47+
source: this._source,
48+
type: 'Circle',
49+
geometryFunction: createBox()
50+
});
51+
52+
this._history = options.history;
53+
54+
//Clear the source when the user starts to draw a new extent
55+
this._draw.on('drawstart', () => {
56+
this._source.clear();
57+
58+
//Disable buttons to prevent bugs from user
59+
this._button.disabled = true;
60+
this._button.id = "control-button-disabled";
61+
let undoElement = document.querySelector(".ol-do-control-undo")
62+
undoElement.id = "control-button-disabled";
63+
undoElement.disabled = true;
64+
let redoElement = document.querySelector(".ol-do-control-redo")
65+
redoElement.id = "control-button-disabled";
66+
redoElement.disabled = true;
67+
});
68+
69+
//Set the extent in the input field when the user finishes to draw an extent
70+
this._draw.on('drawend', (e) => {
71+
let tmpExtent = e.feature.getGeometry().getExtent();
72+
$('#jforms_mapBuilderAdmin_config_extent').val(transformExtent(tmpExtent, 'EPSG:3857', 'EPSG:4326'));
73+
74+
//Enable button
75+
this._button.disabled = false;
76+
this._button.id = "";
77+
78+
this._history.deleteAllAfter(this._history.getIndex());
79+
80+
this._history.increaseIndex();
81+
this._history.addElement(tmpExtent);
82+
83+
let undoElement = document.querySelector(".ol-do-control-undo")
84+
undoElement.id = "";
85+
undoElement.disabled = false;
86+
});
87+
88+
this._button.addEventListener('click', this.handleSelectExtent.bind(this), false);
89+
}
90+
91+
//Handle the click event on the button
92+
handleSelectExtent() {
93+
if (this._isActive) {
94+
this._map.removeInteraction(this._draw);
95+
this._isActive = false;
96+
document.querySelector(".fas.fa-pen-square").style.backgroundColor = '';
97+
} else {
98+
this._map.addInteraction(this._draw);
99+
this._isActive = true;
100+
document.querySelector(".fas.fa-pen-square").style.backgroundColor = '#FFCDCD';
101+
}
102+
}
103+
104+
/**
105+
* Set the map value.
106+
* @param {Map} value Map.
107+
*/
108+
set map(value) {
109+
this._map = value;
119110
}
120-
}
121-
122-
/**
123-
* Set the map value.
124-
* @param {Map} value Map.
125-
*/
126-
set map(value) {
127-
this.#map = value;
128-
}
129111
}

0 commit comments

Comments
 (0)