debian-mirror-gitlab/app/assets/javascripts/projects/project_new.js

268 lines
8.2 KiB
JavaScript
Raw Normal View History

2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2018-03-27 19:54:05 +05:30
import { addSelectOnFocusBehaviour } from '../lib/utils/common_utils';
2020-03-13 15:44:24 +05:30
import { convertToTitleCase, humanize, slugify } from '../lib/utils/text_utility';
2019-07-31 22:56:46 +05:30
import { s__ } from '~/locale';
2018-03-27 19:54:05 +05:30
2017-09-10 17:25:29 +05:30
let hasUserDefinedProjectPath = false;
2020-03-13 15:44:24 +05:30
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;
});
};
2017-09-10 17:25:29 +05:30
2018-12-13 13:39:08 +05:30
const deriveProjectPathFromUrl = $projectImportUrl => {
2020-03-13 15:44:24 +05:30
const $currentProjectName = $projectImportUrl
.parents('.toggle-import-form')
.find('#project_name');
2018-12-13 13:39:08 +05:30
const $currentProjectPath = $projectImportUrl
.parents('.toggle-import-form')
.find('#project_path');
2020-03-13 15:44:24 +05:30
2017-09-10 17:25:29 +05:30
if (hasUserDefinedProjectPath) {
return;
}
let importUrl = $projectImportUrl.val().trim();
if (importUrl.length === 0) {
return;
}
/*
\/?: remove trailing slash
(\.git\/?)?: remove trailing .git (with optional trailing slash)
(\?.*)?: remove query string
(#.*)?: remove fragment identifier
*/
importUrl = importUrl.replace(/\/?(\.git\/?)?(\?.*)?(#.*)?$/, '');
// extract everything after the last slash
const pathMatch = /\/([^/]+)$/.exec(importUrl);
if (pathMatch) {
2018-03-17 18:26:18 +05:30
$currentProjectPath.val(pathMatch[1]);
2020-03-13 15:44:24 +05:30
onProjectPathChange($currentProjectName, $currentProjectPath, false);
2017-09-10 17:25:29 +05:30
}
};
const bindEvents = () => {
const $newProjectForm = $('#new_project');
const $projectImportUrl = $('#project_import_url');
2018-11-20 20:47:30 +05:30
const $projectPath = $('.tab-pane.active #project_path');
2018-03-17 18:26:18 +05:30
const $useTemplateBtn = $('.template-button > input');
const $projectFieldsForm = $('.project-fields-form');
const $selectedTemplateText = $('.selected-template');
const $changeTemplateBtn = $('.change-template');
2018-11-18 11:00:15 +05:30
const $selectedIcon = $('.selected-icon');
2018-03-27 19:54:05 +05:30
const $pushNewProjectTipTrigger = $('.push-new-project-tip');
2018-11-18 11:00:15 +05:30
const $projectTemplateButtons = $('.project-templates-buttons');
2018-11-20 20:47:30 +05:30
const $projectName = $('.tab-pane.active #project_name');
2017-09-10 17:25:29 +05:30
if ($newProjectForm.length !== 1) {
return;
}
2018-12-13 13:39:08 +05:30
$('.how_to_import_link').on('click', e => {
2017-09-10 17:25:29 +05:30
e.preventDefault();
2018-12-13 13:39:08 +05:30
$(e.currentTarget)
.next('.modal')
.show();
2017-09-10 17:25:29 +05:30
});
$('.modal-header .close').on('click', () => {
$('.modal').hide();
});
$('.btn_import_gitlab_project').on('click', () => {
const importHref = $('a.btn_import_gitlab_project').attr('href');
2018-12-13 13:39:08 +05:30
$('.btn_import_gitlab_project').attr(
'href',
`${importHref}?namespace_id=${$(
'#project_namespace_id',
).val()}&name=${$projectName.val()}&path=${$projectPath.val()}`,
);
2017-09-10 17:25:29 +05:30
});
2018-03-27 19:54:05 +05:30
if ($pushNewProjectTipTrigger) {
$pushNewProjectTipTrigger
.removeAttr('rel')
.removeAttr('target')
2018-12-13 13:39:08 +05:30
.on('click', e => {
e.preventDefault();
})
2018-03-27 19:54:05 +05:30
.popover({
title: $pushNewProjectTipTrigger.data('title'),
2018-11-08 19:23:39 +05:30
placement: 'bottom',
html: true,
2018-03-27 19:54:05 +05:30
content: $('.push-new-project-tip-template').html(),
})
.on('shown.bs.popover', () => {
2018-12-13 13:39:08 +05:30
$(document).on('click.popover touchstart.popover', event => {
2018-03-27 19:54:05 +05:30
if ($(event.target).closest('.popover').length === 0) {
$pushNewProjectTipTrigger.trigger('click');
}
});
2018-12-13 13:39:08 +05:30
const target = $(`#${$pushNewProjectTipTrigger.attr('aria-describedby')}`).find(
'.js-select-on-focus',
);
2018-03-27 19:54:05 +05:30
addSelectOnFocusBehaviour(target);
target.focus();
})
.on('hide.bs.popover', () => {
$(document).off('click.popover touchstart.popover');
});
}
2018-03-17 18:26:18 +05:30
function chooseTemplate() {
2018-11-18 11:00:15 +05:30
$projectTemplateButtons.addClass('hidden');
2018-03-17 18:26:18 +05:30
$projectFieldsForm.addClass('selected');
2018-11-18 11:00:15 +05:30
$selectedIcon.empty();
2018-03-17 18:26:18 +05:30
const value = $(this).val();
const templates = {
rails: {
2019-07-31 22:56:46 +05:30
text: s__('ProjectTemplates|Ruby on Rails'),
2019-03-02 22:35:43 +05:30
icon: '.template-option .icon-rails',
2018-03-17 18:26:18 +05:30
},
express: {
2019-07-31 22:56:46 +05:30
text: s__('ProjectTemplates|NodeJS Express'),
2019-03-02 22:35:43 +05:30
icon: '.template-option .icon-express',
2018-03-17 18:26:18 +05:30
},
spring: {
2019-07-31 22:56:46 +05:30
text: s__('ProjectTemplates|Spring'),
2019-03-02 22:35:43 +05:30
icon: '.template-option .icon-spring',
},
2019-07-07 11:18:12 +05:30
iosswift: {
2019-07-31 22:56:46 +05:30
text: s__('ProjectTemplates|iOS (Swift)'),
2020-01-01 13:55:28 +05:30
icon: '.template-option .icon-iosswift',
2019-07-07 11:18:12 +05:30
},
dotnetcore: {
2019-07-31 22:56:46 +05:30
text: s__('ProjectTemplates|.NET Core'),
2020-01-01 13:55:28 +05:30
icon: '.template-option .icon-dotnetcore',
2019-07-07 11:18:12 +05:30
},
android: {
2019-07-31 22:56:46 +05:30
text: s__('ProjectTemplates|Android'),
2020-01-01 13:55:28 +05:30
icon: '.template-option .icon-android',
2019-07-07 11:18:12 +05:30
},
gomicro: {
2019-07-31 22:56:46 +05:30
text: s__('ProjectTemplates|Go Micro'),
2019-07-07 11:18:12 +05:30
icon: '.template-option .icon-gomicro',
},
2019-03-02 22:35:43 +05:30
hugo: {
2019-07-31 22:56:46 +05:30
text: s__('ProjectTemplates|Pages/Hugo'),
2019-03-02 22:35:43 +05:30
icon: '.template-option .icon-hugo',
},
jekyll: {
2019-07-31 22:56:46 +05:30
text: s__('ProjectTemplates|Pages/Jekyll'),
2019-03-02 22:35:43 +05:30
icon: '.template-option .icon-jekyll',
},
plainhtml: {
2019-07-31 22:56:46 +05:30
text: s__('ProjectTemplates|Pages/Plain HTML'),
2019-03-02 22:35:43 +05:30
icon: '.template-option .icon-plainhtml',
},
gitbook: {
2019-07-31 22:56:46 +05:30
text: s__('ProjectTemplates|Pages/GitBook'),
2019-03-02 22:35:43 +05:30
icon: '.template-option .icon-gitbook',
},
hexo: {
2019-07-31 22:56:46 +05:30
text: s__('ProjectTemplates|Pages/Hexo'),
2019-03-02 22:35:43 +05:30
icon: '.template-option .icon-hexo',
2018-03-17 18:26:18 +05:30
},
2019-07-07 11:18:12 +05:30
nfhugo: {
2019-07-31 22:56:46 +05:30
text: s__('ProjectTemplates|Netlify/Hugo'),
2020-01-01 13:55:28 +05:30
icon: '.template-option .icon-nfhugo',
2019-07-07 11:18:12 +05:30
},
nfjekyll: {
2019-07-31 22:56:46 +05:30
text: s__('ProjectTemplates|Netlify/Jekyll'),
2020-01-01 13:55:28 +05:30
icon: '.template-option .icon-nfjekyll',
2019-07-07 11:18:12 +05:30
},
nfplainhtml: {
2019-07-31 22:56:46 +05:30
text: s__('ProjectTemplates|Netlify/Plain HTML'),
2020-01-01 13:55:28 +05:30
icon: '.template-option .icon-nfplainhtml',
2019-07-07 11:18:12 +05:30
},
nfgitbook: {
2019-07-31 22:56:46 +05:30
text: s__('ProjectTemplates|Netlify/GitBook'),
2020-01-01 13:55:28 +05:30
icon: '.template-option .icon-nfgitbook',
2019-07-07 11:18:12 +05:30
},
nfhexo: {
2019-07-31 22:56:46 +05:30
text: s__('ProjectTemplates|Netlify/Hexo'),
2020-01-01 13:55:28 +05:30
icon: '.template-option .icon-nfhexo',
},
salesforcedx: {
text: s__('ProjectTemplates|SalesforceDX'),
icon: '.template-option .icon-salesforcedx',
2019-07-07 11:18:12 +05:30
},
2019-12-26 22:10:19 +05:30
serverless_framework: {
text: s__('ProjectTemplates|Serverless Framework/JS'),
icon: '.template-option .icon-serverless_framework',
},
2018-03-17 18:26:18 +05:30
};
const selectedTemplate = templates[value];
$selectedTemplateText.text(selectedTemplate.text);
2018-12-13 13:39:08 +05:30
$(selectedTemplate.icon)
.clone()
.addClass('d-block')
.appendTo($selectedIcon);
2018-11-20 20:47:30 +05:30
const $activeTabProjectName = $('.tab-pane.active #project_name');
const $activeTabProjectPath = $('.tab-pane.active #project_path');
$activeTabProjectName.focus();
2020-03-13 15:44:24 +05:30
setProjectNamePathHandlers($activeTabProjectName, $activeTabProjectPath);
2018-03-17 18:26:18 +05:30
}
$useTemplateBtn.on('change', chooseTemplate);
$changeTemplateBtn.on('click', () => {
2018-11-18 11:00:15 +05:30
$projectTemplateButtons.removeClass('hidden');
2018-03-17 18:26:18 +05:30
$projectFieldsForm.removeClass('selected');
$useTemplateBtn.prop('checked', false);
});
2017-09-10 17:25:29 +05:30
$newProjectForm.on('submit', () => {
$projectPath.val($projectPath.val().trim());
});
2018-03-17 18:26:18 +05:30
$projectImportUrl.keyup(() => deriveProjectPathFromUrl($projectImportUrl));
2018-11-20 20:47:30 +05:30
2019-07-31 22:56:46 +05:30
$('.js-import-git-toggle-button').on('click', () => {
const $projectMirror = $('#project_mirror');
$projectMirror.attr('disabled', !$projectMirror.attr('disabled'));
2020-03-13 15:44:24 +05:30
setProjectNamePathHandlers(
$('.tab-pane.active #project_name'),
$('.tab-pane.active #project_path'),
);
2019-07-31 22:56:46 +05:30
});
2020-03-13 15:44:24 +05:30
setProjectNamePathHandlers($projectName, $projectPath);
2017-09-10 17:25:29 +05:30
};
export default {
bindEvents,
deriveProjectPathFromUrl,
2018-11-20 20:47:30 +05:30
onProjectNameChange,
2020-03-13 15:44:24 +05:30
onProjectPathChange,
2017-09-10 17:25:29 +05:30
};