This commit is contained in:
Jorijn van der Graaf 2025-11-10 20:25:50 +01:00
commit 2254ad53c5
11 changed files with 300 additions and 466 deletions

View file

@ -1,84 +0,0 @@
# Complete Event Handling Example
This example demonstrates comprehensive event handling capabilities in Crafter.CppDOM.
## Features
- Shows how to handle various types of DOM events using C++
- Demonstrates mouse, keyboard, form, and window events
- Illustrates proper event listener attachment and callback handling
- Shows real-time interaction with UI elements
## Event Types Demonstrated
### Mouse Events
- Click events
- Mouse over/out events
- Mouse move events
### Focus Events
- Focus and blur events
### Keyboard Events
- Key down, up, and press events
### Form Events
- Change, submit, and input events
### Window Events
- Load, error, resize, and scroll events
### Context Menu Events
- Context menu events
### Drag and Drop Events
- Drag start, end, and drop events
## Usage
```cpp
import Crafter.CppDOM;
using namespace Crafter::CppDOM;
int main(){
// Create UI elements
HtmlElement body("body");
body.SetInnerHTML("<h1>Complete Event Handling Demo</h1>"
"<button id='myButton'>Click Me!</button>"
"<input type='text' id='textInput' placeholder='Type something...'>"
"<p id='output'>Events will appear here</p>");
// Handle click event
HtmlElement button("myButton");
button.AddClickListener([]() {
HtmlElement output("output");
output.SetInnerHTML("Button was clicked!");
});
// Handle keyboard events
HtmlElement input("textInput");
input.AddInputListener([]() {
HtmlElement output("output");
output.SetInnerHTML("Input changed!");
});
// Handle form events
input.AddChangeListener([]() {
HtmlElement output("output");
output.SetInnerHTML("Form value changed!");
});
return 0;
}
```
## Building and Running
```bash
crafter-build build executable
run.sh
```
Then navigate to `http://localhost:8080/` in your browser.
If caddy is not installed, you can use your favorite static file server instead.

View file

@ -1,75 +0,0 @@
import Crafter.CppDOM;
using namespace Crafter;
HtmlElement* body = new HtmlElement("body", "<div id='container'><button id='myButton'>Click Me!</button><input type='text' id='textInput' placeholder='Type something'><div id='output'></div></div>");
HtmlElement* button = new HtmlElement("myButton");
HtmlElement* input = new HtmlElement("textInput");
HtmlElement* output = new HtmlElement("output");
int main(){
// Click event
button->AddClickListener([&]() {
output->SetInnerHTML("Button was clicked!");
});
// Mouse events
button->AddMouseOverListener([&]() {
output->SetInnerHTML("Mouse over button!");
});
button->AddMouseOutListener([&]() {
output->SetInnerHTML("Mouse left button!");
});
// Focus/Blur events
input->AddFocusListener([&]() {
output->SetInnerHTML("Input focused!");
});
input->AddBlurListener([&]() {
output->SetInnerHTML("Input blurred!");
});
// Keyboard events
input->AddKeyDownListener([&]() {
output->SetInnerHTML("Key pressed in input!");
});
input->AddKeyUpListener([&]() {
output->SetInnerHTML("Key released in input!");
});
// Input/change events
input->AddInputListener([&]() {
output->SetInnerHTML("Input value changed!");
});
input->AddChangeListener([&]() {
output->SetInnerHTML("Input value changed and lost focus!");
});
// Context menu
button->AddContextMenuListener([&]() {
output->SetInnerHTML("Context menu opened!");
});
// Scroll event on body
body->AddScrollListener([&]() {
output->SetInnerHTML("Page scrolled!");
});
// Resize event
body->AddResizeListener([&]() {
output->SetInnerHTML("Window resized!");
});
// Load event
body->AddLoadListener([&]() {
output->SetInnerHTML("Page loaded!");
});
// Error event
body->AddErrorListener([&]() {
output->SetInnerHTML("An error occurred!");
});
}

View file

@ -1,17 +0,0 @@
{
"name": "main",
"configurations": [
{
"name": "executable",
"implementations": ["main"],
"target": "wasm32-wasi",
"debug" : true,
"dependencies": [
{
"path":"../../project.json",
"configuration":"lib-debug"
}
]
}
]
}

View file

@ -1 +0,0 @@
caddy file-server --listen :8080 --root bin/executable

View file

@ -4,30 +4,13 @@ import std;
HtmlElement* body = new HtmlElement("body", "<div id='container'>"
"<h1>Enhanced Event Handling Demo</h1>"
"<button id='clickButton'>Click Me!</button>"
"<button id='mouseButton'>Mouse Events</button>"
"<input type='text' id='keyInput' placeholder='Press keys here'>"
"<input type='text' id='changeInput' placeholder='Change me'>"
"<div id='output'></div>"
"</div>");
HtmlElement* clickButton = new HtmlElement("clickButton");
HtmlElement* mouseButton = new HtmlElement("mouseButton");
HtmlElement* keyInput = new HtmlElement("keyInput");
HtmlElement* changeInput = new HtmlElement("changeInput");
HtmlElement* output = new HtmlElement("output");
int main(){
// Click event - simple handler
clickButton->AddClickListener([&]() {
output->SetInnerHTML("<p>Simple click event triggered!</p>");
});
// Mouse events with position data
// mouseButton->AddMouseMoveListener([&](MouseEvent event) {
// output->SetInnerHTML("<p>Mouse moved to: (" + std::to_string(event.clientX) + ", " + std::to_string(event.clientY) + ")</p>");
// });
// Keyboard events with rich data
keyInput->AddKeyDownListener([&](KeyboardEvent event) {
std::string keyInfo = std::format("<p>Key pressed: {}</p>", event.key);
if (event.ctrlKey) keyInfo += "<p>Ctrl key pressed</p>";
@ -35,29 +18,4 @@ int main(){
if (event.altKey) keyInfo += "<p>Alt key pressed</p>";
output->SetInnerHTML(keyInfo);
});
// // Input event with data
// keyInput->AddInputListener([&](InputEvent event) {
// output->SetInnerHTML(std::format("<p>Input data: {} (composing: {})</p>", event.data, event.isComposing));
// });
// Change event with value
changeInput->AddChangeListener([&](ChangeEvent event) {
output->SetInnerHTML("<p>Input value changed to: '" + event.value + "'</p>");
});
// Context menu with position
mouseButton->AddContextMenuListener([&](MouseEvent event) {
output->SetInnerHTML("<p>Context menu at: (" + std::to_string(event.clientX) + ", " + std::to_string(event.clientY) + ")</p>");
});
// Resize event
body->AddResizeListener([&](ResizeEvent event) {
output->SetInnerHTML("<p>Window resized to: " + std::to_string(event.width) + "x" + std::to_string(event.height) + "</p>");
});
// Scroll event
body->AddScrollListener([&](ScrollEvent event) {
output->SetInnerHTML("<p>Scrolled to: (" + std::to_string(event.scrollX) + ", " + std::to_string(event.scrollY) + ")</p>");
});
}