Feature - added in eslint and prettier to control code quality and format of code.

.editorconfig

@@ -0,0 +1,34 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# change these settings to your own preference
+indent_style = space
+indent_size = 4
+
+# keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.{markdown,md}]
+trim_trailing_whitespace = false
+
+[{package,bower}.json]
+indent_style = space
+indent_size = 4
+
+# Force JavaScript settings to match ESLint rules
+[*.{js,jsx}]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc

@@ -0,0 +1,31 @@
+{
+    "extends": "standard",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": false
+        },
+        "ecmaVersion": 2022,
+        "sourceType": "module"
+    },
+    "rules": {
+        "indent": "off",
+        "no-throw-literal": "off",
+        "no-undef": "off",
+        "new-cap": "off",
+        "space-before-function-paren": [
+            "error",
+            {
+                "anonymous": "always",
+                "named": "never",
+                "asyncArrow": "ignore"
+            }
+        ],
+        "no-multiple-empty-lines": [
+            "error",
+            {
+                "max": 2
+            }
+        ]
+    }
+}
+

.gitignore

@@ -0,0 +1,2 @@
+node_modules/*
+.idea/*

.gitlab-ci.yml

@@ -0,0 +1,23 @@
+default:
+    image: node:18-alpine
+
+eslint:
+    script:
+        - npm ci
+        - npx eslint --format gitlab wayfarer-exporter.user.js
+        - npx eslint --format gitlab wayfarer-planner.user.js
+        - npx eslint --format gitlab wayfarer-translate.user.js
+    artifacts:
+        reports:
+            codequality: gl-codequality.json
+
+prettier:
+    script:
+        - npm ci
+        - npx prettier --check wayfarer-translate.user.js
+        - npx prettier --check wayfarer-planner.user.js
+        - npx prettier --check wayfarer-exporter.user.js
+    artifacts:
+        reports:
+            codequality: gl-codequality.json
+

.prettierrc.json

@@ -0,0 +1,20 @@
+{
+  "arrowParens": "always",
+  "bracketSameLine": true,
+  "bracketSpacing": true,
+  "embeddedLanguageFormatting": "auto",
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "jsxSingleQuote": false,
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 4,
+  "trailingComma": "none",
+  "useTabs": false,
+  "vueIndentScriptAndStyle": false
+}

package.json

@@ -0,0 +1,10 @@
+{
+  "dependencies": {
+    "eslint-config-standard": "^17.0.0",
+    "prettier": "^2.8.3"
+  },
+  "devDependencies": {
+    "eslint": "^8.32.0",
+    "eslint-formatter-gitlab": "^4.0.0"
+  }
+}

wayfarer-translate.user.js

@@ -12,192 +12,217 @@
 /* eslint no-var: "error" */
 
 function init() {
-	let tryNumber = 15;
+    let tryNumber = 15
 
-	let translateButton;
+    let translateButton
-	let candidate;
+    let candidate
 
-	const SPACING = '\r\n\r\n';
+    const SPACING = '\r\n\r\n'
 
-	let engine = localStorage['translate-engine'];
+    let engine = localStorage['translate-engine']
-	if (!engine) {
+    if (!engine) {
-		engine = 'Google';
+        engine = 'Google'
-		localStorage['translate-engine'] = engine;
+        localStorage['translate-engine'] = engine
-	}
+    }
 
-	/**
+    /**
-	 * Overwrite the open method of the XMLHttpRequest.prototype to intercept the server calls
+     * Overwrite the open method of the XMLHttpRequest.prototype to intercept the server calls
-	 */
+     */
-	(function (open) {
+    ;(function (open) {
-		XMLHttpRequest.prototype.open = function (method, url) {
+        XMLHttpRequest.prototype.open = function (method, url) {
-			if (url == '/api/v1/vault/review') {
+            if (url === '/api/v1/vault/review') {
-				if (method == 'GET') {
+                if (method === 'GET') {
-					this.addEventListener('load', parseCandidate, false);
+                    this.addEventListener('load', parseCandidate, false)
-				}
+                }
-				if (method == 'POST') {
+                if (method === 'POST') {
-					hideButton();
+                    hideButton()
-				}
+                }
-			}
+            }
-			open.apply(this, arguments);
+            open.apply(this, arguments)
-		};
+        }
-	})(XMLHttpRequest.prototype.open);
+    })(XMLHttpRequest.prototype.open)
 
-	addCss();
+    addCss()
 
-	function parseCandidate(e) {
+    function parseCandidate(e) {
-		try {
+        try {
-			const response = this.response;
+            const response = this.response
-			const json = JSON.parse(response);
+            const json = JSON.parse(response)
-			if (!json) {
+            if (!json) {
-				console.log(response);
+                console.log(response)
-				alert('Failed to parse response from Wayfarer');
+                alert('Failed to parse response from Wayfarer')
-				return;
+                return
-			}
+            }
-			// ignore if it's related to captchas
+            // ignore if it's related to captchas
-			if (json.captcha)
+            if (json.captcha) {
-				return;
+                return
+            }
 
-			if (json.code != 'OK')
+            if (json.code !== 'OK') {
-				return;
+                return
+            }
 
-			candidate = json.result;
+            candidate = json.result
-			if (!candidate) {
+            if (!candidate) {
-				console.log(json);
+                console.log(json)
-				alert('Wayfarer\'s response didn\'t include a candidate.');
+                alert("Wayfarer's response didn't include a candidate.")
-				return;
+                return
-			}
+            }
-			addTranslateButton();
+            addTranslateButton()
+        } catch (e) {
+            console.log(e) // eslint-disable-line no-console
+        }
+    }
 
-		} catch (e)	{
+    function getTranslatorLink() {
-			console.log(e); // eslint-disable-line no-console
+        switch (engine) {
-		}
+            case 'Google':
+                return 'https://translate.google.com/?sl=auto&q='
 
-	}
+            default:
+                return (
+                    'https://www.deepl.com/translator#auto/' +
+                    navigator.language +
+                    '/'
+                )
+        }
+    }
 
-	function getTranslatorLink() {
+    function createButton(ref) {
-		switch (engine) {
+        if (!translateButton) {
-			case 'Google':
+            const div = document.createElement('div')
-				return 'https://translate.google.com/?sl=auto&q=';
+            div.className = 'wayfarertranslate'
+            const link = document.createElement('a')
+            link.className = ''
+            link.title = 'Translate nomination'
+            link.innerHTML =
+                '<svg viewBox="0 0 24 24"><path d="M12.87 15.07l-2.54-2.51.03-.03A17.52 17.52 0 0014.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04M18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12m-2.62 7l1.62-4.33L19.12 17h-3.24z"/></svg>'
+            link.target = '_blank'
 
-			default:
+            const select = document.createElement('select')
-				return 'https://www.deepl.com/translator#auto/' + navigator.language + '/';
+            select.title = 'Select translation engine'
-		}
+            const engines = [
-	}
+                { name: 'Google', title: 'Google Translate' },
+                { name: 'DeepL', title: 'DeepL Translate' }
+            ]
 
-	function createButton(ref) {
+            select.innerHTML = engines
-		if (!translateButton) {
+                .map(
-			const div = document.createElement('div');
+                    (item) =>
-			div.className = 'wayfarertranslate';
+                        `<option value="${item.name}" ${
-			const link = document.createElement('a');
+                            item.name === engine ? 'selected' : ''
-			link.className = '';
+                        }>${item.title}</option>`
-			link.title = 'Translate nomination';
+                )
-			link.innerHTML = '<svg viewBox="0 0 24 24"><path d="M12.87 15.07l-2.54-2.51.03-.03A17.52 17.52 0 0014.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04M18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12m-2.62 7l1.62-4.33L19.12 17h-3.24z"/></svg>';
+                .join('')
-			link.target = '_blank';
+            select.addEventListener('change', function () {
+                engine = select.value
+                localStorage['translate-engine'] = engine
+                link.href =
+                    getTranslatorLink() + encodeURIComponent(link.dataset.text)
+            })
 
-			const select = document.createElement('select');
+            div.appendChild(link)
-			select.title = 'Select translation engine';
+            div.appendChild(select)
-			const engines = [
+            translateButton = div
-				{name: 'Google', title: 'Google Translate'},
+        }
-				{name: 'DeepL', title: 'DeepL Translate'}
-			];
 
-			select.innerHTML = engines.map(item => `<option value="${item.name}" ${item.name == engine ? 'selected' : ''}>${item.title}</option>`).join('');
+        const container = ref.parentNode.parentNode
-			select.addEventListener('change', function () {
+        if (!container.contains(translateButton)) {
-				engine = select.value;
+            container.appendChild(translateButton)
-				localStorage['translate-engine'] = engine;
+        }
-				link.href = getTranslatorLink() + encodeURIComponent(link.dataset.text);
+    }
-			});
 
-			div.appendChild(link);
+    function addTranslateButton() {
-			div.appendChild(select);
+        const ref = document.querySelector('wf-logo')
-			translateButton = div;
-		}
 
-		const container = ref.parentNode.parentNode;
+        if (!ref) {
-		if (!container.contains(translateButton))
+            if (tryNumber === 0) {
-			container.appendChild(translateButton);
+                document
-	}
+                    .querySelector('body')
+                    .insertAdjacentHTML(
+                        'afterBegin',
+                        '<div class="alert alert-danger"><strong><span class="glyphicon glyphicon-remove"></span> Wayfarer Translate initialization failed, refresh page</strong></div>'
+                    )
+                return
+            }
+            setTimeout(addTranslateButton, 1000)
+            tryNumber--
+            return
+        }
 
-	function addTranslateButton() {
+        let text = ''
-		const ref = document.querySelector('wf-logo');
+        if (candidate.type === 'NEW') {
+            text =
+                candidate.title +
+                SPACING +
+                candidate.description +
+                SPACING +
+                candidate.statement
+        }
 
-		if (!ref) {
+        if (candidate.type === 'EDIT') {
-			if (tryNumber === 0) {
+            const title =
-				document.querySelector('body')
+                candidate.title ||
-					.insertAdjacentHTML('afterBegin', '<div class="alert alert-danger"><strong><span class="glyphicon glyphicon-remove"></span> Wayfarer Translate initialization failed, refresh page</strong></div>');
+                candidate.titleEdits.map((d) => d.value).join(SPACING)
-				return;
+            const description =
-			}
+                candidate.description ||
-			setTimeout(addTranslateButton, 1000);
+                candidate.descriptionEdits.map((d) => d.value).join(SPACING)
-			tryNumber--;
+            text = title + SPACING + SPACING + description
-			return;
+        }
-		}
+        if (candidate.type === 'PHOTO') {
+            text = candidate.title + SPACING + candidate.description
+        }
 
-		let text = '';
+        if (text !== '') {
-		if (candidate.type == 'NEW') {
+            createButton(ref)
-			text = candidate.title + SPACING + candidate.description + SPACING + candidate.statement;
+            const link = translateButton.querySelector('a')
-		}
+            link.dataset.text = text
+            link.href = getTranslatorLink() + encodeURIComponent(text)
+            translateButton.classList.add('wayfarertranslate__visible')
+        }
+    }
 
-		if (candidate.type == 'EDIT') {
+    function hideButton() {
-			const title = candidate.title || candidate.titleEdits.map(d=>d.value).join(SPACING);
+        translateButton.classList.remove('wayfarertranslate__visible')
-			const description = candidate.description || candidate.descriptionEdits.map(d=>d.value).join(SPACING);
+    }
-			text = title + SPACING + SPACING + description;
-		}
-		if (candidate.type == 'PHOTO') {
-			text = candidate.title + SPACING + candidate.description;
-		}
 
-		if (text != '') {
+    function addCss() {
-			createButton(ref);
+        const css = `
-			const link = translateButton.querySelector('a');
-			link.dataset.text = text;
-			link.href = getTranslatorLink() + encodeURIComponent(text);
-			translateButton.classList.add('wayfarertranslate__visible');
-		}
-	}
 
-	function hideButton() {
+            .wayfarertranslate {
-		translateButton.classList.remove('wayfarertranslate__visible');
+                color: #333;
-	}
+                margin-left: 2em;
+                padding-top: 0.3em;
+                text-align: center;
+                display: none;
+            }
 
-	function addCss() {
+            .wayfarertranslate__visible {
-		const css = `
+                display: inline;
+            }
 
-			.wayfarertranslate {
+            .wayfarertranslate svg {
-				color: #333;
+                width: 24px;
-				margin-left: 2em;
+                height: 24px;
-				padding-top: 0.3em;
+                filter: none;
-				text-align: center;
+                fill: currentColor;
-				display: none;
+                margin: 0 auto;
-			}
+            }
 
-			.wayfarertranslate__visible {
+            .dark .wayfarertranslate {
-				display: inline;
+                color: #ddd;
-			}
+            }
-
-			.wayfarertranslate svg {
-				width: 24px;
-				height: 24px;
-				filter: none;
-				fill: currentColor;
-				margin: 0 auto;
-			}
-
-			.dark .wayfarertranslate {
-				color: #ddd;
-			}
-
-			.dark .wayfarertranslate select,
-			.dark .wayfarertranslate option {
-				background: #000;
-			}
-			`;
-		const style = document.createElement('style');
-		style.type = 'text/css';
-		style.innerHTML = css;
-		document.querySelector('head').appendChild(style);
-	}
 
+            .dark .wayfarertranslate select,
+            .dark .wayfarertranslate option {
+                background: #000;
+            }
+            `
+        const style = document.createElement('style')
+        style.type = 'text/css'
+        style.innerHTML = css
+        document.querySelector('head').appendChild(style)
+    }
 }
 
-init();
+init()
-