forked from livecode/livecode
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhtml5button.lcb
More file actions
208 lines (162 loc) · 6.59 KB
/
Copy pathhtml5button.lcb
File metadata and controls
208 lines (162 loc) · 6.59 KB
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
/*
Copyright (C) 2018 LiveCode Ltd.
This file is part of LiveCode.
LiveCode is free software; you can redistribute it and/or modify it under
the terms of the GNU General Public License v3 as published by the Free
Software Foundation.
LiveCode is distributed in the hope that it will be useful, but WITHOUT ANY
WARRANTY; without even the implied warranty of MERCHANTABILITY or
FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
for more details.
You should have received a copy of the GNU General Public License
along with LiveCode. If not see <http://www.gnu.org/licenses/>. */
/**
This widget is a native button in HTML5.
*/
widget com.livecode.widget.native.emscripten.button
use com.livecode.foreign
use com.livecode.emscripten
use com.livecode.widget
use com.livecode.canvas
use com.livecode.engine
metadata version is "1.0.0"
metadata author is "LiveCode"
metadata title is "HTML5 Native Button"
metadata os is "html5"
metadata svgicon is "M 397,551.25195 a 2.1,2.1 0 0 0 -2.09961,2.09961 v 11.08985 A 2.1,2.1 0 0 0 397,566.54297 h 23.24023 a 2.1,2.1 0 0 0 2.09961,-2.10156 v -11.08985 a 2.1,2.1 0 0 0 -2.09961,-2.09961 z m 7.11328,2.52344 h 9.01367 l -0.81836,9.20703 -3.70117,1.03711 -3.67383,-1.03711 z m 1.67774,1.88281 0.30078,3.41797 h 3.91797 l -0.14063,1.46094 -1.26172,0.33789 -1.2539,-0.33789 -0.084,-0.89649 h -1.12109 l 0.14258,1.7793 2.3164,0.64063 h 0.0274 v -0.008 l 2.29882,-0.63476 0.31836,-3.48242 h -4.12304 l -0.0957,-1.15821 h 4.31446 l 0.10351,-1.11914 Z"
/**
Syntax:
set the label of <widget> to <pLabel>
get the label of <widget>
Summary: The label displayed by the button.
Value (string): The string to use as the button label
Example:
set the label of widget "HTML5 Button" to "Click me!"
Description:
The <label> property is the label displayed by the button.
*/
property label get mLabel set SetLabel
metadata label.editor is "com.livecode.pi.string"
metadata label.default is ""
private variable mLabel as String
private variable mButton as optional JSObject
private variable mOpen as Boolean
private variable mOnClickHandler as JSObject
private handler IsHTML5() returns Boolean
return the operating system is "emscripten"
end handler
public handler OnCreate()
put "" into mLabel
end handler
public handler OnSave(out rProperties as Array)
put mLabel into rProperties["label"]
end handler
public handler OnLoad(in pProperties as Array)
put pProperties["label"] into mLabel
end handler
private handler AddJSEventHandler(in pElement as JSObject, in pEvent as String, in pHandler as JSObject)
EvalJavaScriptWithArguments("arguments[0].addEventListener(arguments[1], arguments[2]);", [pElement, pEvent, pHandler])
end handler
private handler RemoveJSEventHandler(in pElement as JSObject, in pEvent as String, in pHandler as JSObject)
EvalJavaScriptWithArguments("arguments[0].removeEventListener(arguments[1], arguments[2]);", [pElement, pEvent, pHandler])
end handler
private handler InitButtonView()
// Create an HTML5 button using JavaScript
put EvalJavaScript("document.createElement('button')") into mButton
// Attach event handler
put HandlerAsJSFunction(OnJSClick) into mOnClickHandler
AddJSEventHandler(mButton, "click", mOnClickHandler)
variable tButtonPtr as optional Pointer
put PointerFromJSObject(mButton) into tButtonPtr
set my native layer to tButtonPtr
log "set native layer"
updateProperties()
log "updated properties"
end handler
private handler FinalizeButtonView()
RemoveJSEventHandler(mButton, "click", mOnClickHandler)
set my native layer to nothing
put nothing into mButton
end handler
private handler updateProperties()
SetLabel(mLabel)
end handler
public handler OnOpen()
if IsHTML5() then
InitButtonView()
end if
end handler
public handler OnClose()
if IsHTML5() then
FinalizeButtonView()
end if
end handler
private handler OnJSClick(pEvent as JSObject) returns nothing
post "mouseUp"
end handler
private handler expandRectangle(in pRect as Rectangle, in pExp as Number) returns Rectangle
return rectangle [ the left of pRect - pExp, the top of pRect - pExp, the right of pRect + pExp, the bottom of pRect + pExp]
end handler
constant kBorderWidth is 5
private handler paintPlaceholderLabel(in pCanvas as Canvas, in pBounds as Rectangle, \
in pLabel as String, in pFont as optional Font, in pColor as optional Color)
save state of pCanvas
// Draw the border
variable tFillPaint as Paint
variable tStrokePaint as Paint
put solid paint with color [0.875, 0.875, 0.875] into tFillPaint
put solid paint with color [0.75, 0.75, 0.75] into tStrokePaint
set the paint of pCanvas to tFillPaint
fill rectangle path of pBounds on this canvas
set the paint of this canvas to tStrokePaint
set the stroke width of this canvas to kBorderWidth
set the join style of this canvas to "bevel"
stroke rectangle path of expandRectangle(pBounds, -kBorderWidth / 2) on this canvas
// Draw the control name
put solid paint with color [1, 1, 1] into tFillPaint
if pFont is nothing then
put font "Arial" at size 14 into pFont
end if
if pColor is nothing then
put color [0.25, 0.25, 0.25] into pColor
end if
put solid paint with pColor into tStrokePaint
variable tTextBounds as Rectangle
put the image bounds of text pLabel on pCanvas into tTextBounds
translate pCanvas by [ the width of pBounds / 2, the height of pBounds / 2]
translate pCanvas by [ -(the width of tTextBounds / 2), the height of tTextBounds / 2]
set the paint of pCanvas to tFillPaint
fill rounded rectangle path of expandRectangle(tTextBounds, kBorderWidth) with radius 5 on pCanvas
set the paint of pCanvas to tStrokePaint
fill text pLabel at point [0, 0] on pCanvas
restore state of pCanvas
end handler
public handler OnPaint()
if IsHTML5() then
return
end if
variable tLabel as String
if mLabel is empty then
put my name into tLabel
else
put mLabel into tLabel
end if
paintPlaceholderLabel(this canvas, my bounds, tLabel, my font, color [0,0,0])
end handler
public handler SetLabel(in pLabel as String)
put pLabel into mLabel
if mButton is not nothing then
// Set the label of the button to mLabel, if not empty;
// otherwise to the name of the host.
variable tLabelToUse as String
if mLabel is the empty string then
put my name into tLabelToUse
else
put mLabel into tLabelToUse
end if
// Set button label using JavaScript
EvalJavaScriptWithArguments("arguments[0].innerHTML=arguments[1];", [mButton, tLabelToUse])
end if
redraw all
end handler
end widget