Merge branch 'refactor-behaviors' into 'master'

Refactor javascript behaviors directory

See merge request !10439

app/assets/javascripts/behaviors/autosize.js

-/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, no-var, consistent-return, max-len */
-/* global autosize */
+import autosize from 'vendor/autosize';
 
-var autosize = require('vendor/autosize');
+$(() => {
+  const $fields = $('.js-autosize');
 
-(function() {
-  $(function() {
-    var $fields;
-    $fields = $('.js-autosize');
-    $fields.on('autosize:resized', function() {
-      var $field;
-      $field = $(this);
-      return $field.data('height', $field.outerHeight());
+  $fields.on('autosize:resized', function resized() {
+    const $field = $(this);
+    $field.data('height', $field.outerHeight());
   });
-    $fields.on('resize.autosize', function() {
-      var $field;
-      $field = $(this);
+
+  $fields.on('resize.autosize', function resize() {
+    const $field = $(this);
     if ($field.data('height') !== $field.outerHeight()) {
       $field.data('height', $field.outerHeight());
       autosize.destroy($field);
-        return $field.css('max-height', window.outerHeight);
+      $field.css('max-height', window.outerHeight);
     }
   });
+
   autosize($fields);
   autosize.update($fields);
-    return $fields.css('resize', 'vertical');
-  });
-}).call(window);
+  $fields.css('resize', 'vertical');
+});

app/assets/javascripts/behaviors/details_behavior.js

-/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, quotes, no-var, vars-on-top, max-len */
-(function() {
-  $(function() {
-    $("body").on("click", ".js-details-target", function() {
-      var container;
-      container = $(this).closest(".js-details-container");
-      return container.toggleClass("open");
+
+$(() => {
+  $('body').on('click', '.js-details-target', function target() {
+    $(this).closest('.js-details-container').toggleClass('open');
   });
+
   // Show details content. Hides link after click.
   //
   // %div
   //   %a.js-details-expand
   //   %div.js-details-content
   //
-    return $("body").on("click", ".js-details-expand", function(e) {
-      $(this).next('.js-details-content').removeClass("hide");
+  $('body').on('click', '.js-details-expand', function expand(e) {
+    e.preventDefault();
+    $(this).next('.js-details-content').removeClass('hide');
     $(this).hide();
 
-      var truncatedItem = $(this).siblings('.js-details-short');
+    const truncatedItem = $(this).siblings('.js-details-short');
     if (truncatedItem.length) {
-        truncatedItem.addClass("hide");
+      truncatedItem.addClass('hide');
     }
-      return e.preventDefault();
-    });
   });
-}).call(window);
+});

app/assets/javascripts/behaviors/index.js

+import './autosize';
+import './bind_in_out';
+import './details_behavior';
+import { installGlEmojiElement } from './gl_emoji';
+import './quick_submit';
+import './requires_input';
+import './toggler_behavior';
+
+installGlEmojiElement();

app/assets/javascripts/behaviors/quick_submit.js

-/* eslint-disable func-names, space-before-function-paren, one-var, no-var, one-var-declaration-per-line, prefer-arrow-callback, camelcase, consistent-return, quotes, object-shorthand, comma-dangle, max-len */
+import '../commons/bootstrap';
 
 // Quick Submit behavior
 //
 // When a child field of a form with a `js-quick-submit` class receives a
 // "Meta+Enter" (Mac) or "Ctrl+Enter" (Linux/Windows) key combination, the form
 // is submitted.
-//
-import '../commons/bootstrap';
-
 //
 // ### Example Markup
 //
@@ -17,61 +14,59 @@ import '../commons/bootstrap';
 //     <input type="submit" value="Submit" />
 //   </form>
 //
-(function() {
-  var isMac, keyCodeIs;
 
-  isMac = function() {
+function isMac() {
   return navigator.userAgent.match(/Macintosh/);
-  };
+}
 
-  keyCodeIs = function(e, keyCode) {
+function keyCodeIs(e, keyCode) {
   if ((e.originalEvent && e.originalEvent.repeat) || e.repeat) {
     return false;
   }
   return e.keyCode === keyCode;
-  };
+}
 
-  $(document).on('keydown.quick_submit', '.js-quick-submit', function(e) {
-    var $form, $submit_button;
+$(document).on('keydown.quick_submit', '.js-quick-submit', (e) => {
   // Enter
   if (!keyCodeIs(e, 13)) {
     return;
   }
-    if (!((e.metaKey && !e.altKey && !e.ctrlKey && !e.shiftKey) || (e.ctrlKey && !e.altKey && !e.metaKey && !e.shiftKey))) {
+
+  const onlyMeta = e.metaKey && !e.altKey && !e.ctrlKey && !e.shiftKey;
+  const onlyCtrl = e.ctrlKey && !e.altKey && !e.metaKey && !e.shiftKey;
+  if (!onlyMeta && !onlyCtrl) {
     return;
   }
+
   e.preventDefault();
-    $form = $(e.target).closest('form');
-    $submit_button = $form.find('input[type=submit], button[type=submit]');
-    if ($submit_button.attr('disabled')) {
-      return;
+  const $form = $(e.target).closest('form');
+  const $submitButton = $form.find('input[type=submit], button[type=submit]');
+
+  if (!$submitButton.attr('disabled')) {
+    $submitButton.disable();
+    $form.submit();
   }
-    $submit_button.disable();
-    return $form.submit();
-  });
+});
 
-  // If the user tabs to a submit button on a `js-quick-submit` form, display a
-  // tooltip to let them know they could've used the hotkey
-  $(document).on('keyup.quick_submit', '.js-quick-submit input[type=submit], .js-quick-submit button[type=submit]', function(e) {
-    var $this, title;
+// If the user tabs to a submit button on a `js-quick-submit` form, display a
+// tooltip to let them know they could've used the hotkey
+$(document).on('keyup.quick_submit', '.js-quick-submit input[type=submit], .js-quick-submit button[type=submit]', function displayTooltip(e) {
   // Tab
   if (!keyCodeIs(e, 9)) {
     return;
   }
-    if (isMac()) {
-      title = "You can also press &#8984;-Enter";
-    } else {
-      title = "You can also press Ctrl-Enter";
-    }
-    $this = $(this);
-    return $this.tooltip({
+
+  const $this = $(this);
+  const title = isMac() ?
+    'You can also press &#8984;-Enter' :
+    'You can also press Ctrl-Enter';
+
+  $this.tooltip({
     container: 'body',
     html: 'true',
     placement: 'auto top',
-      title: title,
-      trigger: 'manual'
-    }).tooltip('show').one('blur', function() {
-      return $this.tooltip('hide');
-    });
+    title,
+    trigger: 'manual',
   });
-}).call(window);
+  $this.tooltip('show').one('blur', () => $this.tooltip('hide'));
+});

app/assets/javascripts/behaviors/requires_input.js

-/* eslint-disable func-names, space-before-function-paren, one-var, no-var, one-var-declaration-per-line, quotes, prefer-template, prefer-arrow-callback, no-else-return, consistent-return, max-len */
+import '../commons/bootstrap';
+
 // Requires Input behavior
 //
 // When called on a form with input fields with the `required` attribute, the
 // form's submit button will be disabled until all required fields have values.
-//
-import '../commons/bootstrap';
-
 //
 // ### Example Markup
 //
@@ -14,49 +12,43 @@ import '../commons/bootstrap';
 //     <input type="submit" value="Submit">
 //   </form>
 //
-(function() {
-  $.fn.requiresInput = function() {
-    var $button, $form, fieldSelector, requireInput, required;
-    $form = $(this);
-    $button = $('button[type=submit], input[type=submit]', $form);
-    required = '[required=required]';
-    fieldSelector = "input" + required + ", select" + required + ", textarea" + required;
-    requireInput = function() {
-      var values;
-      values = _.map($(fieldSelector, $form), function(field) {
+
+$.fn.requiresInput = function requiresInput() {
+  const $form = $(this);
+  const $button = $('button[type=submit], input[type=submit]', $form);
+  const fieldSelector = 'input[required=required], select[required=required], textarea[required=required]';
+
+  function requireInput() {
     // Collect the input values of *all* required fields
-        return field.value;
-      });
+    const values = _.map($(fieldSelector, $form), field => field.value);
+
     // Disable the button if any required fields are empty
     if (values.length && _.any(values, _.isEmpty)) {
-        return $button.disable();
+      $button.disable();
     } else {
-        return $button.enable();
+      $button.enable();
+    }
   }
-    };
+
   // Set initial button state
   requireInput();
-    return $form.on('change input', fieldSelector, requireInput);
-  };
+  $form.on('change input', fieldSelector, requireInput);
+};
 
-  $(function() {
-    var $form, hideOrShowHelpBlock;
-    $form = $('form.js-requires-input');
-    $form.requiresInput();
-    // Hide or Show the help block when creating a new project
-    // based on the option selected
-    hideOrShowHelpBlock = function(form) {
-      var selected;
-      selected = $('.js-select-namespace option:selected');
+// Hide or Show the help block when creating a new project
+// based on the option selected
+function hideOrShowHelpBlock(form) {
+  const selected = $('.js-select-namespace option:selected');
   if (selected.length && selected.data('options-parent') === 'groups') {
-        return form.find('.help-block').hide();
+    form.find('.help-block').hide();
   } else if (selected.length) {
-        return form.find('.help-block').show();
+    form.find('.help-block').show();
   }
-    };
+}
+
+$(() => {
+  const $form = $('form.js-requires-input');
+  $form.requiresInput();
   hideOrShowHelpBlock($form);
-    return $('.select2.js-select-namespace').change(function() {
-      return hideOrShowHelpBlock($form);
-    });
-  });
-}).call(window);
+  $('.select2.js-select-namespace').change(() => hideOrShowHelpBlock($form));
+});

app/assets/javascripts/behaviors/toggler_behavior.js

-/* eslint-disable wrap-iife, func-names, space-before-function-paren, prefer-arrow-callback, vars-on-top, no-var, max-len */
-(function(w) {
-  $(function() {
-    var toggleContainer = function(container, /* optional */toggleState) {
-      var $container = $(container);
+
+// Toggle button. Show/hide content inside parent container.
+// Button does not change visibility. If button has icon - it changes chevron style.
+//
+// %div.js-toggle-container
+//   %button.js-toggle-button
+//   %div.js-toggle-content
+//
+
+$(() => {
+  function toggleContainer(container, toggleState) {
+    const $container = $(container);
 
     $container
       .find('.js-toggle-button .fa')
@@ -12,16 +19,9 @@
     $container
       .find('.js-toggle-content')
       .toggle(toggleState);
-    };
-
-    // Toggle button. Show/hide content inside parent container.
-    // Button does not change visibility. If button has icon - it changes chevron style.
-    //
-    // %div.js-toggle-container
-    //   %button.js-toggle-button
-    //   %div.js-toggle-content
-    //
-    $('body').on('click', '.js-toggle-button', function(e) {
+  }
+
+  $('body').on('click', '.js-toggle-button', function toggleButton(e) {
     toggleContainer($(this).closest('.js-toggle-container'));
 
     const targetTag = e.currentTarget.tagName.toLowerCase();
@@ -32,13 +32,12 @@
 
   // If we're accessing a permalink, ensure it is not inside a
   // closed js-toggle-container!
-    var hash = w.gl.utils.getLocationHash();
-    var anchor = hash && document.getElementById(hash);
-    var container = anchor && $(anchor).closest('.js-toggle-container');
+  const hash = window.gl.utils.getLocationHash();
+  const anchor = hash && document.getElementById(hash);
+  const container = anchor && $(anchor).closest('.js-toggle-container');
 
   if (container) {
     toggleContainer(container, true);
     anchor.scrollIntoView();
   }
-  });
-})(window);
+});

app/assets/javascripts/main.js

@@ -37,14 +37,7 @@ import './shortcuts_issuable';
 import './shortcuts_network';
 
 // behaviors
-import './behaviors/autosize';
-import './behaviors/details_behavior';
-import './behaviors/quick_submit';
-import './behaviors/requires_input';
-import './behaviors/toggler_behavior';
-import './behaviors/bind_in_out';
-import { installGlEmojiElement } from './behaviors/gl_emoji';
-installGlEmojiElement();
+import './behaviors/';
 
 // blob
 import './blob/create_branch_dropdown';