kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

refactor and fix eslint violations in behaviors directory

Browse source
This commit is contained in:
Mike Greiling 2017-03-26 20:33:47 -05:00
parent d9aca74115
commit 5bff1af5cb
5 changed files with 170 additions and 192 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
app/assets/javascripts/behaviors/autosize.js
View file

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

23
app/assets/javascripts/behaviors/details_behavior.js
View file

@ -1,26 +1,23 @@
/* 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 target() {
$("body").on("click", ".js-details-target", function() { $(this).closest('.js-details-container').toggleClass('open');
var container;
container = $(this).closest(".js-details-container");
return container.toggleClass("open");
}); });
// Show details content. Hides link after click. // Show details content. Hides link after click.
// //
// %div // %div
// %a.js-details-expand // %a.js-details-expand
// %div.js-details-content // %div.js-details-content
// //
return $("body").on("click", ".js-details-expand", function(e) { $('body').on('click', '.js-details-expand', function expand(e) {
$(this).next('.js-details-content').removeClass("hide"); e.preventDefault();
$(this).next('.js-details-content').removeClass('hide');
$(this).hide(); $(this).hide();
var truncatedItem = $(this).siblings('.js-details-short'); const truncatedItem = $(this).siblings('.js-details-short');
if (truncatedItem.length) { if (truncatedItem.length) {
truncatedItem.addClass("hide"); truncatedItem.addClass('hide');
} }
return e.preventDefault();
}); });
}); });
}).call(window);

61
app/assets/javascripts/behaviors/quick_submit.js
View file

@ -1,13 +1,10 @@
/* 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 // Quick Submit behavior
// //
// When a child field of a form with a `js-quick-submit` class receives a // 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 // "Meta+Enter" (Mac) or "Ctrl+Enter" (Linux/Windows) key combination, the form
// is submitted. // is submitted.
//
import '../commons/bootstrap';
// //
// ### Example Markup // ### Example Markup
// //
@ -17,61 +14,59 @@ import '../commons/bootstrap';
// <input type="submit" value="Submit" /> // <input type="submit" value="Submit" />
// </form> // </form>
// //
(function() {
var isMac, keyCodeIs;
isMac = function() { function isMac() {
return navigator.userAgent.match(/Macintosh/); return navigator.userAgent.match(/Macintosh/);
}; }
keyCodeIs = function(e, keyCode) { function keyCodeIs(e, keyCode) {
if ((e.originalEvent && e.originalEvent.repeat) || e.repeat) { if ((e.originalEvent && e.originalEvent.repeat) || e.repeat) {
return false; return false;
} }
return e.keyCode === keyCode; return e.keyCode === keyCode;
}; }
$(document).on('keydown.quick_submit', '.js-quick-submit', function(e) { $(document).on('keydown.quick_submit', '.js-quick-submit', (e) => {
var $form, $submit_button;
// Enter // Enter
if (!keyCodeIs(e, 13)) { if (!keyCodeIs(e, 13)) {
return; 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; return;
} }
e.preventDefault(); e.preventDefault();
$form = $(e.target).closest('form'); const $form = $(e.target).closest('form');
$submit_button = $form.find('input[type=submit], button[type=submit]'); const $submitButton = $form.find('input[type=submit], button[type=submit]');
if ($submit_button.attr('disabled')) {
return; 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 // 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 // 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) { $(document).on('keyup.quick_submit', '.js-quick-submit input[type=submit], .js-quick-submit button[type=submit]', function displayTooltip(e) {
var $this, title;
// Tab // Tab
if (!keyCodeIs(e, 9)) { if (!keyCodeIs(e, 9)) {
return; return;
} }
if (isMac()) {
title = "You can also press &#8984;-Enter"; const $this = $(this);
} else { const title = isMac() ?
title = "You can also press Ctrl-Enter"; 'You can also press &#8984;-Enter' :
} 'You can also press Ctrl-Enter';
$this = $(this);
return $this.tooltip({ $this.tooltip({
container: 'body', container: 'body',
html: 'true', html: 'true',
placement: 'auto top', placement: 'auto top',
title: title, title,
trigger: 'manual' trigger: 'manual',
}).tooltip('show').one('blur', function() {
return $this.tooltip('hide');
}); });
$this.tooltip('show').one('blur', () => $this.tooltip('hide'));
}); });
}).call(window);

60
app/assets/javascripts/behaviors/requires_input.js
View file

@ -1,11 +1,9 @@
/* 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 // Requires Input behavior
// //
// When called on a form with input fields with the `required` attribute, the // 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. // form's submit button will be disabled until all required fields have values.
//
import '../commons/bootstrap';
// //
// ### Example Markup // ### Example Markup
// //
@ -14,49 +12,43 @@ import '../commons/bootstrap';
// <input type="submit" value="Submit"> // <input type="submit" value="Submit">
// </form> // </form>
// //
(function() {
$.fn.requiresInput = function() { $.fn.requiresInput = function requiresInput() {
var $button, $form, fieldSelector, requireInput, required; const $form = $(this);
$form = $(this); const $button = $('button[type=submit], input[type=submit]', $form);
$button = $('button[type=submit], input[type=submit]', $form); const fieldSelector = 'input[required=required], select[required=required], textarea[required=required]';
required = '[required=required]';
fieldSelector = "input" + required + ", select" + required + ", textarea" + required; function requireInput() {
requireInput = function() {
var values;
values = _.map($(fieldSelector, $form), function(field) {
// Collect the input values of *all* required fields // 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 // Disable the button if any required fields are empty
if (values.length && _.any(values, _.isEmpty)) { if (values.length && _.any(values, _.isEmpty)) {
return $button.disable(); $button.disable();
} else { } else {
return $button.enable(); $button.enable();
} }
}; }
// Set initial button state // Set initial button state
requireInput(); 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 // Hide or Show the help block when creating a new project
// based on the option selected // based on the option selected
hideOrShowHelpBlock = function(form) { function hideOrShowHelpBlock(form) {
var selected; const selected = $('.js-select-namespace option:selected');
selected = $('.js-select-namespace option:selected');
if (selected.length && selected.data('options-parent') === 'groups') { if (selected.length && selected.data('options-parent') === 'groups') {
return form.find('.help-block').hide(); form.find('.help-block').hide();
} else if (selected.length) { } 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); hideOrShowHelpBlock($form);
return $('.select2.js-select-namespace').change(function() { $('.select2.js-select-namespace').change(() => hideOrShowHelpBlock($form));
return hideOrShowHelpBlock($form);
}); });
});
}).call(window);

35
app/assets/javascripts/behaviors/toggler_behavior.js
View file

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