\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/blocks/

Viewing File: image_slider.js

import { __ } from '@wordpress/i18n';
import { useState, useEffect, useRef } from '@wordpress/element';
import { useBlockProps, RichText } from '@wordpress/block-editor';

export const RenderImageSliderBlock = (props) =>{
	
	const { _props, tag, data } = props;
	const { setAttributes } = _props;
	const { atts : attributes, id } = data;
	const [imgData, setImgData] = useState({});
		
	useEffect(() => {		
		
		var ids = attributes?.ids ? attributes?.ids : [];
		
		// TODO: preload all image urls form
		// Query the media library for media items with the specified post IDs.
		wp.media.query({ post__in: ids }).more().then(function () {
			
			var urls = {};
			var titles = {};
			var img_urls = {};
			
			for(var x in ids){
				var attachment = wp.media.attachment(ids[x]);
				var i = 'i'+ids[x];
				
				urls[i] = attachment.get('url');
				titles[i] = attachment.get('title');
				
				// Create a URL
				img_urls[i] = {}
				
				for(var x in attachment.get('sizes')){
					img_urls[i][x] = attachment.attributes.sizes[x].url;
				}
			}
			
			setImgData({
				urls: urls,
				allUrls: img_urls,
				allTitles: titles,
			});
		});
		
	}, [attributes]);
	
	useEffect(() => {
		
		var jEle = pagelayer_query(`.p-${id}`);
		
		if(pagelayer_empty(imgData)){
			return;
		}
		
		pagelayer_pl_image_slider(jEle);

	}, [attributes, imgData]);
	
	const renderImageList = () => {
		
		if (
			pagelayer_empty(imgData) ||
			pagelayer_empty(imgData.urls)
		) {
			return (<h4 style={{ textAlign: 'center' }}>
				{ __('Please select Images from left side Widget properties.') }
			</h4>);
		}
		
		// Destroy slider if already setuped
		var jEle = pagelayer_query(`.p-${id}`);
		pagelayer_owl_destroy(jEle, '.pagelayer-image-slider-ul');
			
		// The URLs
		const img_urls = imgData.urls;
		const all_urls = imgData.allUrls;
		const img_title = imgData.allTitles;

		const imageList = [];

		const is_link =	'link_type' in attributes && !pagelayer_empty(attributes['link_type']);

		for (const x in img_urls) {
			// Use the default URL first
			let url = img_urls[x];

			// But if we have a custom size, use that
			if (
				attributes['size'] !== 'custom' &&
				x in all_urls &&
				attributes['size'] in all_urls[x]
			) {
				url = all_urls[x][attributes['size']];
			}

			const listItem = (
				<li className="pagelayer-slider-item" key={x}>
					{is_link ? (
						<a
							href={
							attributes['link_type'] === 'media_file'
							? !pagelayer_empty(img_urls[x])
							  ? img_urls[x]
							  : url
							: attributes['link'] || ''
							}
							className="pagelayer-link-sel"
						>
							<img
								className="pagelayer-img"
								src={url}
								title={img_title[x]}
								alt={img_title[x]}
							/>
						</a>
					) : (
					<img
						className="pagelayer-img"
						src={url}
						title={img_title[x]}
						alt={img_title[x]}
					/>
					)}
				</li>
			);

			imageList.push(listItem);
		}
		
		// Render the list of images
		return (<>
			{ imageList }
			</>
		);
	}
	
	var ulAttrs = {};
	
	// Which arrows to show
	if('controls' in attributes){
		if(attributes.controls == 'arrows' || attributes.controls == 'none'){
			ulAttrs['data-pager'] = "false";
		}
		
		if(attributes.controls == 'pager' || attributes.controls == 'none'){
			ulAttrs['data-controls'] = "false";
		}
	}
	
	return (
		<>
			<div className="pagelayer-image-slider-div">
				<ul
					className="pagelayer-image-slider-ul pagelayer-owl-holder pagelayer-owl-carousel pagelayer-owl-theme"
					{...ulAttrs}
				>
				{ renderImageList() }
				</ul>
			</div>
		</>
	);
}