diff options
Diffstat (limited to 'docroot/classes/table.class.js')
-rwxr-xr-x | docroot/classes/table.class.js | 315 |
1 files changed, 315 insertions, 0 deletions
diff --git a/docroot/classes/table.class.js b/docroot/classes/table.class.js new file mode 100755 index 0000000..1784c5c --- /dev/null +++ b/docroot/classes/table.class.js | |||
@@ -0,0 +1,315 @@ | |||
1 | /* | ||
2 | * Material Experience - Card Table Class | ||
3 | * | ||
4 | * EYEMG - Interactive Media Group | ||
5 | * Created by Mike Crute (mcrute@eyemg.com) | ||
6 | * Updated by Mike Crute (mcrute@eyemg.com) on 9/26/07 | ||
7 | */ | ||
8 | |||
9 | var CardTable = Class.create(); | ||
10 | |||
11 | Object.extend(CardTable.prototype, | ||
12 | { | ||
13 | /* | ||
14 | * Create the table object. | ||
15 | */ | ||
16 | initialize: function() | ||
17 | { | ||
18 | this.options = Object.extend( | ||
19 | { | ||
20 | name: 'New Table', // Table Name | ||
21 | color: SME.colors.blue, // Table Color | ||
22 | id: null, // Table ID | ||
23 | decorate: true, // Draw table decorator | ||
24 | onRender: Prototype.emptyFunction // Callback function when the table renders | ||
25 | }, arguments[0] || {}); | ||
26 | |||
27 | // Cache of the chips on the table | ||
28 | this.chips = []; | ||
29 | |||
30 | // Cache of table JSON data | ||
31 | this.data = null; | ||
32 | |||
33 | this._createTable(); | ||
34 | |||
35 | // Initially resizes the window to the correct height, and keep | ||
36 | // resizing it as the window changes | ||
37 | this.resize(); | ||
38 | Event.observe(window, 'resize', function() | ||
39 | { | ||
40 | this.resize(); | ||
41 | }.bindAsEventListener(this)); | ||
42 | |||
43 | if (this.options.decorate) | ||
44 | { | ||
45 | this._createAppDecorator(); | ||
46 | } | ||
47 | }, | ||
48 | |||
49 | /* | ||
50 | * Create the table DOM object. | ||
51 | */ | ||
52 | _createTable: function() | ||
53 | { | ||
54 | this.table = document.createElement('div'); | ||
55 | |||
56 | if (this.options.id) | ||
57 | { | ||
58 | this.table.id = this.options.id; | ||
59 | } | ||
60 | |||
61 | this.table.className = 'table'; | ||
62 | document.body.appendChild(this.table); | ||
63 | |||
64 | this.options.onRender(this); | ||
65 | }, | ||
66 | |||
67 | /* | ||
68 | * Load the chip data from the server and cache it in the object. | ||
69 | */ | ||
70 | loadChipData: function(feedURL, urlParams, showAfterLoad) | ||
71 | { | ||
72 | new Ajax.Request(feedURL.evaluate(urlParams), | ||
73 | { | ||
74 | method: 'get', | ||
75 | |||
76 | onSuccess: function(transport) | ||
77 | { | ||
78 | this.data = transport.responseText.evalJSON(); | ||
79 | |||
80 | if (showAfterLoad || this.options.id == SME.currentTable) | ||
81 | this.showChips(); | ||
82 | }.bind(this) | ||
83 | }); | ||
84 | }, | ||
85 | |||
86 | /* | ||
87 | * Creates the decorator icon show in the footer of the user interface | ||
88 | * which just links to a table hash and relies on the history manager | ||
89 | * to load the appropriate table. | ||
90 | */ | ||
91 | _createAppDecorator: function() | ||
92 | { | ||
93 | var link = Builder.node('a', | ||
94 | { | ||
95 | href: '#table' + this.options.id, | ||
96 | style: 'color: ' + this.options.color, | ||
97 | alt: this.options.name + ' Table', | ||
98 | title: this.options.name + ' Table' | ||
99 | }, | ||
100 | [ | ||
101 | Builder.node('img', | ||
102 | { | ||
103 | className: 'appDecorator', | ||
104 | src: 'images/pill.gif', | ||
105 | style: 'background: ' + this.options.color | ||
106 | }), | ||
107 | |||
108 | this.options.name.toUpperCase() | ||
109 | ]); | ||
110 | |||
111 | $('footer').appendChild(link); | ||
112 | }, | ||
113 | |||
114 | /* | ||
115 | * Show chips on the table once data is loaded. This function creates | ||
116 | * and caches chip objects on the table. | ||
117 | */ | ||
118 | showChips: function() | ||
119 | { | ||
120 | // Only load the chips once | ||
121 | if (this.chipsDone || !this.data) | ||
122 | { | ||
123 | return; | ||
124 | } | ||
125 | else | ||
126 | { | ||
127 | this.chipsDone = true; | ||
128 | } | ||
129 | |||
130 | this.bez = new Bezel( | ||
131 | { | ||
132 | onShow: function() | ||
133 | { | ||
134 | this.data.each(function(chip) | ||
135 | { | ||
136 | this.addChip(chip); | ||
137 | }.bind(this)); | ||
138 | |||
139 | this.chips.each(function(chip) | ||
140 | { | ||
141 | chip.animate(); | ||
142 | }); | ||
143 | }.bind(this) | ||
144 | }).show(Strings.loadingNoAnim); | ||
145 | }, | ||
146 | |||
147 | /* | ||
148 | * Remove a chip from the table. | ||
149 | */ | ||
150 | removeChip: function(chipContID) | ||
151 | { | ||
152 | this.chips.each(function(chip) | ||
153 | { | ||
154 | if (chip.options.contID == chipContID) | ||
155 | { | ||
156 | chip.hide(); | ||
157 | this.chips = this.chips.without(chip); | ||
158 | } | ||
159 | }.bind(this)) | ||
160 | }, | ||
161 | |||
162 | /* | ||
163 | * Add a chip to the table. | ||
164 | */ | ||
165 | addChip: function(data) | ||
166 | { | ||
167 | var cords = Object.extend( | ||
168 | { | ||
169 | x: data.x, | ||
170 | y: data.y, | ||
171 | animate: true | ||
172 | }, arguments[1] || {}); | ||
173 | |||
174 | var chip = new CardChip( | ||
175 | { | ||
176 | x: cords.x, | ||
177 | y: cords.y, | ||
178 | category: data.category, | ||
179 | contID: data.cid, | ||
180 | title: data.title, | ||
181 | image: data.chip, | ||
182 | locked: data.locked || false, | ||
183 | animate: cords.animate | ||
184 | }); | ||
185 | |||
186 | chip.addTo(this.table); | ||
187 | this.chips.push(chip); | ||
188 | }, | ||
189 | |||
190 | /* | ||
191 | * Clear out the chip cache. This function is not to be used within | ||
192 | * the code. It exists to be called manually on the command line for | ||
193 | * debugging purposes. | ||
194 | */ | ||
195 | _blowChips: function() | ||
196 | { | ||
197 | this.chips = []; | ||
198 | }, | ||
199 | |||
200 | /* | ||
201 | * Serialize all the chip data on the table to an object, presumably | ||
202 | * to be converted to JSON later. The object should match the output | ||
203 | * of card_table.pl | ||
204 | */ | ||
205 | getChipData: function() | ||
206 | { | ||
207 | var data = []; | ||
208 | |||
209 | this.chips.each(function(c) | ||
210 | { | ||
211 | data.push(c._serialize()); | ||
212 | }); | ||
213 | |||
214 | return data; | ||
215 | }, | ||
216 | |||
217 | /* | ||
218 | * Tests if the table contains a chip with the particular content ID. | ||
219 | */ | ||
220 | hasChip: function(chipID) | ||
221 | { | ||
222 | var chip = this.chips.find(function(item) | ||
223 | { | ||
224 | if (item.options.contID == chipID) | ||
225 | return true; | ||
226 | |||
227 | return false; | ||
228 | }); | ||
229 | |||
230 | return chip ? true : false; | ||
231 | }, | ||
232 | |||
233 | /* | ||
234 | * Changes the size of the table when the browser window is resized. | ||
235 | */ | ||
236 | resize: function() | ||
237 | { | ||
238 | this.table.style.height = ($('footer').offsetTop - | ||
239 | $('footer').offsetHeight) + 'px'; | ||
240 | }, | ||
241 | |||
242 | /* | ||
243 | * Shows the table. | ||
244 | */ | ||
245 | show: function() | ||
246 | { | ||
247 | this.showChips(); | ||
248 | SME.currentTable = this.options.id; | ||
249 | this.table.style.display = 'block'; | ||
250 | }, | ||
251 | |||
252 | /* | ||
253 | * Hides the table. | ||
254 | */ | ||
255 | hide: function() | ||
256 | { | ||
257 | this.table.style.display = 'none'; | ||
258 | } | ||
259 | }); | ||
260 | |||
261 | Object.extend(CardTable, | ||
262 | { | ||
263 | /* | ||
264 | * Show a table and hide all others. Not the special exception for the | ||
265 | * sketchbook. | ||
266 | */ | ||
267 | showTable: function(table) | ||
268 | { | ||
269 | SME.tables.each(function(item) | ||
270 | { | ||
271 | if (item.options.id == table) | ||
272 | { | ||
273 | item.show(); | ||
274 | } | ||
275 | else | ||
276 | { | ||
277 | item.hide(); | ||
278 | } | ||
279 | }); | ||
280 | |||
281 | if (table == 'sketchbook') | ||
282 | { | ||
283 | SME.sketchbook.show(); | ||
284 | } | ||
285 | else | ||
286 | { | ||
287 | SME.sketchbook.hide(); | ||
288 | } | ||
289 | }, | ||
290 | |||
291 | /* | ||
292 | * Return the color as a string for a table based on table ID. Note | ||
293 | * the special exception for special case cards which are not associated | ||
294 | * with a particular table. | ||
295 | */ | ||
296 | tableColor: function(table) | ||
297 | { | ||
298 | if (table == 'special') | ||
299 | { | ||
300 | return SME.colors.grey; | ||
301 | } | ||
302 | |||
303 | var color = SME.tables.find(function(item) | ||
304 | { | ||
305 | if (item.options.id == table) | ||
306 | { | ||
307 | return true; | ||
308 | } | ||
309 | |||
310 | return false; | ||
311 | }).options.color; | ||
312 | |||
313 | return color; | ||
314 | } | ||
315 | }); \ No newline at end of file | ||