]>
Commit | Line | Data |
---|---|---|
1 | 'use strict'; | |
2 | ||
3 | Class("UnlimitedPizza").inherits(Widget)({ | |
4 | ||
5 | /** | |
6 | * Gets instance, creates it if not available. | |
7 | */ | |
8 | instance : function getInstance(config) { | |
9 | if (!this._mainInstance) { | |
10 | this._mainInstance = new this(config); | |
11 | } | |
12 | return this._mainInstance; | |
13 | }, | |
14 | ||
15 | prototype : { | |
16 | _fb : null, | |
17 | _loaded : false, | |
18 | ||
19 | init : function (config) { | |
20 | Widget.prototype.init.call(this, config) | |
21 | ||
22 | this._fb = new Firebase("https://guestbook-nsovocal.firebaseio.com"); | |
23 | ||
24 | this._bindInternalEvents(); | |
25 | }, | |
26 | ||
27 | _bindInternalEvents : function bindInternalEvents() { | |
28 | this.bind('activate', this._onActivate.bind(this)); | |
29 | }, | |
30 | ||
31 | _onActivate : function _activate() { | |
32 | // If this is the first time activating it... then load | |
33 | if (!this._loaded) { | |
34 | this._load(); | |
35 | } | |
36 | }, | |
37 | ||
38 | /* | |
39 | * Loads everything. | |
40 | */ | |
41 | _load : function _load() { | |
42 | ||
43 | // Melty cheese is our header image widget. | |
44 | this._loadMeltyCheese(); | |
45 | ||
46 | // Pepperoni is our recording widget. | |
47 | this._loadPepperoni(); | |
48 | ||
49 | // Simple guestbook functionality | |
50 | this._loadGuestbook(); | |
51 | this._loadPosts(); | |
52 | }, | |
53 | ||
54 | _loadMeltyCheese : function () { | |
55 | this.element.find('.post-image').each(function (i, headerElement) { | |
56 | ||
57 | // Create and activate | |
58 | this.appendChild(new UnlimitedPizza.MeltyCheese({ | |
59 | element : $(headerElement), | |
60 | name : 'header-' + i | |
61 | })); | |
62 | this['header-' + i].activate(); | |
63 | }.bind(this)); | |
64 | }, | |
65 | ||
66 | _loadPepperoni : function () { | |
67 | this.element.find('.pepperoni-widget').each(function (i, widgetElement) { | |
68 | ||
69 | // Create and activate | |
70 | this.appendChild(new UnlimitedPizza.Pepperoni({ | |
71 | element : $(widgetElement), | |
72 | name : 'recorder-' + i | |
73 | })); | |
74 | this['recorder-' + i].activate(); | |
75 | }.bind(this)); | |
76 | }, | |
77 | ||
78 | _loadGuestbook : function () { | |
79 | var form = this.element.find('.guestbook-form form'); | |
80 | form.on('submit', function submitPost(ev) { | |
81 | ev.preventDefault(); | |
82 | ||
83 | var formArray = form.serializeArray(); | |
84 | var recorder = this['recorder-0']; | |
85 | ||
86 | recorder.finalize(function (buffer) { | |
87 | var fb, arrayBuffer, fileReader; | |
88 | ||
89 | if (buffer.size <= 44) { | |
90 | alert("You need to record something."); | |
91 | return; | |
92 | } | |
93 | if (formArray[0].value.length === 0) { | |
94 | alert("You need a name."); | |
95 | return; | |
96 | } | |
97 | ||
98 | fb = this._fb; | |
99 | ||
100 | fileReader = new FileReader(); | |
101 | fileReader.onload = function() { | |
102 | var binary, bytes, length, i; | |
103 | ||
104 | binary = ''; | |
105 | bytes = new Uint8Array( this.result ); | |
106 | length = bytes.byteLength; | |
107 | for (i = 0; i < length; i++) { | |
108 | binary += String.fromCharCode( bytes[ i ] ); | |
109 | } | |
110 | ||
111 | fb.push({ | |
112 | buffer: btoa(binary), | |
113 | name: formArray[0].value | |
114 | }); | |
115 | recorder.clear(); | |
116 | }; | |
117 | fileReader.readAsArrayBuffer(buffer); | |
118 | }.bind(this)); | |
119 | return false; | |
120 | }.bind(this)) | |
121 | }, | |
122 | ||
123 | _loadPosts : function () { | |
124 | var feed = this.element.find('.guestbook-feed'); | |
125 | ||
126 | console.log("Loadin", feed.length); | |
127 | if (feed.length > 0) { | |
128 | this._fb.on('value', function (data) { | |
129 | var posts, property, post; | |
130 | ||
131 | // Clear feed | |
132 | feed.empty(); | |
133 | posts = data.val(); | |
134 | ||
135 | for (property in posts) { | |
136 | if (posts.hasOwnProperty(property)) { | |
137 | post = posts[property]; | |
138 | ||
139 | feed.append($('<li>\ | |
140 | <div class="author">FROM: ' + post.name + '</div>\ | |
141 | <div class="content">\ | |
142 | <audio src="data:audio/wav;base64,' + post.buffer + '" controls></audio>\ | |
143 | </div></li>')) | |
144 | } | |
145 | } | |
146 | }); | |
147 | } | |
148 | } | |
149 | } | |
150 | }); |