189 lines
7.8 KiB
C++
189 lines
7.8 KiB
C++
|
|
/*
|
||
|
|
* Enhanced Event Handling Demo
|
||
|
|
* This example showcases all available event types in Crafter.CppDOM
|
||
|
|
*/
|
||
|
|
|
||
|
|
import Crafter.CppDOM;
|
||
|
|
using namespace Crafter;
|
||
|
|
import std;
|
||
|
|
|
||
|
|
// Create the main container element
|
||
|
|
HtmlElement* body = new HtmlElement("body", "<div id='container'>"
|
||
|
|
"<h1>Enhanced Event Handling Demo</h1>"
|
||
|
|
"<div id='events-container'>"
|
||
|
|
"<div class='event-section'>"
|
||
|
|
"<h2>Mouse Events</h2>"
|
||
|
|
"<button id='mouseButton'>Click Me!</button>"
|
||
|
|
"<div id='mouseOutput'></div>"
|
||
|
|
"</div>"
|
||
|
|
"<div class='event-section'>"
|
||
|
|
"<h2>Keyboard Events</h2>"
|
||
|
|
"<input type='text' id='keyInput' placeholder='Press keys here'>"
|
||
|
|
"<div id='keyOutput'></div>"
|
||
|
|
"</div>"
|
||
|
|
"<div class='event-section'>"
|
||
|
|
"<h2>Focus Events</h2>"
|
||
|
|
"<input type='text' id='focusInput' placeholder='Focus me!'>"
|
||
|
|
"<div id='focusOutput'></div>"
|
||
|
|
"</div>"
|
||
|
|
"<div class='event-section'>"
|
||
|
|
"<h2>Form Events</h2>"
|
||
|
|
"<input type='text' id='formInput' placeholder='Type something'>"
|
||
|
|
"<select id='formSelect'>"
|
||
|
|
"<option value='option1'>Option 1</option>"
|
||
|
|
"<option value='option2'>Option 2</option>"
|
||
|
|
"<option value='option3'>Option 3</option>"
|
||
|
|
"</select>"
|
||
|
|
"<div id='formOutput'></div>"
|
||
|
|
"</div>"
|
||
|
|
"<div class='event-section'>"
|
||
|
|
"<h2>Window Events</h2>"
|
||
|
|
"<div id='windowOutput'></div>"
|
||
|
|
"</div>"
|
||
|
|
"<div class='event-section'>"
|
||
|
|
"<h2>Drag & Drop Events</h2>"
|
||
|
|
"<div id='dragSource' draggable='true'>Drag Me!</div>"
|
||
|
|
"<div id='dropTarget'>Drop Here</div>"
|
||
|
|
"<div id='dragOutput'></div>"
|
||
|
|
"</div>"
|
||
|
|
"<div class='event-section'>"
|
||
|
|
"<h2>Wheel Events</h2>"
|
||
|
|
"<div id='wheelContainer'>Scroll here</div>"
|
||
|
|
"<div id='wheelOutput'></div>"
|
||
|
|
"</div>"
|
||
|
|
"</div>"
|
||
|
|
"</div>");
|
||
|
|
|
||
|
|
// Get references to elements
|
||
|
|
HtmlElement* mouseButton = new HtmlElement("mouseButton");
|
||
|
|
HtmlElement* mouseOutput = new HtmlElement("mouseOutput");
|
||
|
|
HtmlElement* keyInput = new HtmlElement("keyInput");
|
||
|
|
HtmlElement* keyOutput = new HtmlElement("keyOutput");
|
||
|
|
HtmlElement* focusInput = new HtmlElement("focusInput");
|
||
|
|
HtmlElement* focusOutput = new HtmlElement("focusOutput");
|
||
|
|
HtmlElement* formInput = new HtmlElement("formInput");
|
||
|
|
HtmlElement* formSelect = new HtmlElement("formSelect");
|
||
|
|
HtmlElement* formOutput = new HtmlElement("formOutput");
|
||
|
|
HtmlElement* windowOutput = new HtmlElement("windowOutput");
|
||
|
|
HtmlElement* dragSource = new HtmlElement("dragSource");
|
||
|
|
HtmlElement* dropTarget = new HtmlElement("dropTarget");
|
||
|
|
HtmlElement* dragOutput = new HtmlElement("dragOutput");
|
||
|
|
HtmlElement* wheelContainer = new HtmlElement("wheelContainer");
|
||
|
|
HtmlElement* wheelOutput = new HtmlElement("wheelOutput");
|
||
|
|
|
||
|
|
int main() {
|
||
|
|
// Mouse Events
|
||
|
|
mouseButton->AddClickListener([&](MouseEvent event) {
|
||
|
|
mouseOutput->SetInnerHTML(std::format("<p><strong>Click:</strong> X={}, Y={}</p>", event.clientX, event.clientY));
|
||
|
|
});
|
||
|
|
|
||
|
|
mouseButton->AddMouseOverListener([&](MouseEvent event) {
|
||
|
|
mouseOutput->SetInnerHTML(std::format("<p><strong>Mouse Over:</strong> X={}, Y={}</p>", event.clientX, event.clientY));
|
||
|
|
});
|
||
|
|
|
||
|
|
mouseButton->AddMouseOutListener([&](MouseEvent event) {
|
||
|
|
mouseOutput->SetInnerHTML(std::format("<p><strong>Mouse Out:</strong> X={}, Y={}</p>", event.clientX, event.clientY));
|
||
|
|
});
|
||
|
|
|
||
|
|
mouseButton->AddMouseMoveListener([&](MouseEvent event) {
|
||
|
|
mouseOutput->SetInnerHTML(std::format("<p><strong>Mouse Move:</strong> X={}, Y={}</p>", event.clientX, event.clientY));
|
||
|
|
});
|
||
|
|
|
||
|
|
mouseButton->AddMouseDownListener([&](MouseEvent event) {
|
||
|
|
mouseOutput->SetInnerHTML(std::format("<p><strong>Mouse Down:</strong> Button={}, X={}, Y={}</p>", event.button, event.clientX, event.clientY));
|
||
|
|
});
|
||
|
|
|
||
|
|
mouseButton->AddMouseUpListener([&](MouseEvent event) {
|
||
|
|
mouseOutput->SetInnerHTML(std::format("<p><strong>Mouse Up:</strong> Button={}, X={}, Y={}</p>", event.button, event.clientX, event.clientY));
|
||
|
|
});
|
||
|
|
|
||
|
|
// Keyboard Events
|
||
|
|
keyInput->AddKeyDownListener([&](KeyboardEvent event) {
|
||
|
|
std::string keyInfo = std::format("<p><strong>Key Down:</strong> Key='{}', Code={}, Ctrl={}, Shift={}, Alt={}</p>",
|
||
|
|
event.key, event.keyCode, event.ctrlKey, event.shiftKey, event.altKey);
|
||
|
|
keyOutput->SetInnerHTML(keyInfo);
|
||
|
|
});
|
||
|
|
|
||
|
|
keyInput->AddKeyUpListener([&](KeyboardEvent event) {
|
||
|
|
std::string keyInfo = std::format("<p><strong>Key Up:</strong> Key='{}', Code={}, Ctrl={}, Shift={}, Alt={}</p>",
|
||
|
|
event.key, event.keyCode, event.ctrlKey, event.shiftKey, event.altKey);
|
||
|
|
keyOutput->SetInnerHTML(keyInfo);
|
||
|
|
});
|
||
|
|
|
||
|
|
keyInput->AddKeyPressListener([&](KeyboardEvent event) {
|
||
|
|
std::string keyInfo = std::format("<p><strong>Key Press:</strong> Key='{}', Code={}, Ctrl={}, Shift={}, Alt={}</p>",
|
||
|
|
event.key, event.keyCode, event.ctrlKey, event.shiftKey, event.altKey);
|
||
|
|
keyOutput->SetInnerHTML(keyInfo);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Focus Events
|
||
|
|
focusInput->AddFocusListener([&](FocusEvent event) {
|
||
|
|
focusOutput->SetInnerHTML("<p><strong>Focus:</strong> Element gained focus</p>");
|
||
|
|
});
|
||
|
|
|
||
|
|
focusInput->AddBlurListener([&](FocusEvent event) {
|
||
|
|
focusOutput->SetInnerHTML("<p><strong>Blur:</strong> Element lost focus</p>");
|
||
|
|
});
|
||
|
|
|
||
|
|
// Form Events
|
||
|
|
formInput->AddInputListener([&](InputEvent event) {
|
||
|
|
formOutput->SetInnerHTML(std::format("<p><strong>Input:</strong> Value='{}'</p>", event.data));
|
||
|
|
});
|
||
|
|
|
||
|
|
formInput->AddChangeListener([&](ChangeEvent event) {
|
||
|
|
formOutput->SetInnerHTML(std::format("<p><strong>Change:</strong> Value='{}'</p>", event.value));
|
||
|
|
});
|
||
|
|
|
||
|
|
formSelect->AddChangeListener([&](ChangeEvent event) {
|
||
|
|
formOutput->SetInnerHTML(std::format("<p><strong>Select Change:</strong> Value='{}'</p>", event.value));
|
||
|
|
});
|
||
|
|
|
||
|
|
// Window Events
|
||
|
|
// Resize event
|
||
|
|
body->AddResizeListener([&](ResizeEvent event) {
|
||
|
|
windowOutput->SetInnerHTML(std::format("<p><strong>Resize:</strong> Width={}, Height={}</p>", event.width, event.height));
|
||
|
|
});
|
||
|
|
|
||
|
|
// Scroll event
|
||
|
|
body->AddScrollListener([&](ScrollEvent event) {
|
||
|
|
windowOutput->SetInnerHTML(std::format("<p><strong>Scroll:</strong> X={}, Y={}</p>", event.scrollX, event.scrollY));
|
||
|
|
});
|
||
|
|
|
||
|
|
// Context Menu Event
|
||
|
|
body->AddContextMenuListener([&](MouseEvent event) {
|
||
|
|
windowOutput->SetInnerHTML(std::format("<p><strong>Context Menu:</strong> X={}, Y={}</p>", event.clientX, event.clientY));
|
||
|
|
});
|
||
|
|
|
||
|
|
// Drag and Drop Events
|
||
|
|
dragSource->AddDragStartListener([&](MouseEvent event) {
|
||
|
|
dragOutput->SetInnerHTML("<p><strong>Drag Start:</strong> Dragging started</p>");
|
||
|
|
});
|
||
|
|
|
||
|
|
dragSource->AddDragEndListener([&](MouseEvent event) {
|
||
|
|
dragOutput->SetInnerHTML("<p><strong>Drag End:</strong> Dragging ended</p>");
|
||
|
|
});
|
||
|
|
|
||
|
|
dropTarget->AddDragOverListener([&](MouseEvent event) {
|
||
|
|
dragOutput->SetInnerHTML("<p><strong>Drag Over:</strong> Dragging over drop target</p>");
|
||
|
|
});
|
||
|
|
|
||
|
|
dropTarget->AddDragEnterListener([&](MouseEvent event) {
|
||
|
|
dragOutput->SetInnerHTML("<p><strong>Drag Enter:</strong> Drag entered drop target</p>");
|
||
|
|
});
|
||
|
|
|
||
|
|
dropTarget->AddDragLeaveListener([&](MouseEvent event) {
|
||
|
|
dragOutput->SetInnerHTML("<p><strong>Drag Leave:</strong> Drag left drop target</p>");
|
||
|
|
});
|
||
|
|
|
||
|
|
dropTarget->AddDropListener([&](MouseEvent event) {
|
||
|
|
dragOutput->SetInnerHTML("<p><strong>Drop:</strong> Item dropped</p>");
|
||
|
|
});
|
||
|
|
|
||
|
|
// Wheel Event
|
||
|
|
wheelContainer->AddWheelListener([&](WheelEvent event) {
|
||
|
|
wheelOutput->SetInnerHTML(std::format("<p><strong>Wheel:</strong> DeltaX={}, DeltaY={}, DeltaZ={}</p>",
|
||
|
|
event.deltaX, event.deltaY, event.deltaZ));
|
||
|
|
});
|
||
|
|
|
||
|
|
return 0;
|
||
|
|
}
|