eventNode/index.htm at master · alepek/eventNode · 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
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
<html>
	<head>
		<script src="jquery-2.0.3.min.js"></script>
		<script src="eventNode.js"></script>
		<script src="test.js"></script>

		<style>
		p,h1,h2,h3,h4,h5,h6 .neat-font{
			-webkit-font-smoothing: antialiased;
			font-family:'Open Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
			color:#484848;
			font-size: 14px;
			font-weight: 300;
			line-height:20px;
		}
		.neat-delimiter{
			margin-top: 10px;
			margin-bottom: 10px;
			border: 0;
			border-top: 1px solid #eee;
		}
		.muted{
			font-size:12px;
			color:#686868;
		}
		.page-header{
			font-size:32px;
			padding:20px;
			margin:0;
		}
		.sub-header{
			font-size:24px;
			margin-top:20px;
			margin-bottom:20px;
		}
		.text-centered{
			text-align: center;
		}

		@media (max-width:860px)
		{
			.main-container{
				padding-left:50px;
				padding-right:50px;
			}
		}
		@media (min-width:861px)
		{
			.main-container{
				padding-left:150px;
				padding-right:150px;
			}
		}
		.main-container{
			width:auto;
		}
		.circularNode{
			border-radius: 2px;
			width:80px;
			height:80px;
			background-color:#08C;
			border:1px solid #3A3A3A;
			transition: all 0.5s;
			margin-left:10px;
			margin-right:10px;
			padding:3px;
			display:inline-block;
			font-family:'Open Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
		}
		.circularNode span{

		}
		.nodeContainer{
			text-align: center;
			border:1px solid #ccc;
			border-radius:4px;
			background-color:#FAFAFA;
			padding:20px;
		}
		.buttonContainer{
			margin-bottom:10px;
		}
		.neat-button{
			padding:8px;
			border:2px solid #bbb;
			font-family:'Open Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
			transition: 0.2s all;
			color:#555;
			font-weight:bold;
		}
		.neat-button:hover{
			background-color:#bbb;
			cursor:pointer;
		}
		.neat-button.disabled{
			opacity:0.5;
		}
		</style>
	</head>
	<body>
		<div class="main-container">
			<h4 class="text-centered neat-font page-header"> eventNode.js </h4>
			<hr class="neat-delimiter"/>
			<h5 class="neat-font sub-header">Introduction</h5>
			<p>
				eventNode is a lightweight event framework that allows you to create nodes and connect them as you please, in order to propagate events between nodes.
			</p>
			<p>
				Each node may contain an event or not. Whether a node contains an event or not, any listener can listen for any event available in the node network, since all events are propagated over the entire network, regardless of whether a node has registered that event or not.
			</p>
			<p>
				eventNodes' intended usage is in an environment that consists of several modules that take action when another module performs some critical task, like updating a gui when a search module has completed an adress search.
			</p>
			<p>
				The purpose is to maintain isolation between these modules, while still allowing them to perform tasks dependant on the completion of tasks in other modules.
			</p>
			<hr class="neat-delimiter"/>
			<h5 class="neat-font sub-header">Demonstration</h5>
			<p>Each shape below represents a node. Each node is connected to its neighbor. Inside each node is a list of events that the node contains. Each node also has a listener that changes their color for a short while when that event triggers.
			</p>
			<p>Try triggering events using the buttons below. All animations, including the trigger buttons, are triggered by events from the node network.
			</p>

			<div class="nodeContainer networkOne">
				<p class="text-center sub-header">Network One</p>
				<div class="buttonContainer">
					<button class="neat-button" id="trigger-A1">Trigger A</button>
					<button class="neat-button" id="trigger-B1">Trigger B</button>
					<button class="neat-button" id="trigger-C1">Trigger C</button>
					<button class="neat-button" id="trigger-D1">Trigger D</button>
				</div>
				<br/>
				<div class="circularNode" id="demonodeA1">
					A,B
				</div>
				<div class="circularNode" id="demonodeB1">
					B,C
				</div>
				<div class="circularNode" id="demonodeC1">
					A,C,D
				</div>
				<div class="circularNode" id="demonodeD1">
					A,B,D
				</div>
			</div>

			<p class="text-centered">Now, let's make it interesting. Let's add another network. This network is initially not connected to the one above, but you can connect and disconnect them with the controls below.</p>

			<div class="buttonContainer text-centered">
				<button class="neat-button sub-header" id="toggleNetworkConnection">Connect the networks</button>
			</div>

			<div class="nodeContainer networkTwo">
				<p class="text-center sub-header">Network Two</p>
				<div class="buttonContainer">
					<button class="neat-button" id="trigger-A2">Trigger A</button>
					<button class="neat-button" id="trigger-B2">Trigger B</button>
					<button class="neat-button" id="trigger-C2">Trigger C</button>
					<button class="neat-button" id="trigger-D2">Trigger D</button>
				</div>
				<br/>
				<div class="circularNode" id="demonodeA2">
					A,B,C
				</div>
				<div class="circularNode" id="demonodeB2">
					A,C,D
				</div>
				<div class="circularNode" id="demonodeC2">
					A,C
				</div>
				<div class="circularNode" id="demonodeD2">
					B,D
				</div>
			</div>

			<p>To really get a feel for it, try inspecting the code. Take a closer look at the setUpDemonstration function.</p>

			<hr class="neat-delimiter">
			<h5 class="neat-font sub-header">API</h5>
			<p>This section lists the available methods and their parameters and return types.</p>
		</div>
	</body>
</html>