Merge branch 'v3-alpha' into feat/package-aarch64

wailsapp · Oct 30, 2024 · 7c319bd · 7c319bd
2 parents a627f88 + f9d8032
commit 7c319bd
Show file tree

Hide file tree

Showing 4 changed files with 159 additions and 0 deletions.
diff --git a/mkdocs-website/docs/en/changelog.md b/mkdocs-website/docs/en/changelog.md
@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - Templates for sveltekit and sveltekit-ts that are set for non-SSR development by [atterpac](https://github.com/atterpac) in [#3829](https://github.com/wailsapp/wails/pull/3829)
 - Update build assets using new `wails3 update build-assets` command by [leaanthony](https://github.com/leaanthony).
+- Example to test the HTML Drag and Drop API by [FerroO2000](https://github.com/FerroO2000) in [#3856](https://github.com/wailsapp/wails/pull/3856)
 
 ### Changed
 - Taskfile refactor by [leaanthony](https://github.com/leaanthony) in [#3748](https://github.com/wailsapp/wails/pull/3748)

diff --git a/v3/examples/html-dnd-api/README.md b/v3/examples/html-dnd-api/README.md
@@ -0,0 +1,43 @@
+# HTML Drag and Drop API Example
+
+This example should demonstrate whether the [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API") works correctly.
+
+## Expected Behaviour
+
+When dragging the "draggable", in the console should be printed:
+1. "dragstart" once
+2. "drag" many times
+3. "dragend" once
+
+When dragging the "draggable" on the drop target, the inner text of the latter shoud change and in the console should be printed:
+1. "dragstart" once
+2. "drag" many times
+3. "dragenter" once
+4. "dragover" many times (alternating with "drag")
+5.  - "drop" once (in case of a drop inside the drop target)
+    - "dragleave" once (in case the draggable div leaves the drop target)
+6. "dragend" once
+
+## Running the example
+
+To run the example, simply run the following command:
+
+```bash
+go run main.go
+```
+
+## Building the example
+
+To build the example in debug mode, simply run the following command:
+
+```bash
+wails3 task build
+```
+
+# Status
+
+| Platform | Status      |
+|----------|-------------|
+| Mac      | Working     |
+| Windows  | Not Working |
+| Linux    |             |
diff --git a/v3/examples/html-dnd-api/assets/index.html b/v3/examples/html-dnd-api/assets/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <style>
+        body{
+            background-color: white;
+        }
+
+        #draggable {
+            width: 100px;
+            height: 100px;
+            background-color: yellow;
+            text-align: center;
+        }
+
+        #dropTarget {
+            width: 200px;
+            height: 200px;
+            border: 2px solid red;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+<h1>HTML Drag and Drop API Demo</h1>
+<br/>
+
+<div id="draggable" draggable="true" >draggable</div>
+
+<div id="dropTarget" >drop target</div>
+
+</body>
+
+<script type="module">
+    const draggable = document.getElementById('draggable');
+
+    draggable.addEventListener('dragstart', (event) => {
+        console.log('dragstart');
+        dropTarget.innerText = 'drop target';
+    });
+
+    draggable.addEventListener("drag", (event) => {
+        console.log('drag');
+    });
+
+    draggable.addEventListener("dragend", (event) => {
+        console.log('dragend');
+    });
+
+    const dropTarget = document.getElementById('dropTarget');
+
+    dropTarget.addEventListener('dragenter', (event) => {
+        console.log('dragenter');
+    });
+
+    dropTarget.addEventListener('dragleave', (event) => {
+        console.log('dragleave');
+        dropTarget.innerText = 'left drop target';
+    });
+
+    dropTarget.addEventListener('dragover', (event) => {
+        event.preventDefault()
+        console.log('dragover');
+        dropTarget.innerText = 'dragged over';
+    });
+
+    dropTarget.addEventListener('drop', (event) => {
+        console.log('drop');
+        dropTarget.innerText = 'dropped';
+    });
+</script>
+
+</html>
diff --git a/v3/examples/html-dnd-api/main.go b/v3/examples/html-dnd-api/main.go
@@ -0,0 +1,40 @@
+package main
+
+import (
+	"embed"
+	"log"
+
+	"github.com/wailsapp/wails/v3/pkg/application"
+)
+
+//go:embed assets
+var assets embed.FS
+
+func main() {
+
+	app := application.New(application.Options{
+		Name:        "HTML Drag and Drop API Demo",
+		Description: "A demo of the HTML Drag and drop API",
+		Assets: application.AssetOptions{
+			Handler: application.BundledAssetFileServer(assets),
+		},
+		Mac: application.MacOptions{
+			ApplicationShouldTerminateAfterLastWindowClosed: true,
+		},
+	})
+
+	app.NewWebviewWindowWithOptions(application.WebviewWindowOptions{
+		Title: "Drag-n-drop Demo",
+		Mac: application.MacWindow{
+			Backdrop:                application.MacBackdropTranslucent,
+			TitleBar:                application.MacTitleBarHiddenInsetUnified,
+			InvisibleTitleBarHeight: 50,
+		},
+	})
+
+	err := app.Run()
+
+	if err != nil {
+		log.Fatal(err.Error())
+	}
+}