index.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484
  1. window.onload = function(){
  2. /* if(screen.width >= 901){
  3. window.location.href = "https://www2.hhh.com.tw/";
  4. } */
  5. if(screen.width <= 480) {
  6. let height = (window.screen.width * 2) / 3;
  7. console.log(height);
  8. $('.sec-02 .slide-item').css('height', `${height}px`);
  9. let topHeight = (window.screen.width * 30) / 131;
  10. console.log(topHeight);
  11. $('.sec-00 .slide-item').css('height', `${topHeight}px`);
  12. $('.sec-00 .container-fluid').css('height', `${topHeight}px`);
  13. }
  14. }
  15. window.addEventListener('resize', reportWindowSize);
  16. function reportWindowSize() {
  17. if(screen.width > 480) {
  18. $('.sec-02 .slide-item').css('height', `130vh`);
  19. $('.sec-00 .slide-item').css('height', `200px`);
  20. $('.sec-00 .container-fluid').css('height', `200px`);
  21. }
  22. }
  23. $(".sec-01__slider").slick({
  24. dots: true,
  25. autoplay: false,
  26. arrows: false,
  27. });
  28. let result;
  29. $.ajax({
  30. method: "GET",
  31. url: "../json/realtime.json",
  32. dataType: "json",
  33. }).done(function (msg) {
  34. result = [...msg];
  35. renderSec00(result);
  36. renderSec02(result);
  37. renderSec03(result);
  38. renderSec06(result);
  39. renderSec07(result);
  40. renderSec08(result);
  41. renderSec09(result);
  42. renderSec10(result);
  43. renderSec11(result);
  44. renderVideo(result);
  45. });
  46. function renderSec00(data) {
  47. let temp = data[0]['data'];
  48. renderBannerStr('sec-00__slider', temp);
  49. $(".sec-00__slider").slick({
  50. dots: false,
  51. speed: 800,
  52. autoplay: true,
  53. });
  54. }
  55. function renderSec02(data) {
  56. let temp = data[1]['data'];
  57. renderBannerStr('sec-02__slider', temp);
  58. let str = '';
  59. $(".sec-02__slider").slick({
  60. dots: false,
  61. autoplay: true,
  62. arrows: true,
  63. fade: true,
  64. });
  65. }
  66. function renderBannerStr(sec, data) {
  67. let str = '';
  68. for(let i = 0; i < data.length; i++){
  69. str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['imgUrl']}');" data-bg="${data[i]['imgUrl']}"></div>`
  70. }
  71. console.log(str);
  72. $(`.${sec}`).html(str);
  73. }
  74. function renderSec03(data) {
  75. let randomIdx = Math.floor(Math.random()*3);
  76. let moreLinks = ['https://hhh.com.tw/cases/lists/', 'https://hhh.com.tw/videos/lists/', 'https://hhh.com.tw/columns/lists/'];
  77. const ran = $('.sec-03__tabdiv .nav-item-link').eq(randomIdx);
  78. const ranDiv = $('#pills-tabContent .tab-pane').eq(randomIdx);
  79. ran.addClass('active');
  80. ranDiv.addClass('active');
  81. ranDiv.addClass('show');
  82. $('.sec-03 .morelink').attr('href', $('.sec-03__tabdiv .nav-item-link.active').data('link'));
  83. let temp = data[2]['data'];
  84. for(let i = 0; i < temp.length; i++){
  85. if(temp[i]["tab"] == '最夯設計'){
  86. let str = '';
  87. let sub = temp[i]["data"];
  88. for(let j = 0; j < sub.length; j++){
  89. str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}')";>
  90. <div class="tabpar__card__imgfr" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"></div>
  91. <p class="mt-2 pe-2">${sub[j]['title']}</p>
  92. </div>`
  93. }
  94. $('#pills-hot .tabpar').html(str);
  95. }
  96. if(temp[i]["tab"] == '影音實錄'){
  97. let str = '';
  98. let sub = temp[i]["data"];
  99. for(let j = 0; j < sub.length; j++){
  100. str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}')";>
  101. <div class="tabpar__card__imgfr" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"><img class="tabpar__card__play lazyload" data-src="images/Play-Button.webp"></div>
  102. <p class="mt-2 pe-2">${sub[j]['description']}</p>
  103. </div>`
  104. }
  105. $('#pills-video .tabpar').html(str);
  106. }
  107. if(temp[i]["tab"] == '專欄文章'){
  108. let str = '';
  109. let sub = temp[i]["data"];
  110. for(let j = 0; j < sub.length; j++){
  111. str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}')";>
  112. <div class="tabpar__card__imgfr" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"></div>
  113. <p class="mt-2 pe-2">${sub[j]['title']}</p>
  114. </div>`
  115. }
  116. $('#pills-blog .tabpar').html(str);
  117. }
  118. }
  119. const cardText = document.querySelectorAll('.tabpar__card p');
  120. cardText.forEach((item, i) => {
  121. let len = item.textContent.length;
  122. if(len > 20) {
  123. let str = item.textContent.substring(0, 20) + '...';
  124. item.textContent = str;
  125. }
  126. });
  127. $('.sec-03__tabdiv .nav-item-link').click(function() {
  128. $('.sec-03 .morelink').attr('href',$('.sec-03__tabdiv .nav-item-link.active').data('link'));
  129. });
  130. }
  131. function renderSec06(data) {
  132. let temp = data[3]['data'];
  133. let str = '';
  134. for(let i = 0; i < temp.length; i++){
  135. if(i === 0) {
  136. str+= `<div class="carousel-item active" onclick="window.open('${temp[i]['link']}');"
  137. style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}">
  138. </div>`
  139. } else {
  140. str+= `<div class="carousel-item" onclick="window.open('${temp[i]['link']}');"
  141. style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}">
  142. </div>`
  143. }
  144. }
  145. $('.sec-06 .carousel-inner').html(str);
  146. }
  147. function renderSec07(data) {
  148. let temp = data[4]['data'];
  149. let str = '';
  150. for(let i = 0; i < temp.length; i++){
  151. str+= `
  152. <div class="sec-07__slider-${i+1} sec-07__card col-12 mx-1" onclick="window.open('${temp[i]['link']}');">
  153. <div class="sec-07__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');"></div>
  154. <p class="sec-07__cardtxt">${temp[i]['description']}</p>
  155. </div>`
  156. }
  157. $('.sec-07__slider').html(str);
  158. $(".sec-07__slider").slick({
  159. arrows: false,
  160. slidesToShow: 3,
  161. centerMode: true,
  162. infinite: false,
  163. dots: false,
  164. centerPadding: '12px',
  165. responsive: [
  166. {
  167. breakpoint: 480,
  168. settings: {
  169. arrows: false,
  170. slidesToShow: 1,
  171. centerMode: true,
  172. infinite: false,
  173. dots: true,
  174. centerPadding: '12px',
  175. }
  176. }
  177. ],
  178. });
  179. const cardText = document.querySelectorAll('.sec-07__cardtxt');
  180. cardText.forEach((item, i) => {
  181. let len = item.textContent.length;
  182. if(len > 20) {
  183. let str = item.textContent.substring(0, 25) + '...';
  184. item.textContent = str;
  185. }
  186. })
  187. }
  188. function renderSec08(data) {
  189. let temp = data[5]['data'];
  190. let str = '';
  191. for(let i = 0; i < temp.length; i++){
  192. str+= `<div class="sec-08__slider-${i+1} mx-1 slide-item" style="width: 70vw; background-image: url('${temp[i]['imgUrl']}');" onclick="window.open('${temp[i]['link']}');" data-bg="${temp[i]['imgUrl']}"></div>`
  193. }
  194. $('.sec-08__slider').html(str);
  195. $(".sec-08__slider").slick({
  196. autoplay: true,
  197. autoplaySpeed: 8000,
  198. arrows: false,
  199. slidesToShow: 3,
  200. centerMode: true,
  201. infinite: true,
  202. dots: false,
  203. centerPadding: '6px',
  204. responsive: [
  205. {
  206. breakpoint: 480,
  207. settings: {
  208. autoplay: true,
  209. autoplaySpeed: 8000,
  210. arrows: false,
  211. slidesToShow: 1,
  212. centerMode: true,
  213. infinite: true,
  214. dots: false,
  215. centerPadding: '12px',
  216. }
  217. }
  218. ],
  219. });
  220. }
  221. function renderSec09(data) {
  222. let temp = data[6]['data'];
  223. let str = '';
  224. for(let i = 0; i < temp.length; i++){
  225. if(temp[i].video !== 'false') {
  226. str+= `<div class="sec-09__card" onclick="window.open('${temp[i]['link']}');">
  227. <div class="sec-09__card__imgfr" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"><img class="sec-09__card__play lazyload" data-src="images/Play-Button.webp"></div>
  228. <p>${temp[i]['title']}</p>
  229. </div>`
  230. } else {
  231. str+= `<div class="sec-09__card" onclick="window.open('${temp[i]['link']}');">
  232. <div class="sec-09__card__imgfr" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div>
  233. <p>${temp[i]['title']}</p>
  234. </div>`
  235. }
  236. }
  237. $('.sec-09__cardgrp').html(str);
  238. $(".sec-09__cardgrp").slick({
  239. arrows: false,
  240. slidesToShow: 3,
  241. slidesToScroll: 1,
  242. infinite: true,
  243. dots: false,
  244. centerPadding: '10px',
  245. responsive: [
  246. {
  247. breakpoint: 480,
  248. settings: {
  249. arrows: false,
  250. slidesToShow: 2,
  251. slidesToScroll: 1,
  252. infinite: true,
  253. dots: false,
  254. centerPadding: '10px',
  255. }
  256. }
  257. ],
  258. });
  259. }
  260. function renderSec10(data) {
  261. let temp = data[7]['data'];
  262. renderRecStr('sec-10', temp);
  263. }
  264. function renderSec11(data) {
  265. let temp = data[8]['data'];
  266. renderRecStr('sec-11', temp);
  267. }
  268. function renderRecStr(sec, data) {
  269. let str = '';
  270. for(let i = 0; i < data.length; i++){
  271. if(data[i].video !== 'false') {
  272. str+= `<div class="${sec}__card col-12 mx-1" onclick="window.open('${data[i]['link']}');">
  273. <div class="${sec}__slider-${i+1} mb-2 slide-item" style="background-image: url('${data[i]['imgUrl']}');" data-bg="${data[i]['imgUrl']}"><img class="${sec}__card__play lazyload" data-src="images/Play-Button.webp"></div>
  274. <p class="${sec}__cardtxt">${data[i]['title']}</p>
  275. </div>`;
  276. } else {
  277. str+= `<div class="${sec}__card col-12 mx-1" onclick="window.open('${data[i]['link']}');">
  278. <div class="${sec}__slider-${i+1} mb-2 slide-item" style="background-image: url('${data[i]['imgUrl']}');" data-bg="${data[i]['imgUrl']}"></div>
  279. <p class="${sec}__cardtxt">${data[i]['title']}</p>
  280. </div>`;
  281. }
  282. }
  283. $(`.${sec}__slider`).html(str);
  284. $(`.${sec}__slider`).slick({
  285. arrows: false,
  286. slidesToShow: 3,
  287. centerMode: false,
  288. infinite: false,
  289. dots: false,
  290. centerPadding: '12px',
  291. responsive: [
  292. {
  293. breakpoint: 480,
  294. settings: {
  295. arrows: false,
  296. slidesToShow: 1,
  297. centerMode: true,
  298. infinite: false,
  299. dots: false,
  300. centerPadding: '12px',
  301. }
  302. }
  303. ],
  304. });
  305. }
  306. function renderVideo(data) {
  307. let temp = data[9];
  308. $('.sec-05__video__txt').text(temp['title']);
  309. $('.sec-05__video__imgfr').css('background-image', `url(https://img.youtube.com/vi/${temp['yt']}/hqdefault.jpg)`);
  310. $('#videoModal').on('shown.bs.modal', function () {
  311. $('#videoModal iframe').attr('src', `https://www.youtube.com/embed/${temp['yt']}?controls=0&autoplay=1&amp;enablejsapi=1&amp;origin=https%3A%2F%2Fm.hhh.com.tw&amp;widgetid=1`);
  312. });
  313. $('#videoModal').on('hidden.bs.modal', function () {
  314. $('#videoModal iframe').removeAttr('src');
  315. });
  316. }
  317. window.addEventListener('scroll', fixedOnScroll);
  318. const navbar = document.querySelector('.navbar-main');
  319. function fixedOnScroll() {
  320. const sticky = document.querySelector('.sec-00 .container-fluid').offsetHeight;
  321. if(window.pageYOffset >= sticky){
  322. navbar.classList.add('sticky');
  323. } else {
  324. navbar.classList.remove('sticky');
  325. }
  326. }
  327. $('.navbar-toggler').click(function(){
  328. $(".sec-menu").css('display', 'block');
  329. $(".wholeBody").css('overflow-y', 'hidden');
  330. $('.sec-menu-block').addClass('slidein');
  331. $('.sec-menu-block').removeClass('slideout');
  332. });
  333. $('.navbar-back').click(function(){
  334. $(".sec-menu").css('display', 'none');
  335. $(".wholeBody").css('overflow-y', 'scroll');
  336. $('.sec-menu-block').removeClass('slidein');
  337. $('.sec-menu-block').addClass('slideout');
  338. });
  339. $('.subexpand').click(function(){
  340. $(this).parent().next().toggleClass('show');
  341. $(this).parent().toggleClass('show');
  342. });
  343. $('.navbar-search').click(function(){
  344. $(".sec-search").css('display', 'block');
  345. $(".wholeBody").css('overflow-y', 'hidden');
  346. })
  347. $('.navbar-backs').click(function(){
  348. $(".sec-search").css('display', 'none');
  349. $(".wholeBody").css('overflow-y', 'scroll');
  350. });
  351. $('.navbar-back-fav').click(function(){
  352. $(".sec-favor").css('display', 'none');
  353. })
  354. $('.btn-gotop').click(function () {
  355. $('html, body').animate({
  356. scrollTop: 0
  357. }, 500)
  358. });
  359. $(window).scroll(function() {
  360. if ( $(this).scrollTop() > 500 ){
  361. $('.fixed-btn').fadeIn(222);
  362. } else {
  363. $('.fixed-btn').stop().fadeOut(222);
  364. }
  365. }).scroll();
  366. const searchBtn = document.querySelector('.searchBtn');
  367. const searchBar = document.querySelector('.searchBar');
  368. const searchHotLink = document.querySelectorAll('.sec-search-hots__link');
  369. searchBtn.addEventListener('click', search);
  370. searchBar.addEventListener('keyup', pressSearch);
  371. function search() {
  372. if(searchBar.value == '') {
  373. window.location.href = 'https://m.hhh.com.tw/search/lists/case/';
  374. } else {
  375. window.location.href = `https://m.hhh.com.tw/search/lists/case/${searchBar.value}-keyword/`;
  376. }
  377. }
  378. function pressSearch(e) {
  379. if (e.keyCode === 13) {
  380. e.preventDefault();
  381. search();
  382. }
  383. }
  384. searchHotLink.forEach((item, i) => {
  385. item.addEventListener('click', function() {
  386. window.location.href = `https://m.hhh.com.tw/search/lists/case/${this.textContent}-keyword/`;
  387. })
  388. })
  389. document.addEventListener('lazybeforeunveil', function(e){
  390. var bg = e.target.getAttribute('data-bg');
  391. if(bg){
  392. e.target.style.backgroundImage = 'url(' + bg + ')';
  393. }
  394. });
  395. //jQuery time
  396. var current_fs, next_fs, previous_fs; //fieldsets
  397. var left, opacity, scale; //fieldset properties which we will animate
  398. var animating; //flag to prevent quick multi-click glitches
  399. $(".next").click(function(){
  400. if(animating) return false;
  401. animating = true;
  402. current_fs = $(this).parent().parent();
  403. next_fs = $(this).parent().parent().next();
  404. //activate next step on progressbar using the index of next_fs
  405. $(".form-progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
  406. //show the next fieldset
  407. next_fs.animate({opacity: 1}, {
  408. step: function(now, mx) {
  409. //as the opacity of current_fs reduces to 0 - stored in "now"
  410. //1. scale current_fs down to 80%
  411. scale = 0 + (1 + now) * .5 ;
  412. //2. bring next_fs from the right(50%)
  413. left = (now * 50)+"%";
  414. //3. increase opacity of next_fs to 1 as it moves in
  415. opacity = 0 + now;
  416. next_fs.css({
  417. 'transform': 'scale('+scale+')',
  418. });
  419. next_fs.css({'opacity': opacity});
  420. },
  421. duration: 400,
  422. complete: function(){
  423. next_fs.show();
  424. animating = false;
  425. },
  426. //this comes from the custom easing plugin
  427. easing: 'easeInOutBack'
  428. });
  429. //hide the current fieldset with style
  430. current_fs.animate({opacity: 0}, {
  431. step: function(now, mx) {
  432. //as the opacity of current_fs reduces to 0 - stored in "now"
  433. //1. scale current_fs down to 80%
  434. scale = 1 - (1 - now) * 0.2;
  435. //2. bring next_fs from the right(50%)
  436. left = (now * 50)+"%";
  437. //3. increase opacity of next_fs to 1 as it moves in
  438. opacity = 1 - now;
  439. current_fs.css({
  440. 'transform': 'scale('+scale+')',
  441. });
  442. next_fs.css({'opacity': opacity});
  443. },
  444. duration: 400,
  445. complete: function(){
  446. current_fs.hide();
  447. animating = false;
  448. },
  449. //this comes from the custom easing plugin
  450. easing: 'easeInOutBack'
  451. });
  452. });