source: t29-www/shared/js/tools.js @ 233

Last change on this file since 233 was 233, checked in by sven, 13 years ago

Noch mal Detailverbesserungen zum fruehe-computer.shtm-Design.

  • fruehe-computer.shtm: jetzt auch auf deutsch, early-computers.shtm: Details
  • common.css: .desc-*.borderless sowie seitenspezifische Anpassungen
  • tools.js: auch desc-left auf auto-bildbreite setzen

-- sven @ workstation7

  • Property svn:keywords set to Id
File size: 9.2 KB
Line 
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 233 2011-01-29 21:45:30Z sven $
12 * Released under the public domain
13 *
14 **/
15 
16var t29 = {}; // the t29 namespace
17
18/**
19 * Common helper functions
20 **/
21 
22// get the language of the current document
23t29.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});
29t29.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 **/
54t29.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: '&copy; technikum29. <a href="/de/impressum.shtm#image-copyright">Lizenzbestimmungen</a>',
61                en: '&copy; 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
73t29.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 **/
115t29.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 **/
140t29.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 **/
163t29.auto_bildbreite = function() {
164        $("div.auto-bildbreite, div.desc-right, div.desc-left")
165                .each(function(){ $(this).css("width", $("img", this).width()); });
166}
167
168/**
169 * technikum29.de | javascripts: links to headings
170 *
171 * Um auf Ueberschriften direkt verweisen zu können, erzeugt diese Funktion
172 * fuer jede Ueberschrift einen Anker, der dann per CSS formatiert wird.
173 * Ankernamen koennen etwa mit
174 *  <h2 id="Ankername">...
175 *  <h3 title="Ankername">...
176 * erzwungen werden. Ansonsten wird wie in Wikipedia die Ueberschrift selbst
177 * verwendet:
178 *  <h2>Foo Bar</h2>  =>  #Foo_Bar
179 **/
180t29.heading_links = function() {
181        $("#content").find("h2,h3").not("h2:first").each(function(){
182                anchor = ($(this).attr("title") || $(this).attr("id") || $(this).text())
183                        .replace(/\s+/g, '_').replace(/[?!"']/g, '').replace(/^_+|_+$/g, '');
184                $("<a class='anchor'> \u00B6</a>").attr({
185                        href: "#"+anchor,
186                        name: anchor,
187                        title: t29.gettext("Direktlink zu diesem Abschnitt", "Link to this section")
188                }).appendTo(this);
189        });
190       
191        // Opera und Internet Explorer machen mit, Firefox nicht, also:
192        if((hash=location.hash.substr(1)).length && (link=$("a[name="+hash+"]")).length)
193                //$('html, body').animate({scrollTop: link.offset().top}, 1000);  // smooth scrolling
194                $('html, body').scrollTop(link.parent().offset().top); // springen
195}
196
197
198/**
199 * technikum29.de | javascripts: english translation system loader
200 *
201 * Um die Ladezeiten des translation systems geringer zu halten, werden
202 * JavaScript und CSS dynamisch nachgeladen.
203 * @param success_function Function to execute after set_enabled(true) has been called.
204 * @returns immediately returns, asynchronous content loading
205 **/
206if(!t29.tr) t29.tr = {}; // translation system namespace
207t29.tr.preloader = {}; // namespace for this preloading system
208t29.tr.preloader.enabled_string = // text for sidebar with enabled tr system
209        "<h3>Improve this page</h3><p>Simply click on any paragraph to correct it. Thank you!</p>"
210        +"<span class='button gray'>Finished!</span>";
211
212t29.tr.preloader.start = function(success_function) {
213        // kruder Hack, um die Ladezeit zu ueberstehen: schon mal Designaenderung
214        $("body").toggleClass("tr-enabled tr-disabled");
215        $.getScript('/en/dev/translation/editor.js', function(){
216                t29.tr.set_enabled(true); if(success_function) success_function(); });
217        $.get('/en/dev/translation/editor.css', function(css) {
218                $("<style type='text/css'/>").html(css).appendTo("head");
219        });
220       
221        // text, nur einmal und so. bessere bedingung - schauen ob schon mal gestartet wurde.
222        if(!$("#sidebar-tr .tr-enabled").length) {
223                $("<div class='tr-enabled'/>").html(t29.tr.preloader.enabled_string).appendTo('#sidebar-tr');
224        }
225};
226
227t29.tr.preloader.onload = function() {
228        $("#sidebar-tr a").click(function() {
229                t29.tr.preloader.start();
230                return false;
231        }).attr('href', '#help_with_mistakes');
232
233        // startup tr system with query string like ?tr or ...tr-...
234        // or for people who opened link in another tab
235        if(location.search.match(/tr-|^tr/i) || location.hash.match(/help_with_mistakes/)) {
236                t29.tr.preloader.start(function(){ t29.tr.display_startup_notice('querystring'); });
237        } else if(location.hostname.match(/^edit/i)) {
238                t29.tr.preloader.start(function(){ t29.tr.display_startup_notice('editdomain'); }); 
239        }
240}
241
242 
243
244$(t29.auto_bildbreite);
245$(t29.hostinfo);
246$(t29.window_size);
247$(t29.img_license);
248$(t29.heading_links);
249$(t29.tr.preloader.onload);
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