Make draggable CSS property customisable (#1828)

Co-authored-by: stffabi <stffabi@users.noreply.github.com>

v2/internal/frontend/desktop/darwin/frontend.go

@@ -291,11 +291,8 @@ func (f *Frontend) processMessage(message string) {
 	}
 
 	if message == "runtime:ready" {
-		if f.frontendOptions.Experimental != nil {
-			if f.frontendOptions.Experimental.UseCSSDrag {
-				f.ExecJS(`window.wails.useCSSDrag();`)
-			}
-		}
+		cmd := fmt.Sprintf("window.wails.setCSSDragProperties('%s', '%s');", f.frontendOptions.CSSDragProperty, f.frontendOptions.CSSDragValue)
+		f.ExecJS(cmd)
 		return
 	}
 

v2/internal/frontend/desktop/linux/frontend.go

@@ -292,11 +292,8 @@ func (f *Frontend) processMessage(message string) {
 	}
 
 	if message == "runtime:ready" {
-		if f.frontendOptions.Experimental != nil {
-			if f.frontendOptions.Experimental.UseCSSDrag {
-				f.ExecJS(`window.wails.useCSSDrag();`)
-			}
-		}
+		cmd := fmt.Sprintf("window.wails.setCSSDragProperties('%s', '%s');", f.frontendOptions.CSSDragProperty, f.frontendOptions.CSSDragValue)
+		f.ExecJS(cmd)
 		return
 	}
 

v2/internal/frontend/desktop/windows/frontend.go

@@ -547,11 +547,8 @@ func (f *Frontend) processMessage(message string) {
 	}
 
 	if message == "runtime:ready" {
-		if f.frontendOptions.Experimental != nil {
-			if f.frontendOptions.Experimental.UseCSSDrag {
-				f.ExecJS(`window.wails.useCSSDrag();`)
-			}
-		}
+		cmd := fmt.Sprintf("window.wails.setCSSDragProperties('%s', '%s');", f.frontendOptions.CSSDragProperty, f.frontendOptions.CSSDragValue)
+		f.ExecJS(cmd)
 		return
 	}
 

v2/internal/frontend/runtime/desktop/main.js

@@ -63,7 +63,9 @@ window.wails = {
         enableResize: false,
         defaultCursor: null,
         borderThickness: 6,
-        shouldDrag: false
+        shouldDrag: false,
+        cssDragProperty: "--wails-draggable",
+        cssDragValue: "drag",
     }
 };
 
@@ -82,38 +84,14 @@ window.addEventListener('mouseup', () => {
     window.wails.flags.shouldDrag = false;
 });
 
