Issue #3199822 by chr.fritsch: Update JS coding styles

.eslintrc

@@ -1,96 +1,6 @@
 {
-  "extends": "eslint:recommended",
   "root": true,
-  "env": {
-    "browser": true
-  },
-  "globals": {
-    "Drupal": true,
-    "drupalSettings": true,
-    "drupalTranslations": true,
-    "domready": true,
-    "jQuery": true,
-    "_": true,
-    "matchMedia": true,
-    "Backbone": true,
-    "Modernizr": true,
-    "Popper": true,
-    "Sortable": true,
-    "CKEDITOR": true
-  },
-  "rules": {
-    "array-bracket-spacing": ["error", "never"],
-    "block-scoped-var": "error",
-    "brace-style": ["error", "stroustrup", {"allowSingleLine": true}],
-    "comma-dangle": ["error", "never"],
-    "comma-spacing": "error",
-    "comma-style": ["error", "last"],
-    "computed-property-spacing": ["error", "never"],
-    "curly": ["error", "all"],
-    "eol-last": "error",
-    "eqeqeq": ["error", "smart"],
-    "guard-for-in": "error",
-    "indent": ["error", 2, {"SwitchCase": 1}],
-    "key-spacing": ["error", {"beforeColon": false, "afterColon": true}],
-    "keyword-spacing": ["error", {"before": true, "after": true}],
-    "linebreak-style": ["error", "unix"],
-    "lines-around-comment": ["error", {"beforeBlockComment": true, "afterBlockComment": false}],
-    "new-parens": "error",
-    "no-array-constructor": "error",
-    "no-caller": "error",
-    "no-catch-shadow": "error",
-    "no-eval": "error",
-    "no-extend-native": "error",
-    "no-extra-bind": "error",
-    "no-extra-parens": ["error", "functions"],
-    "no-implied-eval": "error",
-    "no-iterator": "error",
-    "no-label-var": "error",
-    "no-labels": "error",
-    "no-lone-blocks": "error",
-    "no-loop-func": "error",
-    "no-multi-spaces": "error",
-    "no-multi-str": "error",
-    "no-native-reassign": "error",
-    "no-nested-ternary": "error",
-    "no-new-func": "error",
-    "no-new-object": "error",
-    "no-new-wrappers": "error",
-    "no-octal-escape": "error",
-    "no-process-exit": "error",
-    "no-proto": "error",
-    "no-return-assign": "error",
-    "no-script-url": "error",
-    "no-sequences": "error",
-    "no-shadow-restricted-names": "error",
-    "no-spaced-func": "error",
-    "no-trailing-spaces": "error",
-    "no-undef-init": "error",
-    "no-undefined": "error",
-    "no-unused-expressions": "error",
-    "no-unused-vars": ["error", {"vars": "all", "args": "none"}],
-    "no-with": "error",
-    "object-curly-spacing": ["error", "never"],
-    "one-var": ["error", "never"],
-    "quote-props": ["error", "consistent-as-needed"],
-    "quotes": ["error", "single", "avoid-escape"],
-    "semi": ["error", "always"],
-    "semi-spacing": ["error", {"before": false, "after": true}],
-    "space-before-blocks": ["error", "always"],
-    "space-before-function-paren": ["error", {"anonymous": "always", "named": "never"}],
-    "space-in-parens": ["error", "never"],
-    "space-infix-ops": "error",
-    "space-unary-ops": ["error", { "words": true, "nonwords": false }],
-    "spaced-comment": ["error", "always"],
-    "strict": ["error", "function"],
-    "yoda": ["error", "never"],
-    "max-nested-callbacks": ["warn", 3],
-    "valid-jsdoc": ["warn", {
-      "prefer": {
-        "returns": "return",
-        "property": "prop"
-      },
-      "requireReturn": false
-    }]
-  }
+  "extends": [
+    "drupal"
+  ]
 }

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "printWidth": 80,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

js/select2.js

