index_match.js 25 KB

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