1 | // Kleinigkeiten für t29v6 |
---|
2 | window.t29 = {}; |
---|
3 | |
---|
4 | t29.config = {}; |
---|
5 | t29.config.set = function(new_settings) { |
---|
6 | $.merge(t29.config, new_settings); |
---|
7 | } |
---|
8 | |
---|
9 | t29.defaultvalue = {}; |
---|
10 | t29.defaultvalue.setup = function() { |
---|
11 | // JS default value |
---|
12 | $("input[data-defaultvalue]").each(function(){ |
---|
13 | var t=$(this); var d=t.data("defaultvalue"); t.val(d).addClass("defaultvalue"); // init |
---|
14 | t.focus(function(){ if(t.val()==d) t.val("").toggleClass("defaultvalue no-defaultvalue"); }); |
---|
15 | t.blur(function(){ if(/^\s*$/.test(t.val())) t.val(d).toggleClass("defaultvalue no-defaultvalue"); }); |
---|
16 | }); |
---|
17 | // button check click; quick and dirty! Nur fuer Testseite. |
---|
18 | $("input.button").click(function(){ |
---|
19 | if($("input.text").hasClass("defaultvalue")) {i.focus();return false;} |
---|
20 | }); |
---|
21 | }; |
---|
22 | |
---|
23 | t29.menu = { collapsed:{}, scroll:{}, guide:{} }; // mit Unterklassen |
---|
24 | t29.menu.setup = function() { |
---|
25 | t29.menu.side = $("nav.side"); // Hauptseitennavigation |
---|
26 | t29.menu.beam = $("nav.guide"); // Strahlnavigation/Guide (Kopie von side) |
---|
27 | t29.menu.rel = $("nav.rel"); // relative navigation im footer (vor/zurück) |
---|
28 | t29.menu.collapsed.setup(); |
---|
29 | t29.menu.scroll.setup(); |
---|
30 | t29.menu.guide.setup(); |
---|
31 | }; |
---|
32 | |
---|
33 | //////////////////////////// Menu Collapsed System. |
---|
34 | /** |
---|
35 | * Menu ein- oder ausklappen. |
---|
36 | * @param target_state true: Eingeklappt, false: ausgeklappt |
---|
37 | * @param quick true=keine Animation, false/undefined=Animation |
---|
38 | **/ |
---|
39 | t29.menu.collapsed.set = function(collapse, quick) { |
---|
40 | if(collapse==undefined) collapse = !t29.menu.collapsed.is(); |
---|
41 | console.log("Collapse zu "+(collapse?"KLEIN":"GROß")+" quick="+quick); |
---|
42 | if(quick) collapse ? t29.menu.collapsed.lists.hide() : t29.menu.collapsed.lists.show(); |
---|
43 | else collapse ? t29.menu.collapsed.lists.slideUp() : t29.menu.collapsed.lists.slideDown(); |
---|
44 | t29.menu.collapsed.but.text(t29._(collapse ? "js-menu-collapse-out" : "js-menu-collapse-in")); |
---|
45 | collapse ? $("html").addClass("collapsed-menu") : $("html").removeClass("collapsed-menu"); |
---|
46 | } |
---|
47 | // returns whether menu is collapsed (boolean). |
---|
48 | t29.menu.collapsed.is = function() { return $("html").hasClass("collapsed-menu"); }; |
---|
49 | t29.menu.collapsed.setup = function() { |
---|
50 | t29.menu.collapsed.but = $('<span class="button collapse-menu"></span>').appendTo("nav.side"); |
---|
51 | t29.menu.collapsed.lists = $("nav.side .u3").not("nav.side li.active > .u3"); // ein/auszuklappende Listen |
---|
52 | t29.menu.collapsed.set(true, true); // initial state |
---|
53 | t29.menu.collapsed.but.click(function(){ t29.menu.collapsed.set(); }); |
---|
54 | }; |
---|
55 | |
---|
56 | //////////////////////////// Menu Scroll System |
---|
57 | // enums, die CSS-Klassen im <html> entsprechen: |
---|
58 | t29.menu.scroll.States = Object.freeze({STATIC:"static-menu",FIX:"fixed-menu",STICK_TOP:"stick-top-menu",STICK_BOTTOM:"stick-bottom-menu"}); |
---|
59 | /** |
---|
60 | * Menuezustand beim Scrollen umschalten. |
---|
61 | * @param target_state Zustand aus scroll.States-Enum |
---|
62 | * @param |
---|
63 | * |
---|
64 | **/ |
---|
65 | t29.menu.scroll.set = function(target_state) { |
---|
66 | old_state = t29.menu.scroll.state; |
---|
67 | t29.menu.scroll.state = target_state; |
---|
68 | $("html").removeClass("static-menu fixed-menu stick-top-menu stick-bottom-menu").addClass(t29.menu.scroll.state); |
---|
69 | |
---|
70 | // Aufraeumen nach altem Status: |
---|
71 | switch(old_state) { |
---|
72 | case t29.menu.scroll.States.STICK_BOTTOM: |
---|
73 | t29.menu.side.attr("style",""); // reset css "top" value for positioning |
---|
74 | break; |
---|
75 | } |
---|
76 | |
---|
77 | // Einrichten des neuen Status: |
---|
78 | console.log("Gehe in Scroll-Zustand "+target_state); |
---|
79 | switch(target_state) { |
---|
80 | case t29.menu.scroll.States.STICK_TOP: |
---|
81 | // Menue schlaegt obene an. Prinzipiell Gleicher Zustand wie STATIC. Weiter. |
---|
82 | case t29.menu.scroll.States.STATIC: |
---|
83 | // die CSS-Klassen regeln eigentlich alles. |
---|
84 | t29.menu.collapsed.but.show(); |
---|
85 | t29.menu.scroll.but.text(t29._("js-menu-scroll-show")); |
---|
86 | t29.menu.side.show(); |
---|
87 | break; |
---|
88 | case t29.menu.scroll.States.FIX: |
---|
89 | // checken ob fixing ueberhaupt geht |
---|
90 | /* |
---|
91 | if( !t29.menu.collapsed.is() && t29.menu.side.height() > $(window).height()) { |
---|
92 | // Navi ist gerade ausgeklappt und zu groß fuer Bildschirm. Probiere Einklappen: |
---|
93 | t29.menu.collapsed.set(true, true); |
---|
94 | if(t29.menu.side.height() > $(window).height()) { |
---|
95 | // Navi ist auch eingeklappt noch zu groß! |
---|
96 | console.log("Navi ist auch eingeklappt zu groß zum fixen!"); |
---|
97 | // eingeklappt lassen. Weitermachen. |
---|
98 | // hier noch was ueberlegen: Bei zu kleinem Bildschirm |
---|
99 | // sollte der Button gar nicht erst angezeigt werden. |
---|
100 | // dazu braucht man einen resize-Listener, der aber im |
---|
101 | // ausgeklappten zustand jedesmal checken müsste, ob das |
---|
102 | // eingeklappte menue reinpasst. (werte muss man cachen) |
---|
103 | // Ziemlich doofe Aufgabe. |
---|
104 | } |
---|
105 | }*/ |
---|
106 | |
---|
107 | t29.menu.collapsed.set(true, true); // Sicherstellen, dass Navi eingeklappt. |
---|
108 | t29.menu.collapsed.but.hide(); // Ausgeklappte Navi passt auf keinen Bildschirm. |
---|
109 | t29.menu.scroll.but.text(t29._("js-menu-scroll-hide")); |
---|
110 | break; |
---|
111 | case t29.menu.scroll.States.STICK_BOTTOM: |
---|
112 | // Position absolute; Top-Position manuell setzen. |
---|
113 | t29.menu.side.css({top: t29.menu.scroll.stick_bottom }); |
---|
114 | break; |
---|
115 | default: |
---|
116 | console.log("Schlechter Zustand: "+target_state); |
---|
117 | } |
---|
118 | } |
---|
119 | |
---|
120 | t29.menu.scroll.setup = function() { |
---|
121 | t29.menu.scroll.but = $('<span class="button get-menu"></span>').appendTo("section.sidebar"); |
---|
122 | t29.menu.scroll.set(t29.menu.scroll.States.STATIC); // initial state |
---|
123 | |
---|
124 | t29.menu.scroll.but.click(function(){ |
---|
125 | switch(t29.menu.scroll.state) { |
---|
126 | case t29.menu.scroll.States.STATIC: |
---|
127 | // zu Fix uebergehen, mit Animation. |
---|
128 | t29.menu.side.hide(); |
---|
129 | t29.menu.scroll.set(t29.menu.scroll.States.FIX); |
---|
130 | t29.menu.side.fadeIn(); |
---|
131 | break; |
---|
132 | case t29.menu.scroll.States.FIX: |
---|
133 | // zu Static uebergehen, mit Animation. |
---|
134 | t29.menu.side.fadeOut(function(){ |
---|
135 | t29.menu.scroll.set(t29.menu.scroll.States.STATIC); }); |
---|
136 | break; |
---|
137 | case t29.menu.scroll.States.STICK_TOP: |
---|
138 | case t29.menu.scroll.States.STICK_BOTTOM: |
---|
139 | default: |
---|
140 | // diese Faelle sollten nicht vorkommen. |
---|
141 | console.log("Get-Menu Scroll-Button gedrückt obwohl unmöglich; state="+t29.menu.scroll.state); |
---|
142 | } |
---|
143 | }); // end event t29.menu.scroll.but.click. |
---|
144 | |
---|
145 | // nun ein paar Y-Koordinaten. berechnet mit dem Ausgangs-menu.side (STATIC). |
---|
146 | t29.menu.scroll.origin_top = t29.menu.side.offset().top; |
---|
147 | t29.menu.scroll.max_bottom = $("footer").offset().top - t29.menu.side.height(); |
---|
148 | t29.menu.scroll.stick_bottom = $("footer").offset().top - t29.menu.side.height() - $("#background-color-container").offset().top; |
---|
149 | //t29.menu.scroll.max_bottom - $("#background-color-container").offset().top; |
---|
150 | |
---|
151 | $(window).scroll(function(){ |
---|
152 | var y = $(this).scrollTop(); |
---|
153 | switch(t29.menu.scroll.state) { |
---|
154 | case t29.menu.scroll.States.STATIC: return; // System inaktiv. |
---|
155 | case t29.menu.scroll.States.FIX: |
---|
156 | if(y < t29.menu.scroll.origin_top) |
---|
157 | t29.menu.scroll.set(t29.menu.scroll.States.STICK_TOP); |
---|
158 | else if(y > t29.menu.scroll.max_bottom) |
---|
159 | t29.menu.scroll.set(t29.menu.scroll.States.STICK_BOTTOM); |
---|
160 | break; |
---|
161 | case t29.menu.scroll.States.STICK_TOP: |
---|
162 | if(y > t29.menu.scroll.origin_top) { |
---|
163 | // wir sind wieder weiter runter gescrollt. |
---|
164 | if(t29.menu.collapsed.is()) |
---|
165 | // und der Benutzer hat zwischenzeitlich nicht das Menue ausgeklappt |
---|
166 | t29.menu.scroll.set(t29.menu.scroll.States.FIX); |
---|
167 | else |
---|
168 | // der Benutzer hat zwischenzeitlich ausgeklappt. Schalte fixing aus. |
---|
169 | t29.menu.scroll.set(t29.menu.scroll.States.STATIC); |
---|
170 | } |
---|
171 | break; |
---|
172 | case t29.menu.scroll.States.STICK_BOTTOM: |
---|
173 | if(y < t29.menu.scroll.max_bottom) { |
---|
174 | // wir sind wieder weiter hoch gescrollt. Entcollapsen bieten wir ganz |
---|
175 | // unten nicht an. Ergo: Fixing wieder einschalten. |
---|
176 | t29.menu.scroll.set(t29.menu.scroll.States.FIX); |
---|
177 | } |
---|
178 | break; |
---|
179 | } |
---|
180 | }); // end event window.scroll. |
---|
181 | }; // end t29.menu.scroll.setup. |
---|
182 | |
---|
183 | |
---|
184 | //////////////////////////// Footer Guided Tour System (auch Menu) |
---|
185 | t29.menu.guide.setup = function() { |
---|
186 | // Zentraler Hauptschritt: Das Menue ab oberster Ebene klonen und im Footer dranhaengen, |
---|
187 | // ausserdem ein paar Ummodellierungen. |
---|
188 | g = t29.menu.beam; |
---|
189 | t29.menu.side.find(".u1").clone().appendTo(g); |
---|
190 | $("ul",g).show(); // durch t29.menu.collapse.setup wurden die .u3er auf hide gesetzt. Revert! |
---|
191 | a = g.find("a"); li = g.find("li"); |
---|
192 | a.wrapInner("<span class='text'/>").append("<span class='bullet'/>"); |
---|
193 | |
---|
194 | // Punkte aequidistant verteilen |
---|
195 | count = a.length; |
---|
196 | bwidth = $(".bullet",g).outerWidth(); |
---|
197 | each_width = (g.width() + bwidth*2) / count; |
---|
198 | a.width(Math.floor(each_width)); |
---|
199 | // text-Label zentriert darstellen um den Punkt |
---|
200 | $(".text", a).css("left", function(){return(bwidth - $(this).width())/2; }); |
---|
201 | |
---|
202 | default_visibles = g.find(".start, .end, .current"); |
---|
203 | default_visibles.addClass("visible"); //.find("a").css("z-index",0); |
---|
204 | default_visibles = default_visibles.find("a:first-child"); // von li auf a |
---|
205 | |
---|
206 | // Overlappings finden |
---|
207 | // left,right: Funktionen geben links/rechts-Offset des Objekts wieder |
---|
208 | left = function($o) { return $o.offset().left; } |
---|
209 | right = function($o) { return $o.offset().left + $o.width(); } |
---|
210 | edges = default_visibles.map(function(){ |
---|
211 | t = $(".text", this); |
---|
212 | return {'left': left(t), 'right': right(t) }; |
---|
213 | }); |
---|
214 | min_left = Math.min.apply(null, edges.map(function(){ return this.left })); |
---|
215 | max_right = Math.max.apply(null, edges.map(function(){ return this.right; })); |
---|
216 | a.not(default_visibles).each(function(){ |
---|
217 | t = $(".text", this); this_a = $(this); |
---|
218 | l = left(t); r = right(t); |
---|
219 | edges.each(function(i){ |
---|
220 | if((l < this.right && l > this.left) || // rechte kante drin |
---|
221 | (r > this.left && r < this.right) || // linke kante drin |
---|
222 | (l < this.right && l < min_left) || |
---|
223 | (r > this.left && r > max_right)) { |
---|
224 | this_a.addClass("higher-text"); |
---|
225 | } |
---|
226 | }); |
---|
227 | }); |
---|
228 | |
---|
229 | // Split position for relative navigation |
---|
230 | // 20px von nav.side margin left; 40px = 4*10px padding left von nav.rel a |
---|
231 | ///// 22.04.2012: Deaktiviert, weil anderes Design vor Augen. |
---|
232 | /* |
---|
233 | split = $(".current a",g).offset().left - g.offset().left + bwidth/2; |
---|
234 | rest = $("#content").outerWidth() - split - 40; |
---|
235 | t29.menu.rel.find(".prev a").width(split); |
---|
236 | t29.menu.rel.find(".next a").width(rest); |
---|
237 | */ |
---|
238 | }; |
---|
239 | |
---|
240 | //////////////////////////// I18N / L10N system (messages) |
---|
241 | t29.msg = {}; |
---|
242 | t29.msg.setup = function() { |
---|
243 | // haesslicher hack... wird jetzt im template ganz am ende durch |
---|
244 | // script aufgerufen. |
---|
245 | t29.msg.data = t29MSGDATA; |
---|
246 | /*$.getJSON('/lib/messages.php', function(data) { |
---|
247 | t29.msg.data = data; |
---|
248 | });*/ |
---|
249 | }; |
---|
250 | t29.msg.get = t29._ = function(str) { // t29._ is shorthand! |
---|
251 | if(t29.msg.data.msg[str]) { |
---|
252 | if($.isArray(t29.msg.data.msg[str])) |
---|
253 | return t29.msg.data.msg[str][ t29.msg.data.order[ t29.config.lang ]]; |
---|
254 | else |
---|
255 | return t29.msg.data.msg[str]; |
---|
256 | } else { |
---|
257 | return "<"+str+">"; |
---|
258 | } |
---|
259 | }; |
---|
260 | |
---|
261 | // alles fertiggeschnackelt. |
---|
262 | t29.setup = function() { |
---|
263 | t29.defaultvalue.setup(); |
---|
264 | t29.menu.setup(); |
---|
265 | //t29.msg.setup(); |
---|
266 | } |
---|
267 | |
---|
268 | $(t29.setup); |
---|