mirror of
				https://codeberg.org/forgejo/forgejo.git
				synced 2025-10-30 22:11:07 +00:00 
			
		
		
		
	By appending the tooltips to `document.body`, we can avoid any stacking context issues caused by surrounding element's CSS. This uses [tippy.js](https://github.com/atomiks/tippyjs) instead of Fomantic popups. We should aim to replace all Fomantic popups with this eventually and then get rid of the Fomantic `popup` module completely.
		
			
				
	
	
		
			44 lines
		
	
	
	
		
			1.1 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			44 lines
		
	
	
	
		
			1.1 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| import $ from 'jquery';
 | |
| import Vue from 'vue';
 | |
| import ContextPopup from '../components/ContextPopup.vue';
 | |
| import {parseIssueHref} from '../utils.js';
 | |
| import {createTippy} from '../modules/tippy.js';
 | |
| 
 | |
| export default function initContextPopups() {
 | |
|   const refIssues = $('.ref-issue');
 | |
|   if (!refIssues.length) return;
 | |
| 
 | |
|   refIssues.each(function () {
 | |
|     if ($(this).hasClass('ref-external-issue')) {
 | |
|       return;
 | |
|     }
 | |
| 
 | |
|     const {owner, repo, index} = parseIssueHref($(this).attr('href'));
 | |
|     if (!owner) return;
 | |
| 
 | |
|     const el = document.createElement('div');
 | |
|     el.innerHTML = '<div></div>';
 | |
|     this.parentNode.insertBefore(el, this.nextSibling);
 | |
| 
 | |
|     const View = Vue.extend({
 | |
|       render: (createElement) => createElement(ContextPopup),
 | |
|     });
 | |
| 
 | |
|     const view = new View();
 | |
| 
 | |
|     try {
 | |
|       view.$mount(el.firstChild);
 | |
|     } catch (err) {
 | |
|       console.error(err);
 | |
|       el.textContent = 'ContextPopup failed to load';
 | |
|     }
 | |
| 
 | |
|     createTippy(this, {
 | |
|       content: el,
 | |
|       interactive: true,
 | |
|       onShow: () => {
 | |
|         view.$emit('load-context-popup', {owner, repo, index});
 | |
|       }
 | |
|     });
 | |
|   });
 | |
| }
 |