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