import $ from 'jquery'; import { getSelector, inserted } from './feature_highlight_helper'; import { togglePopover, mouseenter, debouncedMouseleave } from '../shared/popover'; export function setupFeatureHighlightPopover(id, debounceTimeout = 300) { const $selector = $(getSelector(id)); const $parent = $selector.parent(); const $popoverContent = $parent.siblings('.feature-highlight-popover-content'); const hideOnScroll = togglePopover.bind($selector, false); $selector // Set up popover .data('content', $popoverContent.prop('outerHTML')) .popover({ html: true, // Override the existing template to add custom CSS classes template: ` `, }) .on('mouseenter', mouseenter) .on('mouseleave', debouncedMouseleave(debounceTimeout)) .on('inserted.bs.popover', inserted) .on('show.bs.popover', () => { window.addEventListener('scroll', hideOnScroll, { once: true }); }) // Display feature highlight .removeAttr('disabled'); } export function findHighestPriorityFeature() { let priorityFeature; const sortedFeatureEls = [].slice .call(document.querySelectorAll('.js-feature-highlight')) .sort((a, b) => (a.dataset.highlightPriority || 0) < (b.dataset.highlightPriority || 0)); const [priorityFeatureEl] = sortedFeatureEls; if (priorityFeatureEl) { priorityFeature = priorityFeatureEl.dataset.highlight; } return priorityFeature; } export function highlightFeatures() { const priorityFeature = findHighestPriorityFeature(); if (priorityFeature) { setupFeatureHighlightPopover(priorityFeature); } return priorityFeature; }