diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-17 21:09:20 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-17 21:09:20 +0300 |
commit | 6f05d35c3160e3a442b40d6af1e8e584747080b3 (patch) | |
tree | f70f90e1ae24f2366a538972c5520f524663ad86 /app/assets/javascripts/blob | |
parent | d88ab3545c27cd674f5fb8bff5fb64a9eeed590f (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/blob')
-rw-r--r-- | app/assets/javascripts/blob/file_template_selector.js | 43 |
1 files changed, 25 insertions, 18 deletions
diff --git a/app/assets/javascripts/blob/file_template_selector.js b/app/assets/javascripts/blob/file_template_selector.js index e02217d0deb..4f970d657c2 100644 --- a/app/assets/javascripts/blob/file_template_selector.js +++ b/app/assets/javascripts/blob/file_template_selector.js @@ -1,10 +1,14 @@ import $ from 'jquery'; +import { loadingIconForLegacyJS } from '~/loading_icon_for_legacy_js'; export default class FileTemplateSelector { constructor(mediator) { this.mediator = mediator; this.$dropdown = null; this.$wrapper = null; + + this.dropdown = null; + this.wrapper = null; } init() { @@ -12,18 +16,21 @@ export default class FileTemplateSelector { this.$dropdown = $(cfg.dropdown); this.$wrapper = $(cfg.wrapper); - this.$dropdownIcon = this.$wrapper.find('.dropdown-menu-toggle-icon'); - this.$loadingIcon = $( - '<div class="gl-spinner gl-spinner-orange gl-spinner-sm gl-absolute gl-top-3 gl-right-3 gl-display-none"></div>', - ).insertAfter(this.$dropdownIcon); - this.$dropdownToggleText = this.$wrapper.find('.dropdown-toggle-text'); + + this.dropdown = document.querySelector(cfg.dropdown); + this.wrapper = document.querySelector(cfg.wrapper); + + this.dropdownIcon = this.wrapper.querySelector('.dropdown-menu-toggle-icon'); + this.loadingIcon = loadingIconForLegacyJS({ classes: ['gl-display-none'] }); + this.dropdown.appendChild(this.loadingIcon); + this.dropdownToggleText = this.wrapper.querySelector('.dropdown-toggle-text'); this.initDropdown(); this.selectInitialTemplate(); } selectInitialTemplate() { - const template = this.$dropdown.data('selected'); + const template = this.dropdown.dataset.selected; if (!template) { return; @@ -33,11 +40,11 @@ export default class FileTemplateSelector { } show() { - if (this.$dropdown === null) { + if (this.dropdown === null) { this.init(); } - this.$wrapper.removeClass('hidden'); + this.wrapper.classList.remove('hidden'); /** * We set the focus on the dropdown that was just shown. This is done so that, after selecting @@ -49,36 +56,36 @@ export default class FileTemplateSelector { * closed anymore. */ setTimeout(() => { - this.$dropdown.focus(); + this.dropdown.focus(); }, 0); } hide() { - if (this.$dropdown !== null) { - this.$wrapper.addClass('hidden'); + if (this.dropdown !== null) { + this.wrapper.classList.add('hidden'); } } isHidden() { - return !this.$wrapper || this.$wrapper.hasClass('hidden'); + return !this.wrapper || this.wrapper.classList.contains('hidden'); } getToggleText() { - return this.$dropdownToggleText.text(); + return this.dropdownToggleText.textContent; } setToggleText(text) { - this.$dropdownToggleText.text(text); + this.dropdownToggleText.textContent = text; } renderLoading() { - this.$loadingIcon.removeClass('gl-display-none'); - this.$dropdownIcon.addClass('gl-display-none'); + this.loadingIcon.classList.remove('gl-display-none'); + this.dropdownIcon.classList.add('gl-display-none'); } renderLoaded() { - this.$loadingIcon.addClass('gl-display-none'); - this.$dropdownIcon.removeClass('gl-display-none'); + this.loadingIcon.classList.add('gl-display-none'); + this.dropdownIcon.classList.remove('gl-display-none'); } reportSelection(options) { |