index_match.js 27 KB

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