62 lines
1.8 KiB
JavaScript
62 lines
1.8 KiB
JavaScript
import Cookies from 'js-cookie';
|
|
import _ from 'underscore';
|
|
import {
|
|
getCookieName,
|
|
getSelector,
|
|
hidePopover,
|
|
setupDismissButton,
|
|
mouseenter,
|
|
mouseleave,
|
|
} from './feature_highlight_helper';
|
|
|
|
export const setupFeatureHighlightPopover = (id, debounceTimeout = 300) => {
|
|
const $selector = $(getSelector(id));
|
|
const $parent = $selector.parent();
|
|
const $popoverContent = $parent.siblings('.feature-highlight-popover-content');
|
|
const hideOnScroll = hidePopover.bind($selector);
|
|
const debouncedMouseleave = _.debounce(mouseleave, debounceTimeout);
|
|
|
|
$selector
|
|
// Setup popover
|
|
.data('content', $popoverContent.prop('outerHTML'))
|
|
.popover({
|
|
html: true,
|
|
// Override the existing template to add custom CSS classes
|
|
template: `
|
|
<div class="popover feature-highlight-popover" role="tooltip">
|
|
<div class="arrow"></div>
|
|
<div class="popover-content"></div>
|
|
</div>
|
|
`,
|
|
})
|
|
.on('mouseenter', mouseenter)
|
|
.on('mouseleave', debouncedMouseleave)
|
|
.on('inserted.bs.popover', setupDismissButton)
|
|
.on('show.bs.popover', () => {
|
|
window.addEventListener('scroll', hideOnScroll);
|
|
})
|
|
.on('hide.bs.popover', () => {
|
|
window.removeEventListener('scroll', hideOnScroll);
|
|
})
|
|
// Display feature highlight
|
|
.removeAttr('disabled');
|
|
};
|
|
|
|
export const shouldHighlightFeature = (id) => {
|
|
const element = document.querySelector(getSelector(id));
|
|
const previouslyDismissed = Cookies.get(getCookieName(id)) === 'true';
|
|
|
|
return element && !previouslyDismissed;
|
|
};
|
|
|
|
export const highlightFeatures = (highlightOrder) => {
|
|
const featureId = highlightOrder.find(shouldHighlightFeature);
|
|
|
|
if (featureId) {
|
|
setupFeatureHighlightPopover(featureId);
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
};
|