https://wetzlar.de/WEB-IES/js/jquery.sitepark.website.js

1/*global SP: false*/
2/**
3 * Website
4 * @class SP.Website
5 */
6SP.Class.define('SP.Website', {
7
8    /**
9     * breakpoint, Breakpoints
10     * @access protected
11     * @type Object[]
12     */
13    _breakpoints: null,
14
15    /**
16     * settings, Einstellungen
17     * @access protected
18     * @type Object[]
19     */
20    _settings: null,
21
22
23    /**
24     * applyClasses: setzt Klassen an das HTML-Element
25     * @access: protected
26     */
27    _applyClasses: function () {
28
29        /* Bei Start bereits Klassen setzen. Wer hier mehr brauch, nimmt modernizr
30         * 1. Script: an / aus */
31        $('html').removeClass('no-js').addClass('js');
32
33        /* Chrome markieren, weil Chrome als einziger SVG-Fonts beherrscht */
34        if (navigator.userAgent.indexOf('Chrome') >= 0) {
35            $('html').addClass('chrome');
36        }
37    },
38
39
40    /**
41     * enhanceTables: macht Tabellen responsive
42     * @access protected
43     */
44    _enhanceTables: function () {
45        $(document).on('ready',  SP.Function.bind(function () {
46            if ($('article table').length > 0) {
47                //SP.Loader.require('/WEB-IES/scriptlib/website/js/jquery.sitepark.website-tables.js', function () {
48                    //$('article table').spTable();
49                //});
50            }
51        }, this));
52    },
53
54
55    /**
56     * initPlaceholders: initialisiert Platzhalter für IE8/IE9
57     * @access private
58     */
59    _initPlaceholders: function () {
60        if ($('html').hasClass('ie8') || $('html').hasClass('ie9')) {
61            $(document).ready(function () {
62                $('input').each(function () {
63                    if ($(this).val() === '') {
64                        $(this).attr('value', $(this).attr('placeholder'))
65                    }
66                    $(this).on('focus', function () {
67                        if ($(this).val() === $(this).attr('placeholder')) {
68                            $(this).attr('value', '');
69                        }
70                    }).on('blur', function () {
71                        if ($(this).val() === '') {
72                            $(this).attr('value', $(this).attr('placeholder'));
73                        }
74                    });
75                });
76                $('textarea').each(function () {
77                    if ($(this).val() === '') {
78                        $(this).text($(this).attr('placeholder'))
79                    }
80                    $(this).on('focus', function () {
81                        if ($(this).val() === $(this).attr('placeholder')) {
82                            $(this).text('');
83                        }
84                    }).on('blur', function () {
85                        if ($(this).val() === '') {
86                            $(this).text($(this).attr('placeholder'));
87                        }
88                    });
89                });
90            });
91        }
92    },
93
94
95    /**
96     * reinit: reinitialisiert das Script
97     * @access private
98     */
99    _reinit: function () {
100        $(document).ready(SP.Function.bind(function () {
101            if (this._settings.mobileNavigationNeeded === true) {
102                // TODO: Warum wird ein Timeout benötigt?
103                setTimeout(function () { 
104                    $(window).trigger('SP_Mobile_Navigation.required'); 
105                }, 1);
106            } else {
107                $(window).trigger('SP_Mobile_Navigation.needless');
108            }
109        }, this));
110    },
111
112
113    /**
114     * init, Konstruktor
115     * @constructor
116     * @access public
117     */
118    init: function (options) {
119       
120        /* Optionen */
121	this._settings = $.extend({}, this._settings, options);
122        this._reinit();
123
124        this._breakpoints = [];
125
126        this._applyClasses();
127        this._enhanceTables();
128        this._initPlaceholders();
129    },
130
131
132    /**
133     * isMobileNavigationNeeded, überprüft, ob die mobile Navigation geladen werden muss
134     *  und erzeugt entsprechende Events
135     * @access public
136     * @param {Number} breakpoint Maximalbreite zur Anzeige der mobilen Navigation
137     * @triggers SP_Mobile_Navigation.required wenn die mobile Navigation benötigt wird
138     * @triggers SP_Mobile_Navigation.needless wenn die mobile Navigation nicht mehr benötigt wird
139     */
140    initMobileNavigationMonitoring: function (breakpoint) {
141        if (window.matchMedia) {
142            var mediaQuery = window.matchMedia('(max-width: ' + breakpoint + 'px)');
143
144            $(document).on('ready', function () {
145                if(mediaQuery.matches === true) {
146                    $('html').addClass('SP-mobileNavigation');
147                    $(window).trigger('SP_Mobile_Navigation.required');
148                }
149            });
150
151            mediaQuery.addListener(function (e) {
152                if (e.matches === true) {
153                    $('html').addClass('SP-mobileNavigation');
154                    $(window).trigger('SP_Mobile_Navigation.required');
155                } else {
156                    $('html').removeClass('SP-mobileNavigation');
157                    $(window).trigger('SP_Mobile_Navigation.needless');
158                }
159            });
160        }
161    },
162
163
164    /**

165     * addBreakpoint: fügt einen Breakpoint hinzu und setzt Optionen von Plugins neu
166     * @access public
167     * @param {Object} Plugin-Object
168     * @param {Object} settings
169     * @param {Object} dimensions
170     */
171    addBreakpoint: function(plugin, settings, dimensions) {
172        var breakpoint,
173            i,
174            min,
175            max;
176
177        if (!$('html').hasClass('no-mediaqueries') && typeof plugin.setSettings === 'function' && window.matchMedia) {
178            min = dimensions.min > 0 ? dimensions.min : 0;
179            max = dimensions.max > 0 ? dimensions.max : 25000;
180
181            for (i in this._breakpoints) {
182                if (this._breakpoints[i].min === min && this._breakpoints[i].min === max) {
183                    breakpoint = this._breakpoints[i].mediaQuery;
184                }
185            }
186
187            /* neu erzeugen */
188            if (typeof breakpoint !== 'object') {
189                breakpoint = window.matchMedia('(min-width: ' + min + 'px) and (max-width: ' + max + 'px)');
190                this._breakpoints.push({
191                    min: min,
192                    max: max,
193                    breakpoint: breakpoint
194                });
195            }
196
197            /* initial und Listener anhängen */
198            if (breakpoint.matches === true) {
199                plugin.setSettings(settings);
200            }
201
202            breakpoint.addListener(function(e) {
203                if (e.matches === true) {
204                    plugin.setSettings(settings);
205                }
206            });
207        }
208    },
209
210
211    /**
212     * Setzt die Einstellungen neu
213     * @param {Object} options
214     * @access public
215     */
216    setSettings: function (options) {
217        this._settings = $.extend({}, this._settings, options);
218	this._reinit();
219    },
220
221
222    /**
223     * Statische Methoden
224     */
225    statics: {
226
227        /**
228         * detectIE: findet heraus, ob es sich um einen IE7/8/9 handelt
229         * @access public
230         * @static
231         * @return int 7/8/9
232         */
233        detectIE: function () {
234            if ($('html').hasClass('ie7')) {
235                return 7;
236            } else if ($('html').hasClass('ie8')) {
237                return 8;
238            } else if ($('html').hasClass('ie9')) {
239                return 9;
240            } else {
241                return false;
242            }
243        },
244
245
246        /**
247         * detectMobile: ermittelt, ob es sich um ein mobiles Endgerät handelt
248         * @access public
249         * @static
250         * @return bool  true, wenn mobil
251         */
252        detectMobile: function () {
253            'use strict';
254
255            var browser = navigator.userAgent||navigator.vendor||window.opera,
256                mobile  = false,
257                test1   = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i,
258                test2   = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|

258sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i;
259
260            if(test1.test(browser) || test2.test(browser.substr(0,4))) {
261                mobile = true;
262            }
263
264            return mobile;
265        },
266
267
268        /**
269         * detectTouch: ermittelt, ob es sich um ein Touch-fähiges Endgerät handelt
270         * @access public
271         * @static
272         * @return bool  true, wenn touch
273         */
274        detectTouch: function () {
275            'use strict';
276
277            return !!('ontouchstart' in window);
278        },
279
280
281        /**
282         * detectStorage: ermittelt, ob LocalStorage und SessionStorage zur Verfügung stehen
283         * @access public
284         * @static
285         * @return bool  true, wenn verfügbar
286         */
287        detectStorage: function () {
288            'use strict';
289
290            try {
291                return 'localStorage' in window && window.localStorage !== null;
292            } catch (e) {
293                return false;
294            }
295        },
296
297
298        /**
299         * determineIndex: ermittelt welcher Index ein Eintrag in einer Liste ist
300         * @access public
301         * @static
302         * @param {Object} item Listeneintrag, von dem der Index ermittelt werden soll
303         * @param {String} ancestor Selektor für den Vorfahren, in dem gesucht werden soll
304         * @param {String} descendant  Selektor für den Nachfahren, nach dem gesucht werden soll
305         * @return int|bool  Ermittelter Index oder false, wenn der Nachfahre nicht gefunden wurde
306         */
307        determineIndex: function (item, ancestor, descendant) {
308            'use strict';
309
310            /* wenn vor- und nachfahren nicht übergeben werden, von unsortierter Liste ausgehen */
311            if (ancestor === null || ancestor === undefined) {
312                ancestor = 'ul';
313            }
314            if (descendant === null || descendant === undefined) {
315                descendant = 'li';
316            }
317
318            var i = 0;
319            $(item).closest(ancestor).find(descendant).each(function () {
320                if ($(this).is(item)) {
321                    return false;
322                }
323
324                i += 1;
325            });
326            return i;
327        },
328
329
330
331        /**
332         * determineWindowWidth: ermittelt browserübergreifend die zur Verfügung stehende Breite im Fenster
333         * @access public
334         * @static
335         * @param {Object} win  window
336         * @return int  zur Verfügung stehende Breite im Fenster
337         */
338        determineWindowWidth: function (win) {
339            'use strict';
340
341            var width;
342
343            if (win === undefined) {
344                win = window;
345            }
346
347            if (win.innerWidth !== undefined) {
348                width = win.innerWidth;
349            } else {
350                if (win.document.documentElement && win.document.documentElement.clientWidth) {
351                    width = win.document.documentElement.clientWidth;
352                } else {
353                    width = win.document.body.offsetWidth;
354                }
355            }
356
357            return width;
358        },
359
360
361        /**
362         * determineWindowHeight: ermittelt browserübergreifend die zur Verfügung stehende Höhe im Fenster
363         * @access public
364         * @static
365         * @param {Object} win  window
366         * @return int  zur Verfügung stehende Höhe im Fenster
367         */
368        determineWindowHeight: function (win) {
369            'use strict';
370            var height;
371
372            if (win === undefined) {
373                win = window;
374            }
375
376            if (win.innerHeight !== undefined) {
377                height = win.innerHeight;
378            } else {
379                if (win.document.documentElement && win.document.documentElement.clientHeight) {
380                    height = win.document.documentElement.clientHeight;
381                } else {
382                    height = win.document.body.offsetHeight;
383                }
384            }
385
386            return height;
387        },
388
389
390        /**
391         * determineScrollbarWidth: ermittelt browserübergreifend die Breite eines Scrollbalken
392         * @access public
393         * @static
394         * @param {Object} win  window
395         * @return int  Breite des Scrollbalkens
396         */
397        determineScrollbarWidth: function () {
398            'use strict';
399            var width;
400

401            /* Scrollbalken im Body ausschalten */
402            document.body.style.overflow = 'hidden';
403            width = document.body.clientWidth;
404
405            /* Scrollbalken */
406            document.body.style.overflow = 'scroll';
407            width -= document.body.clientWidth;
408
409            /* IE im Standardmode berücksichtigen */
410            if (!width) {
411                width = document.body.offsetWidth - document.body.clientWidth;
412            }
413
414            /* ursprüngliche Einstellungen wiederherstellen */
415            document.body.style.overflow = '';
416
417            return width;
418        },
419
420
421        /**
422         * preload: lädt Bilder vor
423         * @access public
424         * @static
425         * @param {String[]} URLs der Bilder, die vorgeladen werden sollen
426         * @param {Function} callback   Funktion, die gestartet wird, wenn der Preloader fertig ist
427         */
428        preload: function (images, callback) {
429            'use strict';
430            var toLoad = images.length;
431
432            $(images).each(function () {
433                if ($('#a' + this.id).length > 0) {
434                    toLoad -= 1;
435                    if (toLoad === 0) {
436                        callback();
437                    }
438                } else {
439                    var img = $('<img />').attr({ src: this.url, id: 'a' + this.id });
440
441                    /* ie8 fix */
442                    if ($('html').hasClass('ie8')) {
443                    	img.css({
444                    		'position': 'absolute'
445                    	});
446                    	$('body').append(img);
447                    }
448
449                    img.load(function () {
450                        toLoad -= 1;
451                        if (toLoad === 0) {
452                            callback();
453                        }
454                    });
455                }
456            });
457        },
458
459
460        /**
461         * setCookie: setzt einen Cookie
462         * @access public
463         * @static
464         * @param {String} name Name
465         * @param {String} value Wert
466         * @param {Number} expire Gültigkeitsdauer in Sekunden
467         * @return bool
468         */
469        setCookie: function(name, value, expire) {
470            'use strict';
471            var expires = new Date(),
472                now = new Date();
473
474            if (expire !== -1) {
475                if (expire !== undefined && expire !== 'undefined') {
476                    expires.setTime(now.getTime() + expire * 1000);
477                    expires = expires.toGMTString();
478                } else {
479                    expires = 0;
480                }
481            }
482
483            document.cookie = name + '=' + value + ';expires=' + expires;
484            return true;
485        },
486
487
488        /**
489         * getCookie: holt den Wert eines Cookies
490         * @access public
491         * @static
492         * @param {String} name Name
493         * @return String
494         */
495        getCookie: function(name) {
496            'use strict';
497            var result = new RegExp('(?:^|; )' + encodeURIComponent(name) + '=([^;]*)').exec(document.cookie);
498            return (result) ? (result[1]) : null;
499        },
500
501
502        /**
503         * translate: übersetzt einen Text anhand des Attributs data-translation
504         * @access public
505         * @static
506         * @param {Object} context jQuery  Dom-Knoten an dem die Übersetzungen gesucht werden sollen
507         * @param {String} name string  Attribut-Name, der verwendet werden soll
508         * @param {String} fallback string  Standard-Wert, wenn keine Übersetzung hinterlegt ist
509         * @return String Übersetzung
510         */
511        translate: function (context, name, fallback) {
512            'use strict';
513            if (context.data('translate') && context.data('translate')[name]) {
514                return context.data('translate')[name];
515            } else {
516                return fallback;
517            }
518        },
519
520
521        /**
522         * getIcon: holt die gewünschten Icons anhand des Attributs data-icons
523         * @access public
524         * @static
525         * @param {Object} context jQuery  Dom-Knoten an dem die Icons gesucht werden sollen
526         * @param {String} name string  Attribut-Name, der verwendet werden soll
527         * @param {String} fallback string  Standard-Wert, wenn keine Icons hinterlegt sind
528         * @return String Klassenname für das Icon
529         */
530        getIcon: function (context, name, fallback) {
531            'use strict';
532            if (context.data('icons') && context.data('icons')[name]) {
533                return context.data('icons')[name];
534            } else {
535                return fallback;
536            }
537        },
538
539        /**
540         * disableScrolling: scrollen verhindern
541         * @access public
542		 * @static
543         * @return bool true
544         */
545        disableScrolling: function () {
546            'use strict';
547            var sWidth = SP.Website.determineScrollbarWidth();
548          	$('body').css('overflow-y', 'hidden').css('padding-right', sWidth);
549
550            return true;
551        },
552
553
554        /**
555         * disableScrlling: scrollen verhindern
556         * @access public
557		 * @static
558         * @return bool true
559         */
560        enableScrolling: function () {
561            'use strict';
562			$('body').css('overflow-y', 'auto').css('padding-right', 0);
563
564            return true;
565        },
566
567        /**
568         * isPrint: ermittelt, ob es sich um die Druckansicht handelt
569         * @access public
570	 * @static
571         * @return bool 
572         */
573        isPrint: function () {
574            'use strict';
575	
576            return $('#SP-print-detector').is(':visible');
577        }
578    }
579});