lifecycle update

This commit is contained in:
Jorijn van der Graaf 2025-11-14 18:40:13 +01:00
commit 0b7a43efbd
14 changed files with 950 additions and 490 deletions

View file

@ -3,7 +3,7 @@ import std;
using namespace Crafter;
using namespace Crafter::CppDOMBindings;
HtmlElementView* body = new HtmlElementView("body", R"(
HtmlElementPtr body("body", R"(
<nav>
<h2 style="margin-bottom: 20px; padding: 10px; background-color: #f0f0f0;">SPA Navigation Demo</h2>
<a id="home" style="margin-right: 15px; text-decoration: none; color: blue; cursor: pointer;">Home</a>
@ -12,36 +12,36 @@ HtmlElementView* body = new HtmlElementView("body", R"(
</nav>
<div id="content" style="min-height: 200px; padding: 15px; border: 1px solid #ccc;"></div>
)");
HtmlElementView* home = new HtmlElementView("home");
HtmlElementView* about = new HtmlElementView("about");
HtmlElementView* contact = new HtmlElementView("contact");
HtmlElementView* content = new HtmlElementView("content");
HtmlElementPtr home("home");
HtmlElementPtr about("about");
HtmlElementPtr contact("contact");
HtmlElementPtr content("content");
void UpdateContent(const std::string_view page) {
if (page == "home") {
content->SetInnerHTML("<h3>Home Page</h3><p>Welcome to the Home page of our Single Page Application!</p><p>This demo shows how to use the new history.pushState and popstate event handling features.</p>");
content.SetInnerHTML("<h3>Home Page</h3><p>Welcome to the Home page of our Single Page Application!</p><p>This demo shows how to use the new history.pushState and popstate event handling features.</p>");
} else if (page == "about") {
content->SetInnerHTML("<h3>About Page</h3><p>This is the About page.</p><p>Notice how the URL changes without reloading the page.</p>");
content.SetInnerHTML("<h3>About Page</h3><p>This is the About page.</p><p>Notice how the URL changes without reloading the page.</p>");
} else if (page == "contact") {
content->SetInnerHTML("<h3>Contact Page</h3><p>This is the Contact page.</p><p>You can navigate back and forth using the browser's back/forward buttons.</p>");
content.SetInnerHTML("<h3>Contact Page</h3><p>This is the Contact page.</p><p>You can navigate back and forth using the browser's back/forward buttons.</p>");
}
}
int main() {
body->SetStyle("font-family: Arial, sans-serif; margin: 0; padding: 20px;");
body.SetStyle("font-family: Arial, sans-serif; margin: 0; padding: 20px;");
// Add click handlers for navigation
home->AddClickListener([](Crafter::MouseEvent e) {
home.AddClickListener([](Crafter::MouseEvent e) {
PushState("{\"page\": \"home\"}", "Home", "/");
UpdateContent("home");
});
about->AddClickListener([](Crafter::MouseEvent e) {
about.AddClickListener([](Crafter::MouseEvent e) {
PushState("{\"page\": \"about\"}", "About", "/about");
UpdateContent("about");
});
contact->AddClickListener([](Crafter::MouseEvent e) {
contact.AddClickListener([](Crafter::MouseEvent e) {
PushState("{\"page\": \"contact\"}", "Contact", "/contact");
UpdateContent("contact");
});