index_match.js 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660
  1. let userAgent;
  2. let isSafari = false;
  3. let browserName;
  4. window.onload = function(){
  5. if(screen.width < 900){
  6. window.location.href = "https://m3.hhh.com.tw/";
  7. }
  8. userAgent = navigator.userAgent;
  9. detectBrowser(userAgent);
  10. detectDirection ();
  11. let result;
  12. let matchData;
  13. $.ajax({
  14. method: "GET",
  15. url: "./json/realtime.json",
  16. dataType: "json",
  17. }).done(function (msg) {
  18. result = [...msg];
  19. renderSec00(result);
  20. renderSec02(result);
  21. renderSec05(result);
  22. renderSec06(result);
  23. renderSec07(result);
  24. renderSec08(result);
  25. renderSec09(result);
  26. renderSec10(result);
  27. //renderSec11(result);
  28. renderVideo(result);
  29. renderTrending(result);
  30. });
  31. $.ajax({
  32. method: "GET",
  33. url: "./json/match.json",
  34. dataType: "json",
  35. }).done(function (msg) {
  36. matchData = [...msg];
  37. renderMatch(matchData);
  38. });
  39. }
  40. function renderMatch(matchData){
  41. let str = '';
  42. for(let i = 0; i < matchData.length; i++){
  43. str += `<div class="row align-items-center py-3 justify-content-center text-center container__row">
  44. <div class="col">
  45. <div style="overflow: hidden;">
  46. <div class="sec-match__imgfr mx-auto" style="background-image: url('${matchData[i].WorkImg}');"
  47. onclick="window.open('${matchData[i].DesignerLink}');"></div>
  48. </div>
  49. </div>
  50. <div class="col">
  51. <div class="sec-match__designer mx-auto" style="background-image: url('${matchData[i].DesignerImg}');">
  52. </div>
  53. </div>
  54. <div class="col">
  55. <div style="width: 100%;" class="text-start mx-auto">
  56. <p>${matchData[i].Name} 設計師</p>
  57. <p class="mb-2">${matchData[i].CompanyName}</p>
  58. <p>擅長風格 ${matchData[i].CompanyName}</p>
  59. <p>接案坪數 ${matchData[i].Square} </p>
  60. <p>接案地區 ${matchData[i].Area}</p>
  61. </div>
  62. </div>
  63. <div class="col">
  64. <p>${matchData[i].Consulting} 人正在諮詢</p>
  65. </div>
  66. <div class="col">
  67. <button class="btn-match">我有興趣</button>
  68. </div>
  69. </div>`
  70. }
  71. $('.container__match').html(str);
  72. }
  73. $(document).on("click", ".btn-match", function (event) {
  74. Swal.fire({
  75. icon: 'success',
  76. text: '我們已收到您的訊息,將有幸福經紀人與您聯繫',
  77. confirmButtonText: '關閉',
  78. })
  79. });
  80. function detectDirection () {
  81. let height = (window.screen.width * 5) / 12;
  82. console.log(height);
  83. $('.sec-02 .slide-item').css('height', `${height}px`);
  84. }
  85. function detectBrowser(agent){
  86. if(userAgent.match(/chrome|chromium|crios/i)){
  87. browserName = "chrome";
  88. }else if(userAgent.match(/firefox|fxios/i)){
  89. browserName = "firefox";
  90. } else if(userAgent.match(/safari/i)){
  91. browserName = "safari";
  92. }else if(userAgent.match(/opr\//i)){
  93. browserName = "opera";
  94. } else if(userAgent.match(/edg/i)){
  95. browserName = "edge";
  96. }else{
  97. browserName="No browser detection";
  98. }
  99. if(browserName === 'safari'){
  100. isSafari = true;
  101. }
  102. console.log(isSafari);
  103. }
  104. function renderSec00(data) {
  105. let temp = data[0]['data'];
  106. renderBannerStr('sec-00__slider', temp);
  107. $(".sec-00__slider").slick({
  108. dots: false,
  109. speed: 800,
  110. autoplay: true,
  111. autoplaySpeed: 5000,
  112. arrows: true,
  113. prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
  114. nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>'
  115. });
  116. }
  117. function renderSec02(data) {
  118. let temp = data[1]['data'];
  119. renderBannerStr('sec-02__slider', temp);
  120. $(".sec-02__slider").slick({
  121. dots: false,
  122. autoplay: true,
  123. arrows: true,
  124. fade: true,
  125. autoplaySpeed: 4000,
  126. prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 33px;color: white;transform: translateY(-10px);"></i></button>',
  127. nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 33px;color: white;transform: translateY(-10px);"></i></button>'
  128. });
  129. }
  130. function renderBannerStr(sec, data) {
  131. let str = '';
  132. for(let i = 0; i < data.length; i++){
  133. if(data[i]['Dwebp'] && !isSafari) {
  134. str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['Dwebp']}');" data-bg="${data[i]['Dwebp']}"></div>`
  135. } else {
  136. str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['DimgUrl']}');" data-bg="${data[i]['DimgUrl']}"></div>`
  137. }
  138. }
  139. $(`.${sec}`).html(str);
  140. }
  141. function renderSec05(data) {
  142. let randomIdx = Math.floor(Math.random()*3);
  143. const ran = $('.sec-05__tabdiv .nav-pills li').eq(randomIdx);
  144. const ranDiv = $('.sec-05tab-content>div').eq(randomIdx);
  145. $('.sec-05tab-content>div').hide();
  146. ranDiv.show();
  147. ran.addClass('active');
  148. ran.children().addClass('active');
  149. $('.sec-05 .morelink').attr('href', $('.sec-05__tabdiv .nav-item-link.active').data('link'));
  150. let temp = data[2]['data'];
  151. for(let i = 0; i < temp.length; i++){
  152. if(temp[i]["tab"] == '最夯設計'){
  153. let str = '';
  154. let sub = temp[i]["data"];
  155. for(let j = 0; j < sub.length; j++){
  156. str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}');">
  157. <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"></div>
  158. <h5 class="mb-2 me-2">${sub[j]['title']}</h5>
  159. <p class="mt-2">${sub[j]['description']}</p>
  160. </div>`;
  161. }
  162. $('#pills-hot-tab .tabpar').html(str);
  163. }
  164. if(temp[i]["tab"] == '影音實錄'){
  165. let str = '';
  166. let sub = temp[i]["data"];
  167. for(let j = 0; j < sub.length; j++){
  168. str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}');">
  169. <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"><img data-src="images/Play-Button.webp" alt="" class="tabpar__card__play lazyload"></div>
  170. <h5 class="mb-2 me-2">${sub[j]['title']}</h5>
  171. <p class="mt-2">${sub[j]['description']}</p>
  172. </div>`;
  173. }
  174. $('#pills-video-tab .tabpar').html(str);
  175. }
  176. if(temp[i]["tab"] == '專欄文章'){
  177. let str = '';
  178. let sub = temp[i]["data"];
  179. for(let j = 0; j < sub.length; j++){
  180. str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}');">
  181. <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"></div>
  182. <h5 class="mb-2 me-2">${sub[j]['title']}</h5>
  183. <p class="mt-2">${sub[j]['description']}</p>
  184. </div>`;
  185. }
  186. $('#pills-blog-tab .tabpar').html(str);
  187. }
  188. }
  189. const cardText = document.querySelectorAll('.tabpar__card p');
  190. cardText.forEach((item, i) => {
  191. let len = item.textContent.length;
  192. if(len > 18) {
  193. let str = item.textContent.substring(0, 18) + '...';
  194. item.textContent = str;
  195. }
  196. })
  197. $('.sec-05__tabdiv .nav-pills button').on('click', function(event){
  198. event.preventDefault();
  199. $('.sec-05__tabdiv .nav-pills li').removeClass('active');
  200. $('.sec-05__tabdiv .nav-pills li button').removeClass('active');
  201. $(this).addClass('active');
  202. $(this).parent().addClass('active');
  203. $('.sec-05tab-content>div').hide();
  204. var target = $(this).attr('id');
  205. $(`#pills-tab #${target}`).show();
  206. $('.sec-05tab-content .tabpar').slick('setPosition');
  207. });
  208. $(`.sec-05tab-content .tabpar`).slick({
  209. arrows: true,
  210. slidesToShow: 3,
  211. infinite: false,
  212. dots: false,
  213. slidesToScroll: 1,
  214. prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 35px;color: black;"></i></button>',
  215. nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 35px;color: black;"></i></button>'
  216. });
  217. $('.sec-05__tabdiv .nav-item-link').click(function() {
  218. $('.sec-05 .morelink').attr('href',$('.sec-05__tabdiv .nav-item-link.active').data('link'));
  219. });
  220. }
  221. function renderSec06(data) {
  222. let temp = data[3]['data'];
  223. let str = '';
  224. for(let i = 0; i < temp.length; i++){
  225. if(temp[i].video == 'true'){
  226. str+= `<div class="sec-06__card" onclick="window.open('${temp[i]['link']}');">
  227. <div class="sec-06__card__outer"><div class="sec-06__card__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"><img class="sec-06__card__play lazyload" data-src="images/Play-Button.webp"></div></div>
  228. <h5 class="mb-2 mt-2">${temp[i]['title']}</h5>
  229. <p class="mt-2">${temp[i]['description']}</p>
  230. </div>`;
  231. } else {
  232. str+= `<div class="sec-06__card" onclick="window.open('${temp[i]['link']}');">
  233. <div class="sec-06__card__outer"><div class="sec-06__card__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div></div>
  234. <h5 class="mb-2 mt-2">${temp[i]['title']}</h5>
  235. <p class="mt-2">${temp[i]['description']}</p>
  236. </div>`;
  237. }
  238. }
  239. $('.sec-06 .sec-06__slider').html(str);
  240. $('.sec-06__slider').slick({
  241. arrows: true,
  242. dots: false,
  243. speed: 800,
  244. prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 30px;color: white;"></i></button>',
  245. nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 30px;color: white;"></i></button>'
  246. });
  247. const cardText = document.querySelectorAll('.sec-06__card p');
  248. cardText.forEach((item, i) => {
  249. let len = item.textContent.length;
  250. if(len > 20) {
  251. let str = item.textContent.substring(0, 40) + '...';
  252. item.textContent = str;
  253. }
  254. });
  255. }
  256. function renderSec07(data) {
  257. let temp = data[5]['data'];
  258. let str = '';
  259. for(let i = 0; i < temp.length; i++){
  260. str+= `<div class="sec-07__slider-${i+1} slide-item" onclick="window.open('${temp[i]['link']}');" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div>`
  261. }
  262. $(`.sec-07__slider`).html(str);
  263. $(".sec-07__slider").slick({
  264. dots: false,
  265. autoplay: true,
  266. arrows: false,
  267. slidesToShow: 4,
  268. slidesToScroll: 1,
  269. autoplaySpeed: 7000,
  270. initialSlide: 0,
  271. infinite: true,
  272. });
  273. }
  274. function renderSec08(data) {
  275. let temp = data[4]['data'];
  276. let str = '';
  277. for(let i = 0; i < temp.length; i++){
  278. if(temp[i].video == 'true'){
  279. str+= `<div class="sec-08__slider-${i+1} sec-08__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
  280. <div class="sec-08__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"><img class="sec-08__card__play lazyload" data-src="images/Play-Button.webp"></div>
  281. <h5 class="mb-2 me-2">${temp[i]['title']}</h5>
  282. <p class="mb-2 me-2">${temp[i]['description']}</p>
  283. </div>`;
  284. } else {
  285. str+= `<div class="sec-08__slider-${i+1} sec-08__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
  286. <div class="sec-08__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div>
  287. <h5 class="mb-2 me-2">${temp[i]['title']}</h5>
  288. <p class="mb-2 me-2">${temp[i]['description']}</p>
  289. </div>`;
  290. }
  291. }
  292. $('.sec-08__slider').html(str);
  293. $(".sec-08__slider").slick({
  294. arrows: true,
  295. slidesToShow: 1,
  296. infinite: false,
  297. dots: false,
  298. slidesToShow: 3,
  299. centerPadding: '12px',
  300. prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 35px;color: black;"></i></button>',
  301. nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 35px;color: black;"></i></button>'
  302. });
  303. const cardText = document.querySelectorAll('.sec-08__card p');
  304. cardText.forEach((item, i) => {
  305. let len = item.textContent.length;
  306. if(len > 20) {
  307. let str = item.textContent.substring(0, 20) + '...';
  308. item.textContent = str;
  309. }
  310. })
  311. }
  312. function renderSec09(data) {
  313. let temp = data[6]['data'];
  314. let str = '';
  315. for(let i = 0; i < temp.length; i++){
  316. if(temp[i].video !== 'false') {
  317. str+= `<div class="sec-09__slider-1 sec-09__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
  318. <div class="sec-09__imgfr mb-2" 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>
  319. <p class="sec-09__cardtxt">${temp[i]['title']}</p>
  320. </div>`
  321. } else {
  322. str+= `<div class="sec-09__slider-1 sec-09__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
  323. <div class="sec-09__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div>
  324. <p class="sec-09__cardtxt">${temp[i]['title']}</p>
  325. </div>`
  326. }
  327. }
  328. $('.sec-09__slider').html(str);
  329. $(".sec-09__slider").slick({
  330. autoplay: true,
  331. autoplaySpeed: 7000,
  332. arrows: true,
  333. slidesToShow: 4,
  334. infinite: true,
  335. dots: false,
  336. slidesToScroll: 1,
  337. prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 35px;color: black;"></i></button>',
  338. nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 35px;color: black;"></i></button>'
  339. });
  340. }
  341. function renderSec10(data) {
  342. renderRecStr("sec-10", data[7]['data'].slice(0, 6));
  343. renderRecStr("sec-11", data[8]['data'].slice(0, 6));
  344. }
  345. function renderRecStr(sec, data) {
  346. let str = '';
  347. for(let i = 0; i < data.length; i++){
  348. //console.log(data[i]['description'].length);
  349. if(data[i]['description'].length > 0) {
  350. data[i]['description'].split(',');
  351. data[i]['description'] = data[i]['description'].split(',').slice(1).join("");
  352. }
  353. if(data[i].video !== 'false') {
  354. str+= `<div class="${sec}__card col-4 mb-3" onclick="window.open('${data[i]['link']}');">
  355. <div class="${sec}__card-img mb-2" 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>
  356. <h5 class="me-2">${data[i]['title']}</h5>
  357. <p class="${sec}__cardtxt me-2">${data[i]['description']}</p>
  358. </div>`
  359. } else {
  360. str+= `<div class="${sec}__card col-4 mb-3" onclick="window.open('${data[i]['link']}');">
  361. <div class="${sec}__card-img mb-2" style="background-image: url('${data[i]['imgUrl']}');" data-bg="${data[i]['imgUrl']}"></div>
  362. <h5 class="me-2">${data[i]['title']}</h5>
  363. <p class="${sec}__cardtxt me-2">${data[i]['description']}</p>
  364. </div>`
  365. }
  366. }
  367. $(`.${sec} .row`).html(str);
  368. const cardText = document.querySelectorAll(`.${sec}__card p`);
  369. cardText.forEach((item, i) => {
  370. let len = item.textContent.length;
  371. if(len > 18) {
  372. let str = item.textContent.substring(0, 18) + '...';
  373. item.textContent = str;
  374. }
  375. })
  376. }
  377. function renderVideo(data) {
  378. let temp = data[9];
  379. console.log(data[9]);
  380. $('.sec-06__videotxt').text(temp['title']);
  381. console.log('test');
  382. $('.sec-06__video__imgfr').css('background-image', `url(https://img.youtube.com/vi/${temp['yt']}/hqdefault.jpg)`);
  383. $('#videoModal').on('shown.bs.modal', function () {
  384. $('#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`);
  385. });
  386. $('#videoModal').on('hidden.bs.modal', function () {
  387. $('#videoModal iframe').removeAttr('src');
  388. });
  389. }
  390. function renderTrending(result){
  391. let temp = result[10]['data'];
  392. let str = '';
  393. for(let i = 0; i < temp.length; i++){
  394. str += `<a class="dropbox__hots__link" href="https://hhh.com.tw/search/lists/case/${temp[i]}-keyword/">${temp[i]}</a>`
  395. }
  396. $('.dropbox__hots').html(`<strong class="dropbox__hots__title">熱搜關鍵字:</strong>${str}`);
  397. }
  398. function tab2 () {
  399. if(('.dropbox__tabdiv').length){
  400. // Show the first tab by default
  401. $('.dropbox-tab-content>div').hide();
  402. $('.dropbox-tab-content>div:first').show();
  403. $('.dropbox__tabdiv .nav-pills li:first').addClass('active');
  404. $('.dropbox__tabdiv .nav-pills li:first button').addClass('active');
  405. // Change tab class and display content
  406. $('.dropbox__tabdiv .nav-pills button').on('click', function(event){
  407. event.preventDefault();
  408. $('.dropbox__tabdiv .nav-pills li').removeClass('active');
  409. $('.dropbox__tabdiv .nav-pills li button').removeClass('active');
  410. $(this).addClass('active');
  411. $(this).parent().addClass('active');
  412. $('.dropbox-tab-content>div').hide();
  413. var target = $(this).attr('id');
  414. $(`#pills-tab-2 #${target}`).show();
  415. });
  416. }
  417. }
  418. tab2();
  419. window.addEventListener('scroll', fixedOnScroll);
  420. const navbar = document.querySelector('.navbar-main');
  421. function fixedOnScroll() {
  422. }
  423. $(window).scroll(function() {
  424. if ( $(this).scrollTop() > 800 ){
  425. $('.fixed-btn').fadeIn(222);
  426. } else {
  427. $('.fixed-btn').stop().fadeOut(222);
  428. }
  429. }).scroll();
  430. $('.btn-gotop').click(function () {
  431. $('html, body').animate({
  432. scrollTop: 0
  433. }, 500)
  434. });
  435. $('.navbar-search img').click(function(){
  436. $('.navbar-search .dropbox').toggleClass('open');
  437. if($('.navbar-search .dropbox').hasClass('open')) {
  438. $('.navbar-nav .nav-item>.dropbox').addClass('d-none');
  439. } else {
  440. $('.navbar-nav .nav-item>.dropbox').removeClass('d-none');
  441. }
  442. });
  443. $('.sec-00__close').click(function(){
  444. $(this).css('display', 'none');
  445. $('.sec-00').addClass('bannerClose');
  446. //$('.sec-02').css('padding-top', '53px');
  447. sticky = 0;
  448. });
  449. // search
  450. const imageSearch = document.querySelector('.image-search');
  451. const imagesSelect = document.querySelectorAll('#pills-img-tab select');
  452. imageSearch.addEventListener("click", function() {
  453. searchQueryStr(imagesSelect, 'photos');
  454. })
  455. const newsSearch = document.querySelector('.news-search');
  456. const newsSelect = document.querySelectorAll('#pills-news-tab select');
  457. newsSearch.addEventListener("click", function() {
  458. searchQueryStr(newsSelect, 'builder');
  459. });
  460. const caseSearch= document.querySelector('.case-search');
  461. const caseSelect = document.querySelectorAll('#pills-case-tab select');
  462. caseSearch.addEventListener("click", function() {
  463. let query = ''
  464. let str = 'https://hhh.com.tw/cases/lists/1-page/new-sort/';
  465. if($('#case-shui').val() == '風水') {
  466. caseSelect.forEach((item, i) => {
  467. if(i < 2) {
  468. if(item.value !== ''){
  469. query += `/${item.value}`;
  470. }
  471. }
  472. });
  473. str = `https://hhh.com.tw/cases/lists${query}/風水-keyword/1-page/`;
  474. window.open(str);
  475. return;
  476. }
  477. caseSelect.forEach((item, i) => {
  478. if(item.value !== ''){
  479. query += `/${item.value}`;
  480. }
  481. });
  482. str = `https://hhh.com.tw/cases/lists${query}/1-page/`;
  483. window.open(str);
  484. })
  485. const designerSearch = document.querySelector('.designer-search');
  486. const designerSelect = document.querySelectorAll('#pills-designer-tab select');
  487. designerSearch.addEventListener("click", function() {
  488. searchQueryStr(designerSelect, 'designers');
  489. })
  490. function searchQueryStr(block, link){
  491. let query = ''
  492. let str = `https://hhh.com.tw/${link}/lists/1-page/`;
  493. block.forEach((item, i) => {
  494. if(item.value !== ''){
  495. query += `/${item.value}`;
  496. }
  497. });
  498. str = `https://hhh.com.tw/${link}/lists${query}/1-page/`;
  499. window.location.href = str;
  500. }
  501. const searchBtn = document.querySelector('.dropbox__searchBar__submit');
  502. const searchBar = document.querySelector('.dropbox__searchBar__input');
  503. searchBtn.addEventListener('click', search);
  504. searchBar.addEventListener('keyup', pressSearch);
  505. function search() {
  506. if(searchBar.value == '') {
  507. window.location.href = 'https://m.hhh.com.tw/search/lists/case/';
  508. } else {
  509. window.location.href = `https://m.hhh.com.tw/search/lists/case/${searchBar.value}-keyword/`;
  510. console.log(`https://m.hhh.com.tw/search/lists/case/${searchBar.value}-keyword/`)
  511. }
  512. }
  513. function pressSearch(e) {
  514. if (e.keyCode === 13) {
  515. e.preventDefault();
  516. search();
  517. }
  518. }
  519. function todayTV() {
  520. var utc = new Date().toJSON().slice(0,10).replace(/-/g,'-');
  521. window.location.href=`https://hhh.com.tw/program/?tv=gstv&date=${utc}&type=tv`;
  522. }
  523. document.addEventListener('lazybeforeunveil', function(e){
  524. var bg = e.target.getAttribute('data-bg');
  525. if(bg){
  526. e.target.style.backgroundImage = 'url(' + bg + ')';
  527. }
  528. });
  529. $('.container_match2').hide();
  530. $('.match__next').click(function() {
  531. $('.container_match').fadeOut(0);
  532. $('.container_match2').fadeIn(500);
  533. })
  534. // city result
  535. //jQuery time
  536. var current_fs, next_fs, previous_fs; //fieldsets
  537. var left, opacity, scale; //fieldset properties which we will animate
  538. var animating; //flag to prevent quick multi-click glitches
  539. $(".next").click(function(){
  540. if(animating) return false;
  541. animating = true;
  542. current_fs = $(this).parent().parent();
  543. next_fs = $(this).parent().parent().next();
  544. //activate next step on progressbar using the index of next_fs
  545. $(".form-progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
  546. //show the next fieldset
  547. next_fs.animate({opacity: 1}, {
  548. step: function(now, mx) {
  549. //as the opacity of current_fs reduces to 0 - stored in "now"
  550. //1. scale current_fs down to 80%
  551. scale = 0 + (1 + now) * .5 ;
  552. //2. bring next_fs from the right(50%)
  553. left = (now * 50)+"%";
  554. //3. increase opacity of next_fs to 1 as it moves in
  555. opacity = 0 + now;
  556. next_fs.css({
  557. 'transform': 'scale('+scale+')',
  558. });
  559. next_fs.css({'opacity': opacity});
  560. },
  561. duration: 400,
  562. complete: function(){
  563. next_fs.show();
  564. animating = false;
  565. },
  566. //this comes from the custom easing plugin
  567. easing: 'easeInOutBack'
  568. });
  569. //hide the current fieldset with style
  570. current_fs.animate({opacity: 0}, {
  571. step: function(now, mx) {
  572. //as the opacity of current_fs reduces to 0 - stored in "now"
  573. //1. scale current_fs down to 80%
  574. scale = 1 - (1 - now) * 0.2;
  575. //2. bring next_fs from the right(50%)
  576. left = (now * 50)+"%";
  577. //3. increase opacity of next_fs to 1 as it moves in
  578. opacity = 1 - now;
  579. current_fs.css({
  580. 'transform': 'scale('+scale+')',
  581. });
  582. next_fs.css({'opacity': opacity});
  583. },
  584. duration: 400,
  585. complete: function(){
  586. current_fs.hide();
  587. animating = false;
  588. },
  589. //this comes from the custom easing plugin
  590. easing: 'easeInOutBack'
  591. });
  592. });
  593. $('.close').click(function () {
  594. window.close();
  595. })
  596. console.log('hii');