|
|
import $ from 'jquery';
|
|
import $ from 'jquery';
|
|
|
import { addSelectOnFocusBehaviour } from '../lib/utils/common_utils';
|
|
import { addSelectOnFocusBehaviour } from '../lib/utils/common_utils';
|
|
|
import { slugify } from '../lib/utils/text_utility';
|
|
import { convertToTitleCase, humanize, slugify } from '../lib/utils/text_utility';
|
|
|
import { s__ } from '~/locale';
|
|
import { s__ } from '~/locale';
|
|
|
|
|
|
|
|
let hasUserDefinedProjectPath = false;
|
|
let hasUserDefinedProjectPath = false;
|
|
|
|
let hasUserDefinedProjectName = false;
|
|
|
|
|
|
|
|
const onProjectNameChange = ($projectNameInput, $projectPathInput) => {
|
|
|
|
const slug = slugify($projectNameInput.val());
|
|
|
|
$projectPathInput.val(slug);
|
|
|
|
};
|
|
|
|
|
|
|
|
const onProjectPathChange = ($projectNameInput, $projectPathInput, hasExistingProjectName) => {
|
|
|
|
const slug = $projectPathInput.val();
|
|
|
|
|
|
|
|
if (!hasExistingProjectName) {
|
|
|
|
$projectNameInput.val(convertToTitleCase(humanize(slug, '[-_]')));
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const setProjectNamePathHandlers = ($projectNameInput, $projectPathInput) => {
|
|
|
|
$projectNameInput.off('keyup change').on('keyup change', () => {
|
|
|
|
onProjectNameChange($projectNameInput, $projectPathInput);
|
|
|
|
hasUserDefinedProjectName = $projectNameInput.val().trim().length > 0;
|
|
|
|
hasUserDefinedProjectPath = $projectPathInput.val().trim().length > 0;
|
|
|
|
});
|
|
|
|
|
|
|
|
$projectPathInput.off('keyup change').on('keyup change', () => {
|
|
|
|
onProjectPathChange($projectNameInput, $projectPathInput, hasUserDefinedProjectName);
|
|
|
|
hasUserDefinedProjectPath = $projectPathInput.val().trim().length > 0;
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
const deriveProjectPathFromUrl = $projectImportUrl => {
|
|
const deriveProjectPathFromUrl = $projectImportUrl => {
|
|
|
|
const $currentProjectName = $projectImportUrl
|
|
|
|
.parents('.toggle-import-form')
|
|
|
|
.find('#project_name');
|
|
|
const $currentProjectPath = $projectImportUrl
|
|
const $currentProjectPath = $projectImportUrl
|
|
|
.parents('.toggle-import-form')
|
|
.parents('.toggle-import-form')
|
|
|
.find('#project_path');
|
|
.find('#project_path');
|
|
|
|
|
|
|
if (hasUserDefinedProjectPath) {
|
|
if (hasUserDefinedProjectPath) {
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
| ... | @@ -30,14 +61,10 @@ const deriveProjectPathFromUrl = $projectImportUrl => { |
... | @@ -30,14 +61,10 @@ const deriveProjectPathFromUrl = $projectImportUrl => { |
|
|
const pathMatch = /\/([^/]+)$/.exec(importUrl);
|
|
const pathMatch = /\/([^/]+)$/.exec(importUrl);
|
|
|
if (pathMatch) {
|
|
if (pathMatch) {
|
|
|
$currentProjectPath.val(pathMatch[1]);
|
|
$currentProjectPath.val(pathMatch[1]);
|
|
|
|
onProjectPathChange($currentProjectName, $currentProjectPath, false);
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const onProjectNameChange = ($projectNameInput, $projectPathInput) => {
|
|
|
|
|
const slug = slugify($projectNameInput.val());
|
|
|
|
|
$projectPathInput.val(slug);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const bindEvents = () => {
|
|
const bindEvents = () => {
|
|
|
const $newProjectForm = $('#new_project');
|
|
const $newProjectForm = $('#new_project');
|
|
|
const $projectImportUrl = $('#project_import_url');
|
|
const $projectImportUrl = $('#project_import_url');
|
| ... | @@ -202,10 +229,7 @@ const bindEvents = () => { |
... | @@ -202,10 +229,7 @@ const bindEvents = () => { |
|
|
const $activeTabProjectName = $('.tab-pane.active #project_name');
|
|
const $activeTabProjectName = $('.tab-pane.active #project_name');
|
|
|
const $activeTabProjectPath = $('.tab-pane.active #project_path');
|
|
const $activeTabProjectPath = $('.tab-pane.active #project_path');
|
|
|
$activeTabProjectName.focus();
|
|
$activeTabProjectName.focus();
|
|
|
$activeTabProjectName.keyup(() => {
|
|
setProjectNamePathHandlers($activeTabProjectName, $activeTabProjectPath);
|
|
|
onProjectNameChange($activeTabProjectName, $activeTabProjectPath);
|
|
|
|
|
hasUserDefinedProjectPath = $activeTabProjectPath.val().trim().length > 0;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
$useTemplateBtn.on('change', chooseTemplate);
|
|
$useTemplateBtn.on('change', chooseTemplate);
|
| ... | @@ -220,26 +244,24 @@ const bindEvents = () => { |
... | @@ -220,26 +244,24 @@ const bindEvents = () => { |
|
|
$projectPath.val($projectPath.val().trim());
|
|
$projectPath.val($projectPath.val().trim());
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
$projectPath.on('keyup', () => {
|
|
|
|
|
hasUserDefinedProjectPath = $projectPath.val().trim().length > 0;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$projectImportUrl.keyup(() => deriveProjectPathFromUrl($projectImportUrl));
|
|
$projectImportUrl.keyup(() => deriveProjectPathFromUrl($projectImportUrl));
|
|
|
|
|
|
|
|
$('.js-import-git-toggle-button').on('click', () => {
|
|
$('.js-import-git-toggle-button').on('click', () => {
|
|
|
const $projectMirror = $('#project_mirror');
|
|
const $projectMirror = $('#project_mirror');
|
|
|
|
|
|
|
|
$projectMirror.attr('disabled', !$projectMirror.attr('disabled'));
|
|
$projectMirror.attr('disabled', !$projectMirror.attr('disabled'));
|
|
|
|
setProjectNamePathHandlers(
|
|
|
|
$('.tab-pane.active #project_name'),
|
|
|
|
$('.tab-pane.active #project_path'),
|
|
|
|
);
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
$projectName.on('keyup change', () => {
|
|
setProjectNamePathHandlers($projectName, $projectPath);
|
|
|
onProjectNameChange($projectName, $projectPath);
|
|
|
|
|
hasUserDefinedProjectPath = $projectPath.val().trim().length > 0;
|
|
|
|
|
});
|
|
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
export default {
|
|
export default {
|
|
|
bindEvents,
|
|
bindEvents,
|
|
|
deriveProjectPathFromUrl,
|
|
deriveProjectPathFromUrl,
|
|
|
onProjectNameChange,
|
|
onProjectNameChange,
|
|
|
|
onProjectPathChange,
|
|
|
}; |
|
}; |