BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit 01adf920 by Alfredo Sumaran
Options

Merge branch 'refactor-behaviors' into 'master'

Refactor javascript behaviors directory See merge request !10439
parents 5e1a802b 77dcb1f8
Showing with 185 additions and 205 deletions
app/assets/javascripts/behaviors/autosize.js
/* 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');
});
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) { $('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');
}
});
});
app/assets/javascripts/behaviors/index.js 0 → 100644
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 // Quick Submit behavior
// //
...@@ -6,9 +6,6 @@ ...@@ -6,9 +6,6 @@
// "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
// //
// <form action="/foo" class="js-quick-submit"> // <form action="/foo" class="js-quick-submit">
...@@ -17,61 +14,59 @@ import '../commons/bootstrap'; ...@@ -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';
// If the user tabs to a submit button on a `js-quick-submit` form, display a $this.tooltip({
// tooltip to let them know they could've used the hotkey container: 'body',
$(document).on('keyup.quick_submit', '.js-quick-submit input[type=submit], .js-quick-submit button[type=submit]', function(e) { html: 'true',
var $this, title; placement: 'auto top',
// Tab title,
if (!keyCodeIs(e, 9)) { trigger: 'manual',
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); $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 // 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
// //
// <form class="js-requires-input"> // <form class="js-requires-input">
...@@ -14,49 +12,43 @@ import '../commons/bootstrap'; ...@@ -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));
});
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) { // 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
$container // %div.js-toggle-content
.find('.js-toggle-button .fa') //
.toggleClass('fa-chevron-up', toggleState)
.toggleClass('fa-chevron-down', toggleState !== undefined ? !toggleState : undefined); $(() => {
function toggleContainer(container, toggleState) {
$container const $container = $(container);
.find('.js-toggle-content')
.toggle(toggleState); $container
}; .find('.js-toggle-button .fa')
.toggleClass('fa-chevron-up', toggleState)
// Toggle button. Show/hide content inside parent container. .toggleClass('fa-chevron-down', toggleState !== undefined ? !toggleState : undefined);
// Button does not change visibility. If button has icon - it changes chevron style.
// $container
// %div.js-toggle-container .find('.js-toggle-content')
// %button.js-toggle-button .toggle(toggleState);
// %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')); toggleContainer($(this).closest('.js-toggle-container'));
const targetTag = e.currentTarget.tagName.toLowerCase(); const targetTag = e.currentTarget.tagName.toLowerCase();
if (targetTag === 'a' || targetTag === 'button') { if (targetTag === 'a' || targetTag === 'button') {
e.preventDefault(); 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();
} }
}); });
})(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'; ...@@ -37,14 +37,7 @@ import './shortcuts_issuable';
import './shortcuts_network'; import './shortcuts_network';
// behaviors // behaviors
import './behaviors/autosize'; import './behaviors/';
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();
// blob // blob
import './blob/create_branch_dropdown'; import './blob/create_branch_dropdown';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment