https://wetzlar.de/js/Customer.js

1/* global SP */
2/**
3 * Bootstrapper für Wetzlar
4 * @package Offenbach
5 * @author [email protected]
6 */
7SP.Class.define('Customer.Bootstrap', { extend: 'SP.Bootstrap',
8
9/* Mixin-Funktionalität */
10  mixins: ['unloadable'],
11
12  init: function () {
13    var me = this;
14
15    if (SP.DomUtils.hasClass(document.getElementsByTagName("html")[0], "SPtpl-rubric")) {
16      this._el = document.getElementById("SP-tilesManager");
17    } else {
18      if (document.getElementById("SP-content-main")) {
19        this._el = document.getElementById("SP-content-main");
20      } else if(document.getElementById("SP-home")) {
21        this._el = document.getElementById("SP-home");
22      } else if (document.getElementById("SP-content")) {
23        this._el = document.getElementById("SP-content");
24      }
25    }
26    if (this._el) { //el kann null sein, dann wirft saveMarkup einen Fehler und der Bootstrap-Prozess wird abgebrochen
27      this._saveMarkup();
28    }
29    this._initModule(this._initOldBrowserCheck);
30    this._initModule(this._initOffCanvas);
31    this._initModule(this._initLazyLoader);
32    this._initModule(this._initTables, [37.5, 37.5625]);
33    this._initModule(this._initSlider);
34    this._initModule(this._initIFrameResize);
35    this._initModule(this._initForms);
36    this._initModule(this._initDropdowns);
37    this._initModule(this._initMaps);
38    this._initModule(this._initNavigation);
39    this._initModule(this._initQuickSearch);
40    this._initModule(this._setTilesView);
41    this._initScrolling(); 
42    this._initVVSearch();
43    if ($('html').hasClass('SPtpl-home')) {
44      this._initEventSliderHome();
45    } else {
46      this._initEventSlider();
47    }
48
49    if (window.matchMedia) {
50      var print = window.matchMedia("print");
51      print.addListener(function (e)  {
52        if (e.matches === true) {
53          me.setListView();
54        }
55      });
56    }
57    window.onbeforeprint = function () {
58      me.setListView();
59    }
60  },
61
62  /**
63   * INitialisiert Standardelemente
64   * @access protected
65   * @param {String} Names des Attributs
66   * @param {String|Array} Quellen
67   * @param {String} Name des Pakets
68   * @param {String} Name des Klasse
69   * @param {function} Callback
70   */
71  _initVVSearch: function (attribute, sources, classPackage, className, callback) {
72    var vvSearch = document.getElementById("sp_vv_searchForm"),
73        me = this;
74
75    if (vvSearch) {
76      this._el = vvSearch.querySelector(".searchOfText");
77      this._input = this._el.querySelector("input");
78    if (this._input !== null && this._input.value !== null && this._input.value !== "") {
79      SP.DomUtils.addClass(me._el, 'SP-field-filled');
80    }
81    SP.Event.addListener(this._input, 'keyup', function (e) {
82      SP.DomUtils.removeClass(me._el, 'SP-field-filled');
83      if (this.value !== null && this.value !== "") {
84        SP.DomUtils.addClass(me._el, 'SP-field-filled');
85      }
86    });
87    }
88  },
89
90  setListView: function () {
91    if (SP.DomUtils.hasClass(document.getElementsByTagName("html")[0], "SPtpl-rubric")) {
92      this._el = document.getElementById("SP-tilesManager");
93      this.unload();
94    } else {
95      if (document.getElementById("SP-content-main")) {
96        this._el = document.getElementById("SP-content-main");
97        this.unload();
98      } else if(document.getElementById("SP-home")) {
99        this._el = document.getElementById("SP-home");
100        this.unload();
101      } else if(document.getElementById("SP-content")) {
102        this._el = document.getElementById("SP-content");
103        this.unload();
104      }
105    }
106
107    var raiser, tiles = this._el.querySelectorAll('[data-teaserimage]');
108    for (var i = 0; i < tiles.length; i++) {
109      options = this._getOptions(tiles[i], 'data-teaserimage');
110      
111      var img = document.createElement("img");
112          img.src = options.teaser;
113          img.alt = options.alt;
114          img.className = "SP-asset__content";
115      tiles[i].querySelector(".SP-asset__raiser").innerHTML = "";
116      tiles[i].querySelector(".SP-asset__raiser").appendChild(img);
117    }
118  },
119
120  _initEventSliderHome: function () {
121    var me = this;
122
123    $(document).on('ready', function () {
124      var slider = $('#SP-events-slider-wrapper');
125      var status = $(slider).find('.SP-paging-info');
126      if (slider.length > 0) {
127        var slickSlider = $(slider).find('#SP-events-slider');
128        $(slider).find('#SP-events-slider').on('init reInit afterChange breakpoint', function (event, slick, currentSlide, nextSlide) {
129
130          if (window.requestAnimationFrame) {
131            requestAnimationFrame(function () {
132              //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
133              var i = (typeof currentSlide !== "undefined" ? currentSlide : 0) + 1;

134              var activePage = Math.ceil(i / slick.getSlideCount());
135              var pages = slick.getDotCount() + 1;
136
137              if (pages > 1) {
138                $(status).text(activePage + ' / ' + pages);
139              }
140            });
141          }
142        });
143        $(slider).find('#SP-events-slider').slick({
144          arrows: true,
145          dots: true,
146          mobileFirst: true,
147          slidesToShow: 1,
148          slidesToScroll: 1,
149          responsive: [
150            {
151              breakpoint: 640,
152              settings: {
153                slidesToShow: 2,
154                slidesToScroll: 2
155              }
156            },
157            {
158              breakpoint: 1023,
159              settings: {
160                slidesToShow: 3,
161                slidesToScroll: 3
162              }
163            }
164          ]
165        });
166      }
167    });
168  },
169
170  _initEventSlider: function () {
171    var me = this;
172
173    $(document).on('ready', function () {
174      var slider = $('#SP-events-slider-wrapper');
175      var status = $(slider).find('.SP-paging-info');
176      if (slider.length > 0) { 
177        var slickSlider = $(slider).find('#SP-events-slider');
178        $(slider).find('#SP-events-slider').on('init reInit afterChange breakpoint', function (event, slick, currentSlide, nextSlide) {
179
180          if (window.requestAnimationFrame) {
181            requestAnimationFrame(function () {
182              //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
183              var i = (typeof currentSlide !== "undefined" ? currentSlide : 0) + 1;
184              var activePage = Math.ceil(i / slick.getSlideCount());
185              var pages = slick.getDotCount() + 1;
186
187              if (pages > 1) {
188                $(status).text(activePage + ' / ' + pages);
189              }
190            });
191          }
192        });
193        $(slider).find('#SP-events-slider').slick({
194          arrows: true,
195          dots: true,
196          mobileFirst: true,
197          slidesToShow: 1,
198          slidesToScroll: 1,
199          responsive: [
200            {
201              breakpoint: 640,
202              settings: {
203                slidesToShow: 2,
204                slidesToScroll: 2
205              }
206            }
207          ]
208        });
209      }
210    });
211  },
212
213
214  _initModule: function (fn, args) {
215    args = args || [];
216    try {
217      fn.apply(this, args);
218    } catch (e) {
219      if (typeof console !== "undefined") {
220        //console.error(e);
221      }
222    }
223  },
224
225  _requestAnimationFrame: function (cb) {
226    setTimeout(cb, 20);
227  },
228
229  /**
230   * initialisiert Slider
231   * @access protected
232   */
233  _initSlider: function () {
234    var me = this,
235      sliders = document.querySelectorAll('[data-slider]');
236
237    SP.Array.each(sliders, function (index, slider) {
238      var options = me._getOptions(slider, 'data-slider');
239
240      /* laden */
241      var animationHelper;
242      switch (options.animationHelper) {
243        case 'Droid':  animationHelper = new SP.Slider_Animation_Droid(); break;
244        case 'Slider': animationHelper = new SP.Slider_Animation_Slider(); break;
245      }
246      new SP.Slider(document.getElementById(options.id), options.options, animationHelper);
247    });
248
249    var bullets = function () {
250      var slider = document.getElementById('SP-slider'),
251        bullets = slider.querySelector('.SP-slider-bullets'),
252        image = slider.querySelector('.SP-slider-slide').querySelector('img'),
253        imageDimensions = image.getBoundingClientRect(),
254        bulletsOffset = 40 + bullets.getBoundingClientRect().height;
255
256      bullets.style.bottom = 'auto';
257      bullets.style.top = (imageDimensions.height - bulletsOffset) + 'px';
258    };
259
260    bullets();
261    $(document).on('load', function () {
262      bullets();
263    });
264    $(window).on('resize', function () {
265      bullets();
266    });
267    setTimeout(bullets, 100);
268  },
269
270  /**
271   * initialisiert die Haupt- und Rubriknavigation
272   * @access protected
273   */
274  _initNavigation: function () {
275    var me = this;
276    SP.Loader.require(["/WEB-IES/js/Navigation.js"], function () {
277      SP.Loader.require(["/js/Navigation.js"], function () {
278        new Reposition.Navigation();
279      });
280    });

281  },
282
283  /**
284   * initialisiert das Quicksearch-Feld
285   * @access protected
286   */
287  _initQuickSearch: function () {
288    $('#SP-quicksearch button[type="submit"]').click(function (e) {
289      var kw = $('#SP-inpKeywords');
290      if (!kw.val()) {
291        kw.focus();
292        e.preventDefault();
293      }
294    });
295  },
296
297  _initMaps: function () {
298    var els = document.querySelectorAll('[data-sp_wetzlar_searchmap]');
299    if (els.length > 0 ) {
300      SP.Loader.require("/js/SearchMap.js", function () {
301        for (var i = 0; i < els.length; i++) {
302          new SP.Wetzlar.SearchMap(els[i]);
303        }
304      });
305    }
306  },
307
308  /**
309   * Initialisiert die Dropdowns
310   */
311  _initDropdowns: function () {
312    var dropdowns = document.querySelectorAll('[data-dropdown]');
313    for (var i = 0; i < dropdowns.length; i++) {
314      var dropdown = dropdowns[i],
315        toggle = dropdown.querySelector(".SP-dropdown__toggle");
316
317      SP.Event.addListener(toggle, "click", function () {
318        if (SP.DomUtils.hasClass(this.parentNode, "SP-dropdown-isExpanded")) {
319          SP.DomUtils.removeClass(this.parentNode, "SP-dropdown-isExpanded");
320          SP.DomUtils.removeClass(this.querySelector('.SP-dropdown__toggle__icon'), 'SPi-dropdown-collapse');
321          SP.DomUtils.addClass(this.querySelector('.SP-dropdown__toggle__icon'), 'SPi-dropdown-expand');
322        } else {
323          /* alle anderen schließen */
324          for (var j = 0; j < dropdowns.length; j++) {
325            SP.DomUtils.removeClass(dropdowns[j], "SP-dropdown-isExpanded");
326            SP.DomUtils.addClass(dropdowns[j].querySelector('.SP-dropdown__toggle__icon'), 'SPi-dropdown-expand');
327            SP.DomUtils.removeClass(dropdowns[j].querySelector('.SP-dropdown__toggle__icon'), 'SPi-dropdown-collapse');
328          }
329
330          SP.DomUtils.addClass(this.parentNode, "SP-dropdown-isExpanded");
331          SP.DomUtils.removeClass(this.querySelector('.SP-dropdown__toggle__icon'), 'SPi-dropdown-expand');
332          SP.DomUtils.addClass(this.querySelector('.SP-dropdown__toggle__icon'), 'SPi-dropdown-collapse');
333        }
334      });
335    }
336  },
337
338  /**
339   * initialisiert die Kacheln
340   * @access protected
341   */
342  _initTileListSwitcher: function () {
343    var me = this,
344      options,
345      raiser,
346      tiles,
347      tilesManager,
348      tilesManagers = document.querySelectorAll('.SP-group-teaserlist');
349
350    for (var j = 0; j < tilesManagers.length; j++) {
351      if (tilesManagers[j].hasAttribute('data-tilesManager')) {
352        tiles = tilesManagers[j].querySelectorAll('[data-teaserimage]');
353        for (var i = 0; i < tiles.length; i++) {
354          options = me._getOptions(tiles[i], 'data-teaserimage');
355          tiles[i].querySelector(".SP-asset__raiser").innerHTML = '<img src="' + options.tile + '" alt="' + options.alt + '" class="SP-asset__content" />';
356        }
357
358        /* laden */
359        var scopedTilesManager = tilesManagers[j];
360        options = me._getOptions(scopedTilesManager, 'data-tilesManager');
361        tilesManager = new SP.TilesManager(new SP.TilesManager_MarkupProvider(scopedTilesManager, options.options), options.options);
362
363        /* responsive */
364        if (options.responsive) {
365          SP.Array.each(options.responsive, function (index, breakpoint) {
366            tilesManager.addBreakpoint(breakpoint.breakpoint, breakpoint.options);
367          });
368        }
369      } else {
370        tiles = tilesManagers[j].querySelectorAll('[data-teaserimage]');
371        for (var k = 0; k < tiles.length; k++) {
372          options = me._getOptions(tiles[k], 'data-teaserimage');
373          tiles[k].querySelector(".SP-asset__raiser").innerHTML = '<img src="' + options.teaser + '" alt="' + options.alt + '" class="SP-asset__content" />';
374        }
375      }
376    }
377  },
378
379  _setTilesView: function() {
380    if (SP.DomUtils.hasClass(document.getElementsByTagName("html")[0], "SPtpl-home")) {
381      if (document.getElementById("SP-fixedTiles-tileManager")) {
382        $("#SP-tilesManager").prepend($(document.getElementById("SP-fixedTiles-tileManager").parentNode));
383      }
384    }
385
386    this._initTileListSwitcher();
387    if (document.getElementById("SP-fixedTiles-tileManager")) {
388      //this.initFixedTiles();
389    }
390
391    if (window.matchMedia) {
392      var print = window.matchMedia("print");
393      print.addListener(function(e) {
394        if (e.matches === true) {
395         /* TODO: unload */
396        }
397      });
398    }
399  },
400
401  /**
402   * initialisiert Scrolling
403   * @access protected
404   */
405  _initScrolling: function () {
406    SP.Loader.require(["/WEB-IES/js/Scrolling.js"], function () {
407      new SP.Scrolling({ touchOnly: false });
408    });

409  }
410});
411new Customer.Bootstrap();