How to make all header and footer sections non-editable?

[rcnetclues]

Hello all,

I am using the grape js page builder and want to configure all the header and footer sections that I have designed to be non-editable for users. Also, I want to restrict users to having only one section of header and footer be present on the page, they should only be able to remove and replace these two sections. Please let me know how can I achieve this.

Thanks in advance!

[gandhar-workik]

Hi @rcnetclues.

If you have built the header and footer sections as components, then in the model you can set editable: false and propogate this to the children
If they are not components, and they are just blocks, then you can add some key (e.g. myHF) on the block attributes which will help you in identifying it later when you are dropping on the canvas. For blocks, you can use the event block:drag:stop. With the event you get access to the block and the component model. Now, check if the key you set (e.g. myHF) is present in the block attributes. If yes, then you can set editable:false for the model and its children.

---

To allow only one header and one footer, you can set use a key-map. On addition of header set the header key to true, on removal make it false. Check the key every time,when adding the header or footer. If the key for that element is true, execute your code(like popover message etc.) .

---

Do check the API reference for the editor and the component. It will give you more insights in solving your problem.

[rcnetclues]

Hello @gandhar-workik,

Thank you for replying, I have already tried with your suggestion but, the problem is.. Setting the option editable: false while adding the block on canvas makes the block read-only that works fine! but after adding a non-editable header it makes all the blocks non-editable if we keep adding the block after the non-editable block.

Heres the code for reference:

function setComponent(e) {
e.set('removable', true);
e.set('draggable', false);
e.set('editable', false);
e.set('copyable', false);
e.set('resizable', false);
e.set('layerable', false);
e.set('selectable', false);
e.set('hoverable', false);
e.set('stylable', false);
e.set('highlightable', false);
}

editor.on('component:add', (e) => {
e.attributes.components.models.forEach(setComponent);
});

I want to know how to identify the header/footer block. I tried adding the condition on tagName but it didn't stop the propagation of non-editable on the rest of the section.

[artf]

This is a good start https://jsfiddle.net/artur_arseniev/w6mvq4bx/

[rcnetclues]

Thank you for replying,

This would work but I have a list of Headers and Footers which can be replaced in the canvas.

[Vac1911]

I was working on the same thing and came up with this solution:
https://codesandbox.io/s/grapespartial-gly7eq?file=/src/index.js

Try selecting a partial element and then going into the component traits tab.

[rcnetclues]

@Vac1911

Thank you for replying to this. I achieved it by adding the following to each and every HTML tag of the section:

data-gjs-highlightable="false"
data-gjs-draggable="false"
data-gjs-editable="false"
data-gjs-copyable="false"
data-gjs-resizable="false"
data-gjs-layerable="false"
data-gjs-selectable="false"
data-gjs-hoverable="false"
data-gjs-stylable="false"

Please note I had to upgrade to the latest grapes js version.