/*****************************
*****************************
******** ********
******** 通用功能 ********
******** ********
*****************************
*****************************/
// 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 =`
`;
break;
case "header": // page 內頁 同步 行動版 的 小孩欄位
tempReturn =``;
break;
default: // header => 全站通用
tempReturn =``;
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(``);
// PC版 ( 獨立在內頁上 )
tCBox_syn.append( createChildrenTemplete( 'header', { 'n_now' : n_now } ) );
// tCBox_syn.append(``);
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(``);
}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"],"Denmark":["Copenhagen"],"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+=``;
});
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();
});