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

Last change on this file since 173 was 173, checked in by sven, 14 years ago

Jetzt Offiziell: Grosse JavaScript-Neustrukturierung:

  • jQuery auf allen Seiten, tools.js ist Scriptsammlung fuer viele neue Features wie
    • Dynamische Copyright-Tags fuer alle Bilder
    • Behandlung von Fenstergroessen fuer alle Seiten
    • Hostinfos fuer bessere Differenzierung beim Entwickeln
    • auto-bildbreite.js migriert (jQuery-oneliner)
    • Alle Ueberschriften werden dynamisch mit Ankern ausgestattet
  • common.js als Scriptsammlung fuer seitenspezifische Scripts
    • faxtechnik.shtm, fax.shtm Inline-Scripte migriert
    • efzet.shtm migriert
  • Fuer alle Aenderungen /de/inc/head.inc.shtm, /en/inc/head.inc.shtm geaendert
  • css/common.css fuer Design von dynamischen Inhalten

Sonstiges:

  • Typo auf /en/search.shtm

-- sven @ workstation7

  • Property svn:keywords set to Id
File size: 6.7 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 173 2010-08-09 18:15:32Z sven $
12 * Released under the public domain
13 *
14 **/
15 
16var t29 = {}; // the t29 namespace
17
18// allgemeine funktionen:
19t29.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 **/
41t29.img_license_settings = {
42        // content for the license tags (depending on language)
43        text : {
44                de: '&copy; technikum29. <a href="/de/impressum.shtm#Hinweise_für_die_Nutzung_von_Bildern_aus_der_Website_des__technikum29">Lizenzbestimmungen</a>',
45                en: '&copy; 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
57t29.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 **/
98t29.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 **/
122t29.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 **/
145t29.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 **/
161t29.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);
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