import Crafter.CppDOM; import std; using namespace Crafter; using namespace Crafter::CppDOMBindings; HtmlElementPtr body("body", R"(
)"); HtmlElementPtr home("home"); HtmlElementPtr about("about"); HtmlElementPtr contact("contact"); HtmlElementPtr content("content"); void UpdateContent(const std::string_view page) { if (page == "home") { content.SetInnerHTML("

Home Page

Welcome to the Home page of our Single Page Application!

This demo shows how to use the new history.pushState and popstate event handling features.

"); } else if (page == "about") { content.SetInnerHTML("

About Page

This is the About page.

Notice how the URL changes without reloading the page.

"); } else if (page == "contact") { content.SetInnerHTML("

Contact Page

This is the Contact page.

You can navigate back and forth using the browser's back/forward buttons.

"); } } int main() { body.SetStyle("font-family: Arial, sans-serif; margin: 0; padding: 20px;"); // Add click handlers for navigation home.AddClickListener([](Crafter::MouseEvent e) { PushState("{\"page\": \"home\"}", "Home", "/"); UpdateContent("home"); }); about.AddClickListener([](Crafter::MouseEvent e) { PushState("{\"page\": \"about\"}", "About", "/about"); UpdateContent("about"); }); contact.AddClickListener([](Crafter::MouseEvent e) { PushState("{\"page\": \"contact\"}", "Contact", "/contact"); UpdateContent("contact"); }); // Add popstate listener to handle browser back/forward buttons auto popStateId = AddPopStateListener([]() { std::string path = GetPathNameString(); if (path == "/") { UpdateContent("home"); } else if (path == "/about") { UpdateContent("about"); } else if (path == "/contact") { UpdateContent("contact"); } else { UpdateContent("home"); } }); // Initialize with home page UpdateContent("home"); return 0; }