forked from Touffy/JSSCxml
-
Notifications
You must be signed in to change notification settings - Fork 0
/
dom.html
66 lines (51 loc) · 2.03 KB
/
dom.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSSCxml test page for DOM interaction</title>
<script src="xhr.js"></script>
<script src="structures.js"></script>
<script src="SCxml.js"></script>
<script src="SCxmlProcessors.js"></script>
<script src="SCxmlDatamodel.js"></script>
<script src="SCxmlEvent.js"></script>
<script src="SCxmlExecute.js"></script>
<script src="SCxmlInvoke.js"></script>
<script src="SCxmlFetch.js"></script>
<style>
@-webkit-keyframes glowblink{
from{ outline-color: rgba(255, 0, 0, 1); }
to{ outline-color: rgba(255, 120, 0, 0.2); }
}
scxml { display: none; }
.hilited {
outline: 3px solid rgba(255, 0, 0, 0.8);
-webkit-animation-name: glowblink;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}
</style>
</head>
<body>
<p>This document contains a button and an SCxml element initialized with a simple SC. When you click the button, it relays the "click" DOM event to the SCxml interpreter. In response, the interpreter just fires a bubbling custom event, which is handled by an event listener in the body, which outlines another element in the interface.</p>
<scxml src="uitest.scxml"></scxml>
<input type="button" value="send an event to the SC">
<input type="button" id="i1" disabled value="show me off by clicking the other button">
<script>
SCxml.parseSCXMLTags()
// just pass the DOM event to the interpreter's onEvent method
document.getElementsByTagName("input")[0].addEventListener("click", function(e)
{ SCxml.sessions[1].onEvent(e) })
// the listener doesn't have to be on the SCXML itself,
// it can be further up because the event bubbles
hilited=null
document.body.addEventListener("hilight", function(e) {
if(hilited) hilited.classList.remove("hilited")
;(hilited=e.target).classList.add("hilited") }, false)
// doesn't need to be targetted at the currently hilited element
document.body.addEventListener("unhilight", function(e) {
if(hilited) hilited.classList.remove("hilited")}, false)
</script>
</body>
</html>