forked from pubnub/javascript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathapp.js
More file actions
92 lines (78 loc) · 3.05 KB
/
Copy pathapp.js
File metadata and controls
92 lines (78 loc) · 3.05 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
(function(){
// -----------------------------------------------------------------------
// PAGE ELEMENTS
// -----------------------------------------------------------------------
var p = PUBNUB
, button = p.$('button')
, stages = p.$('stages')
, notify = p.$('notify')
, indicators = stages.getElementsByTagName('div')
, light = p.$('button-light');
// -----------------------------------------------------------------------
// PUBNUB SETUP
// -----------------------------------------------------------------------
var pubnub_setup = {
channel : 'sample-button-app',
publish_key : 'demo',
subscribe_key : 'demo'
};
// -----------------------------------------------------------------------
// CREATE CONNECTION FOR USER EVENTS
// -----------------------------------------------------------------------
var user_event = io.connect( 'http://pubsub.pubnub.com/events', pubnub_setup );
// -----------------------------------------------------------------------
// WAIT FOR A CONNECTION
// -----------------------------------------------------------------------
user_event.on( 'connect', function() {
advance();
button.removeAttribute('disabled');
button.innerHTML = 'Touch';
} );
// -----------------------------------------------------------------------
// LISTEN FOR A USER EVENT
// -----------------------------------------------------------------------
user_event.on( 'buttontouch', function(color) {
notify.play();
p.css( light, { background : color } );
clearTimeout(button.timer);
button.timer = setTimeout( function() {
p.css( light, { background : '#fff' } );
}, 200 );
} );
// -----------------------------------------------------------------------
// BUTTON CLICK
// -----------------------------------------------------------------------
p.bind( 'mousedown,touchstart', button, function() {
user_event.emit( 'buttontouch', rnd_color() );
} );
// -----------------------------------------------------------------------
// RANDOM COLOR
// -----------------------------------------------------------------------
function rnd_hex() { return Math.ceil(Math.random()*9) }
function rnd_color() {
return '#' + p.map(
Array(3).join().split(','), rnd_hex
).join('');
}
// -----------------------------------------------------------------------
// ADVANCE STAGE INDICATORS
// -----------------------------------------------------------------------
indicators.stage = 0;
function advance() {
var stage = indicators.stage++;
setTimeout( function() {
p.css( indicators[stage], { background : '#4a3' } );
}, 400 * (stage === 2 ? (function(){
p.css( stages, { background : '#7d6' } );
setTimeout( function() {
p.css( stages, { background : '#eeeee3' } );
}, 300 );
return 0;
})() : stage) );
}
// -----------------------------------------------------------------------
// BEGIN INDICATOR LIGHT ADVANCEMENTS
// -----------------------------------------------------------------------
advance();
p.bind( 'load', window, advance );
})();