index.js 17 KB

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