index.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. let userAgent;
  2. let isSafari = false;
  3. let browserName;
  4. // pagination variables
  5. let num_per_page = 9;
  6. let n = 0;
  7. let totalPages = {
  8. intro: 0,
  9. video: 0,
  10. columns: 0,
  11. vr360: 0,
  12. company: 0,
  13. };
  14. window.onload = function(){
  15. if(screen.width < 900){
  16. window.location.href = "../index_designerList_mb.html";
  17. }
  18. userAgent = navigator.userAgent;
  19. detectBrowser(userAgent);
  20. detectDirection ();
  21. let result;
  22. let designer;
  23. let id = 0;
  24. $.ajax({
  25. method: "GET",
  26. url: "./json/realtime.json",
  27. dataType: "json",
  28. }).done(function (msg) {
  29. result = [...msg];
  30. renderSec00(result);
  31. });
  32. }
  33. function detectDirection () {
  34. let height = (window.screen.width * 5) / 12;
  35. console.log(height);
  36. $('.sec-02 .slide-item').css('height', `${height}px`);
  37. }
  38. function detectBrowser(agent){
  39. if(userAgent.match(/chrome|chromium|crios/i)){
  40. browserName = "chrome";
  41. }else if(userAgent.match(/firefox|fxios/i)){
  42. browserName = "firefox";
  43. } else if(userAgent.match(/safari/i)){
  44. browserName = "safari";
  45. }else if(userAgent.match(/opr\//i)){
  46. browserName = "opera";
  47. } else if(userAgent.match(/edg/i)){
  48. browserName = "edge";
  49. }else{
  50. browserName="No browser detection";
  51. }
  52. if(browserName === 'safari'){
  53. isSafari = true;
  54. }
  55. console.log(isSafari);
  56. }
  57. function renderSec00(data) {
  58. let temp = data[0]['data'];
  59. renderBullet(temp);
  60. renderBannerStr('sec-00__slider', temp);
  61. $(".sec-00__slider").slick({
  62. dots: false,
  63. speed: 500,
  64. autoplay: true,
  65. autoplaySpeed: 4000,
  66. arrows: true,
  67. prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
  68. nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>'
  69. });
  70. $('.sec-00__bullet').removeClass('bullet-active');
  71. $('.sec-00__bullet').eq($('.slick-active').data('slick-index')).addClass('bullet-active');
  72. // $('.sec-00__slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  73. // console.log(currentSlide);
  74. // console.log($('.slick-active').data('slick-index'));
  75. // });
  76. $('.sec-00__slider').on('afterChange', function(event, slick, currentSlide){
  77. console.log(currentSlide);
  78. console.log($('.slick-active').data('slick-index'));
  79. $('.sec-00__bullet').removeClass('bullet-active');
  80. $('.sec-00__bullet').eq(currentSlide).addClass('bullet-active');
  81. });
  82. }
  83. function renderBullet(data) {
  84. let str = '';
  85. for(let i = 0; i < data.length; i++){
  86. str += '<div class="sec-00__bullet"></div>'
  87. }
  88. console.log('bullet');
  89. $('.sec-00__bulletList').html(str);
  90. }
  91. function renderBannerStr(sec, data) {
  92. let str = '';
  93. for(let i = 0; i < data.length; i++){
  94. if(data[i]['Dwebp'] && !isSafari) {
  95. str+= `<img class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['Dwebp']}');" data-bg="${data[i]['Dwebp']}"></img>`
  96. } else {
  97. str+= `<img class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['DimgUrl']}');" data-bg="${data[i]['DimgUrl']}"></img>`
  98. }
  99. }
  100. $(`.${sec}`).html(str);
  101. }
  102. let sticky = document.querySelector('.sec-00').offsetHeight;
  103. window.addEventListener('scroll', fixedOnScroll);
  104. const navbar = document.querySelector('.navbar-main');
  105. function fixedOnScroll() {
  106. if(window.pageYOffset >= 344){
  107. navbar.classList.add('sticky');
  108. } else {
  109. navbar.classList.remove('sticky');
  110. }
  111. }
  112. $(window).scroll(function() {
  113. if ( $(this).scrollTop() > 800 ){
  114. $('.fixed-btn').fadeIn(222);
  115. } else {
  116. $('.fixed-btn').stop().fadeOut(222);
  117. }
  118. }).scroll();
  119. $('.btn-gotop').click(function () {
  120. $('html, body').animate({
  121. scrollTop: 0
  122. }, 500)
  123. });
  124. $('.sec-00__close').click(function(){
  125. $(this).css('display', 'none');
  126. $('.sec-00').addClass('bannerClose');
  127. //$('.sec-02').css('padding-top', '53px');
  128. sticky = 0;
  129. });
  130. document.addEventListener('lazybeforeunveil', function(e){
  131. var bg = e.target.getAttribute('data-bg');
  132. if(bg){
  133. e.target.style.backgroundImage = 'url(' + bg + ')';
  134. }
  135. });