examples/content-editor-example.html

<html>
    <head>
        <title>Edit content example</title>
    </head>
    <body>
        <h1>Edit content example</h1>
        <span>Title:</span>
        <span id="title"></span>
        <br>
        <span>Description:</span>
        <span id="description"></span>
        <div id="editButtons"></div>
        <script>
            (async function() {
                const initExampleSdk = (await import("./initExampleSdk.js")).default;
                const sdk = await initExampleSdk({
                    settings: {
                    }
                });

                const data = {
                    title: "Default title",
                    description: "Default descript ion"
                };

                function updateData(newData) {
                    data.title = newData.title;
                    data.description = newData.description;

                    document.getElementById("title").innerHTML = data.title;
                    document.getElementById("description").innerHTML = data.description;
                }

                updateData(data);

                const contentEditorPlugin = await sdk.initContentEditorPlugin({
                    data,
                    settings: { 
                        background: "#abcdef",
                        showAnimation: "scale",
                        animationTime: 1000,
                    },
                    hooks: {
                        onResetButtonClicked: async () => {
                            return data;
                        },
                        onSaveButtonClicked: async (newData) => {
                            updateData(newData);
                            contentEditorPlugin.hide();
                        },
                        onClose: async () => {
                            contentEditorPlugin.hide(animationType, 300);
                        }
                    }
                },
                {});

                let animationType;

                const animationTypes = [{
                    label: "slideFromLeft",
                    args: { x: "-100vw", y: "0px", opacity: 0.5, scale: 1, time: 500 }
                },{
                    label: "slideFromTop",
                    args: { x: "0px", y: "-100vh", opacity: 0.5, scale: 1, time: 500 }
                },{
                    label: "slideFromBottom",
                    args: { x: "0px", y: "100vh", opacity: 0.5, scale: 1, time: 500 }
                },{
                    label: "slideFromRight",
                    args: { x: "100vw", y: "0px", opacity: 0.5, scale: 1, time: 500 }
                },{
                    label: "fade",
                    args: { x: "0px", y: "0px", opacity: 0, scale: 1, time: 500 }
                },{
                    label: "scale",
                    args: { x: "0vw", y: "0vh", opacity: 0.5, scale: 0, time: 500 }
                }]

                animationTypes.forEach((button)=>{
                    let btn = document.createElement("button");
                    btn.innerHTML = button.label;
                    btn.onclick = async () => {
                        contentEditorPlugin.showSplashScreen();
                        await contentEditorPlugin.methods.updateData(data);
                        contentEditorPlugin.show(button.args);
                        await new Promise(resolve => setTimeout(resolve, 400)); // simulate latency
                        contentEditorPlugin.hideSplashScreen();
                    }
                    document.getElementById("editButtons").appendChild(btn);
                });
            }());
        </script>
    </body>
</html>