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 189 2010-09-05 04:01:37Z sven $ |
---|
12 | * Released under the public domain |
---|
13 | * |
---|
14 | **/ |
---|
15 | |
---|
16 | var t29 = {}; // the t29 namespace |
---|
17 | |
---|
18 | /** |
---|
19 | * Common helper functions |
---|
20 | **/ |
---|
21 | |
---|
22 | // get the language of the current document |
---|
23 | t29.language = function(){ return $("h1").hasClass("de") ? "de" : "en"; } |
---|
24 | |
---|
25 | // T29 Gettext. Usage: |
---|
26 | // t29.gettext("deutscher text", "englsischer text"); |
---|
27 | // t29.gettext({ de: "deutscher Text", en: "englischer Text" }); |
---|
28 | // t29.gettext(anything, null) wont work, use t29.gettext({ de: anything, en: null}); |
---|
29 | t29.gettext = function(de, en) { |
---|
30 | if(!en){ en=de.en; de = de.de; } |
---|
31 | return t29.language()=="de" ? de : en; |
---|
32 | } |
---|
33 | |
---|
34 | /** |
---|
35 | * technikum29.de | javascript: Unobstructive copyright information |
---|
36 | * |
---|
37 | * Since there are so many people copying pictures from the website without |
---|
38 | * even knowing ot the copyright statements on the imprint, we tested some |
---|
39 | * jQuery-powered ways to inform them in an "unobstructive" way: |
---|
40 | * |
---|
41 | * - hovering a picture replaces it with the "hotlinking picture" |
---|
42 | * (see http://dev.technikum29.de/src/hotlinking), that is, an embedded |
---|
43 | * watermark / copyright tag |
---|
44 | * - hovering some more time over the picture yields a small informative |
---|
45 | * box (containing the alt-label of the picture) that informs about the |
---|
46 | * copyright message |
---|
47 | * |
---|
48 | * See Revision 169 for these features. They have been completely developed, |
---|
49 | * but removed again for a much smaller and lighter solution (just some black |
---|
50 | * box at the bottom corner of the picture). |
---|
51 | * |
---|
52 | * 2010 Sven Koeppel |
---|
53 | **/ |
---|
54 | t29.img_license_settings = { |
---|
55 | // enable or disable system (e.g. used as API in Translation subsystem) |
---|
56 | enabled : true, |
---|
57 | |
---|
58 | // content for the license tags (depending on language) |
---|
59 | text : { |
---|
60 | de: '© technikum29. <a href="/de/impressum.shtm#image-copyright">Lizenzbestimmungen</a>', |
---|
61 | en: '© technikum29. <a href="/en/contact.shtm#image-copyright">Licensing terms</a>', |
---|
62 | }, |
---|
63 | |
---|
64 | // min size of pictures to display the license tag |
---|
65 | treshold_size : [255,100], // [w,h] |
---|
66 | |
---|
67 | // selector to exclude images from being license tagged |
---|
68 | exclude : "img.no-copyright, .no-copyright img, .start img, .impressum img" |
---|
69 | }; |
---|
70 | |
---|
71 | // configuration end |
---|
72 | |
---|
73 | t29.img_license = function() { |
---|
74 | $("body").append('<div id="img-license-tag"><p>'+ |
---|
75 | // detect language by heading language (ripped from t29_gmaps...) |
---|
76 | t29.img_license_settings.text[t29.language()]+'</p></div>'); |
---|
77 | var tag = $("#img-license-tag"); |
---|
78 | var tag_top = function() { if(t29.img_license_settings.img) |
---|
79 | tag.css("top", Math.min( |
---|
80 | t29.img_license_settings.img.offset().top + t29.img_license_settings.img.height(), |
---|
81 | $(window).scrollTop()+$(window).height())); |
---|
82 | }; |
---|
83 | $("img").not(t29.img_license_settings.exclude).hover(function(){ |
---|
84 | if(!t29.img_license_settings.enabled |
---|
85 | || this.width < t29.img_license_settings.treshold_size[0] |
---|
86 | || this.height < t29.img_license_settings.treshold_size[1]) |
---|
87 | return; |
---|
88 | t29.img_license_settings.img = $(this); |
---|
89 | tag.css({ |
---|
90 | left: $(this).offset().left, |
---|
91 | // top: tag_top(); |
---|
92 | width: $(this).width(), |
---|
93 | display: "block" |
---|
94 | }); |
---|
95 | tag_top(); |
---|
96 | tag.css("margin-top", -tag.height()); // erst in zweitem schritt |
---|
97 | }, function(){ tag.hide(); t29.img_license_settings.img = null; }); |
---|
98 | $(window).scroll(tag_top); |
---|
99 | tag.hover(function(){ $(this).show(); }, function(){ $(this).hide(); }); |
---|
100 | }; |
---|
101 | |
---|
102 | /** |
---|
103 | * technikum29.de | javascripts: window-size-classes |
---|
104 | * |
---|
105 | * Seit August 2010 gibt es endlich eine saubere Moeglichkeit, mit verschieden |
---|
106 | * grossen Monitoren vs. grossen Bildern gut umgehen zu koennen. Per CSS kann |
---|
107 | * nun unterschieden werden zwischen |
---|
108 | * body.lesser1024 - es liegt Bildschirmbreite <= 1024 vor |
---|
109 | * body.greater1024 - es liegt Bildschirmbreite < 1024 vor |
---|
110 | * body.greater1028 - es liegt Bildschirmbreite >= 1280 vor |
---|
111 | * |
---|
112 | * Wird etwa fuer das Univac-Titelbild verwendet. |
---|
113 | * |
---|
114 | **/ |
---|
115 | t29.window_size = function() { |
---|
116 | var body = $("body"); // Reichenzeit sparen |
---|
117 | $(window).resize(function(){ |
---|
118 | var width = window.innerWidth; |
---|
119 | body.toggleClass("lesser1024", width < 1024) |
---|
120 | .toggleClass("greater1024", width >= 1024) |
---|
121 | .toggleClass("greater1280", width >= 1280); |
---|
122 | }).resize(); |
---|
123 | } |
---|
124 | |
---|
125 | /** |
---|
126 | * technikum29.de | javascripts: hostinfo |
---|
127 | * |
---|
128 | * Um optisch zwischen verschiedenen Hosts der Website unterscheiden zu koennen, |
---|
129 | * wurde im August das hostinfo-System eingefuehrt. Es laedt per AJAX die un- |
---|
130 | * versionierte "hostinfo.shtm" aus dem Homepage-Root (wo auch /de, etc. ist). |
---|
131 | * Dort kann beliebiges HTML stehen, was in eine Box in die Sidebar gesetzt wird. |
---|
132 | * Beispiel fuer hostinfo.shtm: |
---|
133 | * |
---|
134 | * <!-- Dies ist die Hostinfo fuer technikum29.irgendein.server.lan --> |
---|
135 | * <div class="de">Deutscher Erklaerungstext</div> |
---|
136 | * <div class="en">Englischer Erklaerungstext</div> |
---|
137 | * <script ...></script> |
---|
138 | * |
---|
139 | **/ |
---|
140 | t29.hostinfo = function() { |
---|
141 | if(location.hostname != "www.technikum29.de") { |
---|
142 | $.get("/hostinfo.shtm", function(data) { |
---|
143 | $("#sidebar").append("<div class='box' id='sidebar-hostinfo'/>"); |
---|
144 | $("#sidebar-hostinfo").html(data); |
---|
145 | }); |
---|
146 | } |
---|
147 | } |
---|
148 | |
---|
149 | /** |
---|
150 | * technikum29.de | javscripts: auto-bildbreite |
---|
151 | * |
---|
152 | * Zur Ergaenzung des Bildbox-Konzepts wurde Januar 2010 die automatische |
---|
153 | * Erkennung der Breiten der Bilder hinzugefuegt. Funktionsweise: |
---|
154 | * |
---|
155 | * <div class="box center auto-bildbreite"> |
---|
156 | * <img ... /> |
---|
157 | * <p class="bildtext"> bla bla bla </p> |
---|
158 | * </div> |
---|
159 | * |
---|
160 | * Im Januar wurde ein 60-zeiliges JavaScript geschrieben, was nun in einen |
---|
161 | * jQuery-oneliner (!) migriert wurde |
---|
162 | **/ |
---|
163 | t29.auto_bildbreite = function() { |
---|
164 | $("div.auto-bildbreite").each(function(){ $(this).css("width", $("img", this).width()); }); |
---|
165 | } |
---|
166 | |
---|
167 | /** |
---|
168 | * technikum29.de | javascripts: links to headings |
---|
169 | * |
---|
170 | * Um auf Ueberschriften direkt verweisen zu können, erzeugt diese Funktion |
---|
171 | * fuer jede Ueberschrift einen Anker, der dann per CSS formatiert wird. |
---|
172 | * Ankernamen koennen etwa mit |
---|
173 | * <h2 id="Ankername">... |
---|
174 | * <h3 title="Ankername">... |
---|
175 | * erzwungen werden. Ansonsten wird wie in Wikipedia die Ueberschrift selbst |
---|
176 | * verwendet: |
---|
177 | * <h2>Foo Bar</h2> => #Foo_Bar |
---|
178 | **/ |
---|
179 | t29.heading_links = function() { |
---|
180 | $("#content").find("h2,h3").not("h2:first").each(function(){ |
---|
181 | anchor = ($(this).attr("title") || $(this).attr("id") || $(this).text()) |
---|
182 | .replace(/\s+/g, '_').replace(/[?!"']/g, '').replace(/^_+|_+$/g, ''); |
---|
183 | $("<a class='anchor'> \u00B6</a>").attr({ |
---|
184 | href: "#"+anchor, |
---|
185 | name: anchor, |
---|
186 | title: t29.gettext("Direktlink zu diesem Abschnitt", "Link to this section") |
---|
187 | }).appendTo(this); |
---|
188 | }); |
---|
189 | |
---|
190 | // Opera und Internet Explorer machen mit, Firefox nicht, also: |
---|
191 | if((hash=location.hash.substr(1)).length && (link=$("a[name="+hash+"]")).length) |
---|
192 | //$('html, body').animate({scrollTop: link.offset().top}, 1000); // smooth scrolling |
---|
193 | $('html, body').scrollTop(link.parent().offset().top); // springen |
---|
194 | } |
---|
195 | |
---|
196 | |
---|
197 | /** |
---|
198 | * technikum29.de | javascripts: english translation system loader |
---|
199 | * |
---|
200 | * Um die Ladezeiten des translation systems geringer zu halten, werden |
---|
201 | * JavaScript und CSS dynamisch nachgeladen. |
---|
202 | * @param success_function Function to execute after set_enabled(true) has been called. |
---|
203 | * @returns immediately returns, asynchronous content loading |
---|
204 | **/ |
---|
205 | t29.start_tr = function(success_function) { |
---|
206 | // kruder Hack, um die Ladezeit zu ueberstehen: schon mal Designaenderung |
---|
207 | $("body").toggleClass("tr-enabled tr-disabled"); |
---|
208 | $.getScript('/en/dev/translation/editor.js', function(){ |
---|
209 | t29.tr.set_enabled(true); if(success_function) success_function(); }); |
---|
210 | // unfortunately the CSS is already needed for #sidebar-tr styles (button) |
---|
211 | /*$.get('/en/dev/translation/editor.css', function(css) { |
---|
212 | $("<style type='text/css'/>").html(css).appendTo("head"); |
---|
213 | });*/ |
---|
214 | }; |
---|
215 | |
---|
216 | t29.prepare_tr = function() { |
---|
217 | $("#sidebar-tr .tr-disabled a").click(function() { |
---|
218 | t29.start_tr(); |
---|
219 | return false; |
---|
220 | }).attr('href', '#help_with_mistakes'); |
---|
221 | |
---|
222 | // startup tr system with query string like ?tr or ...tr-... |
---|
223 | // or for people who opened link in another tab |
---|
224 | if(location.search.match(/tr-|^tr/i) || location.hash.match(/help_with_mistakes/)) { |
---|
225 | t29.start_tr(function(){ t29.tr.display_top_notice(); }); |
---|
226 | } |
---|
227 | } |
---|
228 | |
---|
229 | |
---|
230 | |
---|
231 | $(t29.auto_bildbreite); |
---|
232 | $(t29.hostinfo); |
---|
233 | $(t29.window_size); |
---|
234 | $(t29.img_license); |
---|
235 | $(t29.heading_links); |
---|
236 | $(t29.prepare_tr); |
---|