From 55974d21a824378b287e563bce4c32597060cfca Mon Sep 17 00:00:00 2001
From: Mike Crute <mcrute@gmail.com>
Date: Sun, 17 Jan 2010 12:06:15 -0500
Subject: Initial import

---
 docroot/classes/layouts/layout.primary.class.js | 411 ++++++++++++++++++++++++
 1 file changed, 411 insertions(+)
 create mode 100755 docroot/classes/layouts/layout.primary.class.js

(limited to 'docroot/classes/layouts/layout.primary.class.js')

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 @@
+/*
+ * Material Experience - Primary Card Layout Class
+ * 
+ * EYEMG - Interactive Media Group
+ * Created by Mike Crute (mcrute@eyemg.com)
+ * Updated by Mike Crute (mcrute@eyemg.com) on 9/26/07
+ * 
+ * WARNING: Here be dragons, OK so not as many as before but good luck you poor
+ * sap.
+ */
+ 
+Card.Layout.Primary = Class.create();
+Object.extend(Object.extend(Card.Layout.Primary.prototype, Card.Layout.prototype), 
+{
+	/*
+	 * Initialize the layout class
+	 */
+	initialize: function(cframe, data, card) 
+	{
+		this.cframe       = cframe;
+		this.data         = data;
+		this.card         = card;
+		this.color        = this.card.options.color;
+		this.hasResources = false;
+		
+		var direction          = data.template.replace(/narrow-/,'');
+		this.direction         = direction ? direction : 'left';
+		this.oppositeDirection = (direction == 'left') ? 'right' : 'left';
+	},
+	
+	/*
+	 * Set the column content. This can be flash, an image or an iframe.
+	 */
+	setColumn: function(url, direction, contTitle) 
+	{
+		var content = Builder.node('div', { style: 'float: ' + this.oppositeDirection }); 
+		var myCol   = direction + 'Col';
+		
+		if (/swf$/.test(url)) // Flash
+		{
+			content.innerHTML = new SWFObject(url, 'cardFlash', 580, 479, 9, '#FFFFFF').getSWFHTML();
+		} 
+		else if (/(png|gif|jpg|jpeg)$/.test(url))  // Image
+		{
+			content = Builder.node('img', 
+			{
+				src:   url, 
+				alt:   contTitle, 
+				title: contTitle, 
+				style: 'float: ' + this.oppositeDirection 
+			});
+		}
+		else // iFrame
+		{
+			// Can't use DOM methods because IE is allergic
+			content.innerHTML = '<iframe '                          + 
+						'src         = "' + url + '" '  + 
+						'frameborder = "0" '            +
+						'scrolling   = "auto" '         +
+						'width       = "580" '          +
+						'height      = "480" '          +
+						'id          = "wide_content" ' +
+						'name        = "wide_content" ' +
+					'></iframe>';
+		}
+		
+		// We need to replace the content of the column if it exists to
+		// facilitate changing content later on (i.e. thumbnails)
+		if (typeof this[myCol] != 'undefined') 
+		{
+			this.cframe.replaceChild(content, this[myCol]);
+			this[myCol] = content;
+		} 
+		else 
+		{
+			this[myCol] = this.cframe.appendChild(content);
+		}
+
+	},
+	
+	/*
+	 * Build the resource (more information) list.
+	 */
+	getResourceList: function() 
+	{
+		// Only run if we need to
+		if (!this.data.resources)
+		{
+			return;
+		}
+	
+		var numResources  = 0;
+		var iter          = 0;
+		var limit         = 5;
+		this.hasResources = true;
+		
+		this.resourceContainer = this.contentArea.appendChild(
+			Builder.node('div', 
+			[
+				Builder.node('h2', { style: 'color: ' + this.card.options.color }, Strings.moreInfo),
+				this.resources = Builder.node('ul', { className: 'resourceList' })
+			]
+		));
+		
+		this.data.resources.each(function(item) 
+		{
+			// Limit the number of allowable resources
+			if (typeof item == 'undefined' || ++iter > limit)
+			{
+				return;
+			}
+			
+			numResources++;
+			
+			this.resources.appendChild(Builder.node('li', 
+				Builder.node('a', 
+				{ 
+					href:   item.link + '?entrypoint=DESIGNER', 
+					target: '_new', 
+					style:  'color: ' + this.color 
+				}, item.title)
+			));
+		}.bind(this));
+	},
+	
+	/*
+	 * Set the contents of the narrow column.
+	 */
+	setHTML: function(content) 
+	{
+		this.htmlDiv.innerHTML = content;
+	},
+	
+	/*
+	 * Setup the thumbnails.
+	 */
+	getThumbnails: function() 
+	{
+		// Only run if we need to
+		if (this.data.media.size() <= 1)
+		{
+			return;
+		}
+		
+		var iter  = 0;
+		var limit = 5; // Includes main media file
+		var lData = this.data.media;
+		
+		this.thumbStrip = this.contentArea.appendChild(Builder.node('div', { className: 'thumbStrip' }));
+
+		// Add the main media file to the data array
+		lData.push(
+		{
+			thumb: this.data.contentWide[0].thumb,
+			url:   this.data.contentWide[0].url
+		});
+		
+		this.data.media.each(function(item) 
+		{
+			// Limit the number of thumbnails
+			if (typeof item == 'undefined' || ++iter > limit) 
+			{
+				return;
+			}
+				
+			var mediaPiece = this.thumbStrip.appendChild(
+				Builder.node('img', 
+				{
+					src:        item.thumb, 
+					className: 'mediaThumb' 
+				})
+			);
+		
+			Event.observe(mediaPiece, 'click', function() 
+			{
+				this.setColumn(item.url, this.direction, '');
+			}.bindAsEventListener(this));
+		}.bind(this));
+	},
+	
+	/*
+	 * Clean up the data.
+	 */
+	_cleanData: function() 
+	{
+		var lData = this.data.contentNarrow[0].htmlContent;
+		this.data.contentNarrow[0].htmlContent = lData.replace(/<a/gi, '<a style="color: '+this.color+'"');
+	},
+	
+	/*
+	 * Calculate the heights of various interface elements for use in
+	 * laying out the page.
+	 */
+	_calculateHeights: function()
+	{
+		// This data structure will hold the heights of all the elements 
+		// in the narrow column for use in dynamically calculating the 
+		// layout of the column.
+		this.heightTable = 
+		{
+			headline      : this.headLine          ? this.headLine.getHeight()          : 0,
+			content       : this.htmlDiv           ? this.htmlDiv.getHeight()           : 0,
+			thumbnails    : this.thumbStrip        ? this.thumbStrip.getHeight()        : 0,
+			resources     : this.resourceContainer ? this.resourceContainer.getHeight() : 0,
+			paddingFactor : !Prototype.Browser.IE  ? 40                                 : 0
+		};
+		
+		// If there is no headline IE comes up with a ridiculous height for some
+		// reason so we correct for that here.
+		if (Prototype.Browser.IE && this.data.contentNarrow[0].title.length == 0)
+		{
+			this.heightTable.headline = 0;
+		}
+
+		// A variety of exceptions/tweaks for IE6 found by testing every combination
+		// of layouts and finding the variance. There isn't much of another way to
+		// do it.
+		if (Prototype.Browser.IE) 
+		{
+			this.heightTable.thumbnail += 2;
+			this.heightTable.content   += 24;
+		}
+		
+		if (Prototype.Browser.IE && this.resourceContainer) 
+		{
+			this.heightTable.resources -= 30;
+		}
+		
+		if (Prototype.Browser.IE && this.htmlDiv && this.thumbStrip && !this.resourceContainer)
+		{
+			this.heightTable.thumbnails += 10;
+		}
+		
+		
+		if (Prototype.Browser.IE && this.resourceContainer && !this.thumbStrip)
+		{
+			this.heightTable.resources += 70;
+		}
+
+		// Calculate the height available for content
+		this.heightTable.avaliableForContent = SME.sizes.innerCard.height - (
+							this.heightTable.headline   + 
+							this.heightTable.thumbnails + 
+							this.heightTable.resources  + 
+							this.heightTable.paddingFactor
+						);
+	},
+	
+	/*
+	 * Setup the scroll bar on the wide content area.
+	 */
+	_setupScroller: function() 
+	{
+		// We only want to show the scroll bar if there is a need for it
+		if (this.heightTable.content < this.heightTable.avaliableForContent) 
+		{
+			return;
+		}
+		
+		this.contentArea.appendChild(
+			this.scrollCont = Builder.node('div', 
+			{ 
+				style: 'border-left: 1px solid ' + this.card.options.color + ';' +
+					'width: 1px; right: 0px; position: absolute; ' +
+					'height:' + this.heightTable.avaliableForContent + 'px; ' +
+					'top: ' + (this.heightTable.headline + 10) + 'px;' 
+			},
+			
+			this.scrollBar  = Builder.node('img', 
+			{ 
+				src: 'images/pill.gif', 
+				style: 'display: block; margin-left: -3px; cursor: move; ' +
+					'background: ' + this.card.options.color + ';' 
+			})
+		));
+		
+		new Control.Slider(this.scrollBar, this.scrollCont, 
+		{
+			axis: 'vertical',
+			range: $R(0, this.heightTable.content),
+			
+			onSlide: function(value) 
+			{
+				this.htmlDiv.scrollTop = value;
+			}.bind(this)
+		});
+	
+	},
+	
+	/*
+	 * Main function to layout the card.
+	 */
+	layout: function() 
+	{
+		this._cleanData();
+		
+		this.setColumn(this.data.contentWide[0].url, this.direction, this.data.contentWide[0].title);
+		
+		this.contentArea = this.cframe.appendChild(
+			Builder.node('div', { className: 'narrowCol' },
+				this.headLine = Builder.node('h1', { style: 'color: ' + this.color }, this.data.contentNarrow[0].title)
+			)
+		);
+		
+		// We've gotta set the width here otherwise the height 
+		// calculations will be incorrect
+		this.htmlDiv = Builder.node('div', { style: 'width: 98%; overflow: hidden; width: 300px;' });
+		
+		// Must set this early on otherwise there is no way to determine 
+		// the actual height of the content div
+		this.setHTML(this.data.contentNarrow[0].htmlContent);
+		this.contentArea.appendChild(this.htmlDiv);
+
+		this.getResourceList();
+		this.getThumbnails();
+
+		// IE doesn't let prototype mess with the default object 
+		// prototypes so we have to manually extend them. Sigh...
+		[
+			this.headLine, 
+			this.htmlDiv, 
+			this.thumbStrip, 
+			this.resourceContainer, 
+			this.contentArea
+		].each(Element.extend);
+	
+		// Set these styles up here or we get a -21px bug in our 
+		// calculation code
+		this.contentArea.setStyle(
+		{ 
+			width:    '310px',
+			position: 'absolute',
+			top:      '0px'
+		});
+	
+		this._calculateHeights();
+		this._setupScroller();
+		
+		// We set this last, after all the height calculations are 
+		// completed.  That makes it a lot easier to work with.
+		this.htmlDiv.setStyle({ height: this.heightTable.avaliableForContent + 'px' });
+
+		// Webkit doesn't pad things correctly
+		if (this.direction == 'left') 
+		{
+			this.contentArea.setStyle({ left: '10px' });
+		}
+		else 
+		{
+			this.contentArea.setStyle({ right: '10px' });
+		}
+		
+		// If this is an intro card do the intro card stuff.
+		if (this.data.template == 'intro')
+		{
+			this._doIntro();
+		}
+		
+		return this;
+	},
+	
+	/*
+	 * Setup an intro card. Because intro cards aren't really that much 
+	 * different from a basic card and because class inheritance sucks in
+	 * Prototype > 1.6 I'm just going to add this into here. 
+	 */
+	_doIntro: function() 
+	{
+		this.contentArea.appendChild(Builder.node('div', { className: 'skipbox' },
+			this.skipLink = Builder.node('a', { href: '#tablehome', className: 'skiplink' }, 
+			[
+				Strings.skipButton,
+				Builder.node('img', { src: 'images/arrow_right_grey.gif', className: 'skipimg' })
+			])
+		));
+	},
+	
+	/*
+	 * Throw the card into a popup window for printing.
+	 */
+	print: function() 
+	{
+		var wind = window.open('', '', 'width=' + SME.sizes.innerCard.width + ',height=' + (SME.sizes.innerCard.height + 60));
+
+		with (wind) 
+		{
+			with (document) 
+			{
+				write('<html><head><style type="text/css">@import url(application.css); .narrowCol{top: 30px !important;}</style></head><body>');
+				write('<img src="images/logo.jpg" style="display: block; margin: 5px 0px 30px 5px;"/>');
+				write(this.cframe.innerHTML);
+				write('</body></html>');
+				close();
+			}
+			
+			print();
+			close();
+		}
+		
+		return true;
+	},
+	
+	/*
+	 * Debug the card layout. Generally this should be used to spot out
+	 * data issues. But it could also be used for other debugging purposes.
+	 */
+	_debug: function() 
+	{
+	
+	}
+});
\ No newline at end of file
-- 
cgit v1.2.3