diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-02-14 21:08:45 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-02-14 21:08:45 +0300 |
commit | 26a50872e9da9509c52c70f74dc21698fec906db (patch) | |
tree | b1bd36bd72e701e346ef880fc7a905f6186525e7 /app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue | |
parent | b3a736ed88a1db0391cd9881e70b987bab7d89d1 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue | 68 |
1 files changed, 68 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue b/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue new file mode 100644 index 00000000000..e64c7132117 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue @@ -0,0 +1,68 @@ +<script> +import ViewerMixin from './mixins'; +import { GlIcon } from '@gitlab/ui'; +import { HIGHLIGHT_CLASS_NAME } from './constants'; + +export default { + components: { + GlIcon, + }, + mixins: [ViewerMixin], + data() { + return { + highlightedLine: null, + }; + }, + computed: { + lineNumbers() { + return this.content.split('\n').length; + }, + }, + mounted() { + const { hash } = window.location; + if (hash) this.scrollToLine(hash, true); + }, + methods: { + scrollToLine(hash, scroll = false) { + const lineToHighlight = hash && this.$el.querySelector(hash); + const currentlyHighlighted = this.highlightedLine; + if (lineToHighlight) { + if (currentlyHighlighted) { + currentlyHighlighted.classList.remove(HIGHLIGHT_CLASS_NAME); + } + + lineToHighlight.classList.add(HIGHLIGHT_CLASS_NAME); + this.highlightedLine = lineToHighlight; + if (scroll) { + lineToHighlight.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } + } + }, + }, + userColorScheme: window.gon.user_color_scheme, +}; +</script> +<template> + <div + class="file-content code js-syntax-highlight qa-file-content" + :class="$options.userColorScheme" + > + <div class="line-numbers"> + <a + v-for="line in lineNumbers" + :id="`L${line}`" + :key="line" + class="diff-line-num js-line-number" + :href="`#LC${line}`" + :data-line-number="line" + @click="scrollToLine(`#LC${line}`)" + > + <gl-icon :size="12" name="link" /> + {{ line }} + </a> + </div> + <div class="blob-content"> + <pre class="code highlight"><code id="blob-code-content" v-html="content"></code></pre> + </div> + </div> +</template> |