aDriv4 website!

Linux server192.web-hosting.com 4.18.0-513.18.1.lve.el8.x86_64 #1 SMP Thu Feb 22 12:55:50 UTC 2024 x86_64
LiteSpeed
198.54.114.198

File Name : edit.js

/**
 * WordPress dependencies
 */
import { __ } from "@wordpress/i18n";
import { RichText, InnerBlocks } from "@wordpress/block-editor";
import { useSelect } from "@wordpress/data";
import { useEffect, useState, useRef, memo, useId } from "@wordpress/element";

const { times } = lodash;
/**
 * Internal dependencies
 */
import {
    EBDisplayIcon,
    BlockProps,
    withBlockContext,
} from "@essential-blocks/controls";
import Inspector from "./inspector";
import Style from "./style";
import defaultAttributes from "./attributes";

const Edit = (props) => {
    const { attributes, setAttributes, clientId, isSelected } = props;
    const {
        blockId,
        tabTitles,
        isMediaOn,
        layout,
        classHook,
        tagName,
        isMinHeightAsTitle,
    } = attributes;

const tabWrapRef = useRef(null);
    const tabHeaderWrapRef = useRef(null);

const activeDefaultTabId = (
        tabTitles.find((item) => item.isDefault) || { id: "1" }
    ).id;

const [activeTabId, setActiveTabId] = useState(activeDefaultTabId);
    const [isClickTab, setIsClickTab] = useState(false);
    const [contentMinHeight, setContentMinHeight] = useState("auto");
    const renderId = useId();

const TEMPLATE = [
        [
            "essential-blocks/tab",
            {
                tabId: "1",
                tabParentId: blockId,
            },
        ],
        [
            "essential-blocks/tab",
            {
                tabId: "2",
                tabParentId: blockId,
            },
        ],
        [
            "essential-blocks/tab",
            {
                tabId: "3",
                tabParentId: blockId,
            },
        ],
    ];

const { innerBlocks } = useSelect(
        (select) =>
            select("core/block-editor").getBlocksByClientId(clientId)[0],
    );
    const innerBlocksRef = useRef(innerBlocks);
    //
    useEffect(() => {
        if (innerBlocks.length > innerBlocksRef.current.length) {
            innerBlocksRef.current = innerBlocks;
        }
        if (innerBlocks.length < innerBlocksRef.current.length) {
            const difference = innerBlocksRef.current.filter(
                (item1) =>
                    !innerBlocks.some(
                        (item2) => item2.clientId === item1.clientId,
                    ),
            );
            if (difference.length === 1) {
                const removedTabId = difference[0]?.attributes?.tabId;
                const updatedTitles = tabTitles.filter(
                    (item) => item.id !== removedTabId,
                );
                setAttributes({
                    tabTitles: updatedTitles,
                    tabChildCount: updatedTitles.length,
                });
            }
            innerBlocksRef.current = innerBlocks;
        }
    }, [innerBlocks]);

useEffect(() => {
        const tabsParentEl = (tabWrapRef || { current: false }).current;
        if (!tabsParentEl) return;

const allTabChildWraps = tabsParentEl.querySelectorAll(
            `.eb-tab-wrapper[data-tab-parent-id="${blockId}"]`
        );

if (allTabChildWraps.length === 0) return;

for (const tabWrapDiv of allTabChildWraps) {
            const tabId = tabWrapDiv.dataset.tabId;
            if (tabId === activeTabId) {
                tabWrapDiv.classList.add("active");
                tabWrapDiv.classList.remove("inactive");
            } else {
                tabWrapDiv.classList.add("inactive");
                tabWrapDiv.classList.remove("active");
            }
        }
    },[activeTabId, innerBlocks]);

const handleTabTitleClick = (id) => {
        setIsClickTab(true);
        setActiveTabId(`${id}`);
    };

const onTabTitleChange = (text, index) => {
        const tabTitlesCopy = tabTitles.map((item) => ({ ...item }));

const newTabTitles = tabTitlesCopy.map((item, i) => {
            if (i === index) {
                item.text = text;
            }

return item;
        });

setAttributes({ tabTitles: newTabTitles });
    };

//Inline Min Height
    useEffect(() => {
        if (
            layout === "vertical" &&
            isMinHeightAsTitle &&
            tabHeaderWrapRef.current
        ) {
            setContentMinHeight(tabHeaderWrapRef.current.offsetHeight + "px");
        } else {
            setContentMinHeight("auto");
        }
    }, [attributes]);

const enhancedProps = {
        ...props,
        blockPrefix: "eb-advanced-tabs",
        style: <Style {...props} isClickTab={isClickTab} />,
    };

return (
        <>
            {isSelected && (
                <Inspector
                    clientId={clientId}
                    attributes={attributes}
                    setAttributes={setAttributes}
                    handleTabTitleClick={handleTabTitleClick}
                />
            )}
            <BlockProps.Edit {...enhancedProps}>
                <div
                    className={`eb-parent-wrapper eb-parent-${blockId} ${classHook}`}
                >
                    <div
                        className={`${blockId} eb-advanced-tabs-wrapper ${layout}`}
                        ref={tabWrapRef}
                    >
                        <div className="eb-tabs-nav">
                            <ul
                                ref={tabHeaderWrapRef}
                                className="tabTitles"
                                data-tabs-ul-id={`${blockId}`}
                            >
                                {tabTitles.map((item, index) => {
                                    return (
                                        <li
                                            key={index}
                                            data-title-tab-id={item.id}
                                            onClick={(e) => {
                                                handleTabTitleClick(item.id);
                                            }}
                                            className={
                                                (activeTabId ||
                                                    activeDefaultTabId) ===
                                                item.id
                                                    ? "active"
                                                    : "inactive"
                                            }
                                        >
                                            {isMediaOn && (
                                                <>
                                                    {item.media === "icon" &&
                                                        item.icon && (
                                                            <EBDisplayIcon
                                                                icon={item.icon}
                                                                className="tabIcon"
                                                            />
                                                        )}
                                                    {item.media === "image" &&
                                                        item.imgUrl && (
                                                            <img
                                                                src={
                                                                    item.imgUrl
                                                                }
                                                            />
                                                        )}
                                                </>
                                            )}
                                            <RichText
                                                tagName={tagName}
                                                className="tab-title-text"
                                                placeholder="Tab Title"
                                                value={item.text}
                                                onChange={(text) =>
                                                    onTabTitleChange(
                                                        text,
                                                        index,
                                                    )
                                                }
                                            />
                                        </li>
                                    );
                                })}
                            </ul>
                        </div>
                        <div key={renderId} className={`eb-tabs-contents`}>
                            {/* Min Height Style if content min height equals to Heading */}
                            <style>
                                {`
                                    .eb-tabs-contents .eb-tab-wrapper {
                                        min-height: ${contentMinHeight};
                                    }
                                `}
                            </style>
                            <InnerBlocks
                                templateLock={'insert'}
                                template={TEMPLATE}
                                allowedBlocks={["essential-blocks/tab"]}
                            />
                        </div>
                    </div>
                </div>
            </BlockProps.Edit>
        </>
    );
};

