diff options
Diffstat (limited to 'docroot/classes/layouts/layout.custom.class.js')
-rwxr-xr-x | docroot/classes/layouts/layout.custom.class.js | 219 |
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 | |||
9 | Card.Layout.Custom = Class.create(); | ||
10 | Object.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 | ||