summaryrefslogtreecommitdiff
path: root/docroot/classes/chip.class.js
diff options
context:
space:
mode:
Diffstat (limited to 'docroot/classes/chip.class.js')
-rwxr-xr-xdocroot/classes/chip.class.js269
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
9var CardChip = Class.create();
10Object.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
© 2015 Mike Crute