export default memo(withBlockContext(defaultAttributes)(Edit));

Name	Type	Size	Owner/Group	Permission	Last Modified	Actions
.	dir	-	htllcxvj/htllcxvj	0755	2025-07-11 08:38:38
..	dir	-	htllcxvj/htllcxvj	0755	2025-07-11 08:38:38
constants	dir	-	htllcxvj/htllcxvj	0755	2025-07-11 08:38:38
attributes.js	text/x-java	8.18 KB	htllcxvj/htllcxvj	0644	2025-07-11 08:38:38
deprecated.js	text/x-java	21.25 KB	htllcxvj/htllcxvj	0644	2025-07-11 08:38:38
edit.js	text/x-java	9.41 KB	htllcxvj/htllcxvj	0644	2025-07-11 08:38:38
example.js	text/plain	158 B	htllcxvj/htllcxvj	0644	2025-07-11 08:38:38
frontend.js	text/plain	7.12 KB	htllcxvj/htllcxvj	0644	2025-07-11 08:38:38
helpers.js	text/x-java	4.06 KB	htllcxvj/htllcxvj	0644	2025-07-11 08:38:38
icon.svg	image/svg+xml	2.69 KB	htllcxvj/htllcxvj	0644	2025-07-11 08:38:38
index.js	text/x-java	753 B	htllcxvj/htllcxvj	0644	2025-07-11 08:38:38
inspector.js	text/x-java	43.87 KB	htllcxvj/htllcxvj	0644	2025-07-11 08:38:38
save.js	text/x-java	3.27 KB	htllcxvj/htllcxvj	0644	2025-07-11 08:38:38
style.js	text/x-java	28.4 KB	htllcxvj/htllcxvj	0644	2025-07-11 08:38:38
style.scss	text/plain	995 B	htllcxvj/htllcxvj	0644	2025-07-11 08:38:38

For more Private tool come to me!

https://t.me/aDriv4vz