BlockEditorPreviewCompatibility.js
59 lines
| 1 | function BlockEditorPreviewCompatibility( cssStyleID, styleTagId, styling ) { |
| 2 | // Required CSS File. |
| 3 | const WidgetCssFileTag = document.getElementById( cssStyleID ); |
| 4 | let cloneWidgetCssFileTag = false; |
| 5 | |
| 6 | if ( WidgetCssFileTag ) { |
| 7 | cloneWidgetCssFileTag = WidgetCssFileTag.cloneNode( true ); |
| 8 | } |
| 9 | |
| 10 | // Desktop. |
| 11 | const element = document.getElementById( styleTagId ); |
| 12 | |
| 13 | if ( null === element || undefined === element ) { |
| 14 | const $style = document.createElement( 'style' ); |
| 15 | $style.setAttribute( 'id', styleTagId ); |
| 16 | document.head.appendChild( $style ); |
| 17 | } |
| 18 | |
| 19 | if ( null !== element && undefined !== element ) { |
| 20 | element.innerHTML = styling; |
| 21 | } |
| 22 | // Desktop ends. |
| 23 | |
| 24 | // Tablet / Mobile Starts. |
| 25 | const tabletPreview = |
| 26 | document.getElementsByClassName( 'is-tablet-preview' ); |
| 27 | const mobilePreview = |
| 28 | document.getElementsByClassName( 'is-mobile-preview' ); |
| 29 | |
| 30 | if ( 0 !== tabletPreview.length || 0 !== mobilePreview.length ) { |
| 31 | const preview = tabletPreview[ 0 ] || mobilePreview[ 0 ]; |
| 32 | |
| 33 | const iframe = preview.getElementsByTagName( 'iframe' )[ 0 ]; |
| 34 | const iframeDocument = |
| 35 | iframe.contentWindow.document || iframe.contentDocument; |
| 36 | |
| 37 | let elementRes = iframeDocument.getElementById( styleTagId ); |
| 38 | if ( null === elementRes || undefined === elementRes ) { |
| 39 | const $style = document.createElement( 'style' ); |
| 40 | $style.setAttribute( 'id', styleTagId ); |
| 41 | |
| 42 | iframeDocument.head.appendChild( $style ); |
| 43 | } |
| 44 | |
| 45 | // Required CSS File. |
| 46 | if ( cloneWidgetCssFileTag ) { |
| 47 | iframeDocument.head.appendChild( cloneWidgetCssFileTag ); |
| 48 | } |
| 49 | |
| 50 | elementRes = iframeDocument.getElementById( styleTagId ); |
| 51 | |
| 52 | if ( null !== elementRes && undefined !== elementRes ) { |
| 53 | elementRes.innerHTML = styling; |
| 54 | } |
| 55 | } |
| 56 | } |
| 57 | |
| 58 | export default BlockEditorPreviewCompatibility; |
| 59 |