source: t29-www/shared/js-v6/script.js @ 259

Last change on this file since 259 was 259, checked in by sven, 12 years ago

Navigationsdateien vereinheitlicht in eine navigation.xml. menu.php kann jetzt mehrsprachige Titel extrahieren und gibt selber kein HTML mehr aus. Template/JS massiv für Mehrsprachlichkeit umgebaut.

File size: 10.4 KB
Line 
1// Kleinigkeiten für t29v6
2window.t29 = {};
3
4t29.config = {};
5t29.config.set = function(new_settings) {
6        $.merge(t29.config, new_settings);
7}
8
9t29.defaultvalue = {};
10t29.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
23t29.menu = { collapsed:{}, scroll:{}, guide:{} }; // mit Unterklassen
24t29.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 **/
39t29.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).
48t29.menu.collapsed.is = function() { return $("html").hasClass("collapsed-menu"); };
49t29.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:
58t29.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 **/
65t29.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
120t29.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)
185t29.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)
241t29.msg = {};
242t29.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};
250t29.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 "&lt;"+str+"&gt;";
258        }
259};
260
261// alles fertiggeschnackelt.
262t29.setup = function() {
263        t29.defaultvalue.setup();
264        t29.menu.setup();
265        //t29.msg.setup();
266}
267
268$(t29.setup);
Note: See TracBrowser for help on using the repository browser.
© 2008 - 2013 technikum29 • Sven Köppel • Some rights reserved
Powered by Trac
Expect where otherwise noted, content on this site is licensed under a Creative Commons 3.0 License