How to show buttons in pure javascript

[JigarPrajpati]

Environments

• Framework name:
• Framework version:
• Moveable Component version:
• Testable Address(optional):

Description

https://daybrush.com/moveable/storybook/?path=/story/make-custom-able--editable-with-buttons

This is in react, we can't understand it please show us code in javascript plz. thank you

[daybrush]

@JigarPrajpati

You can use it by transpiling the react jsx code.

See https://codepen.io/daybrush/pen/JjXmbmb

Other frameworks / pure, vanilla demos are in preparation.

Let's try to make it possible to support the string method.

[JigarPrajpati]

Thank you so much for your support by heart, but this is for dimesion sample, i requried the button same like this AND

plz help me in pure javascript.

[daybrush]

@JigarPrajpati

1. this is result of jsx transpile.

    const Editable = ({
        name: "editable",
        props: {}, events: {},
        render(moveable, Renderer) {
            const rect = moveable.getRect();
            const { pos2 } = moveable.state;
            const EditableViewer = moveable.useCSS("div", `
            {
                position: absolute;
                left: 0px;
                top: 0px;
                will-change: transform;
                transform-origin: 0px 0px;
            }
            .moveable-button {
                width: 24px;
                height: 24px;
                margin-bottom: 4px;
                background: #4af;
                border-radius: 4px;
                appearance: none;
                border: 0;
                color: white;
                font-weight: bold;
            }
            `);
            return Renderer.createElement(EditableViewer, {
                className: "moveable-editable",
                style: {
                    transform: `translate(${pos2[0]}px, ${pos2[1]}px) rotate(${rect.rotation}deg) translate(10px)`,
                }
            }, [
                Renderer.createElement("button", {
                    onClick: () => {
                        alert("+");
                    }
                }, [
                    "+"
                ]),
                Renderer.createElement("button", {
                    onClick: () => {
                        alert("-");
                    }
                }, [
                    "-"
                ]),
            ]);
        }
    });

2. See https://codepen.io/daybrush/pen/JjXmbmb

[JigarPrajpati]

Dear sir i replaced the code you provided in codepan but it's not working sir. it's look like this. no button showing

[daybrush]

@JigarPrajpati

No problem with the code. Check out this demo.

https://codepen.io/daybrush/pen/OJZxrzm

[JigarPrajpati]

Thank you sooo much by heart my dear bro!

1. but i adding font awesome icon like trash, so how can i add that icon in button?

2. also can you let me know that these button how to show on top center?

[daybrush]

@JigarPrajpati

1. It can be used with syntax similar to React JSX. I used tagged-jsx and it would be easier to type <br/>. https://www.npmjs.com/package/tagged-jsx https://codepen.io/daybrush/pen/OJZxrzm?editors=1010

2. Use CSS.

[JigarPrajpati]

Dear sir i understand, and it works completely fine, but i will need it at top location like this

[daybrush]

@JigarPrajpati

You can get the position and size of the moveable through getRect.

The demo's editable position is on the right.

Calculate top, center through it.

https://daybrush.com/moveable/release/latest/doc/Moveable.html#.RectInfo