860 lines
36 KiB
JavaScript
860 lines
36 KiB
JavaScript
import { __ } from '@wordpress/i18n';
|
|
import {
|
|
InspectorControls,
|
|
MediaUpload,
|
|
MediaUploadCheck
|
|
} from '@wordpress/block-editor';
|
|
import { useState,
|
|
useEffect,
|
|
FC
|
|
} from 'react';
|
|
import { useSelect } from '@wordpress/data';
|
|
import {
|
|
PanelBody,
|
|
SelectControl,
|
|
Button,
|
|
ToggleControl,
|
|
TextControl,
|
|
__experimentalNumberControl as NumberControl,
|
|
__experimentalUnitControl as UnitControl,
|
|
TabPanel,
|
|
__experimentalBorderControl as BorderControl,
|
|
TextareaControl,
|
|
Popover
|
|
} from '@wordpress/components';
|
|
import metadata from './block.json';
|
|
import './editor.scss';
|
|
|
|
//Import the LcpGallery component
|
|
import LcpGallery from '../components/LightGallery';
|
|
|
|
|
|
const galleryElements = [
|
|
{
|
|
src:
|
|
"https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80",
|
|
responsive:
|
|
"https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=480&q=80 480, https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80 800",
|
|
thumb:
|
|
"https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80",
|
|
subHtml: (
|
|
<div className="lightGallery-captions">
|
|
<h4>
|
|
Photo by <a href="https://unsplash.com/@dann">Dan</a>
|
|
</h4>
|
|
<p>Published on November 13, 2018</p>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
src:
|
|
"https://images.unsplash.com/photo-1473876988266-ca0860a443b8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80",
|
|
responsive:
|
|
"https://images.unsplash.com/photo-1473876988266-ca0860a443b8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=480&q=80 480, https://images.unsplash.com/photo-1473876988266-ca0860a443b8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80 800",
|
|
thumb:
|
|
"https://images.unsplash.com/photo-1473876988266-ca0860a443b8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80",
|
|
subHtml: (
|
|
<div className="lightGallery-captions">
|
|
<h4>
|
|
Photo by <a href="https://unsplash.com/@kylepyt">Kyle Peyton</a>
|
|
</h4>
|
|
<p>Published on September 14, 2016</p>
|
|
</div>
|
|
),
|
|
},
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
// Aspect ratio options
|
|
const aspectRatioOptions = [
|
|
{ value: '1-1', label: __('1:1', metadata.textdomain) },
|
|
{ value: '16-9', label: __('16:9', metadata.textdomain) },
|
|
{ value: '3-2', label: __('3:2', metadata.textdomain) },
|
|
{ value: '5-7', label: __('5:7', metadata.textdomain) },
|
|
{ value: '3-4', label: __('3:4', metadata.textdomain) },
|
|
{ value: '4-5', label: __('4:5', metadata.textdomain) },
|
|
{ value: '2-3', label: __('2:3', metadata.textdomain) }
|
|
];
|
|
|
|
// Check if JetEngine or ACF/SCF are activated and get their gallery field data
|
|
const { apiFetch } = wp;
|
|
|
|
apiFetch({ path: '/custom/v1/get-gallery-supported-plugins-data' })
|
|
.then((data) => {
|
|
console.log(data); // Log the entire data object
|
|
if (data.jetengine_active) {
|
|
console.log('Jet Engine is activated');
|
|
// Other logic here
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error fetching Jet Engine status:', error);
|
|
});
|
|
|
|
|
|
const MultiMediaUpload = ({ onSelect }) => {
|
|
const [mediaIds, setMediaIds] = useState([]);
|
|
|
|
const handleSelectMedia = (media) => {
|
|
const selectedMedia = media.map((item) => ({
|
|
id: item.id,
|
|
url: item.url,
|
|
alt: item.alt || ''
|
|
}));
|
|
setMediaIds(selectedMedia);
|
|
onSelect(selectedMedia);
|
|
};
|
|
|
|
return (
|
|
<MediaUploadCheck>
|
|
<MediaUpload
|
|
onSelect={handleSelectMedia}
|
|
allowedTypes={['image', 'video']}
|
|
multiple
|
|
gallery
|
|
render={({ open }) => (
|
|
<Button onClick={open} isPrimary>
|
|
{__('Open Media Library')}
|
|
</Button>
|
|
)}
|
|
/>
|
|
</MediaUploadCheck>
|
|
);
|
|
};
|
|
|
|
export default function Edit(props) {
|
|
const { attributes, setAttributes } = props;
|
|
const {
|
|
galleryItems = [],
|
|
source,
|
|
sourceMetaField,
|
|
sourceTable,
|
|
sourceColumn,
|
|
includePostThumbnail,
|
|
initialLayout,
|
|
itemsAspectRatio,
|
|
gridColumnsLarge,
|
|
gridColumnsMedium,
|
|
gridColumnsSmall,
|
|
gridGapLarge,
|
|
gridGapMedium,
|
|
gridGapSmall,
|
|
|
|
download,
|
|
|
|
downloadSize,
|
|
|
|
maxInitialItems,
|
|
thumbnail,
|
|
inlineHeightLarge,
|
|
inlineHeightMedium,
|
|
inlineHeightSmall,
|
|
justifiedRowHeightSmall,
|
|
justifiedRowHeightMedium,
|
|
justifiedRowHeightLarge,
|
|
justifiedLastRow,
|
|
thumbnailsBorders,
|
|
thumbnailsBordersSelected,
|
|
thumbnailsStyle,
|
|
thumbnailActiveStyle,
|
|
showCaptions,
|
|
zoomFromOrigin,
|
|
galleryCustomStyles,
|
|
lgSettings
|
|
} = attributes;
|
|
|
|
// Handle Updating LightGallery settings
|
|
const [settings, setSettings] = useState(lgSettings);
|
|
|
|
|
|
const [borders, setBorders] = useState(thumbnailsBorders || {
|
|
top: { color: '#000000', style: 'solid', width: '1px' },
|
|
right: { color: '#000000', style: 'solid', width: '1px' },
|
|
bottom: { color: '#000000', style: 'solid', width: '1px' },
|
|
left: { color: '#000000', style: 'solid', width: '1px' }
|
|
});
|
|
|
|
const [selectedBorders, setSelectedBorders] = useState(thumbnailsBordersSelected || {
|
|
top: { color: '#000000', style: 'solid', width: '1px' },
|
|
right: { color: '#000000', style: 'solid', width: '1px' },
|
|
bottom: { color: '#000000', style: 'solid', width: '1px' },
|
|
left: { color: '#000000', style: 'solid', width: '1px' }
|
|
});
|
|
|
|
const handleSelectMedia = (selectedMedia) => {
|
|
setAttributes({ galleryItems: selectedMedia });
|
|
};
|
|
|
|
const handleBorderChange = (newBorders) => {
|
|
setBorders(newBorders);
|
|
setAttributes({ thumbnailsBorders: newBorders });
|
|
};
|
|
|
|
const handleBorderSelectedChange = (newBorders) => {
|
|
setSelectedBorders(newBorders);
|
|
setAttributes({ thumbnailsBordersSelected: newBorders });
|
|
};
|
|
|
|
|
|
|
|
// lightGallery Transistion Styles
|
|
const lgTransitionStyles = [
|
|
{ label: 'lg-slide', value: 'lg-slide' },
|
|
{ label: 'lg-fade', value: 'lg-fade' },
|
|
{ label: 'lg-zoom-in', value: 'lg-zoom-in' },
|
|
{ label: 'lg-zoom-in-big', value: 'lg-zoom-in-big' },
|
|
{ label: 'lg-zoom-out', value: 'lg-zoom-out' },
|
|
{ label: 'lg-zoom-out-big', value: 'lg-zoom-out-big' },
|
|
{ label: 'lg-zoom-out-in', value: 'lg-zoom-out-in' },
|
|
{ label: 'lg-zoom-in-out', value: 'lg-zoom-in-out' },
|
|
{ label: 'lg-soft-zoom', value: 'lg-soft-zoom' },
|
|
{ label: 'lg-scale-up', value: 'lg-scale-up' },
|
|
{ label: 'lg-slide-circular', value: 'lg-slide-circular' },
|
|
{ label: 'lg-slide-circular-vertical', value: 'lg-slide-circular-vertical' },
|
|
{ label: 'lg-slide-vertical', value: 'lg-slide-vertical' },
|
|
{ label: 'lg-slide-vertical-growth', value: 'lg-slide-vertical-growth' },
|
|
{ label: 'lg-slide-skew-only', value: 'lg-slide-skew-only' },
|
|
{ label: 'lg-slide-skew-only-rev', value: 'lg-slide-skew-only-rev' },
|
|
{ label: 'lg-slide-skew-only-y', value: 'lg-slide-skew-only-y' },
|
|
{ label: 'lg-slide-skew-only-y-rev', value: 'lg-slide-skew-only-y-rev' },
|
|
{ label: 'lg-slide-skew', value: 'lg-slide-skew' },
|
|
{ label: 'lg-slide-skew-rev', value: 'lg-slide-skew-rev' },
|
|
{ label: 'lg-slide-skew-cross', value: 'lg-slide-skew-cross' },
|
|
{ label: 'lg-slide-skew-cross-rev', value: 'lg-slide-skew-cross-rev' },
|
|
{ label: 'lg-slide-skew-ver', value: 'lg-slide-skew-ver' },
|
|
{ label: 'lg-slide-skew-ver-rev', value: 'lg-slide-skew-ver-rev' },
|
|
{ label: 'lg-slide-skew-ver-cross', value: 'lg-slide-skew-ver-cross' },
|
|
{ label: 'lg-slide-skew-ver-cross-rev', value: 'lg-slide-skew-ver-cross-rev' },
|
|
{ label: 'lg-lollipop', value: 'lg-lollipop' },
|
|
{ label: 'lg-lollipop-rev', value: 'lg-lollipop-rev' },
|
|
{ label: 'lg-rotate', value: 'lg-rotate' },
|
|
{ label: 'lg-rotate-rev', value: 'lg-rotate-rev' },
|
|
{ label: 'lg-tube', value: 'lg-tube' }
|
|
];
|
|
|
|
const galleryClasses = `lcp-gallery ${initialLayout}`;
|
|
|
|
|
|
const lgPluginRequirements = [
|
|
{ setting: 'zoom', plugin: 'lgZoom' },
|
|
{ setting: 'thumbnail', plugin: 'lgThumbnail' },
|
|
{ setting: 'rotate', plugin: 'lgRotate' },
|
|
{ setting: 'autoplay', plugin: 'lgAutoplay' },
|
|
{ setting: 'fullScreen', plugin: 'lgFullScreen' },
|
|
{ setting: 'download', plugin: 'lgDownload' },
|
|
// Add more settings and corresponding plugins as needed
|
|
];
|
|
|
|
|
|
|
|
// Retrieve current post type, post ID, and check if it's a template mode using useSelect
|
|
const { isTemplate, postType, postId } = useSelect((select) => {
|
|
const editor = select('core/editor');
|
|
const currentPostType = editor.getCurrentPostType();
|
|
const currentPostId = editor.getCurrentPostId();
|
|
const isTemplateMode = currentPostType === 'wp_template';
|
|
|
|
return {
|
|
isTemplate: isTemplateMode,
|
|
postType: currentPostType,
|
|
postId: currentPostId
|
|
};
|
|
}, []); // Empty array ensures the hook runs once during the component lifecycle
|
|
|
|
let sourceOptions = [];
|
|
|
|
if (isTemplate) {
|
|
sourceOptions = [
|
|
{ value: 'manual', label: __('Manually Select', metadata.textdomain) },
|
|
{ value: 'lcpPostGallery', label: __('Post Gallery', metadata.textdomain) },
|
|
{ value: 'metaField', label: __('Meta field of current post', metadata.textdomain) },
|
|
{ value: 'linkedTable', label: __('Linked Table', metadata.textdomain) } ];
|
|
// Add logic to adjust block's behavior when editing a template
|
|
} else {
|
|
sourceOptions = [
|
|
{ value: 'manual', label: __('Manually Select', metadata.textdomain) },
|
|
{ value: 'lcpPostGallery', label: __('Post Gallery', metadata.textdomain) }
|
|
];
|
|
// Add logic for post/page editing mode
|
|
}
|
|
|
|
const updateLgSetting = (key, value) => {
|
|
setAttributes({
|
|
lgSettings: {
|
|
...lgSettings,
|
|
[key]: value,
|
|
},
|
|
});
|
|
};
|
|
|
|
// Function to toggle plugins (add/remove a plugin)
|
|
const togglePlugin = (plugin, enable) => {
|
|
setAttributes({
|
|
lgSettings: {
|
|
...lgSettings,
|
|
plugins: enable
|
|
? [...lgSettings.plugins, plugin] // Add the plugin if enabled
|
|
: lgSettings.plugins.filter((p) => p !== plugin), // Remove the plugin if disabled
|
|
},
|
|
});
|
|
};
|
|
|
|
// Toggle Control for enabling 'Hash' and updating the plugin array
|
|
const handleToggleHash = (value) => {
|
|
updateLgSetting('hash', value);
|
|
togglePlugin('lgHash', value); // Add/Remove lgHash plugin based on toggle value
|
|
};
|
|
|
|
// Example control for enabling 'Zoom' and updating the plugin array
|
|
const handleToggleZoom = (value) => {
|
|
updateLgSetting('zoom', value);
|
|
togglePlugin('lgZoom', value); // Add/Remove lgZoom plugin based on toggle value
|
|
};
|
|
|
|
return (
|
|
<>
|
|
|
|
{/* The Gallery */}
|
|
<LightGallery {...attributes.lgSettings} />
|
|
|
|
<InspectorControls>
|
|
{/* Settings and Style Tabs */}
|
|
<TabPanel
|
|
className="my-tab-panel"
|
|
activeClass="active-tab"
|
|
tabs={[
|
|
{
|
|
name: 'settings',
|
|
title: __('Settings'),
|
|
className: 'settings-tab'
|
|
},
|
|
{
|
|
name: 'style',
|
|
title: __('Style Settings'),
|
|
className: 'style-tab'
|
|
}
|
|
]}
|
|
>
|
|
{({ name }) => {
|
|
if (name === 'settings') {
|
|
return (
|
|
<>
|
|
{/* Source Settings */}
|
|
<PanelBody title={__('Source Settings')}>
|
|
<SelectControl
|
|
label={__('Gallery Items Source', metadata.textdomain)}
|
|
value={source}
|
|
onChange={(newValue) => setAttributes({ source: newValue })}
|
|
options={sourceOptions}
|
|
/>
|
|
{source === 'manual' && <MultiMediaUpload onSelect={handleSelectMedia} />}
|
|
{source === 'metaField' && (
|
|
<TextControl
|
|
label={__('Meta Field Name')}
|
|
value={sourceMetaField}
|
|
onChange={(newValue) => setAttributes({ sourceMetaField: newValue })}
|
|
/>
|
|
)}
|
|
{source === 'linkedTable' && (
|
|
<>
|
|
<TextControl
|
|
label={__('Table Name')}
|
|
value={sourceTable}
|
|
onChange={(newValue) => setAttributes({ sourceTable: newValue })}
|
|
/>
|
|
<TextControl
|
|
label={__('Column Name')}
|
|
value={sourceColumn}
|
|
onChange={(newValue) => setAttributes({ sourceColumn: newValue })}
|
|
/>
|
|
</>
|
|
)}
|
|
{/* Parse an element for gallery items */}
|
|
<ToggleControl
|
|
checked={attributes.parseElementForItems}
|
|
label={__('Parse element for gallery items', metadata.textdomain)}
|
|
onChange={(value) => {
|
|
setAttributes({
|
|
parseElementForItems: value, // Set as a boolean directly
|
|
});
|
|
}}
|
|
/>
|
|
|
|
{attributes.parseElementForItems && (
|
|
<TextControl
|
|
label={__('Elements to parse')}
|
|
value={attributes.parsedTargetElement} // Corrected to use string directly
|
|
onChange={(newValue) => setAttributes({ parsedTargetElement: newValue })}
|
|
/>
|
|
)}
|
|
<ToggleControl
|
|
onChange={(isChecked) => setAttributes({ includePostThumbnail: isChecked })}
|
|
checked={includePostThumbnail}
|
|
label={__('Include Post Thumbnail (Featured Image)', metadata.textdomain)}
|
|
/>
|
|
|
|
</PanelBody>
|
|
{/* Display Settings */}
|
|
<PanelBody title={__('Display Settings')}>
|
|
<SelectControl
|
|
label={__('Initial Layout', metadata.textdomain)}
|
|
value={initialLayout}
|
|
onChange={(newValue) => {
|
|
// Update the initialLayout attribute
|
|
setAttributes({
|
|
initialLayout: newValue,
|
|
lgSettings: {
|
|
...attributes.lgSettings, // Preserve existing lgSettings
|
|
closable: newValue !== 'inline', // Set closable based on the layout choice
|
|
showMaximizeIcon: newValue === 'inline', // Show maximize icon only if 'inline' is selected
|
|
}
|
|
});
|
|
}}
|
|
options={[
|
|
{ value: 'inline', label: __('Inline', metadata.textdomain) },
|
|
{ value: 'grid', label: __('Grid', metadata.textdomain) },
|
|
{ value: 'button', label: __('Button', metadata.textdomain) }
|
|
]}
|
|
/>
|
|
|
|
<ToggleControl
|
|
onChange={(isChecked) => setAttributes({ includePostThumbnail: isChecked })}
|
|
checked={includePostThumbnail}
|
|
label={__('Include Post Thumbnail (Featured Image)', metadata.textdomain)}
|
|
/>
|
|
{initialLayout === 'button' && (
|
|
<TextControl
|
|
label={__('Button Text')}
|
|
value={sourceColumn}
|
|
onChange={(newValue) => setAttributes({ sourceColumn: newValue })}
|
|
/>
|
|
)
|
|
}
|
|
<ToggleControl
|
|
onChange={(isChecked) => {
|
|
// Check if lgSettings exists, then update thumbnail value
|
|
setAttributes({
|
|
lgSettings: {
|
|
...attributes.lgSettings, // Keep the existing lgSettings intact
|
|
thumbnail: isChecked, // Update the thumbnail value
|
|
}
|
|
});
|
|
}}
|
|
checked={attributes.lgSettings?.thumbnail} // Ensure the checkbox reflects the current thumbnail setting
|
|
label={__('Show Thumbnails', metadata.textdomain)}
|
|
/>
|
|
|
|
{thumbnail && (
|
|
<>
|
|
<SelectControl
|
|
label={__('Thumbnails Position - Desktop', metadata.textdomain)}
|
|
value={itemsAspectRatio}
|
|
onChange={(newValue) => setAttributes({ itemsAspectRatio: newValue })}
|
|
options={[
|
|
{ value: 'bottom', label: __('Bottom', metadata.textdomain) },
|
|
{ value: 'right', label: __('Right', metadata.textdomain) },
|
|
{ value: 'left', label: __('Left', metadata.textdomain) },
|
|
{ value: 'hidden', label: __('Hidden', metadata.textdomain) }
|
|
]}
|
|
/>
|
|
<SelectControl
|
|
label={__('Thumbnails Position - Tablet', metadata.textdomain)}
|
|
value={itemsAspectRatio}
|
|
onChange={(newValue) => setAttributes({ itemsAspectRatio: newValue })}
|
|
options={[
|
|
{ value: 'bottom', label: __('Bottom', metadata.textdomain) },
|
|
{ value: 'right', label: __('Right', metadata.textdomain) },
|
|
{ value: 'left', label: __('Left', metadata.textdomain) },
|
|
{ value: 'hidden', label: __('Hidden', metadata.textdomain) }
|
|
]}
|
|
/>
|
|
<SelectControl
|
|
label={__('Thumbnails Position - Mobile', metadata.textdomain)}
|
|
value={itemsAspectRatio}
|
|
onChange={(newValue) => setAttributes({ itemsAspectRatio: newValue })}
|
|
options={[
|
|
{ value: 'bottom', label: __('Bottom', metadata.textdomain) },
|
|
{ value: 'right', label: __('Right', metadata.textdomain) },
|
|
{ value: 'left', label: __('Left', metadata.textdomain) },
|
|
{ value: 'hidden', label: __('Hidden', metadata.textdomain) }
|
|
]}
|
|
/>
|
|
</>
|
|
)}
|
|
{initialLayout !== 'inline' && initialLayout !== 'justified' && (
|
|
<SelectControl
|
|
label={__('Items Aspect Ratio', metadata.textdomain)}
|
|
value={itemsAspectRatio}
|
|
onChange={(newValue) => setAttributes({ itemsAspectRatio: newValue })}
|
|
options={aspectRatioOptions}
|
|
/>
|
|
)}
|
|
{initialLayout !== 'inline' && (
|
|
<NumberControl
|
|
label={__('Max Initial Images')}
|
|
onChange={(newValue) => setAttributes({ maxInitialItems: 1})}
|
|
value={maxInitialItems}
|
|
isShiftStepEnabled
|
|
shiftStep={1}
|
|
min={0}
|
|
/>
|
|
)}
|
|
</PanelBody>
|
|
{/* Gallery Settings */}
|
|
<PanelBody title={__('Gallery Settings')}>
|
|
{/* Include option to show maximize icon if inline gallery */}
|
|
{attributes.initialLayout === 'inline' && (
|
|
<ToggleControl
|
|
label={__('Show maximize icon', metadata.textdomain)}
|
|
checked={attributes.lgSettings.showMaximizeIcon}
|
|
onChange={(isChecked) => setAttributes({
|
|
lgSettings: {
|
|
...attributes.lgSettings, // Preserve existing lgSettings
|
|
showMaximizeIcon: true, // Set the showMaximizeIcon based on the toggle
|
|
}
|
|
})}
|
|
/>
|
|
)}
|
|
|
|
{/* Dynamic Settings */}
|
|
<ToggleControl
|
|
label={__('Dynamic Load', 'lcp')}
|
|
checked={lgSettings.dynamic}
|
|
onChange={(value) => {
|
|
// Update autoplay
|
|
setAttributes({
|
|
lgSettings: {
|
|
...lgSettings,
|
|
['dynamic']: value,
|
|
}
|
|
});
|
|
}}
|
|
/>
|
|
{/* Zoom Settings - Zoom requires lgZoom plugin */}
|
|
<ToggleControl
|
|
label={__('Enable Zoom', 'lcp')}
|
|
checked={lgSettings.zoom}
|
|
onChange={(value) => {
|
|
// Update autoplay
|
|
setAttributes({
|
|
lgSettings: {
|
|
...lgSettings,
|
|
zoom: value, // Update the zoom setting
|
|
plugins: value
|
|
? [...lgSettings.plugins, 'lgZoom'] // Add lgFullScreen plugin if enabled
|
|
: lgSettings.plugins.filter(plugin => plugin !== 'lgZoom'), // Remove lgFullScreen plugin if disabled
|
|
},
|
|
});
|
|
}}
|
|
/>
|
|
{/* Fullscreen Settings - fullScreen requires lgFullscreen plugin */}
|
|
<ToggleControl
|
|
label={__('Enable Fullscreen', 'lcp')}
|
|
checked={lgSettings.fullScreen}
|
|
onChange={(value) => {
|
|
// Update autoplay
|
|
setAttributes({
|
|
lgSettings: {
|
|
...lgSettings,
|
|
fullScreen: value, // Update the zoom setting
|
|
plugins: value
|
|
? [...lgSettings.plugins, 'lgFullScreen'] // Add lgFullScreen plugin if enabled
|
|
: lgSettings.plugins.filter(plugin => plugin !== 'lgFullScreen'), // Remove lgFullScreen plugin if disabled
|
|
},
|
|
});
|
|
}}
|
|
/>
|
|
{/* Sharing Settings - Sharing requires lgShare plugin */}
|
|
<ToggleControl
|
|
label={__('Enable Sharing', 'lcp')}
|
|
checked={lgSettings.share}
|
|
onChange={(value) => {
|
|
// Update autoplay
|
|
setAttributes({
|
|
lgSettings: {
|
|
...lgSettings,
|
|
share: value, // Update the zoom setting
|
|
plugins: value
|
|
? [...lgSettings.plugins, 'lgShare'] // Add lgShare plugin if enabled
|
|
: lgSettings.plugins.filter(plugin => plugin !== 'lgShare'), // Remove lgShare plugin if disabled
|
|
},
|
|
});
|
|
}}
|
|
/>
|
|
{/* Autoplay Settings - Autoplay requires lgAutoplay plugin */}
|
|
<ToggleControl
|
|
label={__('Enable Autoplay', 'lcp')}
|
|
checked={lgSettings.autoplay}
|
|
onChange={(value) => {
|
|
// Update autoplay
|
|
setAttributes({
|
|
lgSettings: {
|
|
...lgSettings,
|
|
autoplay: value, // Update the zoom setting
|
|
plugins: value
|
|
? [...lgSettings.plugins, 'lgAutoplay'] // Add lgAutoplay plugin if enabled
|
|
: lgSettings.plugins.filter(plugin => plugin !== 'lgAutoplay'), // Remove lgAutoplay plugin if disabled
|
|
},
|
|
});
|
|
}}
|
|
/>
|
|
|
|
{/* HASH SETTINGS - Hashrequires lghash plugin */}
|
|
<ToggleControl
|
|
label={__('Enable Hash', 'lcp')}
|
|
checked={lgSettings.hash}
|
|
onChange={(value) => {
|
|
// Update autoplay
|
|
setAttributes({
|
|
lgSettings: {
|
|
...lgSettings,
|
|
hash: value, // Update the zoom setting
|
|
plugins: value
|
|
? [...lgSettings.plugins, 'lgHash'] // Add lgAutoplay plugin if enabled
|
|
: lgSettings.plugins.filter(plugin => plugin !== 'lgHash'), // Remove lgAutoplay plugin if disabled
|
|
},
|
|
});
|
|
}}
|
|
/>
|
|
{/* Hash requires a unique id in lgSettings.galleryId */}
|
|
{lgSettings.hash && (
|
|
<TextControl
|
|
label={__('Hash', 'lcp')}
|
|
value={lgSettings.hashGalleryId} // Use an appropriate value for this input
|
|
onChange={(newValue) => {
|
|
setAttributes({
|
|
lgSettings: {
|
|
...lgSettings,
|
|
galleryId: newValue, // Update the hashValue based on the text input
|
|
}
|
|
});
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
<ToggleControl
|
|
label={__('Zoom From Origin', 'lcp')}
|
|
checked={lgSettings.zoomFromOrigin}
|
|
onChange={(value) => {
|
|
// Update autoplay
|
|
setAttributes({
|
|
lgSettings: {
|
|
...lgSettings,
|
|
zoomFromOrigin: value, // Update the zoomFromOrigin setting
|
|
},
|
|
});
|
|
}}
|
|
/>
|
|
{/*Captions Settings */}
|
|
<ToggleControl
|
|
onChange={(isChecked) => setAttributes({ showCaptions: isChecked })}
|
|
checked={showCaptions}
|
|
label={__('Show Captions', metadata.textdomain)}
|
|
/>
|
|
|
|
{/*Download Controls - If download is true, show options to set download size */}
|
|
<ToggleControl
|
|
checked={lgSettings.download}
|
|
label={__('Allow Download', metadata.textdomain)}
|
|
onChange={(value) => {
|
|
// Update autoplay
|
|
setAttributes({
|
|
lgSettings: {
|
|
...lgSettings,
|
|
['download']: value,
|
|
},
|
|
});
|
|
}}
|
|
/>
|
|
{/* Options to set available download size */}
|
|
{download && (
|
|
<SelectControl
|
|
label={__('Download Size', metadata.textdomain)}
|
|
value={downloadSize}
|
|
onChange={(newValue) => setAttributes({ downloadSize: newValue })}
|
|
options={[
|
|
{ value: 'full', label: __('Full', metadata.textdomain) },
|
|
{ value: 'medium', label: __('Medium', metadata.textdomain) },
|
|
{ value: 'large', label: __('Large', metadata.textdomain) }
|
|
]}
|
|
/>
|
|
)}
|
|
{/* Add the SelectControl for Transition */}
|
|
<SelectControl
|
|
label="Transition Style"
|
|
value={lgSettings.mode || 'lg-slide'} // Default value is 'lg-slide'
|
|
options={lgTransitionStyles}
|
|
onChange={(value) => {
|
|
// Update autoplay
|
|
setAttributes({
|
|
lgSettings: {
|
|
...lgSettings,
|
|
['mode']: value,
|
|
}
|
|
});
|
|
}}
|
|
/>
|
|
{/* Add the TextControl for specific container to open the gallery in*/}
|
|
{/* If the initial layout is inline, the gallery opens in .lcp-gallery */}
|
|
{initialLayout != "inline"}{
|
|
<TextControl
|
|
label={__('Open gallery in container')}
|
|
value={lgSettings.container}
|
|
onChange={(newValue) => setAttributes({ lgSettings: {
|
|
...lgSettings, // spread the current lgSettings object
|
|
container: newValue // update only the container property
|
|
} })}
|
|
/>
|
|
}
|
|
</PanelBody>
|
|
</>
|
|
);
|
|
}
|
|
|
|
if (name === 'style') {
|
|
return (
|
|
<PanelBody title={__('Style Settings')}>
|
|
{initialLayout === 'inline' && (
|
|
<>
|
|
<UnitControl
|
|
label={__('Inline Height - Desktop')}
|
|
onChange={(value) => setAttributes({ inlineHeightLarge: value })}
|
|
value={inlineHeightLarge}
|
|
/>
|
|
<UnitControl
|
|
label={__('Inline Height - Tablet')}
|
|
onChange={(value) => setAttributes({ inlineHeightMedium: value })}
|
|
value={inlineHeightMedium}
|
|
/>
|
|
<UnitControl
|
|
label={__('Inline Height - Mobile')}
|
|
onChange={(value) => setAttributes({ inlineHeightSmall: value })}
|
|
value={inlineHeightSmall}
|
|
/>
|
|
</>
|
|
)}
|
|
{initialLayout === 'justified' && (
|
|
<>
|
|
<SelectControl
|
|
label={__('Last Row', metadata.textdomain)}
|
|
value={justifiedLastRow}
|
|
onChange={(newValue) => setAttributes({ justifiedLastRow: newValue })}
|
|
options={[
|
|
{ value: 'justify', label: __('Justify', metadata.textdomain) },
|
|
{ value: 'nojustify', label: __('Unjustified', metadata.textdomain) },
|
|
{ value: 'left', label: __('Align Left', metadata.textdomain) },
|
|
{ value: 'center', label: __('Align Center', metadata.textdomain) },
|
|
{ value: 'right', label: __('Align Right', metadata.textdomain) },
|
|
{ value: 'hide', label: __('Hide', metadata.textdomain) }
|
|
]}
|
|
/>
|
|
<UnitControl
|
|
label={__('Row Height - Desktop')}
|
|
onChange={(value) => setAttributes({ justifiedRowHeightLarge: value })}
|
|
value={justifiedRowHeightLarge}
|
|
/>
|
|
<UnitControl
|
|
label={__('Row Height - Tablet')}
|
|
onChange={(value) => setAttributes({ justifiedRowHeightMedium: value })}
|
|
value={justifiedRowHeightMedium}
|
|
/>
|
|
<UnitControl
|
|
label={__('Row Height - Mobile')}
|
|
onChange={(value) => setAttributes({ justifiedRowHeightSmall: value })}
|
|
value={justifiedRowHeightSmall}
|
|
/>
|
|
</>
|
|
)}
|
|
{initialLayout === 'grid' && (
|
|
<>
|
|
<NumberControl
|
|
label={__('Grid Columns - Desktop')}
|
|
onChange={(newValue) => setAttributes({ gridColumnsLarge: newValue })}
|
|
value={gridColumnsLarge}
|
|
isShiftStepEnabled
|
|
shiftStep={1}
|
|
min={1}
|
|
max={9}
|
|
/>
|
|
<NumberControl
|
|
label={__('Grid Columns - Tablet')}
|
|
onChange={(newValue) => setAttributes({ gridColumnsMedium: newValue })}
|
|
value={gridColumnsMedium}
|
|
isShiftStepEnabled
|
|
shiftStep={1}
|
|
min={1}
|
|
max={9}
|
|
/>
|
|
<NumberControl
|
|
label={__('Grid Columns - Mobile')}
|
|
onChange={(newValue) => setAttributes({ gridColumnsSmall: newValue })}
|
|
value={gridColumnsSmall}
|
|
isShiftStepEnabled
|
|
shiftStep={1}
|
|
min={1}
|
|
max={9}
|
|
/>
|
|
<NumberControl
|
|
label={__('Grid Gap')}
|
|
onChange={(newValue) => setAttributes({ gridGapLarge: newValue })}
|
|
value={gridGapLarge}
|
|
isShiftStepEnabled
|
|
shiftStep={1}
|
|
min={0}
|
|
/>
|
|
</>
|
|
)}
|
|
{thumbnail && (
|
|
<>
|
|
<BorderControl
|
|
label={__('Thumbnail Borders')}
|
|
value={borders}
|
|
onChange={handleBorderChange}
|
|
/>
|
|
<BorderControl
|
|
label={__('Thumbnail Borders - Selected')}
|
|
value={thumbnailsBordersSelected}
|
|
onChange={handleBorderSelectedChange}
|
|
/>
|
|
<SelectControl
|
|
label={__('Thumbnail Style', metadata.textdomain)}
|
|
value={thumbnailsStyle}
|
|
onChange={(newValue) => setAttributes({ thumbnailsStyle: newValue })}
|
|
options={[
|
|
{ value: '', label: __('None', metadata.textdomain) },
|
|
{ value: 'lg-thumbnail-blur', label: __('Blur', metadata.textdomain) },
|
|
{ value: 'lg-thumbnail-grayscale', label: __('Monochrome', metadata.textdomain) }
|
|
]}
|
|
/>
|
|
<SelectControl
|
|
label={__('Thumbnail Style - Selected', metadata.textdomain)}
|
|
value={thumbnailActiveStyle}
|
|
onChange={(newValue) => setAttributes({ thumbnailActiveStyle: newValue })}
|
|
options={[
|
|
{ value: '', label: __('None', metadata.textdomain) },
|
|
{ value: 'lg-thumbnail-active-grayscale', label: __('Monochrome', metadata.textdomain) },
|
|
{ value: 'lg-thumbnail-active-blur', label: __('Blur', metadata.textdomain) }
|
|
|
|
]}
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
|
|
</PanelBody>
|
|
);
|
|
}
|
|
}}
|
|
|
|
|
|
|
|
</TabPanel>
|
|
</InspectorControls>
|
|
</>
|
|
);
|
|
}
|
|
|