WebView2Samples/SampleApps/WebView2APISample/assets/ScenarioNonClientRegionSupport.html at 8d688cb9dca1a351bfa5f6bc4853b94d6911d4ba · MicrosoftEdge/WebView2Samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html>
<head>
    <title>ScenarioNonClientRegionSupport</title>
    <style>
        body {
            background-color: white;
        }

        .draggable {
            padding: 10px;
            border: 1px solid black;
            background-color: lightgrey;
            app-region: drag;
            margin-top: 10px;
            margin-bottom: 10px
        }

        .draggable p {
            width: 150px;
            height: auto;
            margin: 0 auto;
            position: relative;
            text-align: center;
            app-region: no-drag;
        }

        #textarea {
            app-region: drag;
        }

        #textarea:hover {
            border: 1px solid red;
        }

        #button {
            app-region: drag;
        }

        #button:hover {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <h1 class="center">Non-Client Region Support</h1>
    <div class="draggable" id="drag-region">
        <p>Draggable Region</p>
    </div>
    <p>
        Note: This site will always have non-client region support enabled.
        Upon navigating away from this site, non-client region support will be disabled.
    </p>

    <h2>Interactive Elements</h2>
    <p>
        This shows how app-region drag can work with interactive elements
    </p>
    <textarea id="textarea" placeholder="type here" rows="4" cols="13"></textarea>
    <button id="button">Click or Drag me</button>
    <p>Click counter: <span id="counter">0</span></p>

    <script>
        const textarea = document.getElementById("textarea");
        const dragarea = document.getElementById("drag-region");
        const button = document.getElementById("button");
        const dragareaInitialWidth = dragarea.clientWidth;
        const counter = document.getElementById("counter");


        textarea.addEventListener("focus", (e) => {
            textarea.style['app-region'] = "no-drag";
            dragarea.style.width = `${dragareaInitialWidth - 1}px`;
        });

        textarea.addEventListener("blur", (e) => {
            textarea.style['app-region'] = "drag";
            dragarea.style.width = `${dragareaInitialWidth + 1}px`;
        });

        button.addEventListener("click", () => {
            counter.innerText = parseInt(counter.innerText) + 1;
        });

        ["click", "contextmenu"].forEach(eventType => { // contextmenu is not received here
            button.addEventListener(eventType, (e) => {
                console.log(`Mouse event: ${eventType}`, e);
            });
        });

        button.addEventListener("keypress", (e) => {
            console.log(`Key press: ${e.key}`, e);
        });
    </script>
</body>
</html>