diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-20 16:37:47 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-20 16:37:47 +0300 |
commit | aee0a117a889461ce8ced6fcf73207fe017f1d99 (patch) | |
tree | 891d9ef189227a8445d83f35c1b0fc99573f4380 /app/assets/javascripts/behaviors | |
parent | 8d46af3258650d305f53b819eabf7ab18d22f59e (diff) |
Add latest changes from gitlab-org/gitlab@14-6-stable-eev14.6.0-rc42
Diffstat (limited to 'app/assets/javascripts/behaviors')
4 files changed, 76 insertions, 2 deletions
diff --git a/app/assets/javascripts/behaviors/copy_code.js b/app/assets/javascripts/behaviors/copy_code.js new file mode 100644 index 00000000000..a6e203ea5a2 --- /dev/null +++ b/app/assets/javascripts/behaviors/copy_code.js @@ -0,0 +1,66 @@ +import { uniqueId } from 'lodash'; +import { __ } from '~/locale'; +import { spriteIcon } from '~/lib/utils/common_utils'; +import { setAttributes } from '~/lib/utils/dom_utils'; + +class CopyCodeButton extends HTMLElement { + connectedCallback() { + this.for = uniqueId('code-'); + + this.parentNode.querySelector('pre').setAttribute('id', this.for); + + this.appendChild(this.createButton()); + } + + createButton() { + const button = document.createElement('button'); + + setAttributes(button, { + type: 'button', + class: 'btn btn-default btn-md gl-button btn-icon has-tooltip', + 'data-title': __('Copy to clipboard'), + 'data-clipboard-target': `pre#${this.for}`, + }); + + button.innerHTML = spriteIcon('copy-to-clipboard'); + + return button; + } +} + +function addCodeButton() { + [...document.querySelectorAll('pre.code.js-syntax-highlight')] + .filter((el) => !el.closest('.js-markdown-code')) + .forEach((el) => { + const copyCodeEl = document.createElement('copy-code'); + copyCodeEl.setAttribute('for', uniqueId('code-')); + + const wrapper = document.createElement('div'); + wrapper.className = 'gl-relative markdown-code-block js-markdown-code'; + wrapper.appendChild(el.cloneNode(true)); + wrapper.appendChild(copyCodeEl); + + el.parentNode.insertBefore(wrapper, el); + + el.remove(); + }); +} + +export const initCopyCodeButton = (selector = '#content-body') => { + if (!customElements.get('copy-code')) { + customElements.define('copy-code', CopyCodeButton); + } + + const el = document.querySelector(selector); + + if (!el) return () => {}; + + const observer = new MutationObserver(() => addCodeButton()); + + observer.observe(document.querySelector(selector), { + childList: true, + subtree: true, + }); + + return () => observer.disconnect(); +}; diff --git a/app/assets/javascripts/behaviors/gl_emoji.js b/app/assets/javascripts/behaviors/gl_emoji.js index ef445548e6e..8fe90b6bb15 100644 --- a/app/assets/javascripts/behaviors/gl_emoji.js +++ b/app/assets/javascripts/behaviors/gl_emoji.js @@ -33,7 +33,7 @@ class GlEmoji extends HTMLElement { this.dataset.unicodeVersion = unicodeVersion; emojiUnicode = emojiInfo.e; - this.innerHTML = emojiInfo.e; + this.textContent = emojiInfo.e; this.title = emojiInfo.d; } diff --git a/app/assets/javascripts/behaviors/index.js b/app/assets/javascripts/behaviors/index.js index bfd025e8dab..30160248a77 100644 --- a/app/assets/javascripts/behaviors/index.js +++ b/app/assets/javascripts/behaviors/index.js @@ -1,6 +1,5 @@ import $ from 'jquery'; import './autosize'; -import './bind_in_out'; import './markdown/render_gfm'; import initCollapseSidebarOnWindowResize from './collapse_sidebar_on_window_resize'; import initCopyToClipboard from './copy_to_clipboard'; diff --git a/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js b/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js index c2908133fd0..e58c51104c5 100644 --- a/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js +++ b/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js @@ -3,6 +3,7 @@ import Mousetrap from 'mousetrap'; import { clickCopyToClipboardButton } from '~/behaviors/copy_to_clipboard'; import { getSelectedFragment } from '~/lib/utils/common_utils'; import { isElementVisible } from '~/lib/utils/dom_utils'; +import { DEBOUNCE_DROPDOWN_DELAY } from '~/vue_shared/components/sidebar/labels_select_widget/constants'; import Sidebar from '../../right_sidebar'; import { CopyAsGFM } from '../markdown/copy_as_gfm'; import { @@ -114,6 +115,14 @@ export default class ShortcutsIssuable extends Shortcuts { static openSidebarDropdown(name) { Sidebar.instance.openDropdown(name); + // Wait for the sidebar to trigger('click') open + // so it doesn't cause our dropdown to close preemptively + setTimeout(() => { + const editBtn = + document.querySelector(`.block.${name} .shortcut-sidebar-dropdown-toggle`) || + document.querySelector(`.block.${name} .edit-link`); + editBtn.click(); + }, DEBOUNCE_DROPDOWN_DELAY); return false; } |