front.js 9.7 KB

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