declare (strict_types=1);
namespace ElementorProDeps\DI;
use ElementorProDeps\DI\Definition\ArrayDefinitionExtension;
use ElementorProDeps\DI\Definition\EnvironmentVariableDefinition;
use ElementorProDeps\DI\Definition\Helper\AutowireDefinitionHelper;
use ElementorProDeps\DI\Definition\Helper\CreateDefinitionHelper;
use ElementorProDeps\DI\Definition\Helper\FactoryDefinitionHelper;
use ElementorProDeps\DI\Definition\Reference;
use ElementorProDeps\DI\Definition\StringDefinition;
use ElementorProDeps\DI\Definition\ValueDefinition;
if (!\function_exists('ElementorProDeps\\DI\\value')) {
/**
* Helper for defining a value.
*
* @param mixed $value
*/
function value($value) : ValueDefinition
{
return new ValueDefinition($value);
}
}
if (!\function_exists('ElementorProDeps\\DI\\create')) {
/**
* Helper for defining an object.
*
* @param string|null $className Class name of the object.
* If null, the name of the entry (in the container) will be used as class name.
*/
function create(string $className = null) : CreateDefinitionHelper
{
return new CreateDefinitionHelper($className);
}
}
if (!\function_exists('ElementorProDeps\\DI\\autowire')) {
/**
* Helper for autowiring an object.
*
* @param string|null $className Class name of the object.
* If null, the name of the entry (in the container) will be used as class name.
*/
function autowire(string $className = null) : AutowireDefinitionHelper
{
return new AutowireDefinitionHelper($className);
}
}
if (!\function_exists('ElementorProDeps\\DI\\factory')) {
/**
* Helper for defining a container entry using a factory function/callable.
*
* @param callable $factory The factory is a callable that takes the container as parameter
* and returns the value to register in the container.
*/
function factory($factory) : FactoryDefinitionHelper
{
return new FactoryDefinitionHelper($factory);
}
}
if (!\function_exists('ElementorProDeps\\DI\\decorate')) {
/**
* Decorate the previous definition using a callable.
*
* Example:
*
* 'foo' => decorate(function ($foo, $container) {
* return new CachedFoo($foo, $container->get('cache'));
* })
*
* @param callable $callable The callable takes the decorated object as first parameter and
* the container as second.
*/
function decorate($callable) : FactoryDefinitionHelper
{
return new FactoryDefinitionHelper($callable, \true);
}
}
if (!\function_exists('ElementorProDeps\\DI\\get')) {
/**
* Helper for referencing another container entry in an object definition.
*/
function get(string $entryName) : Reference
{
return new Reference($entryName);
}
}
if (!\function_exists('ElementorProDeps\\DI\\env')) {
/**
* Helper for referencing environment variables.
*
* @param string $variableName The name of the environment variable.
* @param mixed $defaultValue The default value to be used if the environment variable is not defined.
*/
function env(string $variableName, $defaultValue = null) : EnvironmentVariableDefinition
{
// Only mark as optional if the default value was *explicitly* provided.
$isOptional = 2 === \func_num_args();
return new EnvironmentVariableDefinition($variableName, $isOptional, $defaultValue);
}
}
if (!\function_exists('ElementorProDeps\\DI\\add')) {
/**
* Helper for extending another definition.
*
* Example:
*
* 'log.backends' => DI\add(DI\get('My\Custom\LogBackend'))
*
* or:
*
* 'log.backends' => DI\add([
* DI\get('My\Custom\LogBackend')
* ])
*
* @param mixed|array $values A value or an array of values to add to the array.
*
* @since 5.0
*/
function add($values) : ArrayDefinitionExtension
{
if (!\is_array($values)) {
$values = [$values];
}
return new ArrayDefinitionExtension($values);
}
}
if (!\function_exists('ElementorProDeps\\DI\\string')) {
/**
* Helper for concatenating strings.
*
* Example:
*
* 'log.filename' => DI\string('{app.path}/app.log')
*
* @param string $expression A string expression. Use the `{}` placeholders to reference other container entries.
*
* @since 5.0
*/
function string(string $expression) : StringDefinition
{
return new StringDefinition($expression);
}
}
/**
* WordPress dependencies
*/
import { __ } from "@wordpress/i18n";
import {
PanelBody,
SelectControl,
ToggleControl,
BaseControl,
PanelRow,
} from "@wordpress/components";
import { useEffect, useState } from "@wordpress/element";
/**
* Internal depencencies
*/
import objAttributes from "./attributes";
import {
WRAPPER_BG,
WRAPPER_MARGIN,
WRAPPER_PADDING,
WRAPPER_BORDER_SHADOW,
IMAGE_WIDTH,
IMAGE_HEIGHT,
SIZE_UNIT_TYPES,
IMAGE_BORDER_SHADOW,
STYLES,
HOVER_EFFECT,
FIT_STYLES,
IMAGE_ALIGN,
IMAGE_ALIGNMENT,
SOURCE,
} from "./constants";
import {
BorderShadowControl,
ResponsiveRangeController,
EbImageSizeSelector,
ResponsiveAlignControl,
InspectorPanel,
ImageComponent,
sanitizeURL,
} from "@essential-blocks/controls";
function Inspector(props) {
const { attributes, setAttributes, media, prevImageSize, oldImageData, context } =
props;
const {
image,
resOption,
displayCaption,
captionColor,
stylePreset,
enableLink,
captionStyle,
hoverEffect,
complexStyle,
autoFit,
imageSize,
fitStyles,
autoHeight,
imgSource,
widthRange,
heightRange,
openInNewTab
} = attributes;
// Check if block is inside Loop Builder context
const isInLoopBuilder = Boolean(
context &&
// Primary check: explicit isLoopBuilder flag
(context["essential-blocks/isLoopBuilder"] === true ||
// Secondary check: presence of loop context values (even if null initially)
(context.hasOwnProperty("essential-blocks/postId") &&
context.hasOwnProperty("essential-blocks/postType"))),
);
const [urlError, setUrlError] = useState("");
const changImgSource = (selected) => {
switch (selected) {
case "site-logo":
setAttributes({
imgSource: selected,
displayCaption: false,
enableLink: true,
widthRange: 120,
widthUnit: "px",
imgBorderShadowborderStyle: "none",
imgBorderShadowRds_Bottom: "0",
imgBorderShadowRds_Left: "0",
imgBorderShadowRds_Right: "0",
imgBorderShadowRds_Top: "0",
hoverEffect: "no-effect",
});
break;
case "featured-img":
setAttributes({
imgSource: selected,
displayCaption: false,
enableLink: true,
widthRange: "",
imgBorderShadowborderStyle: "solid",
imgBorderShadowRds_Bottom: "15",
imgBorderShadowRds_Left: "15",
imgBorderShadowRds_Right: "15",
imgBorderShadowRds_Top: "15",
hoverEffect: "no-effect",
});
break;
case "custom":
// Only switch the source; preserve the user's existing
// caption / link / size / border / hover choices. Forcing
// `displayCaption: true` here was re-enabling the caption
// whenever the user round-tripped through site-logo or
// featured-img.
setAttributes({
imgSource: selected,
displayCaption: false,
enableLink: false,
widthRange: "",
imgBorderShadowborderStyle: "solid",
imgBorderShadowRds_Bottom: "15",
imgBorderShadowRds_Left: "15",
imgBorderShadowRds_Right: "15",
imgBorderShadowRds_Top: "15",
hoverEffect: "no-effect",
});
break;
default:
return false;
}
};
const changeStyle = (selected) => {
setAttributes({ stylePreset: selected });
const complexLayouts = ["octagon", "rhombus", "triangle"];
if (complexLayouts.includes(selected)) {
setAttributes({
complexStyle: true,
});
} else {
setAttributes({
complexStyle: false,
});
}
//
switch (selected) {
case "rounded":
setAttributes({
imgBorderShadowRds_Bottom: "15",
imgBorderShadowRds_Top: "15",
imgBorderShadowRds_Left: "15",
imgBorderShadowRds_Right: "15",
imgBorderShadowRds_Unit: "px",
imgBorderShadowHRds_Bottom: "15",
imgBorderShadowHRds_Top: "15",
imgBorderShadowHRds_Left: "15",
imgBorderShadowHRds_Right: "15",
imgBorderShadowHRds_Unit: "px",
});
break;
case "square":
setAttributes({
imgBorderShadowRds_Bottom: "0",
imgBorderShadowRds_Top: "0",
imgBorderShadowRds_Left: "0",
imgBorderShadowRds_Right: "0",
imgBorderShadowRds_Unit: "px",
imgBorderShadowHRds_Bottom: "0",
imgBorderShadowHRds_Top: "0",
imgBorderShadowHRds_Left: "0",
imgBorderShadowHRds_Right: "0",
imgBorderShadowHRds_Unit: "px",
});
break;
case "circle":
setAttributes({
imgBorderShadowRds_Bottom: "50",
imgBorderShadowRds_Top: "50",
imgBorderShadowRds_Left: "50",
imgBorderShadowRds_Right: "50",
imgBorderShadowRds_Unit: "%",
imgBorderShadowHRds_Bottom: "50",
imgBorderShadowHRds_Top: "50",
imgBorderShadowHRds_Left: "50",
imgBorderShadowHRds_Right: "50",
imgBorderShadowHRds_Unit: "%",
});
break;
default:
return false;
}
};
// image size change
useEffect(() => {
// Only run this effect when imageSize actually changes, not on initial render
if (prevImageSize.current === imageSize) {
return;
}
// custom
if (imgSource === "custom") {
if (image.sizes && imageSize && imageSize.length > 0) {
let newWidth;
let newHeight;
if (image.sizes[imageSize]) {
image.url = image.sizes[imageSize]
? image.sizes[imageSize].url
: image.url;
newWidth = image.sizes[imageSize].width
? image.sizes[imageSize].width
: image.width;
newHeight = image.sizes[imageSize].height
? image.sizes[imageSize].height
: image.height;
} else {
image.url = image.sizes.full.url;
newWidth = image.width;
newHeight = image.height;
}
image["url"] = image.url;
setAttributes({
image,
widthRange:
prevImageSize.current === imageSize && widthRange
? widthRange : newWidth
? newWidth : "",
widthUnit:
prevImageSize.current === imageSize &&
attributes["widthUnit"]
? attributes["widthUnit"]
: "px",
heightRange:
prevImageSize.current === imageSize && heightRange
? heightRange : newHeight
? newHeight : "",
heightUnit:
prevImageSize.current === imageSize && attributes["heightUnit"]
? attributes["heightUnit"] : "px",
});
} else {
let newWidth = "";
let newHeight = "";
if (image && !imageSize) {
newWidth = widthRange
? widthRange
: image?.width
? image.width
: "";
newHeight =
!autoHeight && image?.height ? image.height : "";
} else if (oldImageData?.media_details?.sizes) {
if (oldImageData.media_details.sizes?.[imageSize]) {
image.url = oldImageData.media_details.sizes?.[
imageSize
]?.source_url
? oldImageData.media_details.sizes?.[imageSize]
?.source_url
: oldImageData.source_url;
} else {
image.url = oldImageData.source_url;
}
image["url"] = image.url;
newWidth = oldImageData.media_details.sizes?.[imageSize]
?.width
? oldImageData.media_details.sizes?.[imageSize]?.width
: oldImageData.width;
newHeight = oldImageData.media_details.sizes?.[imageSize]
?.height
? oldImageData.media_details.sizes?.[imageSize]?.height
: oldImageData.height;
}
setAttributes({
image,
widthRange: newWidth ? newWidth : "",
widthUnit: attributes["widthUnit"] ? attributes["widthUnit"] : "px",
// Only update heightRange if autoHeight is false and we don't have a custom value
heightRange: !autoHeight && !heightRange ? (newHeight ? newHeight : "") : heightRange,
heightUnit: attributes["heightUnit"] ? attributes["heightUnit"] : "px",
});
}
}
else if (imgSource === "featured-img" && media?.media_details?.sizes) {
let featuredImgWidth = media.media_details.sizes?.[imageSize]?.width
? media.media_details.sizes?.[imageSize]?.width
: media.width;
let featuredImgHeight = media.media_details.sizes?.[imageSize]
?.height
? media.media_details.sizes?.[imageSize]?.height
: media.height;
setAttributes({
widthRange: featuredImgWidth ? featuredImgWidth : "",
widthUnit: attributes["widthUnit"] ? attributes["widthUnit"] : "px",
// Only update heightRange if autoHeight is false and we don't have a custom value
heightRange: !autoHeight && !heightRange ? (featuredImgHeight ? featuredImgHeight : "") : heightRange,
heightUnit: attributes["heightUnit"] ? attributes["heightUnit"] : "px",
});
}
prevImageSize.current = imageSize;
}, [imageSize]);
const onUrlBlur = (link) => {
if (link === "" || sanitizeURL(link) !== "#") {
setUrlError("");
} else {
setUrlError(
__(
"Invalid URL. Please include http:// or https://",
"essential-blocks",
),
);
}
};
return (
{!isInLoopBuilder && (
changImgSource(imgSource)}
__next40pxDefaultSize
__nextHasNoMarginBottom
/>
)}
{imgSource !== "custom" && (
<>
{imgSource === "featured-img" && (
changeStyle(stylePreset)
}
__next40pxDefaultSize
__nextHasNoMarginBottom
/>
)}
{stylePreset === "circle" && (
Please use equal "Height" & "Width"
for perfect Circle shape.
)}
{imgSource === "feature-img" && (
)}
setAttributes({ autoHeight })
}
__nextHasNoMarginBottom
/>
{!autoHeight && (
)}
setAttributes({ autoFit })
}
__nextHasNoMarginBottom
/>
{imgSource !== "site-logo" && autoFit && (
setAttributes({ fitStyles })
}
__next40pxDefaultSize
__nextHasNoMarginBottom
/>
)}
setAttributes({ enableLink })
}
__nextHasNoMarginBottom
/>
{enableLink && (
setAttributes({
openInNewTab,
})
}
__nextHasNoMarginBottom
/>
)}
)}
{imgSource === "custom" && (
<>
)}
setAttributes({ hoverEffect })
}
__next40pxDefaultSize
__nextHasNoMarginBottom
/>
{imgSource !== "custom" && (
<>
{!complexStyle && (
<>
{__("Border", "essential-blocks")}
)}
{complexStyle && (
Border Style doesn't support for "
{stylePreset} style".
)}
)}
{imgSource === "custom" && (
<>
)}
);
}
export default Inspector;
https://stokedigital.co.nz/post-sitemap.xml
2023-07-18T04:22:16+00:00
https://stokedigital.co.nz/page-sitemap.xml
2026-05-18T04:30:08+00:00
https://stokedigital.co.nz/category-sitemap.xml
2023-07-18T04:22:16+00:00