Programmatically open 'add-section-box'

[orionseye]

I implemented VvvebJS as content editor only, following some of proposed approaches here: #325
I also disabled the left panel, to allow user to drag sections, features etc into the editor.
Instead, I moved them to the modal ('add-section-box').
Kindly assist in how I can programmatically open 'add-section-box' while my canvas is empty of content.
My purpose is to have an indication "no content yet, start adding...." and on click, open the modal and insert your first element.

However, my above approach makes even that indicator an editable element.
Any thoughts are highly appreciated.

[hayden-t]

You could add a button to the top toolbar ? that would be the easiest, and then always available, it could be like 'add element selected element'
or you could have a button/modal part of the editor that is positioned over the content area, and only shows when the editable area is empty

[orionseye]

Thx Hayden,

I have done something similar like this:
CONDITIONAL LOADING OF HTML

<?php if ($hasContent): ?>

    // Has content - init normally
    Vvveb.Builder.init('_temp/temp_<?=$serviceID?>.html', function() {
        Vvveb.TreeList.loadComponents();
    });
	
<?php else: ?>

    // Empty state - init builder but with modal shown. 
    Vvveb.Builder.init('about:blank', function() {
        Vvveb.TreeList.loadComponents();
    });
	
<?php endif; ?>

// Handle empty state by adding specific classes to body
if ($('body').hasClass('no-content')) {
    
	// hide the modal's close button when no content
	$('#close-section-btn').hide();
	
// Select body as insertion target
    setTimeout(function() {
        Vvveb.Builder.selectNode(window.FrameDocument.body);
        // Set inside mode and show modal
        document.querySelector('#add-section-insert-mode-inside').checked = true;
        $('#add-section-box').show();
        // Disable close button until content added
        $('#close-section-btn').prop("disabled", true);
    }, 500);		
}


// WHEN NO CONTENT: Listen to first element gets inserted into the builder
// See my CustomEvent in builder.js aprox. line 1923 
document.addEventListener('vvveb.component.added', function(e) {
	if (document.body.classList.contains('no-content')) {
		document.body.classList.remove('no-content');
		document.querySelector('#add-section-insert-mode-after').checked = true;
		Vvveb.Builder.selectNode(window.FrameDocument.body);
		document.getElementById('close-section-btn').style.display = 'block'; // show the modal's close button again
	}
});

// Watch for deletions in the iframe body
// When all elements are deleted (body empty), revert to empty state.
// We use my CustomEvent('vvveb.component.removed')) -> builder.js aprox. line 1848
// - Show no-content class
// - Hide close button
// - Select body as insertion target
// - Set insert mode to 'inside'
// - Reopen the modal so user can add new content
document.addEventListener('vvveb.component.removed', function() {
	setTimeout(function() {
		if (window.FrameDocument.body.children.length === 0) {
			document.body.classList.add('no-content');
			document.getElementById('close-section-btn').style.display = 'none';
			
			Vvveb.Builder.selectNode(window.FrameDocument.body);
			
			// Force both radios
			document.querySelector('#add-section-insert-mode-after').checked = false;
			document.querySelector('#add-section-insert-mode-inside').checked = true;
			
			$('#add-section-box').show();
		}
	}, 50);
});

This one works perfect when I add ONE element and remove it.. but fails with multiple elements in canvas.
When removing the last one of multiple, the modal shows.. all perfect, BUT INSERTION FAILS.
I guess that selectNode() only updates the visual selection and self.selectedEl, but the modal uses a separate variable addSectionElement that only gets set when you click the '+' button

I am not sure, that's why I asked, that VvvebJs 'assumes' user to open the left panel and drag some elements into canvas.
But not the edge cases, where side panels are disabled and all should happen via modal, like I prefer.
I thought that there is a fucntion which would handle empty state, but found none :(

[hayden-t]

i cant really debug your code due to time, but maybe i can suggest a different approach, do you really want the user the create every page from scratch ? wouldnt there be a common header and footer always present on every page like most sites ?

[orionseye]

I am implementing tVvvebJS into another app, where i just want everything between body only and then store into DB... fetching on front into a template.
Anyway, my fix was following to addSectionBox.addEventListener("click", function(event) :

if (!addSectionElement || !(addSectionElement instanceof Node) || !window.FrameDocument.body.contains(addSectionElement)) {
					addSectionElement = window.FrameDocument.body;

The app 'self heals' if last inserted node was not found, when trying to insert new one.
Happens only on multi elements, cause with one, anyway body was set as selected node.
With above fix, if the previously selected element was deleted or no longer exists in DOM,
-> fall back to body as the insertion point to prevent errors and ensure
-> users can always add content even after deleting all elements.
-> If addSectionElement is invalid or not in DOM, use body

At least it works as expected :)
PS, didn't want to debug my code.. I thought it might help someone in the future.

Hey: Great work by the way!

[hayden-t]

This isnt my project, but i have submitted many PR on this topic, i thought it might help you, see i feel the idea of this editor is to see the page as if its being shown, as if editing it via the front end.

If you do it your way, you will have an admin head and a front end head that the content is presented under , and this introduces added complexity and possibility for differences.

Ideally i believe you should be loading the page content into the editor from the front end as its actually being shown, under its real head. As you can point the editor to a front end page, it doesnt have to live in the admin.

Then when editing is done, you just save the content to the backend, and that is then what gets loaded by the front end, its a neat solution, but a little hard to get your head around.

To support this workflow, i submitted many PR to assist in attaching the editor to an element within the page rather than the body itself, this way you can have the real front end header and footer present and operational while editing your content, but its not actually editable.

[hayden-t]

Actually I did it a different way again, as sometimes you have front end pages disabled from public view, not finished/released, so i have a front end template that is always accessible, like a blank page with header/footer and editable area in the middle, this is loaded by the editor, and then js injects the content from the db into this editable area.

[orionseye]

I understand what you mean, and thank you for your input and insight. But compared to other solutions, VvvebJs does now work as expected with just few lines of changes/additions to builder.js.
the rest can bee css, some js.. done.
I love it, actually it was less than one day work to achieve what I needed. Just was wondering if I could use already present logic.
And still not sure :)

Have a great weekend!

[hayden-t]

you will just have to make sure you get the body content and not the whole html when saving