/***************************** ***************************** ******** ******** ******** 通用功能 ******** ******** ******** ***************************** *****************************/ // check value is Finite or NaN return 0 or ParseFloat; function ckVFN( num ){ if (isNaN(num) || typeof num === 'string') { num = parseFloat(num); } if (!isFinite(num)) { return 0; } else { return num; } } // Return Tomorrow function returnDateTomorrow( thisDate ){ var newDate = new Date( thisDate ), tomorrowDate = new Date( newDate ); tomorrowDate.setDate( newDate.getDate() +1 ); return `${tomorrowDate.getFullYear()}-${ String( tomorrowDate.getMonth()+1 ).padStart(2, '0') }-${ String( tomorrowDate.getDate() ).padStart(2, '0') }`; } // 月曆 防呆版本 function appendEventDatepicker(){ $.each( $(`.dateClass:not(.hasDatepicker)`), function(){ //日期工具(Start) var nowYear = new Date().getFullYear(), yearCon = "1911:"+(nowYear+5), tDate = $(this), spanHtml = tDate.siblings('.spanDateClass'), tDefDate=tDate.attr('md-append-defdate'), tMinDate=tDate.attr('md-append-mindate'), tMaxDate=tDate.attr('md-append-maxdate'); null != tDefDate ? tDate.val( tDefDate ) : ''; tDate.datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true, defaultDate: tDefDate, minDate: tMinDate, maxDate: tMaxDate, yearRange: yearCon, onSelect: function(dateText){ spanHtml.length ? spanHtml.html( this.value ) : ''; } }); // 點 日曆 ( 開啟 ) tDate.siblings('.fa').on('click', function(){ tDate.datepicker('show'); }); // 點 父層 ( 開啟 ) tDate.parent().on('click', function(){ tDate.datepicker('show'); }); // 若有 隱藏 預設日期 spanHtml.length ? spanHtml.html( tDate.val() ) : ''; //日期工具(End) }); } // 比較日期大小 function compareDates( date1, date2 ){ if( date1 <= date2 ){ return false; }else{ return true; } } // 反回 兩個日期間隔夜晚數量 function returnCountNightsBetweenDates( sDate = null, eDate = null ){ let nights = 0; if( !isNaN( Date.parse( sDate ) ) && !isNaN( Date.parse( eDate ) ) ){ sDate = new Date( sDate ); eDate = new Date( eDate ); // 去除时分秒的影响,使两个日期都指向同一天的午夜 sDate.setHours(0, 0, 0, 0); eDate.setHours(0, 0, 0, 0); // 计算两个日期相差的毫秒数 let timeDiff = Math.abs( eDate - sDate ); // 一天的毫秒数 let oneDay = 24 * 60 * 60 * 1000; // 计算夜晚的数量,注意向下取整 nights = Math.floor( timeDiff / oneDay ); // 判斷日期是否為負值 if( compareDates( sDate, eDate ) ){ nights = -nights; } } return nights; } function returnNightsString( sDate = null, eDate = null ){ var nights = returnCountNightsBetweenDates( sDate, eDate ); return `${nights<=0?'n':nights} 晚`; } // 更新全部夜晚 function updataNightString(){ var pc_sDate = $('.sear_newbox .r_flex .rf00.wh01 .dateClass').eq(0).val(), pc_eDate = $('.sear_newbox .r_flex .rf00.wh01 .dateClass').eq(1).val(), pc_night = returnNightsString( pc_sDate, pc_eDate ), mb_sDate = $('.search_m_box02 .smlist .dateClass').eq(0).val(), mb_eDate = $('.search_m_box02 .smlist .dateClass').eq(1).val(), mb_night = returnNightsString( mb_sDate, mb_eDate ); // 搜尋頁 PC $('.rf00.n_night').html( pc_night ); // 全站共用 MB $('.search_m_box .n_night').html( mb_night ); } /***************************** ***************************** ******** ******** ******** 頁面功能 ******** ******** ******** ***************************** *****************************/ // 補充 月曆 反應 function setDateBox(){ function mbRange(){ var sDateVal = $(`[data-area=mb][data-type=s_date]`).val(), eDateVal = $(`[data-area=mb][data-type=e_date]`).val(); if( ( '' != sDateVal ) | ( '' != eDateVal ) ){ $('[data-starget=range_m]').val( `${sDateVal} - ${eDateVal}` ); // 紀錄同步參數 v230703 $('[data-starget=range_m]').attr( returnSearchAttr(), `${sDateVal} - ${eDateVal}` ); } } $.each( $('[data-date-box]'), function(){ var tRoot = $(this), tDateS = tRoot.find('[data-type=s_date]'), tDateE = tRoot.find('[data-type=e_date]'); // 不要覆蓋 Detail 頁 if( !tDateS.attr('class').match(/detailOption/g) ){ // 入住 日期 tDateS.datepicker( "option", { onSelect: function(dateText) { var target = $(this), // 自身 PC/MB 入住 n_area = target.attr('data-area'), n_type = target.attr('data-type'), n_syn = 'pc' == n_area ? 'mb' : 'pc', n_syn_type = 's_date' == n_type ? 'e_date' : 's_date', target_date = $(`[data-area=${n_area}][data-type=${n_syn_type}]`), // 平行 PC/MB 退房 target_syn = $(`[data-area=${n_syn}][data-type=${n_type}]`), // 同步 PC/MB 入住 target_syn_date = $(`[data-area=${n_syn}][data-type=${n_syn_type}]`); // 同步 PC/MB 退房 target.parent().removeClass('min'); var tmrDate = returnDateTomorrow( this.value ); // tDateE.datepicker( "option", {"minDate":this.value} ); tDateE.datepicker( "option", {"minDate":tmrDate} ); tDateE.datepicker( "refresh" ); // 全局光箱不同步 v230703 if( 'pc' == n_area ){ updataSearchType( 1 ); } // 全局光箱不同步 v230703 if( returnSearchType() ){ target_syn_date.parent().removeClass('min'); // 修正最小日期後, 紀錄當下參數 用以同步 target_date.datepicker( "option", {"minDate":tmrDate} ); target_date.datepicker( "refresh" ); target_date.attr( returnSearchAttr(), target_date.val() ); // 修正最小日期後, 紀錄當下參數 用以同步 // target_syn_date.datepicker( "option", {"minDate":this.value} ); target_syn_date.datepicker( "option", {"minDate":tmrDate} ); target_syn_date.datepicker( "refresh" ); target_syn_date.attr( returnSearchAttr(), target_syn_date.val() ); target_syn.datepicker( "setDate", this.value ); // target_syn.datepicker( "setDate", tmrDate ); target_syn.datepicker( "refresh" ); // 紀錄同步參數 v230703 target.attr( attrSearchPage, this.value ); target_syn.attr( attrSearchPage, this.value ); }else{ // 紀錄同步參數 v230703 target.attr( attrSearchHeader, this.value ); } // 紀錄同步參數 v230703 mbRange(); // 更新夜晚數 v230831 updataNightString(); }}); } // 不要覆蓋 Detail 頁 if( !tDateE.attr('class').match(/detailOption/g) ){ // 退房 日期 tDateE.datepicker( "option", { onSelect: function(dateText) { var target = $(this), n_area = target.attr('data-area'), n_type = target.attr('data-type'), n_syn = 'pc' == n_area ? 'mb' : 'pc', n_syn_type = 's_date' == n_type ? 'e_date' : 's_date', target_date = $(`[data-area=${n_area}][data-type=${n_syn_type}]`), // 平行 PC/MB 入房 target_syn = $(`[data-area=${n_syn}][data-type=${n_type}]`), target_syn_date = $(`[data-area=${n_syn}][data-type=${n_syn_type}]`); target.parent().removeClass('min'); // tDateS.datepicker( "option", {"maxDate":this.value} ); // tDateS.datepicker( "refresh" ); // 全局光箱不同步 v230703 if( 'pc' == n_area ){ updataSearchType( 1 ); } // 全局光箱不同步 v230703 if( returnSearchType() ){ target_syn_date.parent().removeClass('min'); // 不要為 入住日期 設定最大值 v230802 // target_syn_date.datepicker( "option", {"maxDate":this.value} ); // target_syn_date.datepicker( "refresh" ); target_syn.datepicker( "setDate", this.value ); target_syn.datepicker( "refresh" ); // 紀錄同步參數 v230703 target.attr( attrSearchPage, this.value ); target_syn.attr( attrSearchPage, this.value ); }else{ // 紀錄同步參數 v230703 target.attr( attrSearchHeader, this.value ); } // 紀錄同步參數 v230703 mbRange(); // 更新夜晚數 v230831 updataNightString(); }}); } }); } // 小孩 樣板 ( 因為 上方點選要還原預設值 ) v230801 function createChildrenTemplete( type, data ){ var tempReturn = '', tempOption; // 小孩子 動態選單 的 選項 for(var i=0;i<=19;i++){ var defChild = ''; if( undefined !== data['def-child-age'] ) if( i == data['def-child-age'] ) defChild = ' selected="selected"'; tempOption+=``; } switch(type){ case "page": tempReturn =`
小孩${data.n_now}
`; break; case "header": // page 內頁 同步 行動版 的 小孩欄位 tempReturn =`
小孩${data.n_now}
`; break; default: // header => 全站通用 tempReturn =`
小孩${data.n_now}
`; break; } return tempReturn; } // 設定 加減 功能 function setNumberBox(){ var domLayoutSearchBox2 = '[data-starget=room_m_lightbox]'; function total(){ var rVal = ckVFN( $(`[data-area=pc][data-type=room]`).val() ), aVal = ckVFN( $(`[data-area=pc][data-type=adults]`).val() ), cVal = ckVFN( $(`[data-area=pc][data-type=children]`).val() ), totalTxt = `${aVal + cVal}人 - ${rVal}房`; // 全局光箱不同步 v230703 if( returnSearchType() ){ $('[data-starget=roominfo]').val( totalTxt ); } $('[data-starget=roominfo_m]').val( totalTxt ); // 紀錄同步參數 v230703 $('[data-starget=roominfo_m]').attr( returnSearchAttr(), totalTxt ); } // 小人 動態 選單 同步 選項 function synChildrenFunction(){ var tRoot = $(this), n_area = tRoot.attr('data-area'), n_type = tRoot.attr('data-type'), n_syn = 'pc' == n_area ? 'mb' : 'pc', target_syn = $(`[data-area=${n_syn}][data-type=${n_type}]`); target_syn.val( tRoot.val() ); } // 小人 動態 選單 附加功能 function synChildren( tCBox, tCBox_syn ){ $.each( tCBox.find('select'), function(){ $(this).off().on('change', synChildrenFunction); }); $.each( tCBox_syn.find('select'), function(){ $(this).off().on('change', synChildrenFunction); }); } // 小人 數量 & 動態 選單 function addChildren( n_now, tCBox, tCBox_syn ){ var nowCBoxType = returnSearchType() ? 'page' : 'header', nowCBoxSelector = `[${attrSearchItem}=${ nowCBoxType }]`, nowCBoxChil = tCBox.children( nowCBoxSelector ).length, tempOption=''; // 全局光箱不同步 v230703 if( returnSearchType() ){ console.log( 'page' ); // 頁面內 會同步資訊 if( n_now > nowCBoxChil ){ // 行動版 ( 跟全局 同一區塊 ) tCBox.append( createChildrenTemplete( 'page', { 'n_now' :n_now } ) ); // tCBox.append(`
//
小孩${n_now}
//
//
`); // PC版 ( 獨立在內頁上 ) tCBox_syn.append( createChildrenTemplete( 'header', { 'n_now' : n_now } ) ); // tCBox_syn.append(`
//
小孩${n_now}
//
//
`); synChildren( tCBox, tCBox_syn ); }else{ if( 0 != n_now ){ tCBox.children( nowCBoxSelector ).eq( ( n_now - 1 ) ).nextAll( nowCBoxSelector ).remove(); tCBox_syn.children().eq( ( n_now - 1 ) ).nextAll().remove(); }else{ tCBox.children( nowCBoxSelector ).remove(); tCBox_syn.children().remove(); } } }else{ console.log( 'header' ); // 全局動作 僅增減自身 v230703 if( n_now > nowCBoxChil ){ // 與首頁 行動版 同一區塊 tCBox.append( createChildrenTemplete( null, { 'n_now':n_now } ) ); // tCBox.append(`
//
小孩${n_now}
//
//
`); }else{ if( 0 != n_now ){ tCBox.children( nowCBoxSelector ).eq( ( n_now - 1 ) ).nextAll( nowCBoxSelector ).remove(); }else{ tCBox.children( nowCBoxSelector ).remove(); } } } } var completeClassArrow="setSendComplete", completeClassArrowReg=new RegExp(completeClassArrow,"g"); $.each( $(`${domLayoutSearchBox2} [data-number-box], .sear_newbox [data-number-box], .pc_search [data-number-box]`), function(){ var tRoot = $(this), target = tRoot.children('.dr-input').children('input'), n_area = target.attr('data-area'), n_type = target.attr('data-type'), n_syn = 'pc' == n_area ? 'mb' : 'pc', target_syn = $(`[data-area=${n_syn}][data-type=${n_type}]`), n_now = ckVFN( target.val() ), n_min = ckVFN( target.attr('min') ), n_max = ckVFN( target.attr('max') ), btn_l = tRoot.children('.arrow-01'), btn_lClass = btn_l.attr('class') , btn_r = tRoot.children('.arrow-02'), btn_rClass = btn_r.attr('class'), tCBox = $(`.search_m_box02[data-starget=room_m_lightbox]`).find('.durooom').find('.childbox'), tCBox_syn = $(`.sear_newbox`).find('.durooom').find('.childbox'); if(""!=btn_lClass && undefined!=btn_lClass && !btn_lClass.match(completeClassArrowReg)){ btn_l.addClass( completeClassArrow ); btn_l.on('click', function(){ // 全局光箱不同步 v230703 if( 'mb' == n_area ){ updataSearchType( 1 ); } n_now = ckVFN( target.val() ); if( n_min < n_now ) n_now = n_now-1; // 全局光箱不同步 v230703 if( returnSearchType() ){ target.val( n_now ); target_syn.val( n_now ); }else{ target.val( n_now ); } total(); // 紀錄同步參數 v230703 target.attr( returnSearchAttr(), n_now ); target_syn.attr( returnSearchAttr(), n_now ); if( 'children' == n_type ) addChildren( n_now, tCBox, tCBox_syn ); }); } if(""!=btn_rClass && undefined!=btn_rClass && !btn_rClass.match(completeClassArrowReg)){ btn_r.addClass( completeClassArrow ); btn_r.on('click', function(){ // 全局光箱不同步 v230703 if( 'mb' == n_area ){ updataSearchType( 1 ); } n_now = ckVFN( target.val() ); if( n_max > n_now ) n_now = n_now+1; target.val( n_now ); // 全局光箱不同步 v230703 if( returnSearchType() ){ target_syn.val( n_now ); } total(); // 紀錄同步參數 v230703 target.attr( returnSearchAttr(), n_now ); target_syn.attr( returnSearchAttr(), n_now ); if( 'children' == n_type ) addChildren( n_now, tCBox, tCBox_syn ); }); // target.on('change', function(){ // var tVal = ckVFN( $(this).val() ); // target_syn.val( tVal ); // }); } }); } // 搜尋 功能 //行程 var jsonKeyWords={"\u57ce\u5e02":{"Taiwan":["Ilan","Taipei","Hsinchu","Pingtung","Taitung","Taoyuan","Miaoli","Taichung","Changhua","Nantou",null,"Tainan","Kaohsiung","Keelung","Hualien","Green Island, Taiwan","Penghu","Lanyu","Kinmen"],"Japan":["Fukuoka","Tokyo","Kyoto","Sendai","Nara","Osaka","Okinawa","Hokkaido","Tottori","Aomori","Akita","Tohoku Yamagata","tohoku Iwate","Fukushima","\u5c90\u961c","\u4e2d\u90e8 \u975c\u5ca1\u7e23","Nagano","\u4e2d\u90e8 \u611b\u77e5\u7e23","Hy\u014dgo","\u95dc\u6771","Wakayama","Okayama","\u611b\u5a9b\u3021\u5fb7\u5cf6\u3021\u9ad8\u77e5\u3021\u9999\u5ddd","Kyushu"],"S.Korea":["Seoul","Busan","Jeju","Gangneung","Daegu","Yeongju","Mungyeong","Andong","Pohang","Pohang"],"Malaysia":["Kuala Lumpur","Malacca","Perak","Sabah"],"Thailand":["Bangkok","Chiang Mai","Suratthani","Phuket"],"Hong Kong":["Lantau Island","Lamma Island"],"Vietnam":["Hanoi","Da Nang","Dong Hoi","Hoi An","Nha Trang","Ho Chi Minh","Phu Quoc Island"],"Australia":["Melbourne","Moreton Island","Sydney","Brisbane","Gold Coast","Tasmania","Cairns","Perth","Adelaide","Uluru"],"New Zealand":["Auckland","Queens Town"],"Nepal":["Kathmandu"],"Phillppine":["Boracay"],"USA":["Hawaii","Guam","Los Angeles","San Francisco","Seattle","Palau"],"United Kingdom":["London","Edinburgh"],"Finland":["Helsinki"],"Hungary":["Budapest"],"Croatia":["Zhage Lei"],"SLOVENIA":["Bled","Ljubljana"],"Turkey":["Istanbul"],"Sweden":["Abisko"],"Netherlands":["Amsterdam"],"Italy":["Rome","Florence"],"Germany":["Frankfurt"],"France":["Paris","Avignon"],"Spain":["Barcelona","Madrid"],"Czech Republic":["Prague"],"Austria":["Vienna"],"Morocco":["Morocco"],"Egypt":["Egypt"],"Cyprus":["Cyprus"],"Kenya":["Kenya"],"Namibia":["Namibia"],"Canada":["Vancouver","Whitehorse","Calgary(Rocky Mountains)"],"Argentina":["Buenos Aires"]}}; //住宿 var jsonKeyWordsHotel={"\u57ce\u5e02":{"Taiwan":["Ilan","Taipei","Hsinchu","Pingtung","Taitung","Taoyuan","Miaoli","Taichung","Changhua","Nantou",null,"Tainan","Kaohsiung","Keelung","Hualien","Penghu","Kinmen"],"Japan":["Fukuoka","Tokyo","Kyoto","Sendai","Nara","Osaka","Okinawa","Hokkaido","Tottori","Aomori","Akita","Tohoku Yamagata","tohoku Iwate","\u5c90\u961c","\u4e2d\u90e8 \u975c\u5ca1\u7e23","Nagano","\u4e2d\u90e8 \u611b\u77e5\u7e23","Hy\u014dgo","\u95dc\u6771","Wakayama","Okayama","\u611b\u5a9b\u3021\u5fb7\u5cf6\u3021\u9ad8\u77e5\u3021\u9999\u5ddd","Kyushu"],"S.Korea":["Seoul","Busan","Jeju","Gangneung","Daegu"],"Malaysia":["Kuala Lumpur","Malacca","Perak","Sabah"],"Thailand":["Bangkok","Chiang Mai","Suratthani","Phuket"]}}; // 搜尋光箱 內容 切換&同步, 預設值 同步 v230807 function syncSearchBox(){ var syncType = returnSearchAttr(), syncList = $(`[${syncType}]`); $.each( syncList, function(){ var syncValue = $(this).attr(syncType); if( $(this).attr('class').match(/dateClass/g) ){ var tDateS = $(`[data-area=mb][data-type=s_date]`), tDateE = $(`[data-area=mb][data-type=e_date]`); if( $(this).attr('data-type').match(/s_/g) ){ if( returnSearchType() ){ // 起始時間 會先取得並重置, 並更新 結束時間 tDateE.datepicker( "option", {"minDate": '' == syncValue ? null : returnDateTomorrow( syncValue ) } ); tDateE.datepicker( "refresh" ); // $(this).datepicker( "option", {"maxDate":null} ); // $(this).datepicker( "refresh" ); }else{ // 全局 要返回原場預設 v230801 // tDateE.datepicker( "option", {"minDate": null } ); tDateE.datepicker( "option", {"minDate": tDateE.attr('md-append-defdate') } ); tDateE.datepicker( "refresh" ); // $(this).datepicker( "option", {"maxDate":null} ); // $(this).datepicker( "option", {"maxDate": $(this).attr('md-append-defdate')} ); // $(this).datepicker( "refresh" ); } }else{ if( returnSearchType() ){ // 反之而行 // tDateS.datepicker( "option", {"maxDate": '' == syncValue ? null : syncValue } ); // tDateS.datepicker( "refresh" ); // $(this).datepicker( "option", {"minDate": '' == syncValue ? null : syncValue } ); $(this).datepicker( "option", {"minDate": '' == tDateS.val() ? null : returnDateTomorrow( tDateS.val() ) } ); $(this).datepicker( "refresh" ); }else{ // 全局 要返回原場預設 v230801 // tDateS.datepicker( "option", {"maxDate": tDateE.attr('md-append-mindate') } ); // tDateS.datepicker( "refresh" ); // $(this).datepicker( "option", {"minDate": null } ); $(this).datepicker( "option", {"minDate": $(this).attr('md-append-mindate')} ); $(this).datepicker( "refresh" ); } } if( returnSearchType() ){ $(this).datepicker( "setDate", '' == syncValue ? null : syncValue ); $(this).datepicker( "refresh" ); }else{ // 全局 要返回原場預設 v230801 // $(this).datepicker( "setDate", null ); $(this).datepicker( "setDate", $(this).attr('md-append-defdate') ); $(this).datepicker( "refresh" ); } }else{ var tempId = undefined == $(this).attr('id') ? "" : $(this).attr('id'); // 關鍵字不帶 if( null == tempId.match(/Keyword/g) ){ if( returnSearchType() ){ $(this).val( syncValue ); }else{ // 全局 要返回原場預設 v230801 if( "range_m" == $(this).attr('data-starget') ){ var sDateVal = $(`[data-area=mb][data-type=s_date]`).attr('md-append-defdate'), eDateVal = $(`[data-area=mb][data-type=e_date]`).attr('md-append-defdate'); $('[data-starget=range_m]').val( `${sDateVal} - ${eDateVal}` ); }else if( "roominfo_m" == $(this).attr('data-starget') ){ // 此參數 結構同 setNumberBox() -> total() var rVal = ckVFN( $(`[data-area=pc][data-type=room]`).attr('min') ), aVal = ckVFN( $(`[data-area=pc][data-type=adults]`).attr('min') ), cVal = ckVFN( $(`[data-area=pc][data-type=children]`).attr('min') ), totalTxt = `${aVal + cVal}人 - ${rVal}房`; $('[data-starget=roominfo_m]').val( totalTxt ); }else if( undefined != $(this).attr('min') ){ $(this).val( $(this).attr('min') ); // 移除小孩 if( $(this).closest('.dr-input').length ){ if( 'children' == $(this).attr('data-type') ){ $(`[${attrSearchItem}=header]`).remove(); } } }else{ $(this).val( syncValue ); } } }else{ // 關鍵字, 是否 為搜尋頁面 v230808 if( returnSearchType() ){ if( !$('.pc_search').length && !!$(this).closest('.search_m_box').length ){ // 陣列的 index 標籤位置代表 0:行程 / 1:住宿 ; 參數則是對應 頁面陣列 1:行程 / 2:住宿 v230810 [1, 2].forEach(( currentValue, index ) => { // 目前 標籤 位置判斷 if( index == $(`[${attrSearchForm}=${searchFormTab}]`).val() ){ // 取得 標籤 同步屬性 var keywordAttr = returnSearchKeywordAttr( currentValue ); // 是否為 頁面類型 搜尋頁 // console.log( `%c${ 0 == index ? "行程" : "住宿" }-回填`, 'font-size:16px;color:red;' ); if( undefined != $(this).attr( keywordAttr ) ){ $(this).val( $(this).attr( keywordAttr ) ); }else{ // 無參數時, 需判斷欄位是否對應 搜尋頁面類形, 並回填 搜尋結果. v230811 if( `${ currentValue }` == returnSearchPageType() ){ $(this).val( syncValue ); }else{ $(this).val( '' ); } } } }); }else{ // 除了蒐尋頁, 接不需要回填 v230809 // $(this).val(''); } }else{ // 除了蒐尋頁, 接不需要回填 v230811 $(this).val(''); } } } }); // 更新夜晚數 v230831 updataNightString(); } // 建構 搜尋 預設 Keyword 清單 function createKeyWordTemplete( target, json ){ var temp=''; $.each( json, function( idx, ival){ var tempCity=``; $.each( ival, function( jdx, jval){ var tempItem=``; $.each( jval, function( kdx, kval){ tempItem+=`${kval}`; }); tempCity+=`
${jdx}
${tempItem}
`; }); temp+=`
${idx}
${tempCity}
`; }); target.html(temp); } var searchType = 1, attrSearchChip = 'data-search', attrSearchHeader = `${attrSearchChip}-header`, attrSearchPage = `${attrSearchChip}-page`, attrSearchItem = `${attrSearchChip}-item`, attrSearchFormContent = 'data-page-content-search', attrSearchForm = 'data-page-header-search', searchFormStatus = 'search_status', searchFormTab = 'search_tab', searchFormTabDefault = 'search_tab_default'; // 同步 表單欄位 判斷 全局 或 頁面 的 放大鏡 search_status function updataSearchType(updataSearchType){ searchType = updataSearchType; $(`[${attrSearchForm}=${searchFormStatus}]`).val( updataSearchType ); } // 反回 目前 光箱開啟類型 ( false:全站共用放大鏡 / true:搜尋內頁 ) function returnSearchType(){ return !!searchType; } // 反回 目前 光箱開啟類型 所使用的 屬性名稱 function returnSearchAttr(){ return returnSearchType() ? attrSearchPage : attrSearchHeader; } // 返回 目前 是否搜尋頁 & 搜尋頁的類型 ( 0:無欄位_非搜尋頁 / 1:行程搜尋頁 / 2:住宿搜尋頁 / 666: 有欄位_不明頁面 ) var inputNowSearch = 'input#nowSearch', inputNowSearchStringArray = new Array( null, 'search', 'h_search' ); function returnSearchPageType(){ if( !$(inputNowSearch).length ){ return 0; }else{ var searchPageTypeString = $(inputNowSearch).val(); if( undefined != searchPageTypeString ){ var checkInputIndex = inputNowSearchStringArray.indexOf( searchPageTypeString.replace('/', '').split('.')[0] ); if( -1 == checkInputIndex ){ return 666; }else{ return checkInputIndex; } }else{ return 666; } } } // 返回 搜尋頁 關鍵字 暫存 屬性名稱 ( 返回 屬性名稱 ; 傳入 type 非 null 時, 反回當下頁面值, 用於回填預設值, 其餘返回 當下所處頁籤 ) function returnSearchKeywordAttr( type = null ){ let returnAttr = attrSearchChip, searchPageType = returnSearchPageType(), searchPageTypeString = $(inputNowSearch).val(); if( searchPageType == 666 | 0 == type ){ returnAttr = null; }else{ if( null == type ){ if( 0 != searchPageType ){ // 返回 所處頁面 屬性 returnAttr += `-${ inputNowSearchStringArray[ searchPageType ].replace('_', '-') }`; }else{ returnAttr = null; } }else{ // 返回 指定 屬性 if( undefined != inputNowSearchStringArray[ type ] ){ returnAttr += `-${ inputNowSearchStringArray[ type ].replace('_', '-') }`; }else{ returnAttr = null; } } } return returnAttr; } // 反回目前頁籤 function returnMobileSearchTag(){ return ckVFN( $(`[${attrSearchForm}=${searchFormTab}]`).val() ); } function setNewSearchLayoutEvent(){ var attrStag = 'data-stag', attrStar = 'data-starget', attrSmHot = 'filter-smhot', classHold = 'hold', speedFade = 210, attr_i = `[${attrStar}=roominfo]`; attr_mr= `[${attrStar}=range_m]`, attr_mi= `[${attrStar}=roominfo_m]`, menu_btn = $('.menuicon.menus'), search_header_mb_btn = $('#m_btn_search'), search_page_mb_btn = $('.search_m_btn'), search_page_mb_box = $('.search_m_box'), search_tab = $('.search_m_box .pagebtn .pbtn'), keyword_index_mb_light = $('.search_m_box02[data-starget=room_m_keyword]'), keyword_index_mb_box = keyword_index_mb_light.find('.keyword_down'), keyword_txt = $('[data-starget=search]'), keyword_syn = $('[data-starget=search_m]'), keyword_box = $('.sear_newbox').eq(0).find('.keyword_down'), keyword_txt_h = $('[data-starget=h_search]'), keyword_syn_h = $('[data-starget=h_search_m]'), keyword_box_h = $('.sear_newbox').eq(1).find('.keyword_down'); // 切換 Tab ( 行程體驗 / 住宿訂房 ) function switchTab(type){ var nowTitleText = search_tab.eq(type).html(); $('.search_m_box .sm_title').html( nowTitleText ); search_tab.eq(type).addClass('hold').siblings().removeClass('hold'); $(attr_mr).closest('.smlist').css('display', !!type ? '' : 'none'); $(attr_mi).closest('.smlist').css('display', !!type ? '' : 'none'); // 光箱內 熱門搜尋切換 $(`.search_m_box .smhot .s2[${attrSmHot}=${ type }]`).show(); $(`.search_m_box .smhot .s2[${attrSmHot}=${ 0 == type ? 1 : 0 }]`).hide(); // 同步 表單欄位 表單搜尋頁籤 search_tab $(`[${attrSearchForm}=${searchFormTab}]`).val( type ); $(`.grids[${attrSearchItem}=header]`).css('display', !returnSearchType() ? '' : 'none'); $(`.grids[${attrSearchItem}=page]`).css('display', returnSearchType() ? '' : 'none'); } // 首頁 行動版 關鍵字 開關 v230704 function indexKeywordSwitch(switchType){ var topBox = $('#topBox'), topBoxBanner = topBox.find('#slides'); if( switchType ){ topBox.css({ 'z-index': 1000, 'background-repeat': 'no-repeat', 'background-position-y': '-1000px' }); topBoxBanner.css('opacity', 0); keyword_index_mb_light.fadeIn(speedFade); }else{ if( 'none' != keyword_index_mb_light.css('none') ){ keyword_index_mb_light.fadeOut(speedFade, function(){ topBoxBanner.css('opacity', 1); topBox.css({ 'z-index': '', 'background-repeat': '', 'background-position-y': '' }); }); } } } // ----- MB - 關鍵字 ( 首頁 - 旅遊 & 住宿 ) if( !!keyword_index_mb_light.length ){ createKeyWordTemplete( keyword_index_mb_box, jsonKeyWords ); var index_keyword_now = null; $(`.sp_search .grids[${attrStag}]`).on('click', function(){ updataSearchType( 0 ); // updataSearchType( 1 ); index_keyword_now = ckVFN( $(this).attr(attrStag) ); switchTab( index_keyword_now ); syncSearchBox(); search_page_mb_box.fadeIn(speedFade); }); // MB - 關鍵字 開啟 子選單 ( 首頁 - 旅遊 ) // keyword_syn.on('click', function(event){ // event.preventDefault(); // indexKeywordSwitch(true); // }); // MB - 關鍵字 開啟 子選單 ( 首頁 - 住宿 ) // keyword_syn_h.on('click', function(event){ // event.preventDefault(); // indexKeywordSwitch(true); // }); // MB - 關鍵字 點選 後 回填 ( 首頁 ) keyword_index_mb_box.on('click', function(event){ event.preventDefault(); var matchClass = 'grids', thisClass = $(event.target).attr('class'); if( thisClass.match( matchClass ) ){ // 全局光箱不同步 v230704 if( returnSearchType() ){ if( 0 == index_keyword_now ){ keyword_txt.val( $(event.target).html() ); }else{ keyword_txt_h.val( $(event.target).html() ); } keyword_syn.val( $(event.target).html() ); }else{ keyword_syn.val( $(event.target).html() ); } // 原版本 獨立兩個光箱判斷 // if( 0 == index_keyword_now ){ // keyword_txt.val( $(event.target).html() ); // keyword_syn.val( $(event.target).html() ); // }else{ // keyword_txt_h.val( $(event.target).html() ); // keyword_syn_h.val( $(event.target).html() ); // } keyword_syn.attr( returnSearchAttr(), $(event.target).html() ); indexKeywordSwitch(false); } }); } // PC - 搜尋 Tab $.each( $('.newsearchbox .nemsmar .searchsort .grids'), function(){ $(this).on('click', function(){ var tIndex=$(this).attr(attrStag); $(this).addClass(classHold).siblings().removeClass(classHold); $(`.sear_newbox[${attrStar}]`).hide(); $(`.sear_newbox[${attrStar}=${tIndex}]`).css('display','flex'); // 光箱內 熱門搜尋切換 $(`.sear_hotbox .gridbox[${attrSmHot}=${ tIndex }]`).show(); $(`.sear_hotbox .gridbox[${attrSmHot}=${ 0 == tIndex ? 1 : 0 }]`).hide(); // 首頁 - 同步 表單欄位 表單搜尋頁籤 search_tab $(`[${attrSearchFormContent}=${searchFormTab}]`).val( tIndex ); }); }); // ----- 關鍵字 相關 行程 // PC - 開啟 關鍵字 keyword_txt.on('click', function(){ keyword_box.fadeIn(speedFade); }); // PC - 關鍵字 同步輸入 keyword_txt.on('input change', function(){ keyword_syn.val( $(this).val() ); // 紀錄同步參數 v230809 var keywordAttr = returnSearchKeywordAttr(1); keyword_syn.attr( keywordAttr, $(this).val() ); keyword_syn_h.attr( keywordAttr, $(this).val() ); $(this).attr( keywordAttr, $(this).val() ); }); // MB - 關鍵字 同步輸入 keyword_syn.on('input change', function(){ // 全局光箱不同步 && 對應頁籤 才同步 ; 首頁暫時無法判斷 是否該回填 v230810 if( returnSearchType() ){ var thisValue = $(this).val(), thisPage = returnSearchPageType(), thisMBTab = returnMobileSearchTag(); // console.log( `${returnSearchType()} && ( ${thisPage} == ( ${thisMBTab} + 1 )` ); // 是否在搜尋頁 並判斷該回填何處 0 == thisMBTab ? keyword_txt.val( thisValue ) : keyword_txt_h.val( thisValue ); // 取得 頁籤 同步屬性 var keywordAttr = returnSearchKeywordAttr( thisMBTab + 1 ); // console.log( ckVFN( thisMBTab ) + 1 ); // console.log( keywordAttr ); // 紀錄同步參數 v230810 $(this).attr( keywordAttr, thisValue ); // $(this).attr( returnSearchAttr(), $(this).val() ); } }); // PC - 關鍵字 構築資訊(行程) createKeyWordTemplete( keyword_box, jsonKeyWords ); // PC - 關鍵字 點選 後 回填 keyword_box.on('click', function(event){ event.preventDefault(); var matchClass = 'grids', thisClass = $(event.target).attr('class'); if( thisClass.match( matchClass ) ){ keyword_txt.val( $(event.target).html() ); keyword_syn.val( $(event.target).html() ); keyword_syn.attr( attrSearchPage, $(event.target).html() ); keyword_box.fadeOut(speedFade); } }); // ----- 關鍵字 相關 住房 // PC - 開啟 關鍵字 keyword_txt_h.on('click', function(){ keyword_box_h.fadeIn(speedFade); }); // PC - 關鍵字 同步輸入 keyword_txt_h.on('input change', function(){ keyword_syn.val( $(this).val() ); // 紀錄同步參數 v230809 var keywordAttr = returnSearchKeywordAttr(2); keyword_syn.attr( keywordAttr, $(this).val() ); keyword_syn_h.attr( keywordAttr, $(this).val() ); $(this).attr( keywordAttr, $(this).val() ); }); // MB - 關鍵字 同步輸入 keyword_syn_h.on('input change', function(){ // 全局光箱不同步 v230703 if( returnSearchType() ){ keyword_txt_h.val( $(this).val() ); } // 紀錄同步參數 v230703 $(this).attr( returnSearchAttr(), $(this).val() ); }); // PC - 關鍵字 構築資訊(住宿) createKeyWordTemplete( keyword_box_h, jsonKeyWordsHotel ); // PC - 關鍵字 點選 後 回填 keyword_box_h.on('click', function(event){ event.preventDefault(); var matchClass = 'grids', thisClass = $(event.target).attr('class'); if( thisClass.match( matchClass ) ){ keyword_txt_h.val( $(event.target).html() ); keyword_syn_h.val( $(event.target).html() ); keyword_syn.attr( attrSearchPage, $(event.target).html() ); keyword_box_h.fadeOut(speedFade); } }); // PC - 開啟 住房 光箱/選單, (補)pad 同步 v230807 $(attr_i).on('click', function(){ updataSearchType( 1 ); syncSearchBox(); $('.sear_newbox .durooom').fadeIn(speedFade); }); // MB - 開啟 光箱 $.each( $(`.sp_search .grids[${attrStag}]`), function(){ $(this).on('click', function(){ var tIndex=$(this).attr(attrStag); $(`.search_m_box[${attrStar}=${tIndex}]`).fadeIn(speedFade); }); }); // MB - 開啟 二階 光箱 $(`${attr_mr},${attr_mi}`).on('click', function(){ $('.search_m_box02[data-starget=room_m_lightbox]').fadeIn(speedFade); }); // MB - 關閉 光箱 本體 $('.search_m_box .close').on('click', function(event){ $(this).closest('.search_m_box').fadeOut(speedFade); }); // MB - 關閉 光箱 本體 $('.search_m_box02 .close').on('click', function(event){ // $(this).closest('.search_m_box02').fadeOut(speedFade); if( 'none' != keyword_index_mb_light.css('none') ){ indexKeywordSwitch( false ); } }); // MB - 關閉 二階 光箱 取消 ( 確認無用的按鈕 v230808 ) // $('.search_m_box02 .smbtnBox').children().eq(0).on('click', function(event){ // $(this).closest('.search_m_box02').fadeOut(speedFade); // }); // MB - 關閉 二階 光箱 搜尋 // $('.search_m_box02 .smbtnBox').children().eq(1).on('click', function(event){ // $(this).closest('.search_m_box02').fadeOut(speedFade); // }); // ----- 搜尋按鈕 ( 全站 Header ) search_header_mb_btn.on('click', function(){ switchTab(0); updataSearchType( 0 ); syncSearchBox(); search_page_mb_box.fadeIn(speedFade); // 防呆 - 關閉子層 $('.hasDatepicker').datepicker('hide'); $('.search_m_box02[data-starget=room_m_lightbox]').hide(); }); // ----- 搜尋頁面 search_page_mb_btn.on('click', function(){ // 抓取頁面當前預設欄位 // switchTab( ckVFN( $(`[${attrSearchForm}=${searchFormTabDefault}]`).val() ) ); switchTab( ckVFN( returnSearchPageType() ) - 1 ); updataSearchType( 1 ); syncSearchBox(); search_page_mb_box.fadeIn(speedFade); }); // ----- 搜尋框 頁籤 search_tab.on('click', function(event){ event.preventDefault(); switchTab($(this).index()); // 需同步 關鍵字 v230808 syncSearchBox(); }); // 有錢人的煩惱 - 包棟或背包房客 $.each( $('.durooom .qas .inlines'), function(){ var tExtxt = $(this).siblings('.extxt'); $(this).on( 'focusin', function(){ tExtxt.stop().fadeIn(speedFade); }); $(this).on( 'focusout', function(){ tExtxt.stop().fadeOut(speedFade); }); $(this).mouseenter(function(){ tExtxt.stop().fadeIn(speedFade); }).mouseleave(function(){ tExtxt.stop().fadeOut(speedFade); }); }); // 若 PC 時 人房 光箱 開著 點旁邊要關閉 $(document).on('click', function(e) { if( 'none' != $('.pc_search').css('display') ){ if( $(e.target).closest('.rf03').length === 0 ) { $('.sear_newbox .durooom').fadeOut(speedFade); } if( $(e.target).closest('.r_1').length === 0 ) { keyword_box.fadeOut(speedFade); } if( $(e.target).closest('.rf01').length === 0 ) { keyword_box_h.fadeOut(speedFade); } } }); $(window).resize(function(){ // 視窗 改變 就 關閉 月曆 $('.dateClass').datepicker("hide"); // MB 區塊是否存在 if( 'none'==$(`.sp_search`).css('display') ){ // MB - 月曆 / 住房 $('.search_m_box, .search_m_box02[data-starget=room_m_lightbox]').hide(); indexKeywordSwitch(false); }else{ // PC - 關鍵字 keyword_box.hide(); keyword_box_h.hide(); // PC - 住房 選單 $('.sear_newbox .durooom').hide(); } // 全局開啟 判斷 v230703 if( 'none' == menu_btn.css('display') ){ search_page_mb_box.hide(); if( !!$('.search_m_box02[data-starget=room_m_lightbox]').length ){ $('.search_m_box02[data-starget=room_m_lightbox]').hide(); } } // MB 搜尋頁面 if( !!search_page_mb_btn.length ){ if( 'none'==search_page_mb_btn.css('display') ){ search_page_mb_box.hide(); if( !!$('.search_m_box02[data-starget=room_m_lightbox]').length ){ $('.search_m_box02[data-starget=room_m_lightbox]').hide(); } } } }); } // 全局 / 頁面 送出反應 function setLayoutSearchBtn(){ // Header 蒐尋按鈕 $('.search_m_box .smBtn').on('click', function(){ var searchType = returnSearchType(), tabType = $(`[${attrSearchForm}=${searchFormTab}]`).val(); console.log("%cHeader 按鈕", "color:red;"); if( searchType ){ if( 0 == tabType ){ console.info("Page-行程體驗"); }else{ console.info("Page-住宿訂房"); } }else{ if( 0 == tabType ){ console.info("Header-行程體驗"); }else{ console.info("Header-住宿訂房"); } } }); // 首頁 搜尋按鈕 $('.sear_newbox .bun.blue').on('click', function(){ var tabType = $(`[${attrSearchFormContent}=${searchFormTab}]`).val(); console.log("%cHotelIndex 按鈕", "color:red;"); if( 0 == tabType ){ console.info("行程體驗"); }else{ console.info("住宿訂房"); } }); } if( null != document.querySelector(`.sear_hotbox .gridbox[filter-smhot="0"]`) ){ document.querySelector(`.sear_hotbox .gridbox[filter-smhot="0"]`).style.display="block"; if( null != document.querySelector(`.sear_hotbox .gridbox[filter-smhot="1"]`) ) document.querySelector(`.sear_hotbox .gridbox[filter-smhot="1"]`).style.display="none"; } if( null != document.querySelector(`.search_m_box .smhot .s2[smhot="0"]`) ){ document.querySelector(`.search_m_box .smhot .s2[smhot="0"]`).style.display="block"; if( null != document.querySelector(`.search_m_box .smhot .s2[smhot="1"]`) ) document.querySelector(`.search_m_box .smhot .s2[smhot="1"]`).style.display="none"; } $(function(){ // 建立 通用 月曆 工具 appendEventDatepicker(); // 建立 新版 搜尋 Event setNewSearchLayoutEvent(); // 補充 月曆 工具 setDateBox(); // 建立 加減 功能 setNumberBox(); // 設定搜尋按鈕 setLayoutSearchBtn(); // 觸發預設參數同步 v230807 updataSearchType( 1 ); syncSearchBox(); });