FM / components

/var/softaculous/sitepad/editor/site-data/plugins/pagelayer/js/react/src/components/

/var/softaculous/sitepad/editor/site-data/plugins/pagelayer/js/react/src/components

Name	Size	Mode	Actions
access.js	1293	0644	edit dl rm
box-shadow.js	5836	0644	edit dl rm
checkbox.js	653	0644	edit dl rm
color.js	5021	0644	edit dl rm
datetime.js	1000	0644	edit dl rm
dimension.js	1862	0644	edit dl rm
filter.js	2348	0644	edit dl rm
font_family.js	1566	0644	edit dl rm
gradient.js	4106	0644	edit dl rm
html-to-react.js	237	0644	edit dl rm
icon.js	5286	0644	edit dl rm
image.js	2314	0644	edit dl rm
label.js	1349	0644	edit dl rm
link.js	7565	0644	edit dl rm
media.js	1951	0644	edit dl rm
modal.js	1854	0644	edit dl rm
multi-image.js	3035	0644	edit dl rm
multiselect.js	2158	0644	edit dl rm
padding.js	2185	0644	edit dl rm
radio.js	771	0644	edit dl rm
rich_text.js	4303	0644	edit dl rm
screen-icon.js	1107	0644	edit dl rm
select.js	2233	0644	edit dl rm
setting-tabs-control.js	1993	0644	edit dl rm
slider.js	1507	0644	edit dl rm
spinner.js	846	0644	edit dl rm
text-shadow.js	7385	0644	edit dl rm
textarea.js	693	0644	edit dl rm
typography.js	17862	0644	edit dl rm

Edit: /var/softaculous/sitepad/editor/site-data/plugins/pagelayer/js/react/src/components/multi-image.js (3035B)

import { LabelControl } from './label';
import { __ } from '@wordpress/i18n';
import { MediaUpload } from '@wordpress/block-editor';
import { useState, useRef, useEffect } from '@wordpress/element';

export const MultiImageControl = (props) => {
	
	const { prop, label, value, setAttributes, attributes, allow = ['image'] } = props;
	const { name } = prop['c'];
	const tmpAtts = attributes?.tmpAtts ?  attributes.tmpAtts : {};
   
	const [imageIds, setImageIds] = useState([]);
	const [imageUrls, setImageUrls] = useState({});
   
	const onSelectImage = (images) => {
		
		var ids = [];
		var urls = {};
		var img_urls = {};
		var titles = {};
		var links = {};
		var captions = {};
		
		for(var i in images){
			
			const { id, url, title, link, caption, sizes} = images[i];
			var _id = 'i'+id;
			
			ids.push(id);
			urls[_id] = url;
			
			//get title
			titles[_id] = title;
			links[_id] = link;
			captions[_id] = caption;
			
			// Create a URL
			img_urls[_id] = {}
			
			for(var x in sizes){
				img_urls[_id][x] = sizes[x].url;
			}
		}
			
		setImageUrls(urls);
		setImageIds(ids);
		
		const tmp = {
			...tmpAtts,
			[name+'-urls']: urls,
			[name+'-all-urls']: img_urls,
			[name+'-all-titles']: titles,
			[name+'-all-links']: links,
			[name+'-all-captions']: captions,
		};
		
		setAttributes({
			[name]: ids,
			tmpAtts: tmp
		});
	}

useEffect(() => {
		
		var ids = [];
		
		// Any IDs ?
		if(!pagelayer_empty(prop.c['val'])){
			ids = prop.c['val']
			if(pagelayer_is_string(ids)){
				ids = prop.c['val'].split(',');
			}
			//console.log(ids);
			
			setImageIds(ids);
		}
				
		// Query the media library for media items with the specified post IDs.
		wp.media.query({ post__in: ids }).more().then(() => {
			
			var urls = {};
			for(var x in ids){
				var fetch_url = wp.media.attachment(ids[x]).get('url');
				urls['i'+x] = fetch_url;
			};
			
			setImageUrls(urls);
		});
	}, []);

const renderMediaUploader = (open) => {
		
		return (
			<div className="pagelayer-elp-multi_image-div">
				<center>
					<button 
						className="pagelayer-elp-button"
						onClick={() => open() }
					>
					{ __('Add Images') }
					</button>
				</center>
				<div className="pagelayer-elp-multi_image-thumbs" onClick={ () => open() } >
					{ imageUrls && Object.keys(imageUrls).map((imageName) => (
						<div 
							className="pagelayer-elp-multi_image-thumb"
							style={{
								backgroundImage: `url(${imageUrls[imageName]})`
							}}
						></div>
					))}
				</div>
			</div>
		);
	}
	return (
		<div className="components-base-control pagelayer-base-control">
			<LabelControl {...props} />
			<MediaUpload
				title="Select Image"
				onSelect={onSelectImage}
				allowedTypes={allow}
				value={imageIds}
				multiple={true}
				gallery={true}
				addToGallery={true}
				autoOpen={true}
				render={({ open }) => renderMediaUploader(open)}
			/>
		</div>
	);
}

import { LabelControl } from './label'; import { __ } from '@wordpress/i18n'; import { MediaUpload } from '@wordpress/block-editor'; import { useState, useRef, useEffect } from '@wordpress/element'; export const MultiImageControl = (props) => { const { prop, label, value, setAttributes, attributes, allow = ['image'] } = props; const { name } = prop['c']; const tmpAtts = attributes?.tmpAtts ? attributes.tmpAtts : {}; const [imageIds, setImageIds] = useState([]); const [imageUrls, setImageUrls] = useState({}); const onSelectImage = (images) => { var ids = []; var urls = {}; var img_urls = {}; var titles = {}; var links = {}; var captions = {}; for(var i in images){ const { id, url, title, link, caption, sizes} = images[i]; var _id = 'i'+id; ids.push(id); urls[_id] = url; //get title titles[_id] = title; links[_id] = link; captions[_id] = caption; // Create a URL img_urls[_id] = {} for(var x in sizes){ img_urls[_id][x] = sizes[x].url; } } setImageUrls(urls); setImageIds(ids); const tmp = { ...tmpAtts, [name+'-urls']: urls, [name+'-all-urls']: img_urls, [name+'-all-titles']: titles, [name+'-all-links']: links, [name+'-all-captions']: captions, }; setAttributes({ [name]: ids, tmpAtts: tmp }); } useEffect(() => { var ids = []; // Any IDs ? if(!pagelayer_empty(prop.c['val'])){ ids = prop.c['val'] if(pagelayer_is_string(ids)){ ids = prop.c['val'].split(','); } //console.log(ids); setImageIds(ids); } // Query the media library for media items with the specified post IDs. wp.media.query({ post__in: ids }).more().then(() => { var urls = {}; for(var x in ids){ var fetch_url = wp.media.attachment(ids[x]).get('url'); urls['i'+x] = fetch_url; }; setImageUrls(urls); }); }, []); const renderMediaUploader = (open) => { return (

open() } > { imageUrls && Object.keys(imageUrls).map((imageName) => (

))}

); } return (

renderMediaUploader(open)} />

); }