summaryrefslogtreecommitdiff
path: root/docroot/classes/layouts
diff options
context:
space:
mode:
Diffstat (limited to 'docroot/classes/layouts')
-rwxr-xr-xdocroot/classes/layouts/layout.custom.class.js219
-rwxr-xr-xdocroot/classes/layouts/layout.error.class.js33
-rwxr-xr-xdocroot/classes/layouts/layout.primary.class.js411
-rwxr-xr-xdocroot/classes/layouts/layout.special.class.js43
4 files changed, 706 insertions, 0 deletions
diff --git a/docroot/classes/layouts/layout.custom.class.js b/docroot/classes/layouts/layout.custom.class.js
new file mode 100755
index 0000000..d4aa463
--- /dev/null
+++ b/docroot/classes/layouts/layout.custom.class.js
@@ -0,0 +1,219 @@
1/*
2 * Material Experience - Card Layout Engines 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
9Card.Layout.Custom = Class.create();
10Object.extend(Object.extend(Card.Layout.Custom.prototype, Card.Layout.prototype),
11{
12 /*
13 * Initialize the layout class
14 */
15 initialize: function(cframe, data, card)
16 {
17 this.cframe = cframe;
18 this.data = data;
19 this.card = card;
20 this.color = this.card.options.color;
21 this.hasResources = false;
22 this.inited = false;
23 },
24
25 /*
26 * Create custom scroll bars for an HTML element.
27 */
28 scrollify: function(div, isiframe)
29 {
30 var div2 = null;
31
32 // Inherit the color from a link
33 var color = $$('ul#navigation li a')[0].getStyle('background-color');
34
35 if (isiframe)
36 {
37 div2 = div.contentWindow.document.documentElement;
38 }
39 else
40 {
41 div2 = div;
42 }
43
44 // Create the scroll container and draggable widget
45 this.cframe.appendChild(
46 this.scrollCont = Builder.node('div',
47 {
48 style: 'border-left: 1px solid ' + color + ';' +
49 'width: 1px; position: absolute; ' +
50 'height:' + div.offsetHeight + 'px; ' +
51 'top: 10px;' + 'left: ' + (div.offsetLeft + div.offsetWidth + 12) + 'px;'
52 },
53
54 this.scrollBar = Builder.node('img',
55 {
56 src: 'http://materialexperience.santoprene.com/images/pill.gif',
57 style: 'display: block; margin-left: -3px; cursor: move; ' +
58 'background: ' + color + '; padding: 0px;'
59 })
60 ));
61
62 // Create the scroller
63 this.scroller = new Control.Slider(this.scrollBar, this.scrollCont,
64 {
65 axis: 'vertical',
66 range: $R(0, div2.scrollHeight),
67
68 onSlide: function(value)
69 {
70 div2.scrollTop = Math.floor(value);
71 }.bind(this)
72 });
73
74 new PeriodicalExecuter(function()
75 {
76 // Hide the scroller if there isn't a need for it
77 if (div2.scrollHeight > 480)
78 {
79 this.scrollCont.show();
80 }
81 else
82 {
83 this.scrollCont.hide();
84 return;
85 }
86
87 // Update the scroller range when the contents change
88 this.scroller.range = $R(0, div2.scrollHeight);
89
90 // Move the scroller when the scrolled element changes
91 // (e.g. linking down into the page).
92 if (this.scroller.value != div2.scrollTop)
93 {
94 this.scroller.setValue(div2.scrollTop);
95 }
96 }.bind(this), 1);
97 },
98
99 initIframe: function(url)
100 {
101 $('wideCol').innerHTML = '<iframe ' +
102 'src = "' + url + '" ' +
103 'frameborder = "0" ' +
104 'scrolling = "auto" ' +
105 'width = "660" ' +
106 'height = "460" ' +
107 'id = "wide_content" ' +
108 'name = "wide_content" ' +
109 '></iframe>';
110 },
111
112 /*
113 * Main function to layout the card.
114 */
115 layout: function()
116 {
117 var htmlstr = '<div id="narrowCol" style="float: left; margin: 10px 0px 0px 20px; width: 200px; height: 460px; overflow: hidden;"><ul id="navigation">';
118
119 this.data.contentNarrow.each(function(item)
120 {
121 htmlstr += '<li><a target="wide_content" href="' + item.url + '">' + item.title + '</a>';
122
123 if (item.subitems)
124 {
125 var parentUrl = item.url;
126
127 htmlstr += '<ul>';
128
129 item.subitems.each(function(subitem)
130 {
131 htmlstr += '<li><a target="wide_content" href="' + parentUrl + '#' + subitem.url + '">' + subitem.title + '</a></li>';
132 }.bind(this));
133
134 htmlstr += '</ul></li>';
135 }
136 else
137 {
138 htmlstr += '</li>';
139 }
140 }.bind(this));
141
142 htmlstr += '</ul></div><div id="wideCol" style="width: 660px; height: 460px; float: right; margin: 10px 10px 0px 0px;"></div>';
143 this.cframe.innerHTML = htmlstr;
144
145 if (this.data.intro)
146 {
147 $('wideCol').innerHTML = this.data.intro;
148 }
149
150// this.scrollify($('wide_content'), true);
151 this.scrollify($('narrowCol'));
152
153 // Hide everything first
154 $$('ul#navigation li ul').each(function(item)
155 {
156 item.setStyle({ display: 'none' });
157 });
158
159 var curr = null;
160 // Then attach the onclick events
161 $$('ul#navigation li').each(function(item)
162 {
163 Event.observe(item, 'click', function(event)
164 {
165 // Hide the currently opened item if it is clicked again
166 // per BS.
167 if (curr && item == curr)
168 {
169 curr.down('ul').hide();
170 item.setStyle({ borderLeft: '0px' });
171 curr = null;
172 return;
173 }
174
175 curr = item;
176
177 // Hide everything
178 $$('ul#navigation li ul').each(function(item)
179 {
180 item.setStyle({ display: 'none' });
181 });
182
183 // Clear out the borders
184 $$('ul#navigation li').each(function(item)
185 {
186 item.setStyle({ borderLeft: '' });
187 });
188
189 // Figure out what color we SHOULD be, this will change
190 // depending on the card color we are on so just rely
191 // on the designer to communicate through the CSS,
192 // probably not wise relying on a designer for code
193 // but alas...
194 var color = $$('ul#navigation li a')[0].getStyle('background-color');
195
196 this.initIframe(item.href);
197
198 // Catch and execute or just leave it lie
199 try
200 {
201 if (item.down('ul').style.display != 'none')
202 {
203 item.down('ul').hide();
204 Event.stop(event);
205 return;
206 }
207
208 item.down('ul').show();
209 item.setStyle({ borderLeft: '3px solid ' + color });
210 //Event.stop(event);
211 }
212 catch (e)
213 {
214 // Just let the link do its thing
215 }
216 }.bind(this));
217 }.bind(this));
218 }
219}); \ No newline at end of file
diff --git a/docroot/classes/layouts/layout.error.class.js b/docroot/classes/layouts/layout.error.class.js
new file mode 100755
index 0000000..2fedfcf
--- /dev/null
+++ b/docroot/classes/layouts/layout.error.class.js
@@ -0,0 +1,33 @@
1/*
2 * Material Experience - Error Card Layout Engine
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
9Card.Layout.Errors = Class.create();
10Object.extend(Object.extend(Card.Layout.Errors.prototype, Card.Layout.prototype),
11{
12 /*
13 * Initialize the layout class
14 */
15 initialize: function(cframe, data, card)
16 {
17 this.cframe = cframe;
18 this.data = data;
19 this.card = card;
20 this.color = this.card.options.color;
21 this.hasResources = false;
22 },
23
24 /*
25 * Main function to layout the card.
26 */
27 layout: function()
28 {
29 this.cframe.innerHTML = '';
30 this.cframe.appendChild(Builder.node('h1', Strings.cardErrorTitle));
31 this.cframe.appendChild(Builder.node('p', Strings.cardErrorText));
32 }
33}); \ No newline at end of file
diff --git a/docroot/classes/layouts/layout.primary.class.js b/docroot/classes/layouts/layout.primary.class.js
new file mode 100755
index 0000000..87bc910
--- /dev/null
+++ b/docroot/classes/layouts/layout.primary.class.js
@@ -0,0 +1,411 @@
1/*
2 * Material Experience - Primary Card Layout 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 * WARNING: Here be dragons, OK so not as many as before but good luck you poor
9 * sap.
10 */
11
12Card.Layout.Primary = Class.create();
13Object.extend(Object.extend(Card.Layout.Primary.prototype, Card.Layout.prototype),
14{
15 /*
16 * Initialize the layout class
17 */
18 initialize: function(cframe, data, card)
19 {
20 this.cframe = cframe;
21 this.data = data;
22 this.card = card;
23 this.color = this.card.options.color;
24 this.hasResources = false;
25
26 var direction = data.template.replace(/narrow-/,'');
27 this.direction = direction ? direction : 'left';
28 this.oppositeDirection = (direction == 'left') ? 'right' : 'left';
29 },
30
31 /*
32 * Set the column content. This can be flash, an image or an iframe.
33 */
34 setColumn: function(url, direction, contTitle)
35 {
36 var content = Builder.node('div', { style: 'float: ' + this.oppositeDirection });
37 var myCol = direction + 'Col';
38
39 if (/swf$/.test(url)) // Flash
40 {
41 content.innerHTML = new SWFObject(url, 'cardFlash', 580, 479, 9, '#FFFFFF').getSWFHTML();
42 }
43 else if (/(png|gif|jpg|jpeg)$/.test(url)) // Image
44 {
45 content = Builder.node('img',
46 {
47 src: url,
48 alt: contTitle,
49 title: contTitle,
50 style: 'float: ' + this.oppositeDirection
51 });
52 }
53 else // iFrame
54 {
55 // Can't use DOM methods because IE is allergic
56 content.innerHTML = '<iframe ' +
57 'src = "' + url + '" ' +
58 'frameborder = "0" ' +
59 'scrolling = "auto" ' +
60 'width = "580" ' +
61 'height = "480" ' +
62 'id = "wide_content" ' +
63 'name = "wide_content" ' +
64 '></iframe>';
65 }
66
67 // We need to replace the content of the column if it exists to
68 // facilitate changing content later on (i.e. thumbnails)
69 if (typeof this[myCol] != 'undefined')
70 {
71 this.cframe.replaceChild(content, this[myCol]);
72 this[myCol] = content;
73 }
74 else
75 {
76 this[myCol] = this.cframe.appendChild(content);
77 }
78
79 },
80
81 /*
82 * Build the resource (more information) list.
83 */
84 getResourceList: function()
85 {
86 // Only run if we need to
87 if (!this.data.resources)
88 {
89 return;
90 }
91
92 var numResources = 0;
93 var iter = 0;
94 var limit = 5;
95 this.hasResources = true;
96
97 this.resourceContainer = this.contentArea.appendChild(
98 Builder.node('div',
99 [
100 Builder.node('h2', { style: 'color: ' + this.card.options.color }, Strings.moreInfo),
101 this.resources = Builder.node('ul', { className: 'resourceList' })
102 ]
103 ));
104
105 this.data.resources.each(function(item)
106 {
107 // Limit the number of allowable resources
108 if (typeof item == 'undefined' || ++iter > limit)
109 {
110 return;
111 }
112
113 numResources++;
114
115 this.resources.appendChild(Builder.node('li',
116 Builder.node('a',
117 {
118 href: item.link + '?entrypoint=DESIGNER',
119 target: '_new',
120 style: 'color: ' + this.color
121 }, item.title)
122 ));
123 }.bind(this));
124 },
125
126 /*
127 * Set the contents of the narrow column.
128 */
129 setHTML: function(content)
130 {
131 this.htmlDiv.innerHTML = content;
132 },
133
134 /*
135 * Setup the thumbnails.
136 */
137 getThumbnails: function()
138 {
139 // Only run if we need to
140 if (this.data.media.size() <= 1)
141 {
142 return;
143 }
144
145 var iter = 0;
146 var limit = 5; // Includes main media file
147 var lData = this.data.media;
148
149 this.thumbStrip = this.contentArea.appendChild(Builder.node('div', { className: 'thumbStrip' }));
150
151 // Add the main media file to the data array
152 lData.push(
153 {
154 thumb: this.data.contentWide[0].thumb,
155 url: this.data.contentWide[0].url
156 });
157
158 this.data.media.each(function(item)
159 {
160 // Limit the number of thumbnails
161 if (typeof item == 'undefined' || ++iter > limit)
162 {
163 return;
164 }
165
166 var mediaPiece = this.thumbStrip.appendChild(
167 Builder.node('img',
168 {
169 src: item.thumb,
170 className: 'mediaThumb'
171 })
172 );
173
174 Event.observe(mediaPiece, 'click', function()
175 {
176 this.setColumn(item.url, this.direction, '');
177 }.bindAsEventListener(this));
178 }.bind(this));
179 },
180
181 /*
182 * Clean up the data.
183 */
184 _cleanData: function()
185 {
186 var lData = this.data.contentNarrow[0].htmlContent;
187 this.data.contentNarrow[0].htmlContent = lData.replace(/<a/gi, '<a style="color: '+this.color+'"');
188 },
189
190 /*
191 * Calculate the heights of various interface elements for use in
192 * laying out the page.
193 */
194 _calculateHeights: function()
195 {
196 // This data structure will hold the heights of all the elements
197 // in the narrow column for use in dynamically calculating the
198 // layout of the column.
199 this.heightTable =
200 {
201 headline : this.headLine ? this.headLine.getHeight() : 0,
202 content : this.htmlDiv ? this.htmlDiv.getHeight() : 0,
203 thumbnails : this.thumbStrip ? this.thumbStrip.getHeight() : 0,
204 resources : this.resourceContainer ? this.resourceContainer.getHeight() : 0,
205 paddingFactor : !Prototype.Browser.IE ? 40 : 0
206 };
207
208 // If there is no headline IE comes up with a ridiculous height for some
209 // reason so we correct for that here.
210 if (Prototype.Browser.IE && this.data.contentNarrow[0].title.length == 0)
211 {
212 this.heightTable.headline = 0;
213 }
214
215 // A variety of exceptions/tweaks for IE6 found by testing every combination
216 // of layouts and finding the variance. There isn't much of another way to
217 // do it.
218 if (Prototype.Browser.IE)
219 {
220 this.heightTable.thumbnail += 2;
221 this.heightTable.content += 24;
222 }
223
224 if (Prototype.Browser.IE && this.resourceContainer)
225 {
226 this.heightTable.resources -= 30;
227 }
228
229 if (Prototype.Browser.IE && this.htmlDiv && this.thumbStrip && !this.resourceContainer)
230 {
231 this.heightTable.thumbnails += 10;
232 }
233
234
235 if (Prototype.Browser.IE && this.resourceContainer && !this.thumbStrip)
236 {
237 this.heightTable.resources += 70;
238 }
239
240 // Calculate the height available for content
241 this.heightTable.avaliableForContent = SME.sizes.innerCard.height - (
242 this.heightTable.headline +
243 this.heightTable.thumbnails +
244 this.heightTable.resources +
245 this.heightTable.paddingFactor
246 );
247 },
248
249 /*
250 * Setup the scroll bar on the wide content area.
251 */
252 _setupScroller: function()
253 {
254 // We only want to show the scroll bar if there is a need for it
255 if (this.heightTable.content < this.heightTable.avaliableForContent)
256 {
257 return;
258 }
259
260 this.contentArea.appendChild(
261 this.scrollCont = Builder.node('div',
262 {
263 style: 'border-left: 1px solid ' + this.card.options.color + ';' +
264 'width: 1px; right: 0px; position: absolute; ' +
265 'height:' + this.heightTable.avaliableForContent + 'px; ' +
266 'top: ' + (this.heightTable.headline + 10) + 'px;'
267 },
268
269 this.scrollBar = Builder.node('img',
270 {
271 src: 'images/pill.gif',
272 style: 'display: block; margin-left: -3px; cursor: move; ' +
273 'background: ' + this.card.options.color + ';'
274 })
275 ));
276
277 new Control.Slider(this.scrollBar, this.scrollCont,
278 {
279 axis: 'vertical',
280 range: $R(0, this.heightTable.content),
281
282 onSlide: function(value)
283 {
284 this.htmlDiv.scrollTop = value;
285 }.bind(this)
286 });
287
288 },
289
290 /*
291 * Main function to layout the card.
292 */
293 layout: function()
294 {
295 this._cleanData();
296
297 this.setColumn(this.data.contentWide[0].url, this.direction, this.data.contentWide[0].title);
298
299 this.contentArea = this.cframe.appendChild(
300 Builder.node('div', { className: 'narrowCol' },
301 this.headLine = Builder.node('h1', { style: 'color: ' + this.color }, this.data.contentNarrow[0].title)
302 )
303 );
304
305 // We've gotta set the width here otherwise the height
306 // calculations will be incorrect
307 this.htmlDiv = Builder.node('div', { style: 'width: 98%; overflow: hidden; width: 300px;' });
308
309 // Must set this early on otherwise there is no way to determine
310 // the actual height of the content div
311 this.setHTML(this.data.contentNarrow[0].htmlContent);
312 this.contentArea.appendChild(this.htmlDiv);
313
314 this.getResourceList();
315 this.getThumbnails();
316
317 // IE doesn't let prototype mess with the default object
318 // prototypes so we have to manually extend them. Sigh...
319 [
320 this.headLine,
321 this.htmlDiv,
322 this.thumbStrip,
323 this.resourceContainer,
324 this.contentArea
325 ].each(Element.extend);
326
327 // Set these styles up here or we get a -21px bug in our
328 // calculation code
329 this.contentArea.setStyle(
330 {
331 width: '310px',
332 position: 'absolute',
333 top: '0px'
334 });
335
336 this._calculateHeights();
337 this._setupScroller();
338
339 // We set this last, after all the height calculations are
340 // completed. That makes it a lot easier to work with.
341 this.htmlDiv.setStyle({ height: this.heightTable.avaliableForContent + 'px' });
342
343 // Webkit doesn't pad things correctly
344 if (this.direction == 'left')
345 {
346 this.contentArea.setStyle({ left: '10px' });
347 }
348 else
349 {
350 this.contentArea.setStyle({ right: '10px' });
351 }
352
353 // If this is an intro card do the intro card stuff.
354 if (this.data.template == 'intro')
355 {
356 this._doIntro();
357 }
358
359 return this;
360 },
361
362 /*
363 * Setup an intro card. Because intro cards aren't really that much
364 * different from a basic card and because class inheritance sucks in
365 * Prototype > 1.6 I'm just going to add this into here.
366 */
367 _doIntro: function()
368 {
369 this.contentArea.appendChild(Builder.node('div', { className: 'skipbox' },
370 this.skipLink = Builder.node('a', { href: '#tablehome', className: 'skiplink' },
371 [
372 Strings.skipButton,
373 Builder.node('img', { src: 'images/arrow_right_grey.gif', className: 'skipimg' })
374 ])
375 ));
376 },
377
378 /*
379 * Throw the card into a popup window for printing.
380 */
381 print: function()
382 {
383 var wind = window.open('', '', 'width=' + SME.sizes.innerCard.width + ',height=' + (SME.sizes.innerCard.height + 60));
384
385 with (wind)
386 {
387 with (document)
388 {
389 write('<html><head><style type="text/css">@import url(application.css); .narrowCol{top: 30px !important;}</style></head><body>');
390 write('<img src="images/logo.jpg" style="display: block; margin: 5px 0px 30px 5px;"/>');
391 write(this.cframe.innerHTML);
392 write('</body></html>');
393 close();
394 }
395
396 print();
397 close();
398 }
399
400 return true;
401 },
402
403 /*
404 * Debug the card layout. Generally this should be used to spot out
405 * data issues. But it could also be used for other debugging purposes.
406 */
407 _debug: function()
408 {
409
410 }
411}); \ No newline at end of file
diff --git a/docroot/classes/layouts/layout.special.class.js b/docroot/classes/layouts/layout.special.class.js
new file mode 100755
index 0000000..b285390
--- /dev/null
+++ b/docroot/classes/layouts/layout.special.class.js
@@ -0,0 +1,43 @@
1/*
2 * Material Experience - Special Case Layout Engine
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
9Card.Layout.Special = Class.create();
10Object.extend(Object.extend(Card.Layout.Special.prototype, Card.Layout.prototype),
11{
12 /*
13 * Initialize the layout class
14 */
15 initialize: function(cframe, data, card)
16 {
17 this.cframe = cframe;
18 this.data = data;
19 this.card = card;
20 this.color = this.card.options.color;
21 this.hasResources = false;
22
23 // Check if the url is provided otherwise pull it out of the
24 // wide content field.
25 if (!this.data.url)
26 {
27 this.data.url = this.data.contentWide[0].url;
28 }
29 },
30
31 /*
32 * Main function to layout the card.
33 */
34 layout: function()
35 {
36 this.cframe.innerHTML = '<iframe ' +
37 'src = "' + this.data.url + '" ' +
38 'frameborder = "0" ' +
39 'width = "' + (SME.sizes.card.width - 11) + '" ' +
40 'height = "' + (SME.sizes.card.height - 40) + '"' +
41 '></iframe>';
42 }
43}); \ No newline at end of file
© 2015 Mike Crute