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

45
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;
$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');
}); });
}).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');
});

45
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() {
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) { $('body').on('click', '.js-details-target', function target() {
truncatedItem.addClass("hide"); $(this).closest('.js-details-container').toggleClass('open');
}
return e.preventDefault();
});
}); });
}).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');
}
});
});

111
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;
return; const onlyCtrl = e.ctrlKey && !e.altKey && !e.metaKey && !e.shiftKey;
} if (!onlyMeta && !onlyCtrl) {
e.preventDefault(); return;
$form = $(e.target).closest('form'); }
$submit_button = $form.find('input[type=submit], button[type=submit]');
if ($submit_button.attr('disabled')) { e.preventDefault();
return; const $form = $(e.target).closest('form');
} const $submitButton = $form.find('input[type=submit], button[type=submit]');
$submit_button.disable();
return $form.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';
$this.tooltip({
container: 'body',
html: 'true',
placement: 'auto top',
title,
trigger: 'manual',
}); });
$this.tooltip('show').one('blur', () => $this.tooltip('hide'));
// 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');
});
});
}).call(window);

90
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() {
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() { $.fn.requiresInput = function requiresInput() {
var $form, hideOrShowHelpBlock; const $form = $(this);
$form = $('form.js-requires-input'); const $button = $('button[type=submit], input[type=submit]', $form);
$form.requiresInput(); const fieldSelector = 'input[required=required], select[required=required], textarea[required=required]';
// Hide or Show the help block when creating a new project
// based on the option selected function requireInput() {
hideOrShowHelpBlock = function(form) { // Collect the input values of *all* required fields
var selected; const values = _.map($(fieldSelector, $form), field => field.value);
selected = $('.js-select-namespace option:selected');
if (selected.length && selected.data('options-parent') === 'groups') { // Disable the button if any required fields are empty
return form.find('.help-block').hide(); if (values.length && _.any(values, _.isEmpty)) {
} else if (selected.length) { $button.disable();
return form.find('.help-block').show(); } else {
} $button.enable();
}; }
hideOrShowHelpBlock($form); }
return $('.select2.js-select-namespace').change(function() {
return hideOrShowHelpBlock($form); // Set initial button state
}); requireInput();
}); $form.on('change input', fieldSelector, requireInput);
}).call(window); };
// 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));
});

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

@ -1,44 +1,43 @@
/* 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 // Toggle button. Show/hide content inside parent container.
.find('.js-toggle-button .fa') // Button does not change visibility. If button has icon - it changes chevron style.
.toggleClass('fa-chevron-up', toggleState) //
.toggleClass('fa-chevron-down', toggleState !== undefined ? !toggleState : undefined); // %div.js-toggle-container
// %button.js-toggle-button
// %div.js-toggle-content
//
$container $(() => {
.find('.js-toggle-content') function toggleContainer(container, toggleState) {
.toggle(toggleState); const $container = $(container);
};
// Toggle button. Show/hide content inside parent container. $container
// Button does not change visibility. If button has icon - it changes chevron style. .find('.js-toggle-button .fa')
// .toggleClass('fa-chevron-up', toggleState)
// %div.js-toggle-container .toggleClass('fa-chevron-down', toggleState !== undefined ? !toggleState : undefined);
// %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(); $container
if (targetTag === 'a' || targetTag === 'button') { .find('.js-toggle-content')
e.preventDefault(); .toggle(toggleState);
} }
});
// If we're accessing a permalink, ensure it is not inside a $('body').on('click', '.js-toggle-button', function toggleButton(e) {
// closed js-toggle-container! toggleContainer($(this).closest('.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) { const targetTag = e.currentTarget.tagName.toLowerCase();
toggleContainer(container, true); if (targetTag === 'a' || targetTag === 'button') {
anchor.scrollIntoView(); 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();
}
});