64 lines
1.8 KiB
JavaScript
64 lines
1.8 KiB
JavaScript
|
import Vue from 'vue';
|
||
|
|
import DiagramPerformanceWarning from '../components/diagram_performance_warning.vue';
|
||
|
|
import { unrestrictedPages } from './constants';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Create alert element.
|
||
|
|
*
|
||
|
|
* @param {Element} krokiImage Kroki `img` element
|
||
|
|
* @return {Element} Alert element
|
||
|
|
*/
|
||
|
|
function createAlert(krokiImage) {
|
||
|
|
const app = new Vue({
|
||
|
|
el: document.createElement('div'),
|
||
|
|
name: 'DiagramPerformanceWarningRoot',
|
||
|
|
render(createElement) {
|
||
|
|
return createElement(DiagramPerformanceWarning, {
|
||
|
|
on: {
|
||
|
|
closeAlert() {
|
||
|
|
app.$destroy();
|
||
|
|
app.$el.remove();
|
||
|
|
},
|
||
|
|
showImage() {
|
||
|
|
krokiImage.removeAttribute('hidden');
|
||
|
|
app.$destroy();
|
||
|
|
app.$el.remove();
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
return app.$el;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Add warning alert to hidden Kroki images,
|
||
|
|
* or show Kroki image if on an unrestricted page.
|
||
|
|
*
|
||
|
|
* Kroki images are given a hidden attribute by the
|
||
|
|
* backend when the original markdown source is large.
|
||
|
|
*
|
||
|
|
* @param {Array<Element>} krokiImages Array of hidden Kroki `img` elements
|
||
|
|
*/
|
||
|
|
export function renderKroki(krokiImages) {
|
||
|
|
const pageName = document.querySelector('body').dataset.page;
|
||
|
|
const isUnrestrictedPage = unrestrictedPages.includes(pageName);
|
||
|
|
|
||
|
|
krokiImages.forEach((krokiImage) => {
|
||
|
|
if (isUnrestrictedPage) {
|
||
|
|
krokiImage.removeAttribute('hidden');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const parent = krokiImage.closest('.js-markdown-code');
|
||
|
|
|
||
|
|
// A single Kroki image is processed multiple times for some reason,
|
||
|
|
// so this condition ensures we only create one alert per Kroki image
|
||
|
|
if (!parent.hasAttribute('data-kroki-processed')) {
|
||
|
|
parent.setAttribute('data-kroki-processed', 'true');
|
||
|
|
parent.after(createAlert(krokiImage));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|