|
1 | 1 | import $ from 'jquery'; |
2 | 2 | import {htmlEscape} from 'escape-goat'; |
3 | 3 | import {createCodeEditor} from './codeeditor.js'; |
4 | | -import {hideElem, showElem} from '../utils/dom.js'; |
| 4 | +import {hideElem, queryElems, showElem} from '../utils/dom.js'; |
5 | 5 | import {initMarkupContent} from '../markup/content.js'; |
6 | 6 | import {attachRefIssueContextPopup} from './contextpopup.js'; |
7 | 7 | import {POST} from '../modules/fetch.js'; |
@@ -40,98 +40,75 @@ function initEditPreviewTab($form) { |
40 | 40 | } |
41 | 41 | } |
42 | 42 |
|
43 | | -function initEditorForm() { |
44 | | - const $form = $('.repository .edit.form'); |
45 | | - if (!$form) return; |
46 | | - initEditPreviewTab($form); |
47 | | -} |
48 | | - |
49 | | -function getCursorPosition($e) { |
50 | | - const el = $e.get(0); |
51 | | - let pos = 0; |
52 | | - if ('selectionStart' in el) { |
53 | | - pos = el.selectionStart; |
54 | | - } else if ('selection' in document) { |
55 | | - el.focus(); |
56 | | - const Sel = document.selection.createRange(); |
57 | | - const SelLength = document.selection.createRange().text.length; |
58 | | - Sel.moveStart('character', -el.value.length); |
59 | | - pos = Sel.text.length - SelLength; |
60 | | - } |
61 | | - return pos; |
62 | | -} |
63 | | - |
64 | 43 | export function initRepoEditor() { |
65 | | - initEditorForm(); |
66 | | - |
67 | | - $('.js-quick-pull-choice-option').on('change', function () { |
68 | | - if ($(this).val() === 'commit-to-new-branch') { |
69 | | - showElem('.quick-pull-branch-name'); |
70 | | - document.querySelector('.quick-pull-branch-name input').required = true; |
71 | | - } else { |
72 | | - hideElem('.quick-pull-branch-name'); |
73 | | - document.querySelector('.quick-pull-branch-name input').required = false; |
74 | | - } |
75 | | - $('#commit-button').text(this.getAttribute('button_text')); |
76 | | - }); |
| 44 | + const $editArea = $('.repository.editor textarea#edit_area'); |
| 45 | + if (!$editArea.length) return; |
77 | 46 |
|
78 | | - const joinTreePath = ($fileNameEl) => { |
79 | | - const parts = []; |
80 | | - $('.breadcrumb span.section').each(function () { |
81 | | - const $element = $(this); |
82 | | - if ($element.find('a').length) { |
83 | | - parts.push($element.find('a').text()); |
| 47 | + for (const el of queryElems('.js-quick-pull-choice-option')) { |
| 48 | + el.addEventListener('input', () => { |
| 49 | + if (el.value === 'commit-to-new-branch') { |
| 50 | + showElem('.quick-pull-branch-name'); |
| 51 | + document.querySelector('.quick-pull-branch-name input').required = true; |
84 | 52 | } else { |
85 | | - parts.push($element.text()); |
| 53 | + hideElem('.quick-pull-branch-name'); |
| 54 | + document.querySelector('.quick-pull-branch-name input').required = false; |
86 | 55 | } |
| 56 | + document.querySelector('#commit-button').textContent = el.getAttribute('data-button-text'); |
87 | 57 | }); |
88 | | - if ($fileNameEl.val()) parts.push($fileNameEl.val()); |
89 | | - $('#tree_path').val(parts.join('/')); |
90 | | - }; |
91 | | - |
92 | | - const $editFilename = $('#file-name'); |
93 | | - $editFilename.on('input', function () { |
94 | | - const parts = $(this).val().split('/'); |
| 58 | + } |
95 | 59 |
|
| 60 | + const filenameInput = document.querySelector('#file-name'); |
| 61 | + function joinTreePath() { |
| 62 | + const parts = []; |
| 63 | + for (const el of document.querySelectorAll('.breadcrumb span.section')) { |
| 64 | + const link = el.querySelector('a'); |
| 65 | + parts.push(link ? link.textContent : el.textContent); |
| 66 | + } |
| 67 | + if (filenameInput.value) { |
| 68 | + parts.push(filenameInput.value); |
| 69 | + } |
| 70 | + document.querySelector('#tree_path').value = parts.join('/'); |
| 71 | + } |
| 72 | + filenameInput.addEventListener('input', function () { |
| 73 | + const parts = filenameInput.value.split('/'); |
96 | 74 | if (parts.length > 1) { |
97 | 75 | for (let i = 0; i < parts.length; ++i) { |
98 | 76 | const value = parts[i]; |
99 | 77 | if (i < parts.length - 1) { |
100 | 78 | if (value.length) { |
101 | | - $(`<span class="section"><a href="#">${htmlEscape(value)}</a></span>`).insertBefore($(this)); |
102 | | - $('<div class="breadcrumb-divider">/</div>').insertBefore($(this)); |
| 79 | + $(`<span class="section"><a href="#">${htmlEscape(value)}</a></span>`).insertBefore($(filenameInput)); |
| 80 | + $('<div class="breadcrumb-divider">/</div>').insertBefore($(filenameInput)); |
103 | 81 | } |
104 | 82 | } else { |
105 | | - $(this).val(value); |
| 83 | + filenameInput.value = value; |
106 | 84 | } |
107 | 85 | this.setSelectionRange(0, 0); |
108 | 86 | } |
109 | 87 | } |
110 | | - |
111 | | - joinTreePath($(this)); |
| 88 | + joinTreePath(); |
112 | 89 | }); |
113 | | - |
114 | | - $editFilename.on('keydown', function (e) { |
115 | | - const $section = $('.breadcrumb span.section'); |
116 | | - |
| 90 | + filenameInput.addEventListener('keydown', function (e) { |
| 91 | + const sections = queryElems('.breadcrumb span.section'); |
| 92 | + const dividers = queryElems('.breadcrumb .breadcrumb-divider'); |
117 | 93 | // Jump back to last directory once the filename is empty |
118 | | - if (e.code === 'Backspace' && getCursorPosition($(this)) === 0 && $section.length > 0) { |
| 94 | + if (e.code === 'Backspace' && filenameInput.selectionStart === 0 && sections.length > 0) { |
119 | 95 | e.preventDefault(); |
120 | | - const $divider = $('.breadcrumb .breadcrumb-divider'); |
121 | | - const value = $section.last().find('a').text(); |
122 | | - $(this).val(value + $(this).val()); |
| 96 | + const lastSection = sections[sections.length - 1]; |
| 97 | + const lastDivider = dividers.length ? dividers[dividers.length - 1] : null; |
| 98 | + const value = lastSection.querySelector('a').textContent; |
| 99 | + filenameInput.value = value + filenameInput.value; |
123 | 100 | this.setSelectionRange(value.length, value.length); |
124 | | - $section.last().remove(); |
125 | | - $divider.last().remove(); |
126 | | - joinTreePath($(this)); |
| 101 | + lastDivider?.remove(); |
| 102 | + lastSection.remove(); |
| 103 | + joinTreePath(); |
127 | 104 | } |
128 | 105 | }); |
129 | 106 |
|
130 | | - const $editArea = $('.repository.editor textarea#edit_area'); |
131 | | - if (!$editArea.length) return; |
| 107 | + const $form = $('.repository.editor .edit.form'); |
| 108 | + initEditPreviewTab($form); |
132 | 109 |
|
133 | 110 | (async () => { |
134 | | - const editor = await createCodeEditor($editArea[0], $editFilename[0]); |
| 111 | + const editor = await createCodeEditor($editArea[0], filenameInput); |
135 | 112 |
|
136 | 113 | // Using events from https://github.com/codedance/jquery.AreYouSure#advanced-usage |
137 | 114 | // to enable or disable the commit button |
|
0 commit comments