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

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

Footer verändert, Relationen eingebaut.

File size: 9.6 KB
Line 
1// Kleinigkeiten für t29v6
2var t29 = {};
3
4t29.defaultvalue = {};
5t29.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
18t29.menu = { collapsed:{}, scroll:{}, guide:{} }; // mit Unterklassen
19t29.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 **/
34t29.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).
43t29.menu.collapsed.is = function() { return $("html").hasClass("collapsed-menu"); };
44t29.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:
53t29.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 **/
60t29.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
115t29.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)
180t29.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.
236t29.setup = function() {
237        t29.defaultvalue.setup();
238        t29.menu.setup();
239}
240
241$(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