http://zons-am-rhein.info/assets/common.js

1(function($) {
2  'use strict';
3  $.fn.sqrAcc = function() {
4    $(this).each(function() {
5      var container = $(this);
6      container.children('.sqracchead').on('click', function(e) {
7        e.preventDefault();
8        if (container.hasClass('sqraccopen')) {
9          container.removeClass('sqraccopen');
10        } else {
11          container.addClass('sqraccopen');
12          var content = container.find('.sqracccontainer');
13          content.css({
14            'transition': 'none',
15            'opacity': '0'
16          });
17          content.height();
18		  $(window).trigger('resize');
19          content.css({
20            'transition': 'opacity 1s',
21            'opacity': '1'
22          });
23        }
24      });
25    });
26  };
27
28  $.fn.sqrTableReflow = function() {
29    $(this).each(function() {
30      var headers = $(this).find('thead').find('th');
31	  if (headers.length>0) {
32        $(this).find('tbody').find('td').each(function() {
33          $(this).attr('data-header', headers.eq($(this).index()).text().trim());
34        });
35	  }
36    });
37  };
38
39  $.fn.sqrTabs = function() {
40    $(this).each(function() {
41      var tabs = $(this).find('.sqrtabshead>ul>li');
42      var container = $(this).find('.sqrtabscontainer>div');
43
44      tabs.on('mousedown', function(e) {
45        if (!$(this).hasClass('sqrtabactive')) {
46          var index = $(this).index();
47          container.removeClass('sqrtabactive');
48          tabs.removeClass('sqrtabactive');
49          tabs.eq(index).addClass('sqrtabactive');
50          container.eq(index).addClass('sqrtabactive');
51  	      $(window).trigger('resize');
52          container.eq(index).css({
53            'transition': 'none',
54            'opacity': '0'
55          });
56          container.eq(index).height();
57          container.eq(index).css({
58            'transition': 'opacity 1s',
59            'opacity': '1'
60          });
61        }
62        e.preventDefault();
63      });
64    });
65
66  };
67
68  $.fn.sqrLightBox = function() {
69    var backdrop;
70    var lightboxImage;
71    var caption;
72    var siblings;
73    var offset;
74    var gonext;
75    var goprev;
76    var wait;
77    var closer;
78    var viewTimeout;
79    var closeTimeout;
80    var waitTimeout;
81    var drag = false;
82    var lastx = 0;
83    var newx = 0;
84
85    function close() {
86      $(window).off('resize', position);
87      $(window).off('keydown', handleKeyboard);
88
89      $('.sqrlbbackdrop').css({
90        'opacity': '0'
91      });
92
93      if (closeTimeout !== undefined) clearTimeout(closeTimeout);
94      if (viewTimeout !== undefined) clearTimeout(viewTimeout);
95
96      closeTimeout = setTimeout(function() {
97        closeTimeout = undefined;
98        $('.sqrlbbackdrop').css({
99          'display': 'none'
100        });
101      }, 250);
102    }
103
104    function position() {
105      var width = lightboxImage.data('width');
106      var height = lightboxImage.data('height');
107      var backWidth = backdrop.width();
108      var backHeight = backdrop.height();
109
110      var gutter = 96;
111
112      if (backWidth < 768) gutter = 0;
113
114      var ratio = width / height;
115
116      if (width > backWidth - gutter) {
117        width = Math.floor(backWidth - gutter);
118        height = Math.floor(width / ratio);
119      }
120      if (height > backHeight - gutter) {
121        height = Math.floor(backHeight - gutter);
122        width = Math.floor(height * ratio);
123      }
124
125      var left = Math.floor((backWidth - width) / 2);
126      var top = Math.floor((backHeight - height) / 2);
127
128      lightboxImage.css({
129        'width': width + 'px',
130        'height': height + 'px',
131        'left': left + 'px',
132        'top': top + 'px'
133      });
134
135      gonext.css({
136        'top': Math.floor(backHeight / 2 - 48) + 'px'
137      });
138      goprev.css({
139        'top': Math.floor(backHeight / 2 - 48) + 'px'
140      });
141
142      if (gutter === 0) {
143        caption.css('bottom', top + 'px');
144      } else {
145        caption.css('bottom', '0px');
146      }
147
148      setPrevNext();
149
150    }
151
152    function handleKeyboard(e) {
153      if (e.keyCode == 27) close();
154      if (e.keyCode == 39) handleNext();
155      if (e.keyCode == 37) handlePrev();
156    }
157
158    function handleNext() {
159      if (siblings.length === 0) return;
160      if (offset >= siblings.length - 1) return;
161      handleOffset(1, 20);
162    }
163
164    function handlePrev() {
165      if (siblings.length === 0) return;
166      if (offset === 0) return;
167      handleOffset(-1, 20);
168    }
169
170    function handleOffset(direction, shift) {
171      offset += direction;
172
173      var image = new Image();
174
175      $(image).load(function() {
176        hideWait();
177
178        if (viewTimeout !== undefined) clearTimeout(viewTimeout);
179
180        viewTimeout = setTimeout(function() {
181
182          viewTimeout = undefined;
183
184          lightboxImage.css({
185            'transition': 'none',
186            'opacity': 0,
187            'transform': 'translateX(' + direction * shift + 'px)'
188          });
189
190          lightboxImage.attr({
191            'src': ''
192          });
193
194          lightboxImage.height();
195
196          lightboxImage.attr({
197            'src': image.src
198          });
199          lightboxImage.data({
200            'width': image.width,
201            'height': image.height
202          });
203
204          position();
205
206          lightboxImage.height();
207          lightboxImage.css({
208            'transition': 'opacity 0.2s, transform 0.2s',
209            'opacity': 1,
210            'transform': 'none'
211          });
212          caption.css({
213            'transition': 'opacity 0.2s',
214            'opacity': 1
215          });
216
217          setTitle();
218
219        }, 300);
220      });
221
222      lightboxImage.css({
223        'transition': 'opacity 0.2s, transform 0.2s',
224        'opacity': 1,
225        'transform': 'none'
226      });
227      lightboxImage.height();
228      lightboxImage.css({
229        'opacity': 0,
230        'transform': 'translateX(' + (direction * shift * -1) + 'px)'
231      });
232
233      startWait();
234      image.src = siblings.eq(offset).attr('href');
235    }
236
237    function setTitle() {
238      var title = siblings.eq(offset).attr('title') === undefined ? '' : siblings.eq(offset).attr('title');
239      if (siblings.length > 1) {
240        if (title !== '') title += ' ';
241        title += '(' + (offset + 1) + '/' + siblings.length + ')';
242      }
243      caption.html(title);
244    }
245
246    function setPrevNext() {
247      if (siblings.length > 0) {
248        if (offset > 0) {
249          goprev.css('display', 'block');
250        } else {
251          goprev.css('display', 'none');
252        }
253        if (offset < siblings.length - 1) {
254          gonext.css('display', 'block');
255        } else {
256          gonext.css('display', 'none');
257        }
258      } else {
259        goprev.css('display', 'none');
260        gonext.css('display', 'none');
261      }
262    }
263
264    function showWait() {
265      waitTimeout = undefined;
266      wait.css('opacity', 1);
267    }
268
269    function hideWait() {
270      if (waitTimeout !== undefined) clearTimeout(waitTimeout);
271      wait.css('opacity', 0);
272    }
273
274    function startWait() {
275      if (waitTimeout === undefined) {
276        waitTimeout = setTimeout(showWait, 300);
277      }
278    }
279
280    function handleTouchEnd(e) {
281      if (siblings.length === 0) return;
282      handleEnd();
283    }
284
285    function handleTouchMove(e) {
286      if (siblings.length === 0) return;
287      if (e.originalEvent.touches.length == 1) {
288        handleMove(e.originalEvent.touches[0].pageX);
289        e.preventDefault();
290      }
291    }
292
293    function handleTouchStart(e) {
294      if (siblings.length === 0) return;
295      if (e.originalEvent.touches.length == 1) {
296        handleStart(e.originalEvent.touches[0].pageX);
297        e.preventDefault();
298      }
299    }
300
301    function handleMouseDown(e) {
302      if (e.originalEvent.pointerType === 'touch') {
303        handleStart(e.pageX);
304      }
305    }
306
307    function handleMouseMove(e) {
308      if (e.originalEvent.pointerType === 'touch') {
309        handleMove(e.pageX);
310        e.preventDefault();
311      }
312    }
313
314    function handleMouseUp(e) {
315      if (e.originalEvent.pointerType === 'touch') {
316        handleEnd();
317      }
318    }
319
320
321    function handleStart(x) {
322      drag = true;
323      lastx = x;
324      newx = lastx;
325    }
326
327    function handleMove(x) {
328      if (drag) {
329
330        newx = x;
331
332        var translate = lastx - newx;
333
334        if (offset <= 0) {
335          if (translate < 0) translate = 0;
336        }
337        if (offset >= siblings.length - 1) {
338          if (translate > 0) translate = 0;
339        }
340
341        var opacity = 1 - Math.abs(translate) / 300;
342
343        if (opacity < 0) opacity = 0;
344        if (opacity > 1) opacity = 1;
345
346        lightboxImage.css({
347          'transition': 'none',
348          'transform': 'translateX(' + (-translate) + 'px)',
349          'opacity': opacity
350        });
351
352        caption.css({
353          'transition': 'opacity 0.2s',
354          'opacity': 0
355        });
356
357      }
358    }
359
360    function handleEnd() {
361      var change = 0;
362
363      var translate = lastx - newx;
364
365      if (translate > 100 && offset < siblings.length - 1) {
366        change = 1;
367      }
368      if (translate < -100 && offset > 0) {
369        change = -1;
370      }
371
372      if (change !== 0) {
373        handleOffset(change, Math.abs(translate * 2));
374        caption.css({
375          'transition': 'opacity 0.2s',
376          'opacity': 0
377        });
378      } else {
379        lightboxImage.css({
380          'transition': 'opacity 0.2s, transform 0.2s',
381          'opacity': 1,
382          'transform': 'none'
383        });
384        caption.css({
385          'transition': 'opacity 0.2s',
386          'opacity': 1
387        });
388      }
389
390    }
391
392    function showLightBox(e) {
393
394      e.preventDefault();
395
396      siblings = $(this).parents('.sqrlbgroup').find('a.sqrlblink');
397      offset = siblings.index(this);
398
399      if (backdrop === undefined) {
400        backdrop = $('<div>', {
401          class: 'sqrlbbackdrop'
402        });
403        wait = $('<div>', {
404          class: 'sqrlbwait'
405        });

406        closer = $('<div>', {
407          class: 'sqrlbclose'
408        });
409        gonext = $('<div>', {
410          class: 'sqrlbnext'
411        });
412        goprev = $('<div>', {
413          class: 'sqrlbprev'
414        });
415        caption = $('<div>', {
416          class: 'sqrlbcaption'
417        });
418        lightboxImage = $('<img>');
419
420        backdrop.append(wait);
421        backdrop.append(closer);
422        backdrop.append(gonext);
423        backdrop.append(goprev);
424        backdrop.append(caption);
425        backdrop.append(lightboxImage);
426
427        gonext.on('click', handleNext);
428        goprev.on('click', handlePrev);
429        closer.on('click', close);
430
431        lightboxImage.on('touchstart', handleTouchStart);
432        lightboxImage.on('touchend', handleTouchEnd);
433        lightboxImage.on('touchmove', handleTouchMove);
434        lightboxImage.on('pointerdown', handleMouseDown);
435        lightboxImage.on('pointerup', handleMouseUp);
436        lightboxImage.on('pointermove', handleMouseMove);
437
438        $('body').append(backdrop);
439      }
440
441      $(window).on('resize', position);
442      $(window).on('keydown', handleKeyboard);
443
444      lightboxImage.css('display', 'none');
445      goprev.css('display', 'none');
446      gonext.css('display', 'none');
447      backdrop.css({
448        'display': 'block',
449        'opacity': '0'
450      });
451      backdrop.height();
452      backdrop.css({
453        'opacity': '1'
454      });
455
456      var image = new Image();
457
458      $(image).load(function() {
459        lightboxImage.attr('src', image.src);
460        lightboxImage.data({
461          'width': image.width,
462          'height': image.height
463        });
464        lightboxImage.css({
465          'transition': 'none',
466          'opacity': 0,
467          'transform': 'scale(0.9)',
468          'display': 'block'
469        });
470        lightboxImage.height();
471        lightboxImage.css({
472          'transition': 'opacity 0.2s, transform 0.2s',
473          'opacity': 1,
474          'transform': 'none'
475        });
476        caption.css({
477          'opacity': 1
478        });
479
480
481        position();
482        hideWait();
483        setTitle();
484      });
485
486      startWait();
487      image.src = $(this).attr('href');
488    }
489
490    $(this).each(function() {
491      $(this).on('click', showLightBox);
492    });
493
494  };
495  
496  $.fn.sqrPicProtect = function () {
497	  $(this).each(function() {
498		$(this).on('contextmenu', 'img', function(e) {
499			e.preventDefault();
500		});
501	  });
502  };
503
504  $.fn.sqrForm = function() {
505    $(this).each(function() {
506      var form = $(this);
507      var fieldCaptchaCode = form.find('input[name="fgwcaptchacode"]');
508      var fieldCaptchaId = form.find('input[name="fgwcaptchaid"]');
509      var captchaImg = form.find('img');
510      var captchaUrl = form.attr('data-captchaurl');
511      var captchaOk = (captchaUrl === undefined);
512
513      function handleCaptchaResponse(data) {
514        if (data == 'ok') {
515          captchaOk = true;
516          form.submit();
517        } else {
518          var imgUrl = captchaImg.attr('src');
519          imgUrl = imgUrl.substr(0, imgUrl.indexOf('=') + 1) + data;
520          captchaImg.attr('src', imgUrl);
521          fieldCaptchaId.val(data);
522          fieldCaptchaCode.val('');
523          fieldCaptchaCode.addClass('sqrformerr');
524        }
525      }
526
527      function handleSubmit(e) {
528        form.find('.sqrformerr').removeClass('sqrformerr');
529        if (!captchaOk) {
530          var captchaId = fieldCaptchaId.val();
531          var captchaCode = fieldCaptchaCode.val();
532          $.post({
533            url: captchaUrl,
534            data: {
535              id: captchaId,
536              code: captchaCode
537            },
538            success: handleCaptchaResponse
539          });
540          e.preventDefault();
541        }
542
543        form.find('input[required]').each(function() {
544          if ($(this).attr('type') === 'checkbox') {
545            if (!($(this).prop('checked'))) {
546              $(this).parent('label').addClass('sqrformerr');
547              e.preventDefault();
548            }
549          } else if ($(this).attr('type') === 'email') {
550            if (!(/.*\@.*\..*/.test($(this).val()))) {
551              $(this).addClass('sqrformerr');
552              e.preventDefault();
553            }
554          } else {
555            if ($(this).val() === '') {
556              $(this).addClass('sqrformerr');
557              e.preventDefault();
558            }
559          }
560        });
561
562        form.find('textarea[required]').each(function() {
563          if ($(this).val() === '') {
564            $(this).addClass('sqrformerr');
565            e.preventDefault();
566          }
567        });
568      }
569
570      form.on('submit', handleSubmit);
571    });

572  };
573})(jQuery);
574
575$(document).ready(function() {
576  $('.sqracc').sqrAcc();
577  $('.sqrtablereflow').sqrTableReflow();
578  $('.sqrtabs').sqrTabs();
579  $('a.sqrlblink').sqrLightBox();
580  $('form.sqrformcheck').sqrForm();
581  $('.sqrpicprotect').sqrPicProtect();
582});