\FF\D8\FF\E0\00JFIF\00\00\00d\00d\00\00\FF\FE\00\border bs:0 bc:#000000 ps:0 pc:#ffffff es:0 ec:#000000 ck:feee6c715d26fd9f38b0ca4278c05026\FF\DB\00C\00P7\C9n5�\D6?\BD�\9Ds\EBp\9F[`8m\B7)o\B5\E8\E6I\99\FE3]]A2\BA\8Cw\D6E\93\\DEv\C8\009\F2\F1NI?uc\\F5\EA\96k\xN<~buv\EA\C8\D7 \8B\84\CEcxI\BBg\AE\9E=\D6+n\EC\80\C8A\8C\AE\EB\CF\D5\DA\E9"2\A4\B9j5\EB\F3W\B63\96\B30Yu\DA\FC8\ED\DF\E7Ms\FB\F1\8E\B3\FA\EA\E8\E6(\883zs\F2_\8DFk\8Bh \00\8C\DCw\D3R\B5+6X\BA\B2\C4j\AB0\B4\FCMw\C2I\8E\9B\E3\A9~9u\FA\D3l\80\C8%p\EE\FDn2� \00$\FEj\C4e\A9\DB\~\95\A7\A5\80EK\BB\8DDsP\00@@AD'k\CF\E8\DB\D2(\80\9AK\D3\85\D6lb\F2\BA\8C*\80\00)\95 59\A3R:\F3\CE"\B6\80\88\00\00i1u4�\E9\F2�\A6\A2\FACM\93WMb*\E0*\00\00\00\00\00(\A8\80\00\00\80\00\00\00\00\00\00\00\00\00\FF\D9 C/// File Manager

File Manager

Path: /usr/local/sitepad/editor/site-data/plugins/pagelayer/js/react/src/components/

Viewing File: multi-image.js

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>
	);
}