This repository has been archived by the owner on Jun 28, 2020. It is now read-only.
forked from lbondaryk/PlayerProto
-
Notifications
You must be signed in to change notification settings - Fork 0
/
eventmanagerTests.html
127 lines (105 loc) · 4.08 KB
/
eventmanagerTests.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
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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="Michael Jay Lippert" />
<meta name="Owner" content="Pearson" />
<meta name="Copyright" content="Copyright (c) 2013 Pearson. All rights reserved." />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content="eCourses Author, Title" name="description" />
<!-- Bootstrap -->
<link href="css/bootstrap_plus.css" rel="stylesheet" media="screen">
<link href="css/graphics_and_svg.css" rel="stylesheet">
<link href="css/learning-objective.css" rel="stylesheet">
<link href="css/eCourse-master.css" rel="stylesheet" media="screen">
<title class="setTitle"></title>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span6 leftCol">
<h2 class="setTitle"></h2>
<div id="widgetTarget0"><p>Button 1</p></div>
<div id="widgetTarget1"><p>Button 2</p></div>
<div id="widgetTarget2"><button type="button" style="background: red">Click Me!</button></div>
</div>
<div class="span6 rightCol">
<div id="widgetTarget50"><p>3. Three scaled images in grid</p></div>
<div id="widgetTarget80"><p>6. Image with Legend</p></div>
</div>
</div>
</div>
<script src="js/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- <script src="js/jquery.touchSwipe.min.js"></script> -->
<script src="js/jquery-ui-1.10.2.custom.js"></script>
<script src="js/toc-structure.js"></script>
<script src="js/eCourse-master.js"></script>
<script src="js/d3.v2.min.js"></script>
<script src="js/widgets.js"></script>
<script src="js/eventmanager.js"></script>
<script>
function ButtonWidget(id, eventManager)
{
this.id = id;
this.eventManager = eventManager;
// Define the ids of the events the ButtonWidget uses
this.pressedEventId = id + 'Pressed';
this.rootEl = $('<div><button type="button">Default text</button></div>');
var that = this;
$("button", this.rootEl).click(function()
{
that.eventManager.publish(that.pressedEventId);
} );
// Define private handlers for subscribed events
function pressedHandler()
{
var button = $('button', that.rootEl);
var color = button.css('background-color');
var newColor = color == 'rgb(0, 128, 0)' ? 'red' : 'green';
button.css('background-color', newColor);
}
// Subscribe to events the ButtonWidget responds to
eventManager.subscribe(this.pressedEventId, pressedHandler);
}
ButtonWidget.prototype.setText = function(text)
{
// Update the DOM in getRootEl
var b = $("button", this.rootEl);
var t = b.text();
$("button", this.rootEl).text(text);
}
ButtonWidget.prototype.getText = function()
{
return $("button", this.rootEl).text();
}
ButtonWidget.prototype.getRootEl = function()
{
return this.rootEl;
}
// ======== Button Widget class defined above here...below here is script that creates buttons on the test page
//the eventManager is an object that is specific to this page. A new one
//is created for every page, and then passed to the widgets in that page
//that must talk to it. Q: what about widgets who don't need events for
//some particular page? Is the second arg optional?
var eventManager = new EventManager();
// Create the 1st button widget
var button1 = new ButtonWidget("button1", eventManager);
button1.setText('Hello world');
// Add the button1 widget to the page
$('#widgetTarget0').append(button1.getRootEl());
// Create the 2nd button widget
var button2 = new ButtonWidget("button2", eventManager);
button2.setText('Hello moon');
// Add the button2 widget to the page
$('#widgetTarget1').append(button2.getRootEl());
// Modify the text of button 2 when button 1 is pressed
eventManager.subscribe(button1.pressedEventId, addCountToButton2);
function addCountToButton2()
{
button2.setText(button2.getText() + '#');
}
</script>
</body>
</html>