diff options
author | Robert Speicher <rspeicher@gmail.com> | 2021-01-20 22:34:23 +0300 |
---|---|---|
committer | Robert Speicher <rspeicher@gmail.com> | 2021-01-20 22:34:23 +0300 |
commit | 6438df3a1e0fb944485cebf07976160184697d72 (patch) | |
tree | 00b09bfd170e77ae9391b1a2f5a93ef6839f2597 /app/assets/javascripts/tooltips | |
parent | 42bcd54d971da7ef2854b896a7b34f4ef8601067 (diff) |
Add latest changes from gitlab-org/gitlab@13-8-stable-eev13.8.0-rc42
Diffstat (limited to 'app/assets/javascripts/tooltips')
-rw-r--r-- | app/assets/javascripts/tooltips/components/tooltips.vue | 20 | ||||
-rw-r--r-- | app/assets/javascripts/tooltips/index.js | 32 |
2 files changed, 28 insertions, 24 deletions
diff --git a/app/assets/javascripts/tooltips/components/tooltips.vue b/app/assets/javascripts/tooltips/components/tooltips.vue index 05927006ea6..90bdf06bc4c 100644 --- a/app/assets/javascripts/tooltips/components/tooltips.vue +++ b/app/assets/javascripts/tooltips/components/tooltips.vue @@ -2,7 +2,7 @@ import { GlTooltip, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; import { uniqueId } from 'lodash'; -const getTooltipTitle = element => { +const getTooltipTitle = (element) => { return element.getAttribute('title') || element.dataset.title; }; @@ -37,8 +37,8 @@ export default { }; }, created() { - this.observer = new MutationObserver(mutations => { - mutations.forEach(mutation => { + this.observer = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { mutation.removedNodes.forEach(this.dispose); }); }); @@ -49,10 +49,11 @@ export default { methods: { addTooltips(elements, config) { const newTooltips = elements - .filter(element => !this.tooltipExists(element)) - .map(element => newTooltip(element, config)); + .filter((element) => !this.tooltipExists(element)) + .map((element) => newTooltip(element, config)) + .filter((tooltip) => tooltip.title); - newTooltips.forEach(tooltip => this.observe(tooltip)); + newTooltips.forEach((tooltip) => this.observe(tooltip)); this.tooltips.push(...newTooltips); }, @@ -90,9 +91,12 @@ export default { return Boolean(this.findTooltipByTarget(element)); }, findTooltipByTarget(element) { - return this.tooltips.find(tooltip => tooltip.target === element); + return this.tooltips.find((tooltip) => tooltip.target === element); }, }, + safeHtmlConfig: { + ADD_TAGS: ['gl-emoji'], + }, }; </script> <template> @@ -110,7 +114,7 @@ export default { :disabled="tooltip.disabled" :show="tooltip.show" > - <span v-if="tooltip.html" v-safe-html="tooltip.title"></span> + <span v-if="tooltip.html" v-safe-html:[$options.safeHtmlConfig]="tooltip.title"></span> <span v-else>{{ tooltip.title }}</span> </gl-tooltip> </div> diff --git a/app/assets/javascripts/tooltips/index.js b/app/assets/javascripts/tooltips/index.js index f7cad6639ae..b216affc818 100644 --- a/app/assets/javascripts/tooltips/index.js +++ b/app/assets/javascripts/tooltips/index.js @@ -68,7 +68,7 @@ const invokeBootstrapApi = (elements, method) => { } }; -const isGlTooltipsEnabled = () => Boolean(window.gon.glTooltipsEnabled); +const isGlTooltipsEnabled = () => Boolean(window.gon.features?.glTooltips); const tooltipApiInvoker = ({ glHandler, bsHandler }) => (elements, ...params) => { if (isGlTooltipsEnabled()) { @@ -81,12 +81,12 @@ const tooltipApiInvoker = ({ glHandler, bsHandler }) => (elements, ...params) => export const initTooltips = (config = {}) => { if (isGlTooltipsEnabled()) { const triggers = config?.triggers || DEFAULT_TRIGGER; - const events = triggers.split(' ').map(trigger => EVENTS_MAP[trigger]); + const events = triggers.split(' ').map((trigger) => EVENTS_MAP[trigger]); - events.forEach(event => { + events.forEach((event) => { document.addEventListener( event, - e => handleTooltipEvent(document, e, config.selector, config), + (e) => handleTooltipEvent(document, e, config.selector, config), true, ); }); @@ -103,28 +103,28 @@ export const add = (elements, config = {}) => { return invokeBootstrapApi(elements, config); }; export const dispose = tooltipApiInvoker({ - glHandler: element => tooltipsApp().dispose(element), - bsHandler: elements => invokeBootstrapApi(elements, 'dispose'), + glHandler: (element) => tooltipsApp().dispose(element), + bsHandler: (elements) => invokeBootstrapApi(elements, 'dispose'), }); export const fixTitle = tooltipApiInvoker({ - glHandler: element => tooltipsApp().fixTitle(element), - bsHandler: elements => invokeBootstrapApi(elements, '_fixTitle'), + glHandler: (element) => tooltipsApp().fixTitle(element), + bsHandler: (elements) => invokeBootstrapApi(elements, '_fixTitle'), }); export const enable = tooltipApiInvoker({ - glHandler: element => tooltipsApp().triggerEvent(element, 'enable'), - bsHandler: elements => invokeBootstrapApi(elements, 'enable'), + glHandler: (element) => tooltipsApp().triggerEvent(element, 'enable'), + bsHandler: (elements) => invokeBootstrapApi(elements, 'enable'), }); export const disable = tooltipApiInvoker({ - glHandler: element => tooltipsApp().triggerEvent(element, 'disable'), - bsHandler: elements => invokeBootstrapApi(elements, 'disable'), + glHandler: (element) => tooltipsApp().triggerEvent(element, 'disable'), + bsHandler: (elements) => invokeBootstrapApi(elements, 'disable'), }); export const hide = tooltipApiInvoker({ - glHandler: element => tooltipsApp().triggerEvent(element, 'close'), - bsHandler: elements => invokeBootstrapApi(elements, 'hide'), + glHandler: (element) => tooltipsApp().triggerEvent(element, 'close'), + bsHandler: (elements) => invokeBootstrapApi(elements, 'hide'), }); export const show = tooltipApiInvoker({ - glHandler: element => tooltipsApp().triggerEvent(element, 'open'), - bsHandler: elements => invokeBootstrapApi(elements, 'show'), + glHandler: (element) => tooltipsApp().triggerEvent(element, 'open'), + bsHandler: (elements) => invokeBootstrapApi(elements, 'show'), }); export const destroy = () => { tooltipsApp().$destroy(); |