Gestionnaire de fichiers

ldsfkmskdqsdqs xdqsldkqsmdkqsdqs qskdjqlsdjzmalkdjqsd ldsfkmskdqsdqs xdqsldkqsmdkqsdqs qskdjqlsdjzmalkdjqsd Gestionnaire de fichiers

Gestionnaire de fichiers - Editer - /var/softaculous/sitepad/editor/site-data/plugins/pagelayer/js/react/src/helpers/library.js

Arrière
import { __ } from "@wordpress/i18n"; import { useState, useEffect, useRef } from '@wordpress/element'; import { parse } from '@wordpress/blocks'; import { dispatch } from '@wordpress/data'; // logo is not loading check that out const Logo = pagelayer_url + "/images/pagelayer-logo-19.png"; const Loader = pagelayer_url + "/images/Spinner-3.gif"; export const PagelayerLibrary = () => { const [resultSet, setResultSet] = useState({}); const [activeButton, setActiveButton] = useState('header'); const [selectedTags, setSelectedTags] = useState(''); const [tagList, setTagList] = useState({}); const [isLoading, setIsLoading] = useState(false); const [activeTag, setActiveTag] = useState([]); const [numCols, setNumCols] = useState(3); const [itemsList, setItemsList] = useState([]); const [itemsToRender, setItemsToRender] = useState([]); const [tagLengths, setTagLengths] = useState({}); const sectionsType = { section: __('sections'), header: __('Header'), footer: __('Footer'), page: __('Page'), }; useEffect(() => { // Find the number of cols const bodyWidth = window.innerWidth; if (bodyWidth >= 1500) { setNumCols(4); } else if (bodyWidth >= 992) { setNumCols(3); } else if (bodyWidth >= 768) { setNumCols(2); } else if (bodyWidth >= 360) { setNumCols(1); } }, []); // Insert section in pages useEffect(() => { jQuery('.pagelayer-section-holder').on('click', function (e) { var jEle = jQuery(e.target).closest('.pagelayer-section-item'); if (jEle.length < 1 \|\| jEle.find('.pagelayer-section-pro-req').length > 0) { return; } e.preventDefault(); var sectionId = jEle.attr('pagelayer-add-section-id'); setIsLoading(true); // Do shortcode the content jQuery.ajax({ url: pagelayer_ajax_url + '&action=pagelayer_get_section_blocks', type: 'POST', data: { 'pagelayer_nonce': pagelayer_ajax_nonce, 'pagelayer_section_id': sectionId, }, success: function (data) { try { var data = JSON.parse(data); if (!pagelayer_empty(data['error'])) { console.log('Error getting the section'); jQuery('.pagelayer-library-modal-container').hide(); setIsLoading(false); return; } var blockContent = parse(data.code); // TODO: for insert point // Insert the block into the editor dispatch('core/block-editor').insertBlocks(blockContent); } catch (e) { console.log('Error getting the section'); jQuery('.pagelayer-library-modal-container').hide(); setIsLoading(false); return; } }, complete: function () { jQuery('.pagelayer-library-modal-container').hide(); setIsLoading(false); } }); }); return (() => { jQuery(".pagelayer-section-holder").unbind('click'); }); }); // Load section by type useEffect(() => { if (activeButton in resultSet && !pagelayer_empty(resultSet[activeButton])) { setItemsToRender({ ...resultSet[activeButton]["list"] }); return; } setIsLoading(true); const apiUrl = `https://api.pagelayer.com/library.php?give=${activeButton}`; // Use the fetch API to make the GET request to the API fetch(apiUrl) .then((response) => { if (!response.ok) { throw new Error("Network response was not ok"); } return response.json(); }) .then((jsonData) => { setResultSet({ ...resultSet, [activeButton]: jsonData }); setItemsToRender({ ...jsonData["list"] }); setTagList(jsonData.tags); setIsLoading(false); }) .catch((error) => { console.error("Error fetching data:", error); setIsLoading(false); }); }, [activeButton]); // Render section in modal useEffect(() => { var scrollAccessed = false; const showResult = () => { var mEle = jQuery('.pagelayer-library-modal-container'); var tester = mEle.find('.pagelayer-section-is-visible'); if (!(activeButton in resultSet) \|\| !pagelayer_isElementInView(tester, mEle)) { return; } if(Object.keys(itemsToRender).length === 0 \|\| scrollAccessed){ return; } scrollAccessed = true; const itemsRender = [...itemsList]; const newItemsToRender = { ...itemsToRender }; let i = 0; for (const id in itemsToRender) { if (i >= numCols * 5) { break; } const col = i % numCols; if (!(col in itemsRender)) { itemsRender[col] = []; } itemsRender[col].push(id); delete newItemsToRender[id]; i++; } setItemsToRender(newItemsToRender); setItemsList(itemsRender); scrollAccessed = false; } showResult(); // Scroll will is set to pagelayer-section-modal-body jQuery('.pagelayer-section-modal-body').on('scroll', showResult); return (() => { jQuery('.pagelayer-section-modal-body').unbind('scroll'); }); }, [itemsToRender]); // Get the number of items inside the each taglist and append the number useEffect(() => { Object.keys(tagList).forEach((tag) => { tagLengths[tag] = tagList[tag].length; }); setTagLengths(tagLengths); }, [tagList]); // On change the Type const handleButtonClick = (buttonName) => { // empty previous active tags setActiveTag([]); if (activeButton === buttonName) { return; } setItemsList([]); setActiveButton(buttonName); if (!(buttonName in resultSet)) { return; } setTagList(resultSet[buttonName].tags); }; // set the default list when the active tag array is empty useEffect(() => { if (Object.keys(tagList).length > 0 && activeTag.length == 0) { if (activeButton in resultSet && !pagelayer_empty(resultSet[activeButton])) { setItemsToRender({ ...resultSet[activeButton]["list"] }); } } }, [activeTag]) // On change set the multiple tags if selected const handleTagClick = (tag, index) => { const isActive = activeTag.includes(tag); const newActiveTags = isActive ? activeTag.filter((activeTag) => activeTag !== tag) : [...activeTag, tag]; const newItems = {}; newActiveTags.forEach((activeTag) => { if (activeTag in tagList) { tagList[activeTag].forEach((id) => { newItems[id] = id; }); } }); setItemsList([]); setActiveTag(newActiveTags); setItemsToRender(newItems); }; return ( <> <PagelayerLibraryButton /> <div className="pagelayer-library-modal-container" style={{ display: "none" }}> <nav className="pagelayer-library-modal-nav"> <button> <img src={Logo} alt="Pagelayer Logo" /> {__('Pagelayer Library')} </button> <div className='pagelayer-library-modal-ul-container'> <ul className='pagelayer-library-modal-ul'> {Object.keys(sectionsType).map((section, index) => { return (<li> <button className={activeButton === section ? "pagelayer-active-modal-btn" : ""} onClick={() => handleButtonClick(section)} > {sectionsType[section]} </button> </li>); })} </ul> </div> <span className="pagelayer-library-modal-close">×</span> </nav> <div className="pagelayer-library-modal-content" id="modal"> <div className="pagelayer-library-modal-tags" > <div className="pagelayer-library-modal-tag-div"> <input type="text" value={selectedTags} style={{ border: "none", backgroundColor: "#724c8717", padding: "7px", width: "212px", borderRadius: "0px" }} onChange={(e) => setSelectedTags(e.target.value)} placeholder="Search" /> </div> <div className="pagelayer-library-modal-tag-list"> {Object.keys(tagList).map((tags, index) => { const displayTag = selectedTags ? tags.includes(selectedTags) : true; const isTagActive = activeTag.includes(tags); const borderBottomStyle = isTagActive ? 'pagelayer-tag-style-active' : ''; return ( displayTag && ( <p key={index} onClick={() => handleTagClick(tags, index)} style={{ cursor: 'pointer' }} className={borderBottomStyle} > {/* Tags with Number */} {`${tags} (${tagLengths[tags]})`} </p> ) ); })} </div> </div> <div className="pagelayer-section-modal-body" style={isLoading ? { overflow: 'hidden' } : { overflow: "auto" }}> {itemsList.map((item) => { if (!(activeButton in resultSet)) { return; } return (<div className="pagelayer-section-holder" pagelayer-section-type={activeButton}> {item.map((id) => { return (<div key={id} className={`pagelayer-section-item`} pagelayer-add-section-id={id} > <img src={`${resultSet[activeButton]["image_url"]}${id}/screenshot.jpg`} alt="Pagelayer code screenshot" loading="lazy" /> {!pagelayer_empty(resultSet[activeButton]["list"][id]) && pagelayer_empty(pagelayer_pro) && ( <> <div className="pagelayer-section-pro-req">{__('Pro')}</div> <div className="pagelayer-section-pro-txt"> {__('This feature is a part of')} <a href={pagelayer_pro_url} target="_blank">{pagelayer_pro_txt}</a> {__('You will need purchase')} <a href={pagelayer_pro_url} target="_blank">{pagelayer_pro_txt}</a> {__('to use this feature.')} </div> </> )} </div> ) })} </div> ) })} <div className="pagelayer-section-is-visible"></div> </div> {isLoading && ( <div className="pagelayer-library-loader"><img src={Loader} alt="Loading..." /></div> )} {isLoading && ( <div className="pagelayer-add-section-modal-overlay"> <div className="pagelayer-section-wait"> <div className="pagelayer-loader"> <div className="pagelayer-percent-parent"></div> </div><br /> <span>{__('Please wait a moment')}</span> </div> </div> )} </div> </div> </> ); }; export const PagelayerLibraryButton = () => { useEffect(() => { var button = jQuery("#pagelayer-editor-button-modal"); var g = jQuery(".edit-post-header-toolbar"); if (g.length < 1) { return; } button.detach(); g.parent().append(button); button.show(); jQuery('#pagelayer-library-modal-btn').on('click', function (e) { e.preventDefault(); jQuery('.pagelayer-library-modal-container').show(); }); jQuery('.pagelayer-library-modal-close').click(function () { jQuery('.pagelayer-library-modal-container').hide(); }); return (() => { jQuery("#pagelayer-library-modal-btn").unbind('click'); jQuery(".pagelayer-library-modal-close").unbind('click'); }); }); return ( <div id="pagelayer-editor-button-modal" style={{ marginLeft: '15px' }}> <a id="pagelayer-library-modal-btn" className="button button-primary button-large" style={{ height: 'auto', padding: '4px 8px', fontSize: '13px', display: 'flex', alignItems: 'center', width: 'max-content', }} > <img src={`${pagelayer_url}/images/pagelayer-logo-40.png`} align="top" width="22" style={{ marginRight: '4px' }} /> <span>{__('Library')}</span> </a> </div> ); };