Edit file File name : src_components_reusable_single-block_lazy-single-block_js.js Content :"use strict"; /* * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). * This devtool is neither made for production nor for readable output files. * It uses "eval()" calls to create a separate source file in the browser devtools. * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) * or disable the default devtool with "devtool: false". * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). */ (globalThis["webpackChunkast_block_templates"] = globalThis["webpackChunkast_block_templates"] || []).push([["src_components_reusable_single-block_lazy-single-block_js"],{ /***/ "./src/components/reusable/single-block/lazy-single-block.js": /*!*******************************************************************!*\ !*** ./src/components/reusable/single-block/lazy-single-block.js ***! \*******************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _wordpress_compose__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @wordpress/compose */ \"./node_modules/@wordpress/compose/build-module/higher-order/compose.js\");\n/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @wordpress/data */ \"./node_modules/@wordpress/data/build-module/components/use-select/index.js\");\n/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @wordpress/data */ \"./node_modules/@wordpress/data/build-module/components/use-dispatch/use-dispatch.js\");\n/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @wordpress/data */ \"./node_modules/@wordpress/data/build-module/components/with-select/index.js\");\n/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/element */ \"react\");\n/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_6__);\n/* harmony import */ var _utils_helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../utils/helpers */ \"./src/utils/helpers.js\");\n/* harmony import */ var _import_block_button_import_block_button__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../import-block-button/import-block-button */ \"./src/components/reusable/import-block-button/import-block-button.js\");\n/* harmony import */ var _favorite_single_block__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./favorite-single-block */ \"./src/components/reusable/single-block/favorite-single-block.js\");\n/* harmony import */ var _utils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./utils.js */ \"./src/components/reusable/single-block/utils.js\");\n/* harmony import */ var _utils_easing_functions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../utils/easing-functions */ \"./src/utils/easing-functions.js\");\n/* harmony import */ var _fade_in_out_fade_in_out_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../fade-in-out/fade-in-out.js */ \"./src/components/reusable/fade-in-out/fade-in-out.js\");\n\n\n\n\n\n\n\n\n\nconst {\n spectra_common_styles,\n is_rtl\n} = ast_block_template_vars;\nconst visibility = {\n hidden: 'hidden',\n visible: 'visible'\n};\nconst SingleBlock = ({\n item,\n content,\n stylesheet,\n astraCustomizer,\n globalStylesheet,\n colorPalette,\n dynamicContent,\n selectedImages,\n disableAi,\n togglePopup,\n email,\n phone,\n address,\n onClickBlock\n}) => {\n const thumbnailRef = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_6__.useRef)(null);\n const thumbnailContainerRef = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_6__.useRef)(null);\n const thumbnail_image_url = item['thumbnail-image-url'] || '';\n const featured_image_url = item['featured-image-url'] || '';\n const spectraPluginStatus = (0,_utils_helpers__WEBPACK_IMPORTED_MODULE_0__.getSpectraStatus)();\n let imageCounter = 0;\n let containerImageCounter = 0;\n const {\n importing\n } = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_7__[\"default\"])(select => {\n const {\n getImporting\n } = select('ast-block-templates');\n return {\n importing: getImporting()\n };\n });\n const {\n setImporting\n } = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_8__[\"default\"])('ast-block-templates');\n const [selfState, setSelfState] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_6__.useState)({\n importing: false\n });\n const [imageThumbnailURL, setThumbnailImageURL] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_6__.useState)(`${ast_block_template_vars.uri}dist/placeholder_200_200.png`);\n const [imageFeaturedlURL, setFeaturedImageURL] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_6__.useState)(`${ast_block_template_vars.uri}dist/placeholder_200_200.png`);\n const replaceImages = (images, previewImages) => {\n if (disableAi) {\n return;\n }\n if (Object.keys(dynamicContent).length === 0 || !dynamicContent) {\n return;\n }\n if (!previewImages?.length) {\n return;\n }\n images?.forEach(function (image) {\n if ((0,_utils_js__WEBPACK_IMPORTED_MODULE_3__.shouldSkipReplacement)(image.src)) {\n return;\n }\n image.onload = () => {\n // Skip if the image is already replaced.\n const imageSrc = image.getAttribute('src') || '';\n if (imageSrc.includes('unsplash') || imageSrc.includes('pexels') || imageSrc.includes('pixabay')) {\n updateVisibility(image, visibility.visible);\n return;\n }\n const imageUrl = previewImages[imageCounter];\n if (undefined === imageUrl) {\n updateVisibility(image, visibility.visible);\n return;\n }\n if (!(imageUrl.url.includes('unsplash') || imageUrl.url.includes('pexels') || imageUrl.url.includes('pixabay'))) {\n updateVisibility(image, visibility.visible);\n return;\n }\n imageCounter++;\n if (undefined === previewImages[imageCounter]) {\n imageCounter = 0;\n }\n if ('PICTURE' === image.parentNode.nodeName) {\n const sourceElements = image.parentNode.querySelectorAll('source');\n sourceElements.forEach(source => {\n source.setAttribute('srcset', imageUrl.optimized_url);\n });\n const imageElement = image.parentNode.querySelector('img');\n imageElement.setAttribute('src', imageUrl.optimized_url);\n } else {\n const newImage = document.createElement('img');\n newImage.src = imageUrl.optimized_url;\n image.parentNode.replaceChild(newImage, image);\n }\n updateVisibility(image, visibility.visible);\n };\n image.onerror = () => {\n updateVisibility(image, visibility.visible);\n };\n });\n };\n (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_6__.useEffect)(() => {\n // This effect will run whenever the importing state changes\n if (importing) {\n // Disable click events on all blocks\n document.querySelectorAll('.single-block').forEach(block => {\n block.style.pointerEvents = 'none';\n });\n } else {\n // Re-enable click events on all blocks\n document.querySelectorAll('.single-block').forEach(block => {\n block.style.pointerEvents = 'auto';\n });\n }\n }, [importing]);\n const replaceContactDetails = contentStr => {\n const emailSrc = 'contact@example.com';\n const phoneSrc = '202-555-0188';\n const addressSrc = '2360 Hood Avenue, San Diego, CA, 92123';\n if (email) {\n contentStr = contentStr.replace(emailSrc, email);\n }\n if (phone) {\n contentStr = contentStr.replace(phoneSrc, phone);\n }\n if (address) {\n contentStr = contentStr.replace(addressSrc, address);\n }\n return contentStr;\n };\n const replaceContainerImages = (styleContent, images = []) => {\n if (disableAi) {\n return styleContent;\n }\n if (Object.keys(dynamicContent).length === 0 || !dynamicContent) {\n return styleContent;\n }\n if (images && images.length === 0) {\n return styleContent;\n }\n const backgroundImageRegex = /background-image\\s*:\\s*url\\(['\"]?([^'\")]+)['\"]?\\)/g;\n const newStyleContent = styleContent.replace(backgroundImageRegex, function (match, imageUrl) {\n if ((0,_utils_js__WEBPACK_IMPORTED_MODULE_3__.shouldSkipReplacement)(imageUrl)) {\n return match;\n }\n if (!images[containerImageCounter]?.url) {\n return '';\n }\n const currentImageUrl = images[containerImageCounter]?.url;\n containerImageCounter++;\n containerImageCounter %= images.length;\n return 'background-image: url(\"' + currentImageUrl + '\")';\n });\n return newStyleContent;\n };\n (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_6__.useLayoutEffect)(() => {\n let isMounted = true;\n const previewImages = selectedImages;\n const imgThumbnail = new Image();\n imgThumbnail.src = thumbnail_image_url;\n const imgFeatured = new Image();\n imgFeatured.src = featured_image_url;\n const thumbnailContainer = thumbnailContainerRef.current;\n function handleThumbnailLoad(image, setURL) {\n if (isMounted) {\n image.onload = () => {\n setURL(image.src);\n };\n }\n }\n handleThumbnailLoad(imgThumbnail, setThumbnailImageURL);\n handleThumbnailLoad(imgFeatured, setFeaturedImageURL);\n const astraWpEditorCss = document.getElementById('astra-wp-editor-styles-inline-css')?.textContent.replace(/:root/g, '.block-container').replace(/body/g, '.block-container'),\n astraBlockEditorCss = document.getElementById('astra-block-editor-styles-inline-css')?.textContent.replace(/:root/g, '.block-container').replace(/body/g, '.block-container');\n const wpStylesheet = ast_block_template_vars.wp_stylesheet;\n let markup = ``;\n if (stylesheet) {\n stylesheet = replaceContainerImages(stylesheet, previewImages);\n }\n markup += wpStylesheet ? `<style type=\"text/css\" id=\"wp-includes-styles\">${wpStylesheet}</style>` : '';\n markup += astraCustomizer ? `<style type=\"text/css\" id=\"gt-astra-customizer\">${astraCustomizer}</style>` : '';\n markup += `<style type=\"text/css\" id=\"gt-spectra-common-stylesheet\">${spectra_common_styles}</style>`;\n markup = stylesheet ? `${markup} <style type=\"text/css\" id=\"gt-common-stylesheet\">${stylesheet}</style>` : markup;\n if (globalStylesheet) {\n markup = markup + `<style type=\"text/css\" id=\"gt-global-stylesheet\"> ${globalStylesheet} </style>`;\n }\n if (astraWpEditorCss) {\n markup = markup + `<style type=\"text/css\" id=\"gt-wpeditor-css\" > ${astraWpEditorCss} </style>`;\n }\n if (astraBlockEditorCss) {\n markup = markup + `<style type=\"text/css\" id=\"gt-blockeditor-css\"> ${astraBlockEditorCss} </style>`;\n }\n if (thumbnailContainer && content) {\n let shadow = thumbnailContainer.shadowRoot;\n if (shadow === null) {\n shadow = thumbnailContainer.attachShadow({\n mode: 'open'\n });\n }\n if (shadow === null) {\n return;\n }\n let original_content = content;\n if (!disableAi) {\n const dynamic_content = dynamicContent ?? [];\n if (dynamic_content && Object.keys(dynamic_content)?.length > 0) {\n Object.keys(dynamic_content).forEach(key => {\n original_content = dynamic_content[key] !== null ? original_content.replace(key, dynamic_content[key]) : original_content;\n });\n }\n if (!!dynamicContent && Object.keys(dynamicContent).length > 0) {\n original_content = replaceContactDetails(original_content);\n original_content = replaceGoogleMapLocation(original_content);\n }\n }\n shadow.innerHTML = markup + '<div class=\"st-block-container\">' + original_content + '</div>';\n // shadow.innerHTML = markup + '<div class=\"st-block-container\">' + ast_block_template_vars.header_markup + original_content + ast_block_template_vars.footer_markup + '</div>';\n colorPalette.forEach((color, index) => {\n shadow?.host.style.setProperty(`--ast-global-color-${index}`, color);\n });\n const images = thumbnailContainer.shadowRoot.querySelectorAll('img');\n if (shadow) {\n images.forEach(imageItem => {\n if ((0,_utils_js__WEBPACK_IMPORTED_MODULE_3__.shouldSkipReplacement)(imageItem.src) || disableAi || previewImages?.length === 0 || Object.keys(dynamicContent).length === 0 || !dynamicContent) {\n return;\n }\n updateVisibility(imageItem, visibility.hidden);\n });\n updateScaling();\n replaceImages(images, previewImages);\n }\n }\n return () => {\n isMounted = false;\n };\n }, [item, disableAi, dynamicContent, selectedImages]);\n (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_6__.useEffect)(() => {\n const resizeObserver = new ResizeObserver(updateScaling);\n resizeObserver.observe(document.documentElement);\n return () => {\n if (!resizeObserver) {\n return;\n }\n resizeObserver.disconnect();\n };\n }, []);\n (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_6__.useEffect)(() => {\n const astPopup = document.querySelector('#ast-block-templates-modal-wrap');\n if (!astPopup) {\n return;\n }\n const observer = new MutationObserver(updateScaling);\n observer.observe(astPopup, {\n childList: true,\n attributes: true,\n subtree: true\n });\n return () => {\n if (!observer) {\n return;\n }\n observer.disconnect();\n };\n }, []);\n (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_6__.useEffect)(() => {\n const thumbnailContainer = thumbnailContainerRef?.current;\n if (thumbnailContainer) {\n const shadow = thumbnailContainer.shadowRoot;\n colorPalette.forEach((color, index) => {\n if (shadow === null) {\n return;\n }\n shadow.host.style.setProperty(`--ast-global-color-${index}`, color);\n });\n }\n }, [colorPalette]);\n function updateScaling() {\n const thumbnail = thumbnailRef?.current;\n const thumbnailContainer = thumbnailContainerRef?.current;\n if (!thumbnail || !thumbnailContainer) {\n return;\n }\n const width = thumbnail.parentNode.offsetWidth;\n const scale = width / 1200;\n const scaledHeight = scale * thumbnailContainer.offsetHeight;\n thumbnail.style.transform = `scale(${scale})`;\n thumbnail.style.height = `${scaledHeight}px`;\n }\n const updateVisibility = (element, value) => {\n if (!element) {\n return;\n }\n element.style.visibility = value;\n };\n const replaceGoogleMapLocation = (contentStr = '') => {\n if (!address) {\n return contentStr;\n }\n const regex = /(src=\"https:\\/\\/maps\\.google\\.com\\/maps\\?q=)([^&]+)(&z=\\d+&hl=en&t=m&output=embed&iwloc=near\")/g;\n return contentStr.replace(regex, `$1${encodeURIComponent(address)}$3`);\n };\n let scrollTimeout = 0;\n let startScroll = 0;\n const scrollToPosition = (element, position, duration) => {\n const start = element.scrollTop;\n const change = position - start;\n const increment = 20;\n let currentTime = 0;\n const animateScroll = function () {\n currentTime += increment;\n const val = _utils_easing_functions__WEBPACK_IMPORTED_MODULE_4__[\"default\"].linearTween(currentTime, start, change, duration);\n element.scrollTop = val;\n if (currentTime < duration) {\n scrollTimeout = setTimeout(animateScroll, increment);\n }\n };\n animateScroll();\n };\n const handleScrollDown = () => {\n if (item.type !== 'page') {\n return;\n }\n const scrollContainer = thumbnailContainerRef.current;\n if (scrollTimeout) {\n clearTimeout(scrollTimeout);\n }\n startScroll = setTimeout(() => {\n scrollToPosition(scrollContainer, scrollContainer.scrollHeight, 4000);\n }, 1000);\n };\n const handleScrollUp = () => {\n if (startScroll) {\n clearTimeout(startScroll);\n }\n const scrollContainer = thumbnailContainerRef.current;\n if (scrollTimeout) {\n clearTimeout(scrollTimeout);\n }\n scrollToPosition(scrollContainer, 0, 1500);\n };\n const getInsertButtonText = () => {\n if (spectraPluginStatus.notInstalled) {\n return 'Install Spectra & Insert';\n }\n if (spectraPluginStatus.inactive) {\n return 'Activate Spectra & Insert';\n }\n return 'Insert';\n };\n const handleOnClickSingleBlock = blockItem => event => {\n if (importing || !event || event.target.closest('.gt-single-block-action-btns') !== null || typeof onClickBlock !== 'function') {\n return;\n }\n onClickBlock(blockItem);\n };\n\n // Reset the counter when the popup is closed.\n (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_6__.useEffect)(() => {\n if (!togglePopup) {\n imageCounter = 0;\n containerImageCounter = 0;\n }\n }, [togglePopup]);\n const originClass = is_rtl ? 'origin-top-right' : 'origin-top-left';\n return /*#__PURE__*/React.createElement(_fade_in_out_fade_in_out_js__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n className: (0,_utils_helpers__WEBPACK_IMPORTED_MODULE_0__.classNames)('w-full h-fit', importing ? 'importing' : '')\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: (0,_utils_helpers__WEBPACK_IMPORTED_MODULE_0__.classNames)('cursor-pointer relative border border-solid border-border-primary hover:border-accent-spectra transition duration-150 ease-in-out overflow-hidden group', importing && 'border-accent-spectra')\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: `thumbnail left-0 m-0 min-h-[auto] overflow-visible text-left top-0 ${originClass} relative pointer-events-none`,\n ref: thumbnailRef\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"absolute w-[1200px] pointer-events-none max-h-[1600px] overflow-hidden\",\n ref: thumbnailContainerRef\n }, !content && /*#__PURE__*/React.createElement(\"img\", {\n srcSet: `${imageFeaturedlURL}, ${imageThumbnailURL}`,\n src: imageThumbnailURL,\n alt: \"Preview\"\n }), /*#__PURE__*/React.createElement(\"div\", {\n className: \"preview\"\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"ast-block-templates-icon ast-block-templates-icon-search\"\n })))), /*#__PURE__*/React.createElement(\"div\", {\n className: (0,_utils_helpers__WEBPACK_IMPORTED_MODULE_0__.classNames)('absolute inset-0 grid grid-cols-1 grid-rows-1 place-items-end', importing ? 'pointer-events-none' : ''),\n onMouseEnter: handleScrollDown,\n onMouseLeave: handleScrollUp,\n onClick: handleOnClickSingleBlock(item),\n \"aria-hidden\": \"true\"\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: (0,_utils_helpers__WEBPACK_IMPORTED_MODULE_0__.classNames)('gt-single-block-action-btns opacity-100 md:opacity-0 group-hover:opacity-100 w-full flex items-center justify-between px-3 py-2 backdrop-blur-sm bg-white/[0.85] shadow-action-buttons transition-all duration-150 ease-in-out', true === selfState.importing ? 'opacity-100' : '')\n }, /*#__PURE__*/React.createElement(_import_block_button_import_block_button__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n title: getInsertButtonText(),\n showIcon: spectraPluginStatus.active,\n liveRequest: true,\n item: item,\n importing: selfState.importing,\n onClick: () => {\n setSelfState({\n ...selfState,\n importing: true\n });\n setImporting(true);\n },\n onBlockImport: () => {\n setSelfState({\n ...selfState,\n importing: false\n });\n setImporting(false);\n },\n onImportFail: () => {\n setSelfState({\n ...selfState,\n importing: false\n });\n setImporting(false);\n }\n }), /*#__PURE__*/React.createElement(_favorite_single_block__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n item: item\n })))));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_wordpress_compose__WEBPACK_IMPORTED_MODULE_9__[\"default\"])((0,_wordpress_data__WEBPACK_IMPORTED_MODULE_10__[\"default\"])(select => {\n const {\n getDisableAi,\n getDisablePreview,\n getTogglePopup\n } = select('ast-block-templates');\n return {\n disableAi: getDisableAi(),\n disablePreview: getDisablePreview(),\n togglePopup: getTogglePopup()\n };\n}))((0,_wordpress_element__WEBPACK_IMPORTED_MODULE_6__.memo)(SingleBlock)));\n\n//# sourceURL=webpack://ast-block-templates/./src/components/reusable/single-block/lazy-single-block.js?"); /***/ }) }]); Save