# About

![alt text](https://github.com/Catcrafts/Crafter.Web/blob/master/hello.png?raw=true)

Crafter.CppDOM is a C++ library that exposes the browser DOM api's to C++ WebAssembly.

# How to use
Please view the examples folder, this is a snippit from the HelloElement example:

```cpp
import Crafter.CppDOM;
using namespace Crafter::CppDOM;

int main(){
    HtmlElement body("body");
    body.SetInnerHTML("Hello World!");
}
```
You can also view the wiki for more detailed information.

It is highly recommended to use this with [Crafter.Build](https://forgejo.catcrafts.net/Catcrafts/Crafter.Build), but it is not strictly required if the same way of injecting the env is followed. The following instructions will be for Crafter.Build.

## Quickstart
create a ``project.json`` in an empty folder, open it in your preferred text editor.
Create a basic project file, that describes your web project.
```JSON
{
    "name": "main",
    "configurations": [
        {
            "name": "executable",
            "implementations": ["main"],
            "target": "wasm32-wasi",
            "debug" : true,
            "dependencies": [
                {
                    "path":"https://forgejo.catcrafts.net/Catcrafts/Crafter.CppDOM.git",
                    "configuration":"lib-debug"
                }
            ],
        }
    ]
}
```

Save and close the file, create a ``main.cpp``
```cpp
import Crafter.CppDOM;
using namespace Crafter::CppDOM;

int main(){
    HtmlElement body("body");
    body.SetInnerHTML("Hello World!");
}
```

Save and close, then run ``crafter-build build executable && caddy file-server --listen :8080 --root bin/executable``. if you have caddy installed, if not use your favorite static file server instead. Now you can open the browser at ``http://localhost:8080`` and ``Hello World!`` will appear in the browser.

This sample can also be viewed in the [HelloElement example](https://forgejo.catcrafts.net/Catcrafts/Crafter.CppDOM/src/branch/master/examples)

## New Event Handling Capabilities

The library now supports comprehensive event handling for modern web applications:

### Mouse Events
- `AddClickListener()` - Handles click events
- `AddMouseOverListener()` - Handles mouse over events
- `AddMouseOutListener()` - Handles mouse out events
- `AddMouseMoveListener()` - Handles mouse move events

### Focus Events
- `AddFocusListener()` - Handles focus events
- `AddBlurListener()` - Handles blur events

### Keyboard Events
- `AddKeyDownListener()` - Handles key down events
- `AddKeyUpListener()` - Handles key up events
- `AddKeyPressListener()` - Handles key press events

### Form Events
- `AddChangeListener()` - Handles change events
- `AddSubmitListener()` - Handles form submit events
- `AddInputListener()` - Handles input events

### Window Events
- `AddLoadListener()` - Handles page load events
- `AddErrorListener()` - Handles error events
- `AddResizeListener()` - Handles window resize events
- `AddScrollListener()` - Handles scroll events

### Context Menu Events
- `AddContextMenuListener()` - Handles context menu events

### Drag and Drop Events
- `AddDragStartListener()` - Handles drag start events
- `AddDragEndListener()` - Handles drag end events
- `AddDropListener()` - Handles drop events

Example usage:
```cpp
import Crafter.CppDOM;
using namespace Crafter::CppDOM;

int main(){
    HtmlElement button("myButton");
    HtmlElement input("textInput");
    
    // Handle click event
    button.AddClickListener([]() {
        // Handle button click
    });
    
    // Handle keyboard events
    input.AddKeyDownListener([]() {
        // Handle key press
    });
    
    // Handle input changes
    input.AddInputListener([]() {
        // Handle input changes
    });
}
```