Events

Events

Editor

propertyChange

Called by a input object when the property changes, the editor will listen to this event to update the element when a property changes.

Inputs trigger this event using

new CustomEvent('propertyChange', { detail: {value, input, origEvent} });

vvveb.iframe.loaded

The editor triggers this event after the page/iframe is loaded and the the editor finished setting up the page.

The detail parameter is set to iframe document object.

new CustomEvent("vvveb.iframe.loaded", {detail: self.frameDoc}));

vvveb.getHtml.before

This event is triggered by the Vvveb.Builder.getHtml method before removing helpers and other processing.

new CustomEvent("vvveb.getHtml.before", {detail: document});

Example use by aos plugin to remove classes before page save

//clean aos classes on save
window.addEventListener("vvveb.getHtml.before", function(event) {
	let doc = event.detail;
	doc.querySelectorAll("[data-aos]").forEach(e => e.classList.remove("aos-animate", "aos-init"));
});

vvveb.getHtml.after

This event is triggered by the Vvveb.Builder.getHtml method finished processing the html.

new CustomEvent("vvveb.getHtml.after", {detail: doc}));

Example use by aos plugin to add back classes after page save

window.addEventListener("vvveb.getHtml.after", function(event) {
	let doc = event.detail;
	doc.querySelectorAll("[data-aos]").forEach(e => e.classList.add("aos-animate", "aos-init"));
});		 

vvveb.getHtml.filter

Similar with vvveb.getHtml.after but passes html code instead of document object, used for processing html code instead of manipulating the document.

new CustomEvent("vvveb.getHtml.filter", {detail: html}));

vvveb.ModalCodeEditor.save

Called by the code editor modal with detail set as the value of the editor content.

new CustomEvent("vvveb.ModalCodeEditor.save", {detail: value}));

vvveb.FileManager.deletePage

Called when a page is deleted from file manager, detail parameter is set to page object

Page object structure {name, title, url, file}

new CustomEvent("vvveb.FileManager.deletePage", {detail: page})

vvveb.FileManager.renamePage

Called when a page is renamed from file manager, detail parameter is set to page object and new file name.

Page object structure {name, title, url, file}

new CustomEvent("vvveb.FileManager.renamePage", {detail: {page, newfile}});

vvveb.FileManager.addPage

Called when a new page is added to file manager.

Detail parameter contains an array with page name and page object.

new CustomEvent("vvveb.FileManager.addPage", {detail: [name, data]})

vvveb.FileManager.loadPage

Called when a page is loaded.

Detail parameter contains the page object.

new CustomEvent("vvveb.FileManager.loadPage", {detail: page})

Undo Manager

vvveb.undo.add

Called when a undo action is registered, this happens on a change made to the page

Mutation object has the following structure

let mutation = {
	type: 'style', //style = css change, attributes = attribute change, characterData = text content change, move = element is moved on the page, childList = new node is added to page
	target: element, 
	attributeName: "color", 
	oldValue: "red", 
	newValue: "blue"
}

const event = new CustomEvent("vvveb.undo.add", {detail: mutation});

Example used by code editor to update the page html inside the code editor when a change is made to the page

Vvveb.Builder.frameBody.addEventListener("vvveb.undo.add", () => Vvveb.CodeEditor.setValue());

vvveb.undo.restore

Called when a undo action is restored/reverted

const event = new CustomEvent("vvveb.undo.restore", {detail: mutation});

Example used by code editor to update the page html inside the code editor when a change is made to the page

Vvveb.Builder.frameBody.addEventListener("vvveb.undo.restore", () => Vvveb.CodeEditor.setValue());