front.js 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386
  1. /* global $this: true */
  2. /* eslint no-unused-vars: ["error", { "varsIgnorePattern": "animationsSlider" }] */
  3. if ($.cookie('themeCSSpath')) {
  4. $('link#theme-stylesheet').attr('href', $.cookie('themeCSSpath'))
  5. }
  6. if ($.cookie('themeLayout')) {
  7. $('body').addClass($.cookie('themeLayout'))
  8. }
  9. $(function () {
  10. sliderHomepage()
  11. sliders()
  12. fullScreenContainer()
  13. productDetailGallery(4000)
  14. menuSliding()
  15. menuMouseOver()
  16. productDetailSizes()
  17. utils()
  18. animations()
  19. counters()
  20. demo()
  21. contactFormAjax()
  22. })
  23. // Ajax contact
  24. function contactFormAjax () {
  25. var form = $('.contact-form-ajax')
  26. if (typeof form === 'undefined') return false
  27. form.submit(function () {
  28. $this = $(this)
  29. $.post($(this).attr('action'),
  30. $this.serialize(),
  31. function () {
  32. $this[0].reset() // clear form
  33. $('#contact-message')
  34. .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>')
  35. .fadeIn()
  36. }
  37. , 'json')
  38. return false
  39. })
  40. }
  41. /* for demo purpose only - can be deleted */
  42. function demo () {
  43. if ($.cookie('themeCSSpath')) {
  44. $('link#theme-stylesheet').attr('href', $.cookie('themeCSSpath'))
  45. }
  46. $('#colour').change(function () {
  47. if ($(this).val() !== '') {
  48. var themeCSSpath = 'css/style.' + $(this).val() + '.css'
  49. $('link#theme-stylesheet').attr('href', themeCSSpath)
  50. $.cookie('themeCSSpath', themeCSSpath, {expires: 365, path: '/'})
  51. }
  52. return false
  53. })
  54. $('#layout').change(function () {
  55. if ($(this).val() !== '') {
  56. var themeLayout = $(this).val()
  57. $('body').removeClass('wide')
  58. $('body').removeClass('boxed')
  59. $('body').addClass(themeLayout)
  60. $.cookie('themeLayout', themeLayout, {expires: 365, path: '/'})
  61. }
  62. return false
  63. })
  64. }
  65. /* slider homepage */
  66. function sliderHomepage () {
  67. if ($('#slider').length) {
  68. // var owl = $('#slider')
  69. $('#slider').owlCarousel({
  70. autoPlay: 3000,
  71. items: 4,
  72. itemsDesktopSmall: [900, 3],
  73. itemsTablet: [600, 3],
  74. itemsMobile: [500, 2]
  75. })
  76. }
  77. }
  78. /* sliders */
  79. function sliders () {
  80. if ($('.owl-carousel').length) {
  81. $('.customers').owlCarousel({
  82. items: ($('.customers').attr('data-items') || 6),
  83. slideSpeed: ($('.customers').attr('data-slide-speed') || 2000),
  84. paginationSpeed: ($('.customers').attr('data-pagination-speed') || 1000),
  85. autoPlay: $('.customers').attr('data-autoplay') === 'true',
  86. itemsDesktopSmall: [990, 4],
  87. itemsTablet: [768, 2],
  88. itemsMobile: [480, 1]
  89. })
  90. $('.testimonials').owlCarousel({
  91. items: ($('.testimonials').attr('data-items') || 4),
  92. slideSpeed: ($('.testimonials').attr('data-slide-speed') || 2000),
  93. paginationSpeed: ($('.testimonials').attr('data-pagination-speed') || 1000),
  94. autoPlay: $('.testimonials').attr('data-autoplay') === 'true',
  95. itemsDesktopSmall: [990, 3],
  96. itemsTablet: [768, 2],
  97. itemsMobile: [480, 1]
  98. })
  99. $('.homepage').owlCarousel({
  100. navigation: false, // Show next and prev buttons
  101. navigationText: ['<i class="fas fa-angle-left"></i>', '<i class="fas fa-angle-right"></i>'],
  102. slideSpeed: ($('.homepage').attr('data-slide-speed') || 2000),
  103. paginationSpeed: ($('.homepage').attr('data-pagination-speed') || 1000),
  104. autoPlay: ($('.homepage').attr('data-autoplay') || 'true') === 'true',
  105. stopOnHover: true,
  106. singleItem: true,
  107. lazyLoad: false,
  108. addClassActive: true,
  109. afterInit: function () {
  110. // animationsSlider()
  111. },
  112. afterMove: function () {
  113. // animationsSlider()
  114. }
  115. })
  116. }
  117. }
  118. /* menu sliding */
  119. function menuSliding () {
  120. $('.dropdown').on('show.bs.dropdown', function () {
  121. if ($(window).width() > 750) {
  122. $(this).find('.dropdown-menu').first().stop(true, true).slideDown()
  123. } else {
  124. $(this).find('.dropdown-menu').first().stop(true, true).show()
  125. }
  126. })
  127. $('.dropdown').on('hide.bs.dropdown', function () {
  128. if ($(window).width() > 750) {
  129. $(this).find('.dropdown-menu').first().stop(true, true).slideUp()
  130. } else {
  131. $(this).find('.dropdown-menu').first().stop(true, true).hide()
  132. }
  133. })
  134. }
  135. function menuMouseOver () {
  136. $('.mouseover .dropdown').hover(function () {
  137. $('.dropdown-toggle', this).trigger('click')
  138. })
  139. }
  140. /* animations */
  141. function animations () {
  142. var delayTime = 0
  143. $('[data-animate]').css({opacity: '0'})
  144. $('[data-animate]').waypoint(function () {
  145. delayTime += 150
  146. $(this).delay(delayTime).queue(function (next) {
  147. $(this).toggleClass('animated')
  148. $(this).toggleClass($(this).data('animate'))
  149. delayTime = 0
  150. next()
  151. // $(this).removeClass('animated')
  152. // $(this).toggleClass($(this).data('animate'))
  153. })
  154. }, {
  155. offset: '90%',
  156. triggerOnce: true
  157. })
  158. $('[data-animate-hover]').hover(function () {
  159. $(this).css({opacity: 1})
  160. $(this).addClass('animated')
  161. $(this).removeClass($(this).data('animate'))
  162. $(this).addClass($(this).data('animate-hover'))
  163. }, function () {
  164. $(this).removeClass('animated')
  165. $(this).removeClass($(this).data('animate-hover'))
  166. })
  167. }
  168. function animationsSlider () {
  169. var delayTimeSlider = 400
  170. $('.owl-item:not(.active) [data-animate-always]').each(function () {
  171. $(this).removeClass('animated')
  172. $(this).removeClass($(this).data('animate-always'))
  173. $(this).stop(true, true, true).css({opacity: 0})
  174. })
  175. $('.owl-item.active [data-animate-always]').each(function () {
  176. delayTimeSlider += 500
  177. $(this).delay(delayTimeSlider).queue(function () {
  178. $(this).addClass('animated')
  179. $(this).addClass($(this).data('animate-always'))
  180. console.log($(this).data('animate-always'))
  181. })
  182. })
  183. }
  184. /* counters */
  185. function counters () {
  186. $('.counter').counterUp({
  187. delay: 10,
  188. time: 1000
  189. })
  190. }
  191. /* picture zoom */
  192. function pictureZoom () {
  193. $('.product .image, .post .image, .photostream div').each(function () {
  194. var imgHeight = $(this).find('img').height()
  195. if (imgHeight) {
  196. $(this).height(imgHeight)
  197. }
  198. })
  199. }
  200. /* full screen intro */
  201. function fullScreenContainer () {
  202. var screenWidth = $(window).width() + 'px'
  203. var screenHeight = '500px'
  204. if ($(window).height() > 500) {
  205. screenHeight = $(window).height() + 'px'
  206. }
  207. $('#intro, #intro .item').css({
  208. width: screenWidth,
  209. height: screenHeight
  210. })
  211. }
  212. function utils () {
  213. /* tooltips */
  214. $('[data-toggle="tooltip"]').tooltip()
  215. /* click on the box activates the radio */
  216. $('#checkout').on('click', '.box.shipping-method, .box.payment-method', function () {
  217. var radio = $(this).find(':radio')
  218. radio.prop('checked', true)
  219. })
  220. /* click on the box activates the link in it */
  221. $('.box.clickable').on('click', function () {
  222. window.location = $(this).find('a').attr('href')
  223. })
  224. /* external links in new window */
  225. $('.external').on('click', function (e) {
  226. e.preventDefault()
  227. window.open($(this).attr('href'))
  228. })
  229. /* animated scrolling */
  230. $('.scroll-to, .scroll-to-top').click(function (event) {
  231. var fullUrl = this.href
  232. var parts = fullUrl.split('#')
  233. if (parts.length > 1) {
  234. scrollTo(fullUrl)
  235. event.preventDefault()
  236. }
  237. })
  238. function scrollTo (fullUrl) {
  239. var parts = fullUrl.split('#')
  240. var trgt = parts[1]
  241. var targetOffset = $('#' + trgt).offset()
  242. var targetTop = targetOffset.top - 100
  243. if (targetTop < 0) {
  244. targetTop = 0
  245. }
  246. $('html, body').animate({
  247. scrollTop: targetTop
  248. }, 1000)
  249. }
  250. }
  251. /* product detail gallery */
  252. function productDetailGallery (confDetailSwitch) {
  253. $('.thumb:first').addClass('active')
  254. var timer = setInterval(autoSwitch, confDetailSwitch)
  255. $('.thumb').click(function (e) {
  256. switchImage($(this))
  257. clearInterval(timer)
  258. timer = setInterval(autoSwitch, confDetailSwitch)
  259. e.preventDefault()
  260. })
  261. $('#mainImage').hover(function () {
  262. clearInterval(timer)
  263. }, function () {
  264. timer = setInterval(autoSwitch, confDetailSwitch)
  265. })
  266. function autoSwitch () {
  267. var nextThumb = $('.thumb.active').closest('div').next('div').find('.thumb')
  268. if (nextThumb.length === 0) {
  269. nextThumb = $('.thumb:first')
  270. }
  271. switchImage(nextThumb)
  272. }
  273. function switchImage (thumb) {
  274. $('.thumb').removeClass('active')
  275. var bigUrl = thumb.attr('href')
  276. thumb.addClass('active')
  277. $('#mainImage img').attr('src', bigUrl)
  278. }
  279. }
  280. /* product detail sizes */
  281. function productDetailSizes () {
  282. $('.sizes a').click(function (e) {
  283. e.preventDefault()
  284. $('.sizes a').removeClass('active')
  285. $('.size-input').prop('checked', false)
  286. $(this).addClass('active')
  287. $(this).next('input').prop('checked', true)
  288. })
  289. }
  290. $.fn.alignElementsSameHeight = function () {
  291. $('.same-height-row').each(function () {
  292. var maxHeight = 0
  293. var children = $(this).find('.same-height')
  294. children.height('auto')
  295. if ($(window).width() > 768) {
  296. children.each(function () {
  297. if ($(this).innerHeight() > maxHeight) {
  298. maxHeight = $(this).innerHeight()
  299. }
  300. })
  301. children.innerHeight(maxHeight)
  302. }
  303. maxHeight = 0
  304. children = $(this).find('.same-height-always')
  305. children.height('auto')
  306. children.each(function () {
  307. if ($(this).height() > maxHeight) {
  308. maxHeight = $(this).innerHeight()
  309. }
  310. })
  311. children.innerHeight(maxHeight)
  312. })
  313. }
  314. var windowWidth
  315. $(function () {
  316. windowWidth = $(window).width()
  317. $(this).alignElementsSameHeight()
  318. pictureZoom()
  319. })
  320. $(window).resize(function () {
  321. var newWindowWidth = $(window).width()
  322. if (windowWidth !== newWindowWidth) {
  323. setTimeout(function () {
  324. $(this).alignElementsSameHeight()
  325. fullScreenContainer()
  326. pictureZoom()
  327. }, 205)
  328. windowWidth = newWindowWidth
  329. }
  330. })