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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
"""This example demonstrates how to manipulate DOM in Python."""
import random
import webview
rectangles = []
def random_color():
red = random.randint(0, 255)
green = random.randint(0, 255)
blue = random.randint(0, 255)
return f'rgb({red}, {green}, {blue})'
def bind(window):
def toggle_disabled():
disabled = None if len(rectangles) > 0 else True
remove_button.attributes = { 'disabled': disabled }
empty_button.attributes = { 'disabled': disabled }
move_button.attributes = { 'disabled': disabled }
def create_rectangle(_):
color = random_color()
rectangle = window.dom.create_element(f'<div class="rectangle" style="background-color: {color};"></div>', rectangle_container)
rectangles.append(rectangle)
toggle_disabled()
def remove_rectangle(_):
if len(rectangles) > 0:
rectangles.pop().remove()
toggle_disabled()
def move_rectangle(_):
if len(rectangle_container.children) > 0:
rectangle_container.children[-1].move(circle_container)
def empty_container(_):
rectangle_container.empty()
rectangles.clear()
toggle_disabled()
def change_color(_):
circle.style['background-color'] = random_color()
def toggle_class(_):
circle.classes.toggle('circle')
rectangle_container = window.dom.get_element('#rectangles')
circle_container = window.dom.get_element('#circles')
circle = window.dom.get_element('#circle')
toggle_button = window.dom.get_element('#toggle-button')
toggle_class_button = window.dom.get_element('#toggle-class-button')
duplicate_button = window.dom.get_element('#duplicate-button')
remove_button = window.dom.get_element('#remove-button')
move_button = window.dom.get_element('#move-button')
empty_button = window.dom.get_element('#empty-button')
add_button = window.dom.get_element('#add-button')
color_button = window.dom.get_element('#color-button')
toggle_button.events.click += lambda e: circle.toggle()
duplicate_button.events.click += lambda e: circle.copy()
toggle_class_button.events.click += toggle_class
remove_button.events.click += remove_rectangle
move_button.events.click += move_rectangle
empty_button.events.click += empty_container
add_button.events.click += create_rectangle
color_button.events.click += change_color
if __name__ == '__main__':
window = webview.create_window(
'DOM Manipulations Example', html='''
<html>
<head>
<style>
button {
font-size: 100%;
padding: 0.5rem;
margin: 0.3rem;
text-transform: uppercase;
}
.rectangle {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
margin: 0.5rem;
border-radius: 5px;
background-color: red;
}
.circle {
border-radius: 50px;
background-color: red;
}
.circle:hover {
background-color: green;
}
.container {
display: flex;
flex-wrap: wrap;
}
</style>
</head>
<body>
<button id="toggle-button">Toggle circle</button>
<button id="toggle-class-button">Toggle class</button>
<button id="color-button">Change color</button>
<button id="duplicate-button">Duplicate circle</button>
<button id="add-button">Add rectangle</button>
<button id="remove-button" disabled>Remove rectangle</button>
<button id="move-button" disabled>Move rectangle</button>
<button id="empty-button" disabled>Remove all</button>
<div id="circles" style="display: flex; flex-wrap: wrap;">
<div id="circle" class="rectangle circle"></div>
</div>
<div id="rectangles" class="container"></div>
</body>
</html>
'''
)
webview.start(bind, window)
|
