summaryrefslogtreecommitdiff
path: root/docroot/classes/layouts/layout.custom.class.js
diff options
context:
space:
mode:
Diffstat (limited to 'docroot/classes/layouts/layout.custom.class.js')
-rwxr-xr-xdocroot/classes/layouts/layout.custom.class.js219
1 files changed, 219 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
© 2015 Mike Crute