67 lines
No EOL
2.6 KiB
C++
67 lines
No EOL
2.6 KiB
C++
import Crafter.CppDOM;
|
|
import std;
|
|
using namespace Crafter;
|
|
using namespace Crafter::CppDOMBindings;
|
|
|
|
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>
|
|
<a id="about" style="margin-right: 15px; text-decoration: none; color: blue; cursor: pointer;">About</a>
|
|
<a id="contact" style="margin-right: 15px; text-decoration: none; color: blue; cursor: pointer;">Contact</a>
|
|
</nav>
|
|
<div id="content" style="min-height: 200px; padding: 15px; border: 1px solid #ccc;"></div>
|
|
)");
|
|
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>");
|
|
} 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>");
|
|
} 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>");
|
|
}
|
|
}
|
|
|
|
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;
|
|
} |