cff-blocks.js
| 1 | "use strict"; |
| 2 | window.cffmetatrans = false; |
| 3 | (function () { |
| 4 | var _wp = wp, |
| 5 | _wp$serverSideRender = _wp.serverSideRender, |
| 6 | createElement = wp.element.createElement, |
| 7 | ServerSideRender = _wp$serverSideRender === void 0 ? wp.components.ServerSideRender : _wp$serverSideRender, |
| 8 | _ref = wp.blockEditor || wp.editor, |
| 9 | InspectorControls = _ref.InspectorControls, |
| 10 | useBlockProps = _ref.useBlockProps, |
| 11 | _wp$components = wp.components, |
| 12 | TextareaControl = _wp$components.TextareaControl, |
| 13 | Button = _wp$components.Button, |
| 14 | PanelBody = _wp$components.PanelBody, |
| 15 | Placeholder = _wp$components.Placeholder, |
| 16 | registerBlockType = wp.blocks.registerBlockType; |
| 17 | |
| 18 | // Locate the WP 7.0 block editor canvas iframe. Returns null if the |
| 19 | // iframe doesn't exist yet or its contentDocument isn't reachable. |
| 20 | function getEditorIframe() { |
| 21 | var selectors = [ |
| 22 | 'iframe[name="editor-canvas"]', |
| 23 | 'iframe.edit-post-visual-editor__content-area', |
| 24 | 'iframe.editor-canvas' |
| 25 | ]; |
| 26 | for (var i = 0; i < selectors.length; i++) { |
| 27 | var el = document.querySelector(selectors[i]); |
| 28 | if (el && el.contentDocument && el.contentDocument.head) { |
| 29 | return el; |
| 30 | } |
| 31 | } |
| 32 | return null; |
| 33 | } |
| 34 | |
| 35 | // Inject cff-scripts.min.js (and jQuery if needed) into the editor |
| 36 | // iframe's <head>, so window.cff_init exists inside the iframe and can |
| 37 | // find the feed DOM that ServerSideRender mounts there. |
| 38 | var iframeAssetsPromise = null; |
| 39 | function ensureIframeFeedAssets() { |
| 40 | if (iframeAssetsPromise) { |
| 41 | return iframeAssetsPromise; |
| 42 | } |
| 43 | iframeAssetsPromise = new Promise(function (resolve, reject) { |
| 44 | var attempts = 0; |
| 45 | var tryInject = function () { |
| 46 | attempts++; |
| 47 | var iframe = getEditorIframe(); |
| 48 | if (!iframe) { |
| 49 | if (attempts > 40) { |
| 50 | reject(new Error('cff: editor iframe not found')); |
| 51 | return; |
| 52 | } |
| 53 | setTimeout(tryInject, 250); |
| 54 | return; |
| 55 | } |
| 56 | var doc = iframe.contentDocument; |
| 57 | if (doc.documentElement.getAttribute('data-cff-feed-assets-injected')) { |
| 58 | resolve(iframe); |
| 59 | return; |
| 60 | } |
| 61 | doc.documentElement.setAttribute('data-cff-feed-assets-injected', '1'); |
| 62 | |
| 63 | var loadScript = function (src) { |
| 64 | return new Promise(function (res, rej) { |
| 65 | var s = doc.createElement('script'); |
| 66 | s.src = src; |
| 67 | s.onload = function () { res(); }; |
| 68 | s.onerror = function () { rej(new Error('cff: failed to load ' + src)); }; |
| 69 | doc.head.appendChild(s); |
| 70 | }); |
| 71 | }; |
| 72 | |
| 73 | var chain = Promise.resolve(); |
| 74 | if (!iframe.contentWindow.jQuery && cff_block_editor.jqueryUrl) { |
| 75 | chain = chain.then(function () { return loadScript(cff_block_editor.jqueryUrl); }); |
| 76 | } |
| 77 | if (cff_block_editor.iframeScriptUrl) { |
| 78 | chain = chain.then(function () { return loadScript(cff_block_editor.iframeScriptUrl); }); |
| 79 | } |
| 80 | chain.then(function () { resolve(iframe); }, reject); |
| 81 | }; |
| 82 | tryInject(); |
| 83 | }); |
| 84 | return iframeAssetsPromise; |
| 85 | } |
| 86 | |
| 87 | // Call cff_init() inside the iframe (WP 7.0+) or in the outer scope as a |
| 88 | // fallback for pre-iframe editors. |
| 89 | function triggerCffInit() { |
| 90 | var iframe = getEditorIframe(); |
| 91 | if (iframe && iframe.contentWindow && typeof iframe.contentWindow.cff_init === 'function') { |
| 92 | try { iframe.contentWindow.cff_init(); } catch (e) {} |
| 93 | return; |
| 94 | } |
| 95 | if (!iframe && typeof cff_init !== 'undefined') { |
| 96 | try { cff_init(); } catch (e) {} |
| 97 | } |
| 98 | } |
| 99 | |
| 100 | var cffIcon = createElement('svg', { |
| 101 | width: 20, |
| 102 | height: 20, |
| 103 | viewBox: '0 0 448 512', |
| 104 | className: 'dashicon' |
| 105 | }, createElement('path', { |
| 106 | fill: 'currentColor', |
| 107 | d: 'M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z' |
| 108 | })); |
| 109 | |
| 110 | registerBlockType('cff/cff-feed-block', { |
| 111 | apiVersion: 3, |
| 112 | title: 'Custom Facebook Feed (Deprecated)', |
| 113 | icon: cffIcon, |
| 114 | category: 'widgets', |
| 115 | attributes: { |
| 116 | noNewChanges: { |
| 117 | type: 'boolean', |
| 118 | }, |
| 119 | shortcodeSettings: { |
| 120 | type: 'string', |
| 121 | }, |
| 122 | executed: { |
| 123 | type: 'boolean' |
| 124 | } |
| 125 | }, |
| 126 | edit: function edit(props) { |
| 127 | var blockProps = typeof useBlockProps === 'function' ? useBlockProps() : {}; |
| 128 | var _props = props, |
| 129 | setAttributes = _props.setAttributes, |
| 130 | _props$attributes = _props.attributes, |
| 131 | _props$attributes$sho = _props$attributes.shortcodeSettings, |
| 132 | shortcodeSettings = _props$attributes$sho === void 0 ? cff_block_editor.shortcodeSettings : _props$attributes$sho, |
| 133 | _props$attributes$cli = _props$attributes.noNewChanges, |
| 134 | noNewChanges = _props$attributes$cli === void 0 ? true : _props$attributes$cli; |
| 135 | |
| 136 | props.attributes.shortcodeSettings = shortcodeSettings; |
| 137 | |
| 138 | function setState(shortcodeSettingsContent) { |
| 139 | setAttributes({ |
| 140 | noNewChanges: false, |
| 141 | shortcodeSettings: shortcodeSettingsContent |
| 142 | }) |
| 143 | } |
| 144 | |
| 145 | function previewClick(content) { |
| 146 | setAttributes({ |
| 147 | noNewChanges: true, |
| 148 | }) |
| 149 | } |
| 150 | |
| 151 | function cffGutenbergSizeVisualHeader() { |
| 152 | jQuery('.cff-visual-header.cff-has-cover').each(function() { |
| 153 | var wrapperHeight = jQuery(this).find('.cff-header-hero').innerHeight(), |
| 154 | imageHeight = jQuery(this).find('.cff-header-hero img').innerHeight(), |
| 155 | wrapperWidth = jQuery(this).find('.cff-header-hero').innerWidth(), |
| 156 | imageWidth = jQuery(this).find('.cff-header-hero img').innerWidth(), |
| 157 | wrapperAspect = wrapperWidth/wrapperHeight, |
| 158 | imageAspect = imageWidth/imageHeight, |
| 159 | width = wrapperAspect < imageAspect ? wrapperHeight * imageAspect + 'px' : '100%', |
| 160 | difference = imageHeight - wrapperHeight, |
| 161 | topMargin = Math.max(0,Math.round(difference/2)), |
| 162 | leftMargin = width !== '100%' ? Math.max(0,Math.round(((wrapperHeight * imageAspect)-wrapperWidth)/2)) : 0; |
| 163 | jQuery(this).find('.cff-header-hero img').css({ |
| 164 | 'opacity' : 1, |
| 165 | 'display' : 'block', |
| 166 | 'visibility' : 'visible', |
| 167 | 'max-width' : 'none', |
| 168 | 'max-height' : 'none', |
| 169 | 'margin-top' : - topMargin + 'px', |
| 170 | 'margin-left' : - leftMargin + 'px', |
| 171 | 'width' : width, |
| 172 | }); |
| 173 | }); |
| 174 | } |
| 175 | |
| 176 | function afterRender() { |
| 177 | // Inject cff-scripts into the WP 7.0 iframe (no-op once injected), |
| 178 | // then poll-trigger cff_init in iframe scope. ServerSideRender |
| 179 | // doesn't expose an onload callback, so we retry on intervals. |
| 180 | ensureIframeFeedAssets().catch(function () {}); |
| 181 | setTimeout(triggerCffInit, 1000); |
| 182 | setTimeout(triggerCffInit, 2000); |
| 183 | setTimeout(triggerCffInit, 3000); |
| 184 | setTimeout(triggerCffInit, 5000); |
| 185 | setTimeout(triggerCffInit, 10000); |
| 186 | jQuery(window).resize(function () { |
| 187 | setTimeout(function(){ |
| 188 | cffGutenbergSizeVisualHeader(); |
| 189 | }, 500); |
| 190 | }); |
| 191 | var executed = false; |
| 192 | // no way to run a script after AJAX call to get feed so we just try to execute it on a few intervals |
| 193 | setTimeout(function() { if (typeof cffGutenbergSizeVisualHeader !== 'undefined' && !executed) {cffGutenbergSizeVisualHeader();}},1000); |
| 194 | setTimeout(function() { if (typeof cffGutenbergSizeVisualHeader !== 'undefined' && !executed) {cffGutenbergSizeVisualHeader();}},2000); |
| 195 | setTimeout(function() { if (typeof cffGutenbergSizeVisualHeader !== 'undefined' && !executed) {cffGutenbergSizeVisualHeader();}},3000); |
| 196 | setTimeout(function() { if (typeof cffGutenbergSizeVisualHeader !== 'undefined' && !executed) {cffGutenbergSizeVisualHeader();}},5000); |
| 197 | setTimeout(function() { if (typeof cffGutenbergSizeVisualHeader !== 'undefined' && !executed) {cffGutenbergSizeVisualHeader();}},10000); |
| 198 | } |
| 199 | |
| 200 | var jsx = [React.createElement(InspectorControls, { |
| 201 | key: "cff-gutenberg-setting-selector-inspector-controls" |
| 202 | }, React.createElement(PanelBody, { |
| 203 | title: cff_block_editor.i18n.addSettings |
| 204 | }, React.createElement(TextareaControl, { |
| 205 | key: "cff-gutenberg-settings", |
| 206 | className: "cff-gutenberg-settings", |
| 207 | label: cff_block_editor.i18n.shortcodeSettings, |
| 208 | help: cff_block_editor.i18n.example + ": 'feed=\"1\"'", |
| 209 | value: shortcodeSettings, |
| 210 | onChange: setState |
| 211 | }), React.createElement(Button, { |
| 212 | key: "cff-gutenberg-preview", |
| 213 | className: "cff-gutenberg-preview", |
| 214 | onClick: previewClick, |
| 215 | isDefault: true |
| 216 | }, cff_block_editor.i18n.preview)))]; |
| 217 | |
| 218 | if (noNewChanges) { |
| 219 | afterRender(); |
| 220 | jsx.push(React.createElement(ServerSideRender, { |
| 221 | key: "custom-facebook-feeds/custom-facebook-feeds", |
| 222 | block: "cff/cff-feed-block", |
| 223 | attributes: props.attributes, |
| 224 | })); |
| 225 | } else { |
| 226 | props.attributes.noNewChanges = false; |
| 227 | jsx.push(React.createElement(Placeholder, { |
| 228 | key: "cff-gutenberg-setting-selector-select-wrap", |
| 229 | className: "cff-gutenberg-setting-selector-select-wrap" |
| 230 | }, React.createElement(Button, { |
| 231 | key: "cff-gutenberg-preview", |
| 232 | className: "cff-gutenberg-preview", |
| 233 | onClick: previewClick, |
| 234 | isDefault: true |
| 235 | }, cff_block_editor.i18n.preview))); |
| 236 | } |
| 237 | |
| 238 | return createElement('div', blockProps, jsx); |
| 239 | }, |
| 240 | save: function save() { |
| 241 | return null; |
| 242 | } |
| 243 | }); |
| 244 | })(); |