-let cssDragTest = function (e) {
-    return window.getComputedStyle(e.target).getPropertyValue('--wails-draggable') === "drag";
-};
-
-// Element drag handler
-// Based on code from: https://github.com/patr0nus/DeskGap
-let elementDragTest = function (e) {
-    // Check for dragging
-    let currentElement = e.target;
-    while (currentElement != null) {
-        if (currentElement.hasAttribute('data-wails-no-drag')) {
-            break;
-        } else if (currentElement.hasAttribute('data-wails-drag')) {
-            return true;
-        }
-        currentElement = currentElement.parentElement;
-    }
-    return false;
-};
-
-let dragTest = elementDragTest;
-
-window.wails.useCSSDrag = function (t) {
-    if (t === false) {
-        console.log("Using original drag detection");
-        dragTest = elementDragTest;
-    } else {
-        console.log("Using CSS drag detection");
-        dragTest = cssDragTest;
-    }
+let dragTest = function (e) {
+    return window.getComputedStyle(e.target).getPropertyValue(window.wails.flags.cssDragProperty) === window.wails.flags.cssDragValue;
 };
 
+window.wails.setCSSDragProperties = function(property, value) {
+    window.wails.flags.cssDragProperty = property;
+    window.wails.flags.cssDragValue = value;
+}
 
 window.addEventListener('mousedown', (e) => {
 

v2/internal/frontend/runtime/package.json

@@ -14,7 +14,7 @@
   "author": "Lea Anthony <lea.anthony@gmail.com>",
   "license": "ISC",
   "devDependencies": {
-    "esbuild": "^0.15.3",
+    "esbuild": "^0.15.6",
     "npm-run-all": "^4.1.5",
     "svelte": "^3.49.0"
   }

v2/pkg/options/default.go

@@ -12,6 +12,8 @@ var Default = &App{
 	Logger:             logger.NewDefaultLogger(),
 	LogLevel:           logger.INFO,
 	LogLevelProduction: logger.ERROR,
+	CSSDragProperty:    "--wails-draggable",
+	CSSDragValue:       "drag",
 }
 
 var defaultMacMenu = menu.NewMenuFromItems(

v2/pkg/options/options.go

@@ -2,6 +2,7 @@ package options
 
 import (
 	"context"
+	"html"
 	"io/fs"
 	"log"
 	"net/http"
@@ -27,10 +28,6 @@ const (
 )
 
 type Experimental struct {
-	// UseCSSDrag uses the `--wails-draggable` CSS variable to indicate drag regions
-	// Add `style="--wails-draggable:drag"` to your draggable elements
-	// `style="--wails-draggable:no-drag"` will disable dragging for that element + children
-	UseCSSDrag bool
 }
 
 // App contains options for creating the App
@@ -66,8 +63,12 @@ type App struct {
 	Bind               []interface{}
 	WindowStartState   WindowStartState
 
-	//ContextMenus []*menu.ContextMenu
-	//TrayMenus    []*menu.TrayMenu
+	// CSS property to test for draggable elements. Default "--wails-draggable"
+	CSSDragProperty string
+
+	// The CSS Value that the CSSDragProperty must have to be draggable, EG: "drag"
+	CSSDragValue string
+
 	Windows *windows.Options
 	Mac     *mac.Options
 	Linux   *linux.Options
@@ -105,6 +106,8 @@ func NewRGB(r, g, b uint8) *RGBA {
 
 // MergeDefaults will set the minimum default values for an application
 func MergeDefaults(appoptions *App) {
+
+	// Do default merge
 	err := mergo.Merge(appoptions, Default)
 	if err != nil {
 		log.Fatal(err)
@@ -121,6 +124,25 @@ func MergeDefaults(appoptions *App) {
 	}
 
 	// Ensure max and min are valid
+	processMinMaxConstraints(appoptions)
+
+	// Default menus
+	processMenus(appoptions)
+
+	// Process Drag Options
+	processDragOptions(appoptions)
+}
+
+func processMenus(appoptions *App) {
+	switch runtime.GOOS {
+	case "darwin":
+		if appoptions.Menu == nil {
+			appoptions.Menu = defaultMacMenu
+		}
+	}
+}
+
+func processMinMaxConstraints(appoptions *App) {
 	if appoptions.MinWidth > 0 && appoptions.MaxWidth > 0 {
 		if appoptions.MinWidth > appoptions.MaxWidth {
 			appoptions.MinWidth = appoptions.MaxWidth
@@ -144,12 +166,9 @@ func MergeDefaults(appoptions *App) {
 	if appoptions.MaxHeight > 0 && appoptions.Height > appoptions.MaxHeight {
 		appoptions.Height = appoptions.MaxHeight
 	}
-
-	switch runtime.GOOS {
-	case "darwin":
-		if appoptions.Menu == nil {
-			appoptions.Menu = defaultMacMenu
-		}
-	}
-
+}
+
+func processDragOptions(appoptions *App) {
+	appoptions.CSSDragProperty = html.EscapeString(appoptions.CSSDragProperty)
+	appoptions.CSSDragValue = html.EscapeString(appoptions.CSSDragValue)
 }

website/docs/guides/frameless.mdx

@@ -1,27 +1,12 @@
 # Frameless Applications
 
-Wails supports applications with no frame. This can be achieved by using the [frameless](../reference/options.mdx#frameless)
+Wails supports application that have no frames. This can be achieved by using the [frameless](../reference/options.mdx#frameless)
 field in [Application Options](../reference/options.mdx#application-options).
 
-:::warning
-The `data-wails-drag` attribute is being deprecated in favour of the following CSS style:
-`style="--wails-draggable:drag"`. You can use `style="--wails-draggable:no-drag"` to disable the drag behaviour.
-For this release only, you can test this by setting the following application option:
+Wails offers a simple solution for dragging the window: Any HTML element that has the CSS style `--wails-draggable:drag` will
+act as a "drag handle". This property applies to all child elements. If you need to indicate that a nested element
+should not drag, then use the attribute '--wails-draggable:no-drag' on that element.
 
-```go
-		Experimental: &options.Experimental{
-			UseCSSDrag: true,
-		},
-```
-
-:::
-
-Wails offers a simple solution for dragging the window: Any HTML element that has the attribute "data-wails-drag" will
-act as a "drag handle". This property applies to all nested elements. If you need to indicate that a nested element
-should not drag, then use the attribute 'data-wails-no-drag' on that element.
-
-The default vanilla template uses this, even though it is not frameless. The whole `body` element is tagged as draggable.
-The `<div id="input" data-wails-no-drag>` is tagged as being not draggable.
 
 ```html
 <html>
@@ -29,9 +14,9 @@ The `<div id="input" data-wails-no-drag>` is tagged as being not draggable.
     <link rel="stylesheet" href="/main.css" />
   </head>
 
-  <body data-wails-drag>
+  <body style="--wails-draggable:drag">
     <div id="logo"></div>
-    <div id="input" data-wails-no-drag>
+    <div id="input" style="--wails-draggable:no-drag">
       <input id="name" type="text" />
       <button onclick="greet()">Greet</button>
     </div>
@@ -42,6 +27,63 @@ The `<div id="input" data-wails-no-drag>` is tagged as being not draggable.
 </html>
 ```
 
+For some projects, using a CSS variable may not be possible due to dynamic styling. In this case, you can use the
+`CSSDragProperty` and `CSSDragValue` application options to define a property and value that will be used to indicate
+draggable regions:
+
+```go title=main.go
+package main
+
+import (
+    "embed"
+
+    "github.com/wailsapp/wails/v2"
+    "github.com/wailsapp/wails/v2/pkg/options"
+)
+
+//go:embed frontend/dist
+var assets embed.FS
+
+func main() {
+    // Create an instance of the app structure
+    app := NewApp()
+
+    // Create application with options
+    err := wails.Run(&options.App{
+        Title:           "alwaysontop",
+        Width:           1024,
+        Height:          768,
+        Assets:          assets,
+        Frameless:       true,
+        CSSDragProperty: "widows",
+        CSSDragValue:    "1",
+        Bind: []interface{}{
+            app,
+        },
+    })
+
+    if err != nil {
+        println("Error:", err)
+    }
+}
+```
+
+```html title=index.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+    <title>alwaysontop</title>
+</head>
+<body style="widows: 1">
+<div id="app"></div>
+<script src="./src/main.js" type="module"></script>
+</body>
+</html>
+
+```
+
 :::info Fullscreen
 If you allow your application to go fullscreen, this drag functionality will be disabled.
 :::

website/docs/reference/options.mdx

@@ -40,6 +40,8 @@ func main() {
         OnShutdown:         app.shutdown,
         OnBeforeClose:      app.beforeClose,
         WindowStartState:   options.Maximised,
+        CSSDragProperty:   "--wails-draggable",
+        CSSDragValue:      "drag",
         Bind: []interface{}{
             app,
         },
@@ -313,6 +315,18 @@ Defines how the window should present itself at startup.
 
 Type: `options.WindowStartState`
 
+### CSSDragProperty
+
+Indicates the CSS property to use to identify which elements can be used to drag the window. Default: `--wails-draggable`.
+
+Type: `string`
+
+### CSSDragValue
+
+Indicates what value the `CSSDragProperty` style should have to drag the window. Default: `drag`.
+
+Type: `string`
+
 ### Bind
 
 A slice of struct instances defining methods that need to be bound to the frontend.