@@ -2,62 +2,72 @@
  * @file
  * Select2 integration.
  */
-(function ($, drupalSettings, Sortable) {
-  'use strict';
-
+(($, drupalSettings, Sortable) => {
   Drupal.behaviors.select2 = {
-    attach: function (context) {
-      $('.select2-widget', context).once('select2-init').each(function () {
-        var config = $(this).data('select2-config');
-        config.createTag = function (params) {
-          var term = $.trim(params.term);
-          if (term === '') {
-            return null;
-          }
-          return {
-            id: '$ID:' + term,
-            text: term
+    attach(context) {
+      $('.select2-widget', context)
+        .once('select2-init')
+        .each(() => {
+          let config = $(this).data('select2-config');
+          config.createTag = (params) => {
+            const term = $.trim(params.term);
+            if (term === '') {
+              return null;
+            }
+            return {
+              id: `$ID:${term}`,
+              text: term,
+            };
           };
-        };
-        config.templateSelection = function (option, container) {
-          // The placeholder doesn't have value.
-          if ('element' in option && 'value' in option.element) {
-            // Add option value to selection container for sorting.
-            $(container).data('optionValue', option.element.value);
-          }
-          return option.text;
-        };
-        $(this).data('select2-config', config);
+          config.templateSelection = (option, container) => {
+            // The placeholder doesn't have value.
+            if ('element' in option && 'value' in option.element) {
+              // Add option value to selection container for sorting.
+              $(container).data('optionValue', option.element.value);
+            }
+            return option.text;
+          };
+          $(this).data('select2-config', config);
 
-        // Emit an event, that other modules have the chance to modify the
-        // select2 settings. Make sure that other JavaScript code that rely on
-        // this event will be loaded first.
-        // @see: modules/select2_publish/select2_publish.libraries.yml
-        $(this).trigger('select2-init');
-        config = $(this).data('select2-config');
+          // Emit an event, that other modules have the chance to modify the
+          // select2 settings. Make sure that other JavaScript code that rely on
+          // this event will be loaded first.
+          // @see: modules/select2_publish/select2_publish.libraries.yml
+          $(this).trigger('select2-init');
+          config = $(this).data('select2-config');
 
-        // If config has a dropdownParent property, wrap it a jQuery object.
-        if (Object.prototype.hasOwnProperty.call(config, 'dropdownParent')) {
-          config.dropdownParent = $(config.dropdownParent);
-        }
-        $(this).select2(config);
+          // If config has a dropdownParent property, wrap it a jQuery object.
+          if (Object.prototype.hasOwnProperty.call(config, 'dropdownParent')) {
+            config.dropdownParent = $(config.dropdownParent);
+          }
+          $(this).select2(config);
 
-        // Copied from https://github.com/woocommerce/woocommerce/blob/master/assets/js/admin/wc-enhanced-select.js#L118
-        if (Object.prototype.hasOwnProperty.call(config, 'ajax') && config.multiple) {
-          var $select = $(this);
-          var $list = $select.next('.select2-container').find('ul.select2-selection__rendered');
-          Sortable.create($list[0], {
-            draggable: 'li:not(.select2-search)',
-            forceFallback: true,
-            onEnd: function () {
-              $($list.find('.select2-selection__choice').get().reverse()).each(function () {
-                $select.prepend($select.find('option[value="' + $(this).data('optionValue') + '"]').first());
-              });
-            }
-          });
-        }
-      });
-    }
+          // Copied from https://github.com/woocommerce/woocommerce/blob/master/assets/js/admin/wc-enhanced-select.js#L118
+          if (
+            Object.prototype.hasOwnProperty.call(config, 'ajax') &&
+            config.multiple
+          ) {
+            const $select = $(this);
+            const $list = $select
+              .next('.select2-container')
+              .find('ul.select2-selection__rendered');
+            Sortable.create($list[0], {
+              draggable: 'li:not(.select2-search)',
+              forceFallback: true,
+              onEnd() {
+                $(
+                  $list.find('.select2-selection__choice').get().reverse(),
+                ).each(() => {
+                  $select.prepend(
+                    $select
+                      .find(`option[value="${$(this).data('optionValue')}"]`)
+                      .first(),
+                  );
+                });
+              },
+            });
+          }
+        });
+    },
   };
-
 })(jQuery, drupalSettings, Sortable);

modules/select2_facets/js/select2-widget.js

@@ -3,27 +3,24 @@
  * Init select2 widget.
  */
 
-(function ($, Drupal) {
-
-  'use strict';
-
+(($, Drupal) => {
   Drupal.facets = Drupal.facets || {};
 
   /**
    * Add event handler to all select2 widgets.
    */
-  Drupal.facets.initSelect2 = function () {
+  Drupal.facets.initSelect2 = () => {
     $('.js-facets-select2.js-facets-widget')
       .once('js-facets-select2-widget-on-selection-change')
-      .each(function () {
-        var $select2_widget = $(this);
+      .each(() => {
+        const $select2Widget = $(this);
 
-        $select2_widget.on('select2:select select2:unselect', function (item) {
-          $select2_widget.trigger('facets_filter', [item.params.data.id]);
+        $select2Widget.on('select2:select select2:unselect', (item) => {
+          $select2Widget.trigger('facets_filter', [item.params.data.id]);
         });
 
-        $select2_widget.on('facets_filtering.select2', function () {
-          $select2_widget.prop('disabled', true);
+        $select2Widget.on('facets_filtering.select2', () => {
+          $select2Widget.prop('disabled', true);
         });
       });
   };
@@ -32,9 +29,8 @@
    * Behavior to register select2 widget to be used for facets.
    */
   Drupal.behaviors.facetsSelect2Widget = {
-    attach: function (context, settings) {
+    attach(context, settings) {
       Drupal.facets.initSelect2(context, settings);
-    }
+    },
   };
-
 })(jQuery, Drupal);

modules/select2_publish/js/select2.publish.js

@@ -2,45 +2,48 @@
  * @file
  * Select2 integration.
  */
-(function ($, drupalSettings) {
-  'use strict';
-
+(($) => {
   Drupal.behaviors.select2_publish = {
-    attach: function (context) {
-      $('.select2-widget', context).on('select2-init', function (e) {
-        if (typeof $(e.target).data('select2-publish-default') === 'undefined') {
+    attach(context) {
+      $('.select2-widget', context).on('select2-init', (e) => {
+        if (
+          typeof $(e.target).data('select2-publish-default') === 'undefined'
+        ) {
           return;
         }
-        var config = $(e.target).data('select2-config');
+        const config = $(e.target).data('select2-config');
 
-        var parentCreateTagHandler = config.createTag;
-        config.createTag = function (params) {
-          var term = parentCreateTagHandler(params);
+        const parentCreateTagHandler = config.createTag;
+        config.createTag = (params) => {
+          const term = parentCreateTagHandler(params);
           if (term) {
             term.published = $(e.target).data('select2-publish-default');
           }
           return term;
         };
 
-        var templateHandlerWrapper = function (parentHandler) {
-          return function (option, item) {
+        const templateHandlerWrapper = (parentHandler) => {
+          return (option, item) => {
             if (parentHandler) {
               parentHandler(option, item);
             }
             if (item) {
-              var published = (option.published === true || $(option.element).attr('data-published') === 'true');
+              const published =
+                option.published === true ||
+                $(option.element).attr('data-published') === 'true';
               $(item).addClass(published ? 'published' : 'unpublished');
             }
             return option.text;
           };
         };
 
-        config.templateSelection = templateHandlerWrapper(config.templateSelection);
+        config.templateSelection = templateHandlerWrapper(
+          config.templateSelection,
+        );
         config.templateResult = templateHandlerWrapper(config.templateResult);
 
         $(e.target).data('select2-config', config);
       });
-    }
+    },
   };
-
 })(jQuery, drupalSettings);