diff options
author | Mike Crute <mcrute@gmail.com> | 2010-01-17 12:06:15 -0500 |
---|---|---|
committer | Mike Crute <mcrute@gmail.com> | 2010-01-17 12:06:15 -0500 |
commit | 55974d21a824378b287e563bce4c32597060cfca (patch) | |
tree | ff8426efe10ff98189fee26583f061fb08f19a50 /docroot/classes/chip.class.js | |
download | designer_site-master.tar.bz2 designer_site-master.tar.xz designer_site-master.zip |
Diffstat (limited to 'docroot/classes/chip.class.js')
-rwxr-xr-x | docroot/classes/chip.class.js | 269 |
1 files changed, 269 insertions, 0 deletions
diff --git a/docroot/classes/chip.class.js b/docroot/classes/chip.class.js new file mode 100755 index 0000000..61b7bdb --- /dev/null +++ b/docroot/classes/chip.class.js | |||
@@ -0,0 +1,269 @@ | |||
1 | /* | ||
2 | * Material Experience - Card Chip 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 CardChip = Class.create(); | ||
10 | Object.extend(CardChip.prototype, | ||
11 | { | ||
12 | /* | ||
13 | * Initializes the chip class. | ||
14 | */ | ||
15 | initialize: function() | ||
16 | { | ||
17 | this.options = Object.extend( | ||
18 | { | ||
19 | x: 0, // X coordinate of the chip | ||
20 | y: 0, // Y coordinate of the chip | ||
21 | locked: false, // Require login to view card | ||
22 | category: null, // Chip target category | ||
23 | contID: null, // Chip target content ID | ||
24 | title: null, // Chip target title | ||
25 | image: null, // Chip image | ||
26 | className: 'chip', // Chip CSS Class Name | ||
27 | animate: true // Animate chip onto table | ||
28 | }, arguments[0] || {}); | ||
29 | |||
30 | this.dragged = false; | ||
31 | |||
32 | this._createChip(); | ||
33 | |||
34 | return this; | ||
35 | }, | ||
36 | |||
37 | /* | ||
38 | * Create the chip DOM nodes and attach events and drags as appropriate. | ||
39 | */ | ||
40 | _createChip: function() | ||
41 | { | ||
42 | this.chip = Builder.node('img', | ||
43 | { | ||
44 | src: this.options.image, | ||
45 | className: this.options.className, | ||
46 | style: 'top: ' + this.options.y + 'px; left: ' + this.options.x + 'px', | ||
47 | title: this.options.title + ((this.options.locked) ? ' (protected)' : ''), | ||
48 | alt: this.options.title + ((this.options.locked) ? ' (protected)' : '') | ||
49 | }); | ||
50 | |||
51 | // Each DOM node should have a link back to this class so we can | ||
52 | // later look at a DOM node which holds no real data about the | ||
53 | // object and come back here to get the data we need. | ||
54 | this.chip.classLink = this; | ||
55 | |||
56 | new Draggable(this.chip, | ||
57 | { | ||
58 | starteffect: null, | ||
59 | endeffect: null, | ||
60 | |||
61 | change: function() | ||
62 | { | ||
63 | // Set the dragged flag (see onClick for more information) | ||
64 | this.dragged = true; | ||
65 | }.bind(this), | ||
66 | |||
67 | onEnd: function(e) | ||
68 | { | ||
69 | // Ensures that cards stay on top of the stack after they are | ||
70 | // dropped. This is accomplished by determining the maximum | ||
71 | // z-index of the cards and applying max + 1 to the current | ||
72 | // chip. | ||
73 | // | ||
74 | // Note that we are modifying a variable used internally by | ||
75 | // Scriptaculous that is NOT part of the public API. The | ||
76 | // originalZ variable is used by Scriptaculous to record the | ||
77 | // z-index that it should return the draggable to, by | ||
78 | // incrementing this we effectively move the card up in the | ||
79 | // stack. | ||
80 | // | ||
81 | // Note that scriptaculous adds a z-index of 1000 when the drag | ||
82 | // starts and does not remove it till AFTER this function executes | ||
83 | // so we have to take off that extra 1000 to get the real z-index. | ||
84 | e.originalZ = $$('div#' + (SME.currentTable || 'home') + ' img.chip').max(function(x) | ||
85 | { | ||
86 | var z = parseInt(x.style.zIndex) || 0; | ||
87 | return (z >= 1000) ? z - 1000 : z; | ||
88 | }) + 1; | ||
89 | |||
90 | // Track the X and Y coordinates of the chip | ||
91 | e.element.classLink.options.x = e.element.style.left.split('px')[0]; | ||
92 | e.element.classLink.options.y = e.element.style.top.split('px')[0]; | ||
93 | } | ||
94 | }); | ||
95 | |||
96 | Event.observe(this.chip, 'click', function() | ||
97 | { | ||
98 | this.onClick(); | ||
99 | }.bindAsEventListener(this)); | ||
100 | |||
101 | if (this.options.animate) | ||
102 | { | ||
103 | this._generateAnimation(); | ||
104 | } | ||
105 | }, | ||
106 | |||
107 | /* | ||
108 | * Handle clicks on the chip. | ||
109 | */ | ||
110 | onClick: function() | ||
111 | { | ||
112 | // If we recently dragged this card then do nothing. This | ||
113 | // facilitates single click DND as well as single click | ||
114 | // activation. | ||
115 | if (this.dragged == true) | ||
116 | { | ||
117 | this.dragged = false; | ||
118 | return; | ||
119 | } | ||
120 | |||
121 | // If this is a locked chip and we aren't logged in then show | ||
122 | // a login screen | ||
123 | if (this.options.locked && !Sketchbook.loggedIn) | ||
124 | { | ||
125 | return Sketchbook.showLoginScreen(); | ||
126 | } | ||
127 | |||
128 | // Disable the puff in IE because the PNG fix breaks it | ||
129 | if (!Prototype.Browser.IE) | ||
130 | { | ||
131 | new Effect.Puff(this.chip, | ||
132 | { | ||
133 | afterFinish: function() | ||
134 | { | ||
135 | new Effect.Appear(this.chip); | ||
136 | }.bind(this) | ||
137 | }); | ||
138 | } | ||
139 | |||
140 | SME.history.registerEvent('card', this.options.title, this.options.contID); | ||
141 | |||
142 | var t = new Card( | ||
143 | { | ||
144 | color: CardTable.tableColor(this.options.category), | ||
145 | contID: this.options.contID, | ||
146 | title: this.options.title, | ||
147 | chip: this | ||
148 | }); | ||
149 | |||
150 | t.show(); | ||
151 | }, | ||
152 | |||
153 | /* | ||
154 | * Actually move the chip onto the table. This function expects the | ||
155 | * original and new coordinates to be pre-generated and stored by | ||
156 | * another function. | ||
157 | */ | ||
158 | animate: function() | ||
159 | { | ||
160 | new Effect.Morph(this.chip, | ||
161 | { | ||
162 | style: | ||
163 | { | ||
164 | top: this.newY + 'px', | ||
165 | left: this.newX + 'px' | ||
166 | } | ||
167 | }); | ||
168 | }, | ||
169 | |||
170 | /* | ||
171 | * Return data about the chip in an object that matches of the format | ||
172 | * of the card table JSON feed. | ||
173 | */ | ||
174 | _serialize: function() | ||
175 | { | ||
176 | return { | ||
177 | cid : this.options.contID, | ||
178 | title : this.options.title, | ||
179 | category : this.options.category, | ||
180 | locked : this.options.locked, | ||
181 | x : this.options.x, | ||
182 | y : this.options.y, | ||
183 | chip : this.options.image | ||
184 | }; | ||
185 | }, | ||
186 | |||
187 | /* | ||
188 | * Generate random coordinates for and place the chip off the edge of | ||
189 | * the table to be animated in later on by a different function. | ||
190 | */ | ||
191 | _generateAnimation: function() | ||
192 | { | ||
193 | var myRand = Math.floor(1 + (5 - 1) * Math.random()); | ||
194 | var windSize = window.getDimensions(); | ||
195 | |||
196 | this.newX = this.options.x; | ||
197 | this.newY = this.options.y; | ||
198 | |||
199 | this.chip.setStyle({ position: 'absolute' }); | ||
200 | |||
201 | // Determine from which direction the cards will animate | ||
202 | switch (myRand) | ||
203 | { | ||
204 | case 1: // Top | ||
205 | this.chip.setStyle( | ||
206 | { | ||
207 | top: -(SME.sizes.chipMax.height) + 'px', | ||
208 | left: (windSize.width / 2) + 'px' | ||
209 | }); | ||
210 | break; | ||
211 | |||
212 | case 2: // Right | ||
213 | this.chip.setStyle( | ||
214 | { | ||
215 | top: (windSize.height / 2) + 'px', | ||
216 | left: (SME.sizes.chipMax.width) + windSize.width + 'px' | ||
217 | }); | ||
218 | break; | ||
219 | |||
220 | case 3: // Bottom | ||
221 | this.chip.setStyle( | ||
222 | { | ||
223 | top: (SME.sizes.chipMax.height) + windSize.height + 'px', | ||
224 | left: (windSize.width / 2) + 'px' | ||
225 | }); | ||
226 | break; | ||
227 | |||
228 | default: // Left | ||
229 | this.chip.setStyle( | ||
230 | { | ||
231 | top: (windSize.height / 2) + 'px', | ||
232 | left: -(SME.sizes.chipMax.width + 40) + 'px' | ||
233 | }); | ||
234 | break; | ||
235 | } | ||
236 | }, | ||
237 | |||
238 | /* | ||
239 | * Add a chip DOM node to a table. | ||
240 | */ | ||
241 | addTo: function(table) | ||
242 | { | ||
243 | table.appendChild(this.chip); | ||
244 | }, | ||
245 | |||
246 | /* | ||
247 | * Remove the chip DOM node from the document. | ||
248 | */ | ||
249 | destroy: function() | ||
250 | { | ||
251 | document.removeChild(this.chip); | ||
252 | }, | ||
253 | |||
254 | /* | ||
255 | * Show the chip. | ||
256 | */ | ||
257 | show: function() | ||
258 | { | ||
259 | this.chip.show(); | ||
260 | }, | ||
261 | |||
262 | /* | ||
263 | * Hide the chip. | ||
264 | */ | ||
265 | hide: function() | ||
266 | { | ||
267 | this.chip.hide(); | ||
268 | } | ||
269 | }); \ No newline at end of file | ||