project_new.js 6.4 KB
Newer Older
1
import $ from 'jquery';
2
import { addSelectOnFocusBehaviour } from '../lib/utils/common_utils';
3
import { slugifyWithHyphens } from '../lib/utils/text_utility';
4

Phil Hughes's avatar
Phil Hughes committed
5 6
let hasUserDefinedProjectPath = false;

7 8 9 10
const deriveProjectPathFromUrl = $projectImportUrl => {
  const $currentProjectPath = $projectImportUrl
    .parents('.toggle-import-form')
    .find('#project_path');
Phil Hughes's avatar
Phil Hughes committed
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
  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) {
    $currentProjectPath.val(pathMatch[1]);
  }
};

35 36 37 38 39
const onProjectNameChange = ($projectNameInput, $projectPathInput) => {
  const slug = slugifyWithHyphens($projectNameInput.val());
  $projectPathInput.val(slug);
};

Phil Hughes's avatar
Phil Hughes committed
40 41 42
const bindEvents = () => {
  const $newProjectForm = $('#new_project');
  const $projectImportUrl = $('#project_import_url');
43
  const $projectPath = $('.tab-pane.active #project_path');
Phil Hughes's avatar
Phil Hughes committed
44 45 46 47
  const $useTemplateBtn = $('.template-button > input');
  const $projectFieldsForm = $('.project-fields-form');
  const $selectedTemplateText = $('.selected-template');
  const $changeTemplateBtn = $('.change-template');
48
  const $selectedIcon = $('.selected-icon');
49
  const $pushNewProjectTipTrigger = $('.push-new-project-tip');
50
  const $projectTemplateButtons = $('.project-templates-buttons');
51
  const $projectName = $('.tab-pane.active #project_name');
Phil Hughes's avatar
Phil Hughes committed
52 53 54 55 56

  if ($newProjectForm.length !== 1) {
    return;
  }

57
  $('.how_to_import_link').on('click', e => {
Phil Hughes's avatar
Phil Hughes committed
58
    e.preventDefault();
59 60 61
    $(e.currentTarget)
      .next('.modal')
      .show();
Phil Hughes's avatar
Phil Hughes committed
62 63 64 65 66 67 68 69
  });

  $('.modal-header .close').on('click', () => {
    $('.modal').hide();
  });

  $('.btn_import_gitlab_project').on('click', () => {
    const importHref = $('a.btn_import_gitlab_project').attr('href');
70 71 72 73 74 75
    $('.btn_import_gitlab_project').attr(
      'href',
      `${importHref}?namespace_id=${$(
        '#project_namespace_id',
      ).val()}&name=${$projectName.val()}&path=${$projectPath.val()}`,
    );
Phil Hughes's avatar
Phil Hughes committed
76 77
  });

78 79 80 81
  if ($pushNewProjectTipTrigger) {
    $pushNewProjectTipTrigger
      .removeAttr('rel')
      .removeAttr('target')
82 83 84
      .on('click', e => {
        e.preventDefault();
      })
85 86
      .popover({
        title: $pushNewProjectTipTrigger.data('title'),
87
        placement: 'bottom',
Clement Ho's avatar
Clement Ho committed
88
        html: true,
89 90 91
        content: $('.push-new-project-tip-template').html(),
      })
      .on('shown.bs.popover', () => {
92
        $(document).on('click.popover touchstart.popover', event => {
93 94 95 96 97
          if ($(event.target).closest('.popover').length === 0) {
            $pushNewProjectTipTrigger.trigger('click');
          }
        });

98 99 100
        const target = $(`#${$pushNewProjectTipTrigger.attr('aria-describedby')}`).find(
          '.js-select-on-focus',
        );
101 102 103 104 105 106 107 108 109
        addSelectOnFocusBehaviour(target);

        target.focus();
      })
      .on('hide.bs.popover', () => {
        $(document).off('click.popover touchstart.popover');
      });
  }

Phil Hughes's avatar
Phil Hughes committed
110
  function chooseTemplate() {
111
    $projectTemplateButtons.addClass('hidden');
Phil Hughes's avatar
Phil Hughes committed
112
    $projectFieldsForm.addClass('selected');
113
    $selectedIcon.empty();
Phil Hughes's avatar
Phil Hughes committed
114 115 116 117
    const value = $(this).val();
    const templates = {
      rails: {
        text: 'Ruby on Rails',
118
        icon: '.template-option .icon-rails',
Phil Hughes's avatar
Phil Hughes committed
119 120 121
      },
      express: {
        text: 'NodeJS Express',
122
        icon: '.template-option .icon-express',
Phil Hughes's avatar
Phil Hughes committed
123 124 125
      },
      spring: {
        text: 'Spring',
126
        icon: '.template-option .icon-spring',
Phil Hughes's avatar
Phil Hughes committed
127
      },
128 129 130 131
      dotnetcore: {
        text: '.NET Core',
        icon: '.template-option .icon-dotnet',
      },
Jason Lenny's avatar
Jason Lenny committed
132 133 134 135
      android: {
        text: 'Android',
        icon: '.template-option svg.icon-android',
      },
136 137 138 139
      gomicro: {
        text: 'Go Micro',
        icon: '.template-option .icon-gomicro',
      },
Jason Lenny's avatar
Jason Lenny committed
140 141
      hugo: {
        text: 'Pages/Hugo',
142
        icon: '.template-option .icon-hugo',
Jason Lenny's avatar
Jason Lenny committed
143 144 145
      },
      jekyll: {
        text: 'Pages/Jekyll',
146
        icon: '.template-option .icon-jekyll',
Jason Lenny's avatar
Jason Lenny committed
147 148 149
      },
      plainhtml: {
        text: 'Pages/Plain HTML',
150
        icon: '.template-option .icon-plainhtml',
Jason Lenny's avatar
Jason Lenny committed
151 152 153
      },
      gitbook: {
        text: 'Pages/GitBook',
154
        icon: '.template-option .icon-gitbook',
Jason Lenny's avatar
Jason Lenny committed
155 156 157
      },
      hexo: {
        text: 'Pages/Hexo',
158
        icon: '.template-option .icon-hexo',
Jason Lenny's avatar
Jason Lenny committed
159
      },
160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179
      nfhugo: {
        text: 'Netlify/Hugo',
        icon: '.template-option .icon-netlify',
      },
      nfjekyll: {
        text: 'Netlify/Jekyll',
        icon: '.template-option .icon-netlify',
      },
      nfplainhtml: {
        text: 'Netlify/Plain HTML',
        icon: '.template-option .icon-netlify',
      },
      nfgitbook: {
        text: 'Netlify/GitBook',
        icon: '.template-option .icon-netlify',
      },
      nfhexo: {
        text: 'Netlify/Hexo',
        icon: '.template-option .icon-netlify',
      },
Phil Hughes's avatar
Phil Hughes committed
180 181 182 183
    };

    const selectedTemplate = templates[value];
    $selectedTemplateText.text(selectedTemplate.text);
184 185 186 187
    $(selectedTemplate.icon)
      .clone()
      .addClass('d-block')
      .appendTo($selectedIcon);
188 189 190 191

    const $activeTabProjectName = $('.tab-pane.active #project_name');
    const $activeTabProjectPath = $('.tab-pane.active #project_path');
    $activeTabProjectName.focus();
192 193 194 195
    $activeTabProjectName.keyup(() => {
      onProjectNameChange($activeTabProjectName, $activeTabProjectPath);
      hasUserDefinedProjectPath = $activeTabProjectPath.val().trim().length > 0;
    });
Phil Hughes's avatar
Phil Hughes committed
196 197 198 199 200
  }

  $useTemplateBtn.on('change', chooseTemplate);

  $changeTemplateBtn.on('click', () => {
201
    $projectTemplateButtons.removeClass('hidden');
Phil Hughes's avatar
Phil Hughes committed
202 203 204 205 206 207 208 209 210 211 212 213 214
    $projectFieldsForm.removeClass('selected');
    $useTemplateBtn.prop('checked', false);
  });

  $newProjectForm.on('submit', () => {
    $projectPath.val($projectPath.val().trim());
  });

  $projectPath.on('keyup', () => {
    hasUserDefinedProjectPath = $projectPath.val().trim().length > 0;
  });

  $projectImportUrl.keyup(() => deriveProjectPathFromUrl($projectImportUrl));
215

216
  $projectName.on('keyup change', () => {
217 218 219
    onProjectNameChange($projectName, $projectPath);
    hasUserDefinedProjectPath = $projectPath.val().trim().length > 0;
  });
Phil Hughes's avatar
Phil Hughes committed
220 221 222 223 224
};

export default {
  bindEvents,
  deriveProjectPathFromUrl,
225
  onProjectNameChange,
Phil Hughes's avatar
Phil Hughes committed
226
};