Issue #3336104 by Erik Seifert, leymannx: Fix js coding standards

.eslintrc.json

+{
+  "globals": {
+    "ace": true,
+    "klaro": true
+  },
+  "rules": {
+    "prettier/prettier": [
+      "error",
+      {
+        "printWidth": 80,
+        "semi": true,
+        "singleQuote": true,
+        "trailingComma": "all"
+      }
+    ],
+    "consistent-return": ["off"],
+    "no-underscore-dangle": ["off"],
+    "max-nested-callbacks": ["warn", 3],
+    "import/no-mutable-exports": ["warn"],
+    "no-plusplus": ["warn", {
+      "allowForLoopAfterthoughts": true
+    }],
+    "no-param-reassign": ["off"],
+    "no-prototype-builtins": ["off"],
+    "valid-jsdoc": ["warn", {
+      "prefer": {
+        "returns": "return",
+        "property": "prop"
+      },
+      "requireReturn": false
+    }],
+    "no-unused-vars": ["warn"],
+    "operator-linebreak": ["error", "after", { "overrides": { "?": "ignore", ":": "ignore" } }],
+    "yml/indent": ["error", 2]
+  }
+}

js/editor.js

-(function (Drupal, once) {
-
-  "use strict";
-
+((Drupal, once) => {
   Drupal.behaviors.klaroEditor = {
-    attach: function (context) {
-      var initEditor = function () {
-        once('textarea', '[data-klaro-editor]', context).forEach(function (textarea) {
-          var editDiv = document.createElement('div');
-          textarea.classList.add('visually-hidden');
-          textarea.parentNode.insertBefore(editDiv, textarea);
-          editDiv.style.fontSize = 18;
+    attach(context) {
+      const initEditor = () => {
+        once('klaro-editor', '[data-klaro-editor]', context).forEach(
+          (textarea) => {
+            const editDiv = document.createElement('div');
+            textarea.classList.add('visually-hidden');
+            textarea.parentNode.insertBefore(editDiv, textarea);
+            editDiv.style.fontSize = 18;
 
-          // Init ace editor.
-          ace.config.set('basePath', 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.11/');
-          var editor = ace.edit(editDiv);
-          editor.session.setValue(textarea.value);
-          editor.session.setMode("ace/mode/json");
-          editor.session.setTabSize(2);
-          editor.setTheme('ace/theme/chrome');
-          editor.setOptions({
-            minLines: 3,
-            maxLines: 20
-          });
+            // Init ace editor.
+            ace.config.set(
+              'basePath',
+              'https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.11/',
+            );
+            const editor = ace.edit(editDiv);
+            editor.session.setValue(textarea.value);
+            editor.session.setMode('ace/mode/json');
+            editor.session.setTabSize(2);
+            editor.setTheme('ace/theme/chrome');
+            editor.setOptions({
+              minLines: 3,
+              maxLines: 20,
+            });
 
-          // Update Drupal textarea value.
-          editor.getSession().on('change', function () {
-            textarea.value = editor.getSession().getValue();
-          });
-        });
+            // Update Drupal textarea value.
+            editor.getSession().on('change', () => {
+              textarea.value = editor.getSession().getValue();
+            });
+          },
+        );
       };
 
       // Initialize editor.
       if (typeof ace !== 'undefined') {
         initEditor();
       }
-    }
+    },
   };
-
 })(Drupal, once);

js/klaro.drupal.js

-(function (Drupal, drupalSettings) {
-
-  'use strict';
-
+((Drupal, drupalSettings, once) => {
   Drupal.behaviors.klaro = {
     attach: function attach(context) {
-      if (drupalSettings.klaroConfig !== undefined && context === document) {
+      if (drupalSettings.klaroConfig) {
         // Open preferences
-        let preferences = document.querySelectorAll("#klaro-preferences, .klaro-preferences");
-        if (drupalSettings.klaroConfig.services !== undefined) {
-          drupalSettings.klaroConfig.services.forEach(function (value, index) {
-            if (drupalSettings.klaroConfig.services[index].callback !== undefined) {
-              drupalSettings.klaroConfig.services[index].callback = new Function("return " + drupalSettings.klaroConfig.services[index].callback)();
-            }
-          });
-        }
+        once('klaro-init', 'body', context).forEach(() => {
+          const preferences = context.querySelectorAll(
+            '#klaro-preferences, .klaro-preferences',
+          );
+          if (drupalSettings.klaroConfig.services !== undefined) {
+            drupalSettings.klaroConfig.services.forEach((value, index) => {
+              if (
+                drupalSettings.klaroConfig.services[index].callback !==
+                undefined
+              ) {
+                drupalSettings.klaroConfig.services[index].callback = () =>
+                  drupalSettings.klaroConfig.services[index].callback;
+              }
+            });
+          }
 
-        if (preferences !== null) {
-          preferences.forEach(function (button) {
-            button.addEventListener("click", function (e) {
-              e.preventDefault();
-              klaro.show(drupalSettings.klaroConfig);
+          if (preferences !== null) {
+            preferences.forEach((button) => {
+              button.addEventListener('click', (e) => {
+                e.preventDefault();
+                klaro.show(drupalSettings.klaroConfig);
+              });
             });
-          })
-        }
-        // Render klaro
-        klaro.render(drupalSettings.klaroConfig);
+          }
+          // Render klaro
+          klaro.render(drupalSettings.klaroConfig);
+        });
       }
     },
   };
-})(Drupal, drupalSettings);
+})(Drupal, drupalSettings, once);

simple_klaro.libraries.yml

@@ -11,6 +11,7 @@ klaro: &klaro
   dependencies:
     - core/drupal
     - core/drupalSettings
+    - core/once
 
 klaro_cdn:
   <<: *klaro