http://nlife.ca/js/front.js

1/* global $this: true */
2/* eslint no-unused-vars: ["error", { "varsIgnorePattern": "animationsSlider" }] */
3
4if ($.cookie('themeCSSpath')) {
5  $('link#theme-stylesheet').attr('href', $.cookie('themeCSSpath'))
6}
7if ($.cookie('themeLayout')) {
8  $('body').addClass($.cookie('themeLayout'))
9}
10
11$(function () {
12  sliderHomepage()
13  sliders()
14  fullScreenContainer()
15  productDetailGallery(4000)
16  menuSliding()
17  menuMouseOver()
18  productDetailSizes()
19  utils()
20  animations()
21  counters()
22  demo()
23  contactFormAjax()
24})
25
26// Ajax contact
27function contactFormAjax () {
28  const form = $('.contact-form-ajax')
29  if (typeof form === 'undefined') return false
30  form.submit(function () {
31    $this = $(this)
32    $.post($(this).attr('action'),
33      $this.serialize(),
34      function () {
35        $this[0].reset() // clear form
36
37        $('#contact-message')
38          .html('<div class="alert alert-success" role="alert"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>Thank you for getting in touch. We will get back to you soon!</div>')
39          .fadeIn()
40      }
41      , 'json')
42    return false
43  })
44}
45
46/* for demo purpose only - can be deleted */
47function demo () {
48  if ($.cookie('themeCSSpath')) {
49    $('link#theme-stylesheet').attr('href', $.cookie('themeCSSpath'))
50  }
51
52  $('#colour').change(function () {
53    if ($(this).val() !== '') {
54      const themeCSSpath = 'css/style.' + $(this).val() + '.css'
55
56      $('link#theme-stylesheet').attr('href', themeCSSpath)
57
58      $.cookie('themeCSSpath', themeCSSpath, { expires: 365, path: '/' })
59    }
60
61    return false
62  })
63
64  $('#layout').change(function () {
65    if ($(this).val() !== '') {
66      const themeLayout = $(this).val()
67
68      $('body').removeClass('wide')
69      $('body').removeClass('boxed')
70
71      $('body').addClass(themeLayout)
72
73      $.cookie('themeLayout', themeLayout, { expires: 365, path: '/' })
74    }
75
76    return false
77  })
78}
79
80/* slider homepage */
81function sliderHomepage () {
82  if ($('#slider').length) {
83    // var owl = $('#slider')
84
85    $('#slider').owlCarousel({
86      autoPlay: 3000,
87      items: 4,
88      itemsDesktopSmall: [900, 3],
89      itemsTablet: [600, 3],
90      itemsMobile: [500, 2]
91    })
92  }
93}
94
95/* sliders */
96function sliders () {
97  if ($('.owl-carousel').length) {
98    $('.customers').owlCarousel({
99      items: ($('.customers').attr('data-items') || 6),
100      slideSpeed: ($('.customers').attr('data-slide-speed') || 2000),
101      paginationSpeed: ($('.customers').attr('data-pagination-speed') || 1000),
102      autoPlay: $('.customers').attr('data-autoplay') === 'true',
103      itemsDesktopSmall: [990, 4],
104      itemsTablet: [768, 2],
105      itemsMobile: [480, 1]
106    })
107
108    $('.testimonials').owlCarousel({
109      items: ($('.testimonials').attr('data-items') || 4),
110      slideSpeed: ($('.testimonials').attr('data-slide-speed') || 2000),
111      paginationSpeed: ($('.testimonials').attr('data-pagination-speed') || 1000),
112      autoPlay: $('.testimonials').attr('data-autoplay') === 'true',
113      itemsDesktopSmall: [990, 3],
114      itemsTablet: [768, 2],
115      itemsMobile: [480, 1]
116    })
117
118    $('.homepage').owlCarousel({
119      navigation: false, // Show next and prev buttons
120      navigationText: ['<i class="fas fa-angle-left"></i>', '<i class="fas fa-angle-right"></i>'],
121      slideSpeed: ($('.homepage').attr('data-slide-speed') || 2000),
122      paginationSpeed: ($('.homepage').attr('data-pagination-speed') || 1000),
123      autoPlay: ($('.homepage').attr('data-autoplay') || 'true') === 'true',
124      stopOnHover: true,
125      singleItem: true,
126      lazyLoad: false,
127      addClassActive: true,
128      afterInit: function () {
129        // animationsSlider()
130      },
131      afterMove: function () {
132        // animationsSlider()
133      }
134    })
135  }
136}
137
138/* menu sliding */
139function menuSliding () {
140  $('.dropdown').on('show.bs.dropdown', function () {
141    if ($(window).width() > 750) {
142      $(this).find('.dropdown-menu').first().stop(true, true).slideDown()
143    } else {
144      $(this).find('.dropdown-menu').first().stop(true, true).show()
145    }
146  })
147
148  $('.dropdown').on('hide.bs.dropdown', function () {
149    if ($(window).width() > 750) {
150      $(this).find('.dropdown-menu').first().stop(true, true).slide

150Up()
151    } else {
152      $(this).find('.dropdown-menu').first().stop(true, true).hide()
153    }
154  })
155}
156
157function menuMouseOver () {
158  $('.mouseover .dropdown').hover(function () {
159    $('.dropdown-toggle', this).trigger('click')
160  })
161}
162
163/* animations */
164function animations () {
165  let delayTime = 0
166  $('[data-animate]').css({ opacity: '0' })
167  $('[data-animate]').waypoint(function () {
168    delayTime += 150
169    $(this).delay(delayTime).queue(function (next) {
170      $(this).toggleClass('animated')
171      $(this).toggleClass($(this).data('animate'))
172      delayTime = 0
173      next()
174      // $(this).removeClass('animated')
175      // $(this).toggleClass($(this).data('animate'))
176    })
177  }, {
178    offset: '90%',
179    triggerOnce: true
180  })
181
182  $('[data-animate-hover]').hover(function () {
183    $(this).css({ opacity: 1 })
184    $(this).addClass('animated')
185    $(this).removeClass($(this).data('animate'))
186    $(this).addClass($(this).data('animate-hover'))
187  }, function () {
188    $(this).removeClass('animated')
189    $(this).removeClass($(this).data('animate-hover'))
190  })
191}
192
193function animationsSlider () {
194  let delayTimeSlider = 400
195
196  $('.owl-item:not(.active) [data-animate-always]').each(function () {
197    $(this).removeClass('animated')
198    $(this).removeClass($(this).data('animate-always'))
199    $(this).stop(true, true, true).css({ opacity: 0 })
200  })
201
202  $('.owl-item.active [data-animate-always]').each(function () {
203    delayTimeSlider += 500
204
205    $(this).delay(delayTimeSlider).queue(function () {
206      $(this).addClass('animated')
207      $(this).addClass($(this).data('animate-always'))
208
209      console.log($(this).data('animate-always'))
210    })
211  })
212}
213
214/* counters */
215function counters () {
216  $('.counter').counterUp({
217    delay: 10,
218    time: 1000
219  })
220}
221
222/* picture zoom */
223function pictureZoom () {
224  $('.product .image, .post .image, .photostream div').each(function () {
225    const imgHeight = $(this).find('img').height()
226    if (imgHeight) {
227      $(this).height(imgHeight)
228    }
229  })
230}
231
232/* full screen intro */
233function fullScreenContainer () {
234  const screenWidth = $(window).width() + 'px'
235  let screenHeight = '500px'
236
237  if ($(window).height() > 500) {
238    screenHeight = $(window).height() + 'px'
239  }
240
241  $('#intro, #intro .item').css({
242    width: screenWidth,
243    height: screenHeight
244  })
245}
246
247function utils () {
248  /* tooltips */
249  $('[data-toggle="tooltip"]').tooltip()
250
251  /* click on the box activates the radio */
252  $('#checkout').on('click', '.box.shipping-method, .box.payment-method', function () {
253    const radio = $(this).find(':radio')
254    radio.prop('checked', true)
255  })
256
257  /* click on the box activates the link in it */
258  $('.box.clickable').on('click', function () {
259    window.location = $(this).find('a').attr('href')
260  })
261
262  /* external links in new window */
263  $('.external').on('click', function (e) {
264    e.preventDefault()
265    window.open($(this).attr('href'))
266  })
267
268  /* animated scrolling */
269  $('.scroll-to, .scroll-to-top').click(function (event) {
270    const fullUrl = this.href
271    const parts = fullUrl.split('#')
272
273    if (parts.length > 1) {
274      scrollTo(fullUrl)
275      event.preventDefault()
276    }
277  })
278
279  function scrollTo (fullUrl) {
280    const parts = fullUrl.split('#')
281    const trgt = parts[1]
282    const targetOffset = $('#' + trgt).offset()
283    let targetTop = targetOffset.top - 100
284
285    if (targetTop < 0) {
286      targetTop = 0
287    }
288
289    $('html, body').animate({
290      scrollTop: targetTop
291    }, 1000)
292  }
293}
294
295/* product detail gallery */
296function productDetailGallery (confDetailSwitch) {
297  $('.thumb:first').addClass('active')
298  let timer = setInterval(autoSwitch, confDetailSwitch)
299
300  $('.thumb').click(function (e) {
301    switchImage($(this))
302    clearInterval(timer)
303    timer = setInterval(autoSwitch, confDetailSwitch)
304    e.preventDefault()
305  })
306
307  $('#mainImage').hover(function () {
308    clearInterval(timer)
309  }, function () {
310    timer = setInterval(autoSwitch, confDetailSwitch)
311  })
312
313  function autoSwitch () {
314    let nextThumb = $('.thumb.active').closest('div').next('div').find('.thumb')
315    if (nextThumb.length === 0) {
316      nextThumb = $('.thumb:first')
317    }
318    switchImage(nextThumb)
319  }
320
321  function switchImage (thumb) {
322    $('.thumb').removeClass('active')
323    const bigUrl = thumb.attr('href')
324    thumb.addClass('active')
325    $('#mainImage img').attr('src', bigUrl)
326  }
327}
328
329/* product detail sizes */
330function productDetailSizes () {
331  $('.sizes a').click(function (e) {
332    e.preventDefault()
333    $('.sizes a').removeClass('active')
334    $('.size-input').prop('checked', false)
335    $(this).addClass('active')
336    $(this).next('input').prop('checked', true)
337  })
338}
339
340$.fn.alignElementsSameHeight = function () {
341  $('.same-height-row').each(function () {
342    let maxHeight = 0

343    let children = $(this).find('.same-height')
344    children.height('auto')
345
346    if ($(window).width() > 768) {
347      children.each(function () {
348        if ($(this).innerHeight() > maxHeight) {
349          maxHeight = $(this).innerHeight()
350        }
351      })
352      children.innerHeight(maxHeight)
353    }
354
355    maxHeight = 0
356    children = $(this).find('.same-height-always')
357    children.height('auto')
358    children.each(function () {
359      if ($(this).height() > maxHeight) {
360        maxHeight = $(this).innerHeight()
361      }
362    })
363    children.innerHeight(maxHeight)
364  })
365}
366
367let windowWidth
368$(function () {
369  windowWidth = $(window).width()
370
371  $(this).alignElementsSameHeight()
372  pictureZoom()
373})
374
375$(window).resize(function () {
376  const newWindowWidth = $(window).width()
377
378  if (windowWidth !== newWindowWidth) {
379    setTimeout(function () {
380      $(this).alignElementsSameHeight()
381      fullScreenContainer()
382      pictureZoom()
383    }, 205)
384    windowWidth = newWindowWidth
385  }
386})