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('resize.autosize', function() {
-      var $field;
-      $field = $(this);
-      if ($field.data('height') !== $field.outerHeight()) {
-        $field.data('height', $field.outerHeight());
-        autosize.destroy($field);
-        return $field.css('max-height', window.outerHeight);
-      }
-    });
-    autosize($fields);
-    autosize.update($fields);
-    return $fields.css('resize', 'vertical');
+  $fields.on('autosize:resized', function resized() {
+    const $field = $(this);
+    $field.data('height', $field.outerHeight());
   });
-}).call(window);
+
+  $fields.on('resize.autosize', function resize() {
+    const $field = $(this);
+    if ($field.data('height') !== $field.outerHeight()) {
+      $field.data('height', $field.outerHeight());
+      autosize.destroy($field);
+      $field.css('max-height', window.outerHeight);
+    }
+  });
+
+  autosize($fields);
+  autosize.update($fields);
+  $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");
-    });
-    // 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");
-      $(this).hide();
 
-      var truncatedItem = $(this).siblings('.js-details-short');
-      if (truncatedItem.length) {
-        truncatedItem.addClass("hide");
-      }
-      return e.preventDefault();
-    });
+$(() => {
+  $('body').on('click', '.js-details-target', function target() {
+    $(this).closest('.js-details-container').toggleClass('open');
   });
-}).call(window);
+
+  // Show details content. Hides link after click.
+  //
+  // %div
+  //   %a.js-details-expand
+  //   %div.js-details-content
+  //
+  $('body').on('click', '.js-details-expand', function expand(e) {
+    e.preventDefault();
+    $(this).next('.js-details-content').removeClass('hide');
+    $(this).hide();
+
+    const truncatedItem = $(this).siblings('.js-details-short');
+    if (truncatedItem.length) {
+      truncatedItem.addClass('hide');
+    }
+  });
+});

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() {
-    return navigator.userAgent.match(/Macintosh/);
-  };
+function isMac() {
+  return navigator.userAgent.match(/Macintosh/);
+}
 
-  keyCodeIs = function(e, keyCode) {
-    if ((e.originalEvent && e.originalEvent.repeat) || e.repeat) {
-      return false;
-    }
-    return e.keyCode === 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;
-    // Enter
-    if (!keyCodeIs(e, 13)) {
-      return;
-    }
-    if (!((e.metaKey && !e.altKey && !e.ctrlKey && !e.shiftKey) || (e.ctrlKey && !e.altKey && !e.metaKey && !e.shiftKey))) {
-      return;
-    }
-    e.preventDefault();
-    $form = $(e.target).closest('form');
-    $submit_button = $form.find('input[type=submit], button[type=submit]');
-    if ($submit_button.attr('disabled')) {
-      return;
-    }
-    $submit_button.disable();
-    return $form.submit();
-  });
+$(document).on('keydown.quick_submit', '.js-quick-submit', (e) => {
+  // Enter
+  if (!keyCodeIs(e, 13)) {
+    return;
+  }
+
+  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();
+  const $form = $(e.target).closest('form');
+  const $submitButton = $form.find('input[type=submit], button[type=submit]');
+
+  if (!$submitButton.attr('disabled')) {
+    $submitButton.disable();
+    $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 displayTooltip(e) {
+  // Tab
+  if (!keyCodeIs(e, 9)) {
+    return;
+  }
+
+  const $this = $(this);
+  const title = isMac() ?
+    'You can also press &#8984;-Enter' :
+    'You can also press Ctrl-Enter';
 
-  // 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;
-    // 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({
-      container: 'body',
-      html: 'true',
-      placement: 'auto top',
-      title: title,
-      trigger: 'manual'
-    }).tooltip('show').one('blur', function() {
-      return $this.tooltip('hide');
-    });
+  $this.tooltip({
+    container: 'body',
+    html: 'true',
+    placement: 'auto top',
+    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) {
-        // Collect the input values of *all* required fields
-        return field.value;
-      });
-      // Disable the button if any required fields are empty
-      if (values.length && _.any(values, _.isEmpty)) {
-        return $button.disable();
-      } else {
-        return $button.enable();
-      }
-    };
-    // Set initial button state
-    requireInput();
-    return $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');
-      if (selected.length && selected.data('options-parent') === 'groups') {
-        return form.find('.help-block').hide();
-      } else if (selected.length) {
-        return form.find('.help-block').show();
-      }
-    };
-    hideOrShowHelpBlock($form);
-    return $('.select2.js-select-namespace').change(function() {
-      return hideOrShowHelpBlock($form);
-    });
-  });
-}).call(window);
+$.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
+    const values = _.map($(fieldSelector, $form), field => field.value);
+
+    // Disable the button if any required fields are empty
+    if (values.length && _.any(values, _.isEmpty)) {
+      $button.disable();
+    } else {
+      $button.enable();
+    }
+  }
+
+  // Set initial button state
+  requireInput();
+  $form.on('change input', fieldSelector, requireInput);
+};
+
+// 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') {
+    form.find('.help-block').hide();
+  } else if (selected.length) {
+    form.find('.help-block').show();
+  }
+}
+
+$(() => {
+  const $form = $('form.js-requires-input');
+  $form.requiresInput();
+  hideOrShowHelpBlock($form);
+  $('.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);
-
-      $container
-        .find('.js-toggle-button .fa')
-        .toggleClass('fa-chevron-up', toggleState)
-        .toggleClass('fa-chevron-down', toggleState !== undefined ? !toggleState : undefined);
-
-      $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) {
-      toggleContainer($(this).closest('.js-toggle-container'));
-
-      const targetTag = e.currentTarget.tagName.toLowerCase();
-      if (targetTag === 'a' || targetTag === 'button') {
-        e.preventDefault();
-      }
-    });
-
-    // 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');
-
-    if (container) {
-      toggleContainer(container, true);
-      anchor.scrollIntoView();
+
+// 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')
+      .toggleClass('fa-chevron-up', toggleState)
+      .toggleClass('fa-chevron-down', toggleState !== undefined ? !toggleState : undefined);
+
+    $container
+      .find('.js-toggle-content')
+      .toggle(toggleState);
+  }
+
+  $('body').on('click', '.js-toggle-button', function toggleButton(e) {
+    toggleContainer($(this).closest('.js-toggle-container'));
+
+    const targetTag = e.currentTarget.tagName.toLowerCase();
+    if (targetTag === 'a' || targetTag === 'button') {
+      e.preventDefault();
     }
   });
-})(window);
+
+  // If we're accessing a permalink, ensure it is not inside a
+  // closed 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();
+  }
+});

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';