1 | /** |
---|
2 | * technikum29.de | page wide javascripts |
---|
3 | * |
---|
4 | * Dies ist eine Sammlung von kleinen jQuery-Funktionen, die jeweils kleine |
---|
5 | * Anpassungen und Verbesserungen an der www.technikum29.de-Website bieten. |
---|
6 | * Fuer seitenspezifische Scripts siehe common.js. |
---|
7 | * Per Default werden alle Funktionen am Ende dieses Scripts beim Seitenladen |
---|
8 | * ausgefuehrt. |
---|
9 | * Dieses Script benoetigt eine aktuelle jquery.js. |
---|
10 | * |
---|
11 | * 2010 Sven Koeppel $Id: tools.js 173 2010-08-09 18:15:32Z sven $ |
---|
12 | * Released under the public domain |
---|
13 | * |
---|
14 | **/ |
---|
15 | |
---|
16 | var t29 = {}; // the t29 namespace |
---|
17 | |
---|
18 | // allgemeine funktionen: |
---|
19 | t29.language = function(){ return $("h1").hasClass("de") ? "de" : "en"; } |
---|
20 | |
---|
21 | /** |
---|
22 | * technikum29.de | javascript: Unobstructive copyright information |
---|
23 | * |
---|
24 | * Since there are so many people copying pictures from the website without |
---|
25 | * even knowing ot the copyright statements on the imprint, we tested some |
---|
26 | * jQuery-powered ways to inform them in an "unobstructive" way: |
---|
27 | * |
---|
28 | * - hovering a picture replaces it with the "hotlinking picture" |
---|
29 | * (see http://dev.technikum29.de/src/hotlinking), that is, an embedded |
---|
30 | * watermark / copyright tag |
---|
31 | * - hovering some more time over the picture yields a small informative |
---|
32 | * box (containing the alt-label of the picture) that informs about the |
---|
33 | * copyright message |
---|
34 | * |
---|
35 | * See Revision 169 for these features. They have been completely developed, |
---|
36 | * but removed again for a much smaller and lighter solution (just some black |
---|
37 | * box at the bottom corner of the picture). |
---|
38 | * |
---|
39 | * 2010 Sven Koeppel |
---|
40 | **/ |
---|
41 | t29.img_license_settings = { |
---|
42 | // content for the license tags (depending on language) |
---|
43 | text : { |
---|
44 | de: '© technikum29. <a href="/de/impressum.shtm#Hinweise_für_die_Nutzung_von_Bildern_aus_der_Website_des__technikum29">Lizenzbestimmungen</a>', |
---|
45 | en: '© technikum29. <a href="/en/contact.shtm#Image_use_policy_and_information_about_reusing_technikum29_website_contentst">Licensing terms</a>', |
---|
46 | }, |
---|
47 | |
---|
48 | // min size of pictures to display the license tag |
---|
49 | treshold_size : [255,100], // [w,h] |
---|
50 | |
---|
51 | // selector to exclude images from being license tagged |
---|
52 | exclude : "img.no-copyright, .no-copyright img, .start img, .impressum img" |
---|
53 | }; |
---|
54 | |
---|
55 | // configuration end |
---|
56 | |
---|
57 | t29.img_license = function() { |
---|
58 | $("body").append('<div id="img-license-tag"><p>'+ |
---|
59 | // detect language by heading language (ripped from t29_gmaps...) |
---|
60 | t29.img_license_settings.text[t29.language()]+'</p></div>'); |
---|
61 | var tag = $("#img-license-tag"); |
---|
62 | var tag_top = function() { if(t29.img_license_settings.img) |
---|
63 | tag.css("top", Math.min( |
---|
64 | t29.img_license_settings.img.offset().top + t29.img_license_settings.img.height(), |
---|
65 | $(window).scrollTop()+$(window).height())); |
---|
66 | }; |
---|
67 | $("img").not(t29.img_license_settings.exclude).hover(function(){ |
---|
68 | if(this.width < t29.img_license_settings.treshold_size[0] |
---|
69 | || this.height < t29.img_license_settings.treshold_size[1]) |
---|
70 | return; |
---|
71 | t29.img_license_settings.img = $(this); |
---|
72 | tag.css({ |
---|
73 | left: $(this).offset().left, |
---|
74 | // top: tag_top(); |
---|
75 | width: $(this).width(), |
---|
76 | display: "block" |
---|
77 | }); |
---|
78 | tag_top(); |
---|
79 | tag.css("margin-top", -tag.height()); // erst in zweitem schritt |
---|
80 | }, function(){ tag.hide(); t29.img_license_settings.img = null; }); |
---|
81 | $(window).scroll(tag_top); |
---|
82 | tag.hover(function(){ $(this).show(); }, function(){ $(this).hide(); }); |
---|
83 | }; |
---|
84 | |
---|
85 | /** |
---|
86 | * technikum29.de | javascripts: window-size-classes |
---|
87 | * |
---|
88 | * Seit August 2010 gibt es endlich eine saubere Moeglichkeit, mit verschieden |
---|
89 | * grossen Monitoren vs. grossen Bildern gut umgehen zu koennen. Per CSS kann |
---|
90 | * nun unterschieden werden zwischen |
---|
91 | * body.lesser1024 - es liegt Bildschirmbreite <= 1024 vor |
---|
92 | * body.greater1024 - es liegt Bildschirmbreite < 1024 vor |
---|
93 | * body.greater1028 - es liegt Bildschirmbreite >= 1280 vor |
---|
94 | * |
---|
95 | * Wird etwa fuer das Univac-Titelbild verwendet. |
---|
96 | * |
---|
97 | **/ |
---|
98 | t29.window_size = function() { |
---|
99 | $(window).resize(function(){ |
---|
100 | var width = window.innerWidth; |
---|
101 | $("body").toggleClass("lesser1024", width < 1024); |
---|
102 | $("body").toggleClass("greater1024", width >= 1024); |
---|
103 | $("body").toggleClass("greater1280", width >= 1280); |
---|
104 | }).resize(); |
---|
105 | } |
---|
106 | |
---|
107 | /** |
---|
108 | * technikum29.de | javascripts: hostinfo |
---|
109 | * |
---|
110 | * Um optisch zwischen verschiedenen Hosts der Website unterscheiden zu koennen, |
---|
111 | * wurde im August das hostinfo-System eingefuehrt. Es laedt per AJAX die un- |
---|
112 | * versionierte "hostinfo.shtm" aus dem Homepage-Root (wo auch /de, etc. ist). |
---|
113 | * Dort kann beliebiges HTML stehen, was in eine Box in die Sidebar gesetzt wird. |
---|
114 | * Beispiel fuer hostinfo.shtm: |
---|
115 | * |
---|
116 | * <!-- Dies ist die Hostinfo fuer technikum29.irgendein.server.lan --> |
---|
117 | * <div class="de">Deutscher Erklaerungstext</div> |
---|
118 | * <div class="en">Englischer Erklaerungstext</div> |
---|
119 | * <script ...></script> |
---|
120 | * |
---|
121 | **/ |
---|
122 | t29.hostinfo = function() { |
---|
123 | if(location.hostname != "www.technikum29.de") { |
---|
124 | $.get("/hostinfo.shtm", function(data) { |
---|
125 | $("#sidebar").append("<div id='sidebar-hostinfo'/>"); |
---|
126 | $("#sidebar-hostinfo").html(data); |
---|
127 | }); |
---|
128 | } |
---|
129 | } |
---|
130 | |
---|
131 | /** |
---|
132 | * technikum29.de | javscripts: auto-bildbreite |
---|
133 | * |
---|
134 | * Zur Ergaenzung des Bildbox-Konzepts wurde Januar 2010 die automatische |
---|
135 | * Erkennung der Breiten der Bilder hinzugefuegt. Funktionsweise: |
---|
136 | * |
---|
137 | * <div class="box center auto-bildbreite"> |
---|
138 | * <img ... /> |
---|
139 | * <p class="bildtext"> bla bla bla </p> |
---|
140 | * </div> |
---|
141 | * |
---|
142 | * Im Januar wurde ein 60-zeiliges JavaScript geschrieben, was nun in einen |
---|
143 | * jQuery-oneliner (!) migriert wurde |
---|
144 | **/ |
---|
145 | t29.auto_bildbreite = function() { |
---|
146 | $("div.auto-bildbreite").each(function(){ $(this).css("width", $("img", this).width()); }); |
---|
147 | } |
---|
148 | |
---|
149 | /** |
---|
150 | * technikum29.de | javascripts: links to headings |
---|
151 | * |
---|
152 | * Um auf Ueberschriften direkt verweisen zu können, erzeugt diese Funktion |
---|
153 | * fuer jede Ueberschrift einen Anker, der dann per CSS formatiert wird. |
---|
154 | * Ankernamen koennen etwa mit |
---|
155 | * <h2 id="Ankername">... |
---|
156 | * <h3 title="Ankername">... |
---|
157 | * erzwungen werden. Ansonsten wird wie in Wikipedia die Ueberschrift selbst |
---|
158 | * verwendet: |
---|
159 | * <h2>Foo Bar</h2> => #Foo_Bar |
---|
160 | **/ |
---|
161 | t29.heading_links = function() { |
---|
162 | $("#content").find("h2,h3").not("h2:first").each(function(){ |
---|
163 | anchor = ($(this).attr("title") || $(this).attr("id") || $(this).text()) |
---|
164 | .replace(/\s+/g, '_').replace(/[?!"']/g, '').replace(/^_+|_+$/g, ''); |
---|
165 | $("<a class='anchor'> \u00B6</a>").attr({ |
---|
166 | href: "#"+anchor, |
---|
167 | name: anchor, |
---|
168 | title: t29.language()=="de" ? "Direktlink zu diesem Abschnitt" : "Link to this section" |
---|
169 | }).appendTo(this); |
---|
170 | }); |
---|
171 | |
---|
172 | // Opera und Internet Explorer machen mit, Firefox nicht, also: |
---|
173 | if((hash=location.hash.substr(1)).length && (link=$("a[name="+hash+"]")).length) |
---|
174 | //$('html, body').animate({scrollTop: link.offset().top}, 1000); // smooth scrolling |
---|
175 | $('html, body').scrollTop(link.offset().top); // springen |
---|
176 | } |
---|
177 | |
---|
178 | $(t29.auto_bildbreite); |
---|
179 | $(t29.hostinfo); |
---|
180 | $(t29.window_size); |
---|
181 | $(t29.img_license); |
---|
182 | $(t29.heading_links); |
---|