0
    I have a component which is using Laravel as backend and frontend is grapes.js integrated in react and the editor is saving the data in string format and Grapes.js editor is reading the string coming from backend . But the problem is there is splide.js library used in The editor which is saving events but I am not able to access the events at the frontend.

I am making a template using splide.js but the slides are not moving basically event is not getting trigging in view page I created a template for splide.js with the name blog.blade.php inside folder resources/view/ vendor/laravel-grapesjs/template. When I drag and drop that template to the page editor and save it and then view my updated page I can see images but they are not moving.

import Footer from "@/Components/Footer";
import Header from "@/Components/Header";
import { Head } from "@inertiajs/react";
import React, { useEffect, useState } from "react";
import ReactDOMServer from "react-dom/server";
import ShareLink from "@/Placeholders/ShareLink";
import GetBlog from "@/Placeholders/GetBlog";
import ThisIsPlaceholder from "@/Placeholders/ThisIsPlaceholder";
import Comments from "@/Placeholders/Comments";
import Modal from "@/Components/Modal";
import "../../../css/app.css";
import "../../../css/builder_style.css";

export default function ViewPage({ page, comments, auth }) {
    const { html, css } = page.gjs_data;
    const [showModal, setShowModal] = useState(false);
    const { title } = page;
    const plusIconStyles = {
        background: "#000",
        color: "#fff",
        fontSize: "13px",
        padding: "4px 5px",
        marginRight: "5px",
        borderRadius: "50px",
    };
    const options = {
        autoplay: true,
        interval: 3000,
        speed: 500,
        rewind: true,
        rewindSpeed: 1500,
        perPage: 4,
        pauseOnHover: false,
        pauseOnFocus: false,
        easing: "ease",
        gap: "1rem",
    };
    const closeModal = () => {
        setShowModal(false);
    };
    useEffect(() => {
        const pageView = document.getElementById("pageView");

        let customHtml = html.replace(
            /\[\[Share-Links\]\]/g,
            ReactDOMServer.renderToString(<ShareLink />)
        );
        // customHtml = customHtml.replace(
        //     /\[\[This-Is-Placeholder\]\]/g,
        //     ReactDOMServer.renderToString(<ThisIsPlaceholder />)
        // );
        customHtml = customHtml.replace(
            /\[\[Comments\]\]/g,
            ReactDOMServer.renderToString(<Comments comments={comments} />)
        );
        customHtml = customHtml.replace(/\[\[This-Is-Placeholder\]\]/g, "");
        customHtml = customHtml.replace(/\[\[Getblog\]\]/g, "");
        // customHtml = customHtml.replace(
        //     /\[\[Getblog\]\]/g,
        //     ReactDOMServer.renderToString(<GetBlog />)
        // );

        pageView.innerHTML = customHtml;

        const collection_popup = document.querySelectorAll(".collection_popup");
        for (let i = 0; i < collection_popup.length; i++) {
            collection_popup[i]?.addEventListener("click", () => {
                console.log("I'm clicked!!");
                setShowModal("saveImg");
            });
        }

        const commentpost = document.getElementById("commentpost");

        commentpost?.addEventListener("click", () => {
            const loggedIn = !!auth?.user;
            if (loggedIn) {
                const commentdata = document.getElementById("commentdata");
                const message = commentdata.value;
                const username = auth?.user?.name;

                if (message?.trim()?.length) {
                    const data = new FormData();
                    data.append("name", username);
                    data.append("message", message);
                    data.append("page_id", page.id);
                    fetch(window.location.origin + "/api/comment/create", {
                        method: "POST",
                        body: data,
                    })
                        .then((res) => res.json())
                        .then((res) => {
                            if (res.status === "success") {
                                const commentappnd =
                                    document.querySelector(".commentappnd");
                                commentappnd.innerHTML += `<div class="commt cmt-apnd mb-4">
                                <img src="https://hiddenscotland.org/newListing/listing-icons/profile-user.png" />
                                <h5> ${username} </h5>
                                <p> ${message} </p>
                            </div>`;
                                commentdata.value = "";
                            }
                        })
                        .catch((e) => console.log(e));
                }
            } else {
                alert("Yor are not login");
            }
        });
    }, []);

    return (
        <>
            <Head title={title} />
            <Header />

            <div id="pageView" />
            <style>{css}</style>

            {html?.includes("[[This-Is-Placeholder]]") && <ThisIsPlaceholder />}
            {html?.includes("[[Getblog]]") && <GetBlog />}

            <Footer />

            <div id="modalDiv">
                <Modal
                    id="saveImg"
                    show={showModal === "saveImg"}
                    maxWidth="md"
                    onClose={closeModal}
                >
                    <div className="flex justify-center p-4 flex-col  m-auto">
                        <div className="modal-content border-none">
                            {/* <!-- Modal Header --> */}
                            <div className="modal-header">
                                <h4 className="heading-text my-2 text-2xl">
                                    Add to a collection
                                </h4>
                                <button
                                    type="button"
                                    className="close"
                                    data-dismiss="modal"
                                    onClick={() => setShowModal(false)}
                                >
                                    &times;
                                </button>
                            </div>

                            {/* <!-- Modal body --> */}
                            <div className="modal-body">
                                <div className="new-collection-add py-5 text-center">
                                    <h4 className="mb-4 text-2xl">
                                        Start your first collection
                                    </h4>
                                    <button
                                        className="sv-btn"
                                        data-toggle="modal"
                                        data-target="#collectionImg"
                                        data-dismiss="modal"
                                        onClick={() =>
                                            setShowModal("collectionImg")
                                        }
                                    >
                                        Create Collection
                                    </button>
                                </div>
                                <div className="sv-shw-img-data">
                                    <div className="list-data">
                                        <div className="listsname"></div>
                                    </div>
                                </div>
                            </div>

                            {/* <!-- Modal footer --> */}
                            <div className="modal-footer justify-start">
                                <button
                                    className="nw-sv"
                                    data-toggle="modal"
                                    data-target="#collectionImg"
                                    data-dismiss="modal"
                                    onClick={() =>
                                        setShowModal("collectionImg")
                                    }
                                >
                                    <i
                                        className="fa fa-plus"
                                        style={plusIconStyles}
                                    ></i>
                                    New Collection
                                </button>
                                <button className="nw-sv-cllc">Save</button>
                            </div>
                        </div>
                    </div>
                </Modal>

                <Modal
                    show={showModal === "collectionImg"}
                    onClose={closeModal}
                    maxWidth="md"
                >
                    <div className="flex justify-center p-4 flex-col  m-auto">
                        <div
                            id="collectionImg"
                            className="modal-content border-none"
                        >
                            <button
                                type="button"
                                className="close"
                                data-dismiss="modal"
                                onClick={() => setShowModal(false)}
                            >
                                &times;
                            </button>
                            {/* <!-- Modal body --> */}
                            <div className="modal-body py-5 px-1">
                                <h4 className="mb-4 text-left text-2xl">
                                    Create new collection
                                </h4>
                                <div className="new-cllctn">
                                    <form method="post">
                                        <input
                                            type="text"
                                            placeholder="Create Collection"
                                            name="listName"
                                        />
                                        <button
                                            type="button"
                                            className="btn"
                                            id="create"
                                            data-dismiss="modal"
                                        >
                                            Create
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </Modal>

                <Modal
                    id="collectionImgUp"
                    show={showModal === "collectionImgUp"}
                    maxWidth="md"
                    onClose={closeModal}
                >
                    <div className="flex justify-center p-4 flex-col  m-auto">
                        <div className="modal-content border-none">
                            {/* <!-- Modal Header --> */}
                            <div className="modal-header">
                                <h4 className="heading-text my-2 text-2xl">
                                    Add to a collection
                                </h4>
                                <button
                                    type="button"
                                    style={{ top: 0 }}
                                    className="close"
                                    data-dismiss="modal"
                                    onClick={() => setShowModal(false)}
                                >
                                    &times;
                                </button>
                            </div>

                            {/* <!-- Modal body --> */}
                            <div className="modal-body py-5 text-2xl">
                                <p>Collection name here</p>
                            </div>

                            {/* <!-- Modal footer --> */}
                            <div className="modal-footer justify-start">
                                <button className="nw-sv">
                                    <i
                                        className="fa fa-plus"
                                        style={plusIconStyles}
                                    ></i>
                                    New Collection
                                </button>
                                <button className="sv-btn">Save</button>
                            </div>
                        </div>
                    </div>
                </Modal>
            </div>
            <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@2.4.6/dist/js/splide.min.js"></script>
            {document.addEventListener("DOMContentLoaded", function () {
                new Splide("#splide2", {
                    type: "loop",
                    perPage: 4,
                    focus: "center",
                    autoplay: true,
                    interval: 8000,
                    flickMaxPages: 3,
                    updateOnMove: true,
                    pagination: false,
                    padding: "10%",
                    throttle: 300,
                    breakpoints: {
                        1200: {
                            perPage: 4,
                            gap: 20,
                        },
                        1024: {
                            perPage: 3,
                            gap: 15,
                        },
                        991: {
                            perPage: 3,
                            gap: 15,
                        },
                        767: {
                            perPage: 2,
                            gap: 10,
                        },
                        600: {
                            perPage: 2,
                            gap: 10,
                        },
                        467: {
                            perPage: 1,
                            gap: 5,
                        },
                        360: {
                            perPage: 1,
                            gap: 1,
                        },
                    },
                }).mount();
            })}
        </>
    );
}

0 Answers0