| 1 |
/** |
| 2 |
* These utils used to load vendor assets inside the editor iframe. |
| 3 |
* Thanks to https://github.com/Automattic/jetpack/blob/trunk/projects/plugins/jetpack/extensions/shared/block-editor-asset-loader.js |
| 4 |
*/ |
| 5 |
|
| 6 |
/** |
| 7 |
* Returns the current document and window contexts for `elementRef`. |
| 8 |
* Use to retrieve the correct context for elements that may be within an iframe. |
| 9 |
* |
| 10 |
* @param {HTMLElement} elementRef - The element whose context we want to return. |
| 11 |
* @return {Object} - The current document (`currentDoc`) and window (`currentWindow`) contexts. |
| 12 |
*/ |
| 13 |
export function getLoadContext(elementRef) { |
| 14 |
const currentDoc = elementRef.ownerDocument; |
| 15 |
const currentWindow = currentDoc.defaultView || currentDoc.parentWindow; |
| 16 |
|
| 17 |
return { currentDoc, currentWindow }; |
| 18 |
} |
| 19 |
|
| 20 |
/** |
| 21 |
* This function will check if the given css and js resources are present in the head of the document |
| 22 |
* for current block, and if not will load those resources into the head. |
| 23 |
* |
| 24 |
* It's a temporary work-around to until core gutenberg has an API to allow loading of 3rd party resources |
| 25 |
* into the current editor iframe. |
| 26 |
* |
| 27 |
* @param {string} type - Resource type [js, css]. |
| 28 |
* @param {string} resourceId - Resource resource element id. |
| 29 |
* @param {HTMLElement} elementRef - A reference for an element within the current block. |
| 30 |
* @param {Object} callback - Callback for js resources to be called when script loaded. |
| 31 |
*/ |
| 32 |
export function loadBlockEditorAssets( |
| 33 |
type, |
| 34 |
resourceId, |
| 35 |
elementRef, |
| 36 |
callback = () => {} |
| 37 |
) { |
| 38 |
const { currentDoc } = getLoadContext(elementRef); |
| 39 |
const currentHead = currentDoc.getElementsByTagName('head')[0]; |
| 40 |
|
| 41 |
const parentDocElement = document.getElementById(resourceId); |
| 42 |
|
| 43 |
if (!parentDocElement) { |
| 44 |
return; |
| 45 |
} |
| 46 |
|
| 47 |
const currentDocElement = currentDoc.getElementById(resourceId); |
| 48 |
|
| 49 |
// Already exists. |
| 50 |
if (currentDocElement) { |
| 51 |
callback(); |
| 52 |
|
| 53 |
return; |
| 54 |
} |
| 55 |
|
| 56 |
if (type === 'js') { |
| 57 |
const scriptEl = currentDoc.createElement('script'); |
| 58 |
scriptEl.id = resourceId; |
| 59 |
scriptEl.type = 'text/javascript'; |
| 60 |
scriptEl.src = parentDocElement.src; |
| 61 |
scriptEl.onload = callback; |
| 62 |
currentHead.appendChild(scriptEl); |
| 63 |
} |
| 64 |
|
| 65 |
if (type === 'css') { |
| 66 |
const styleEl = currentDoc.createElement('link'); |
| 67 |
styleEl.id = resourceId; |
| 68 |
styleEl.rel = 'stylesheet'; |
| 69 |
styleEl.href = parentDocElement.href; |
| 70 |
currentHead.appendChild(styleEl); |
| 71 |
} |
| 72 |
} |
| 73 |
|
