diff options
Diffstat (limited to 'app/assets/javascripts/blob')
| -rw-r--r-- | app/assets/javascripts/blob/blob_blame_link.js | 14 | ||||
| -rw-r--r-- | app/assets/javascripts/blob/blob_file_dropzone.js | 96 | ||||
| -rw-r--r-- | app/assets/javascripts/blob/blob_line_permalink_updater.js | 6 | ||||
| -rw-r--r-- | app/assets/javascripts/blob/components/blob_edit_content.vue | 66 | ||||
| -rw-r--r-- | app/assets/javascripts/blob/utils.js | 26 |
5 files changed, 28 insertions, 180 deletions
diff --git a/app/assets/javascripts/blob/blob_blame_link.js b/app/assets/javascripts/blob/blob_blame_link.js index 41dfd7b82b8..a5191a3d513 100644 --- a/app/assets/javascripts/blob/blob_blame_link.js +++ b/app/assets/javascripts/blob/blob_blame_link.js @@ -1,4 +1,6 @@ -function addBlameLink(containerSelector, linkClass) { +import { getPageParamValue, getPageSearchString } from './utils'; + +export function addBlameLink(containerSelector, linkClass) { const containerEl = document.querySelector(containerSelector); if (!containerEl) { @@ -13,10 +15,14 @@ function addBlameLink(containerSelector, linkClass) { lineLinkCopy.classList.remove(linkClass, 'diff-line-num'); const { lineNumber } = lineLink.dataset; - const { blamePath } = document.querySelector('.line-numbers').dataset; const blameLink = document.createElement('a'); + const { blamePath } = document.querySelector('.line-numbers').dataset; blameLink.classList.add('file-line-blame'); - blameLink.href = `${blamePath}#L${lineNumber}`; + const blamePerPage = document.querySelector('.js-per-page')?.dataset?.blamePerPage; + const pageNumber = getPageParamValue(lineNumber, blamePerPage); + const searchString = getPageSearchString(blamePath, pageNumber); + + blameLink.href = `${blamePath}${searchString}#L${lineNumber}`; const wrapper = document.createElement('div'); wrapper.classList.add('line-links', 'diff-line-num'); @@ -27,5 +33,3 @@ function addBlameLink(containerSelector, linkClass) { } }); } - -export default addBlameLink; diff --git a/app/assets/javascripts/blob/blob_file_dropzone.js b/app/assets/javascripts/blob/blob_file_dropzone.js deleted file mode 100644 index 387d6043315..00000000000 --- a/app/assets/javascripts/blob/blob_file_dropzone.js +++ /dev/null @@ -1,96 +0,0 @@ -/* eslint-disable func-names */ - -import Dropzone from 'dropzone'; -import $ from 'jquery'; -import { sprintf, __ } from '~/locale'; -import { HIDDEN_CLASS } from '../lib/utils/constants'; -import csrf from '../lib/utils/csrf'; -import { visitUrl } from '../lib/utils/url_utility'; - -Dropzone.autoDiscover = false; - -function toggleLoading($el, $icon, loading) { - if (loading) { - $el.disable(); - $icon.removeClass(HIDDEN_CLASS); - } else { - $el.enable(); - $icon.addClass(HIDDEN_CLASS); - } -} -export default class BlobFileDropzone { - constructor(form, method) { - const formDropzone = form.find('.dropzone'); - const submitButton = form.find('#submit-all'); - const submitButtonLoadingIcon = submitButton.find('.js-loading-icon'); - const dropzoneMessage = form.find('.dz-message'); - Dropzone.autoDiscover = false; - - const dropzone = formDropzone.dropzone({ - autoDiscover: false, - autoProcessQueue: false, - url: form.attr('action'), - // Rails uses a hidden input field for PUT - method, - clickable: true, - uploadMultiple: false, - paramName: 'file', - maxFilesize: gon.max_file_size || 10, - parallelUploads: 1, - maxFiles: 1, - addRemoveLinks: true, - previewsContainer: '.dropzone-previews', - headers: csrf.headers, - init() { - this.on('processing', function () { - this.options.url = form.attr('action'); - }); - - this.on('addedfile', () => { - toggleLoading(submitButton, submitButtonLoadingIcon, false); - dropzoneMessage.addClass(HIDDEN_CLASS); - $('.dropzone-alerts').html('').hide(); - }); - this.on('removedfile', () => { - toggleLoading(submitButton, submitButtonLoadingIcon, false); - dropzoneMessage.removeClass(HIDDEN_CLASS); - }); - this.on('success', (header, response) => { - $('#modal-upload-blob').modal('hide'); - visitUrl(response.filePath); - }); - this.on('maxfilesexceeded', function (file) { - dropzoneMessage.addClass(HIDDEN_CLASS); - this.removeFile(file); - }); - this.on('sending', (file, xhr, formData) => { - formData.append('branch_name', form.find('.js-branch-name').val()); - formData.append('create_merge_request', form.find('.js-create-merge-request').val()); - formData.append('commit_message', form.find('.js-commit-message').val()); - }); - }, - // Override behavior of adding error underneath preview - error(file, errorMessage) { - const stripped = $('<div/>').html(errorMessage).text(); - $('.dropzone-alerts') - .html(sprintf(__('Error uploading file: %{stripped}'), { stripped })) - .show(); - this.removeFile(file); - }, - }); - - submitButton.on('click', (e) => { - e.preventDefault(); - e.stopPropagation(); - - if (dropzone[0].dropzone.getQueuedFiles().length === 0) { - // eslint-disable-next-line no-alert - alert(__('Please select a file')); - return false; - } - toggleLoading(submitButton, submitButtonLoadingIcon, true); - dropzone[0].dropzone.processQueue(); - return false; - }); - } -} diff --git a/app/assets/javascripts/blob/blob_line_permalink_updater.js b/app/assets/javascripts/blob/blob_line_permalink_updater.js index df38c5400e2..928035d7c1e 100644 --- a/app/assets/javascripts/blob/blob_line_permalink_updater.js +++ b/app/assets/javascripts/blob/blob_line_permalink_updater.js @@ -1,4 +1,5 @@ import { getLocationHash } from '../lib/utils/url_utility'; +import { getPageParamValue, getPageSearchString } from './utils'; const lineNumberRe = /^(L|LC)[0-9]+/; @@ -16,7 +17,10 @@ const updateLineNumbersOnBlobPermalinks = (linksToUpdate) => { permalinkButton.dataset.originalHref = href; return href; })(); - permalinkButton.setAttribute('href', `${baseHref}${hashUrlString}`); + const lineNum = parseInt(hash.split('L')[1], 10); + const page = getPageParamValue(lineNum); + const searchString = getPageSearchString(baseHref, page); + permalinkButton.setAttribute('href', `${baseHref}${searchString}${hashUrlString}`); }); } }; diff --git a/app/assets/javascripts/blob/components/blob_edit_content.vue b/app/assets/javascripts/blob/components/blob_edit_content.vue deleted file mode 100644 index 0e670bbd80a..00000000000 --- a/app/assets/javascripts/blob/components/blob_edit_content.vue +++ /dev/null @@ -1,66 +0,0 @@ -<script> -import { debounce } from 'lodash'; -import { initSourceEditor } from '~/blob/utils'; -import { SNIPPET_MEASURE_BLOBS_CONTENT } from '~/performance/constants'; - -import eventHub from './eventhub'; - -export default { - props: { - value: { - type: String, - required: false, - default: '', - }, - fileName: { - type: String, - required: false, - default: '', - }, - // This is used to help uniquely create a monaco model - // even if two blob's share a file path. - fileGlobalId: { - type: String, - required: false, - default: '', - }, - }, - data() { - return { - editor: null, - }; - }, - watch: { - fileName(newVal) { - this.editor.updateModelLanguage(newVal); - }, - }, - mounted() { - this.editor = initSourceEditor({ - el: this.$refs.editor, - blobPath: this.fileName, - blobContent: this.value, - blobGlobalId: this.fileGlobalId, - }); - - this.editor.onDidChangeModelContent(debounce(this.onFileChange.bind(this), 250)); - - eventHub.$emit(SNIPPET_MEASURE_BLOBS_CONTENT); - }, - beforeDestroy() { - this.editor.dispose(); - }, - methods: { - onFileChange() { - this.$emit('input', this.editor.getValue()); - }, - }, -}; -</script> -<template> - <div class="file-content code"> - <div id="editor" ref="editor" data-editor-loading> - <pre class="editor-loading-content">{{ value }}</pre> - </div> - </div> -</template> diff --git a/app/assets/javascripts/blob/utils.js b/app/assets/javascripts/blob/utils.js index bbc061dd36e..b2400a4b224 100644 --- a/app/assets/javascripts/blob/utils.js +++ b/app/assets/javascripts/blob/utils.js @@ -1,16 +1,18 @@ -import Editor from '~/editor/source_editor'; +import { getBaseURL } from '~/lib/utils/url_utility'; -export function initSourceEditor({ el, ...args }) { - const editor = new Editor({ - scrollbar: { - alwaysConsumeMouseWheel: false, - }, - }); +const blameLinesPerPage = document.querySelector('.js-per-page')?.dataset?.blamePerPage; - return editor.createInstance({ - el, - ...args, - }); -} +export const getPageParamValue = (lineNum, blamePerPage = blameLinesPerPage) => { + if (!blamePerPage) return ''; + const page = Math.ceil(parseInt(lineNum, 10) / parseInt(blamePerPage, 10)); + return page <= 1 ? '' : page; +}; + +export const getPageSearchString = (path, page) => { + if (!page) return ''; + const url = new URL(path, getBaseURL()); + url.searchParams.set('page', page); + return url.search; +}; export default () => ({}); |