// -------------------------------------------------------------------- // エス・ティー・ワールドで行く中欧旅行 // -------------------------------------------------------------------- 'use strict'; // jquery.animate fps jQuery.fx.interval = 34; // -------------------------------------------------------------------- // 人気・周遊ツアー // -------------------------------------------------------------------- jQuery.fn.stwPickupTours = function(){ this.each(function(){ var $this = $(this); $.get($this.data('url'), function(data){ if( data.length ){ var $inner = $this.children('.sec_inner').removeClass('loading'); var $tourlist = $inner.children('.tourlist').html( data ); // 上下スクロール if( $inner.outerHeight() < $tourlist.outerHeight() ){ // コンテンツを倍に増やして上下に無限移動 var $items = $tourlist.append(data).children(); var index = 0; var top; var tween; $inner.children('.prev').on('click', function(){ // ツアーひとつ上に移動 //$tourlist.finish(); tween && tween.pause(0.5); if( !index ){ // 上にない場合、真ん中に飛んでから index = $items.length / 2; top = $items.eq(0).offset().top - $items.eq( index ).offset().top; $tourlist.css({ top: top }); } top = $items.eq(0).offset().top - $items.eq( --index ).offset().top; //$tourlist.animate({ top: top }); tween = TweenLite.to($tourlist, 0.5, { top: top }); }); $inner.children('.next').on('click', function(){ // ツアーひとつ下に移動 //$tourlist.finish(); tween && tween.pause(0.5); top = $items.eq(0).offset().top - $items.eq( ++index ).offset().top; if( top + $tourlist.outerHeight() < $inner.outerHeight() ){ // 下にない場合、上のおなじツアーに飛んでから index -= $items.length / 2; top = $items.eq(0).offset().top - $items.eq( index - 1 ).offset().top; $tourlist.css({ top: top }); top = $items.eq(0).offset().top - $items.eq( index ).offset().top; } //$tourlist.animate({ top: top }); tween = TweenLite.to($tourlist, 0.5, { top: top }); }); $inner.addClass('scroll'); } else $inner.addClass('no-scroll'); } else $this.remove(); setTimeout(function(){ $(window).trigger('load.masonry'); },0); }); }); return this; }; // -------------------------------------------------------------------- // ツアー検索フォーム // -------------------------------------------------------------------- jQuery.fn.stwTourSearchForm = function(){ this.each(function(){ var $form = $(this).addClass('loading'); // 既定値 var default_group = $form.find('[name="homenG"]').val(); var default_group0 = default_group.split(',')[0]; var default_homen = $form.find('[name="homen"]').val(); var default_multicity = $form.find('[name="multicity"]').val(); // 検索パラメータ取得 $.get($form.data('url'), function(data){ // 出発地 if( data.depjoken ){ var html = ['']; $.each(data.depjoken, function(){ html.push(''); }); $form.find('select.dep').html(html.join('')); } // 出発日 if( data.depdates ){ var $year = $form.find('select.year'); var $month = $form.find('select.month'); var $date = $form.find('select.date'); // 年 var html = []; $.each(Object.keys( data.depdates ).sort(), function(){ html.push(''); }); $year.html(html.join('')); // 年を選択したら月を初期化 $year.change(function(){ var year = this.value; var html = ['']; $.each(Object.keys( data.depdates[year] ).sort(), function(){ html.push(''); }); $month.html(html.join('')); }).change(); // 月を選択したら日を初期化 $month.change(function(){ var month = this.value; var year = $year.val(); var html = ['']; $.each(data.depdates[year][month].sort(), function(){ html.push(''); }); $date.html(html.join('')); }); } // 人気のテーマ if( data.themes ){ var html = ['']; $.each(data.themes, function(){ html.push(''); }); $form.find('select.theme').html(html.join('')); } // 目的地 if( data.citylist ){ var $homen1 = $form.find('select.homen1'); var $homen2 = $form.find('select.homen2'); var $city1 = $form.find('select.city1'); var $city2 = $form.find('select.city2'); // 方面選択肢 var codes = []; var homens = []; $.each(data.citylist, function(){ if( codes.indexOf(this.homencd) >= 0 ) return; codes.push( this.homencd ); homens.push({ code:this.homencd, name:this.homenname }); }); var html = ['']; $.each(homens, function(){ html.push(''); }); $homen1.html(html.join('')); $homen2.html(html.join('')); // 方面を選択したら都市を初期化 var homen_cities_html = function( homencd ){ var cities = []; $.each(data.citylist, function(){ if( this.homencd !== homencd ) return; cities.push({ code:this.citycd, name:this.cityname }); }); var html = ['']; $.each(cities, function(){ html.push(''); }); return html.join(''); }; $homen1.change(function(){ $city1.html( homen_cities_html(this.value) ); }); $homen2.change(function(){ $city2.html( homen_cities_html(this.value) ); }); } $form.removeClass('loading'); }); // 検索実行 $form.find('.submit').on('click', function(){ // hidden要素クリア初期化 $form.find('[name="homenG"]').val( default_group ); $form.find('[name="homen"]').val( default_homen ); $form.find('[name="city"]').val(''); $form.find('[name="year"]').val(''); $form.find('[name="keyword1"]').val(''); $form.find('[name="keyword2"]').val(''); $form.find('[name="theme"]').val(''); $form.find('[name="only"]').val(''); $form.find('[name="multicity"]').val( default_multicity ); // APIパラメータ生成 var homenG = []; var homen = []; var city = []; var year = $form.find('select.year').val(); var month = $form.find('select.month').val(); var date = $form.find('select.date').val(); var theme = $form.find('select.theme').val(); var homen1 = $form.find('select.homen1').val(); var homen2 = $form.find('select.homen2').val(); var city1 = $form.find('select.city1').val(); var city2 = $form.find('select.city2').val(); var only = $form.find('input.only').prop('checked'); if( month ){ if( date ) $form.find('[name="year"]').val( year + month + date ); else $form.find('[name="year"]').val( year + month ); } if( theme ){ var kv = theme.split('='); if( kv.length > 1 ) $form.find('[name="'+ kv[0] +'"]').val( kv[1] ); } if( homen1 ){ homenG.push( default_group0 ); homen.push( homen1 ); if( city1 ) city.push( city1 ); } if( homen2 ) { homenG.push( default_group0 ); homen.push( homen2 ); if( city2 ) city.push( city2 ); } if( homenG.length ){ $form.find('[name="homenG"]').val( homenG.join(',') ); $form.find('[name="homen"]').val( homen.join(',') ); $form.find('[name="city"]').val( city.join(',') ); if( homenG.length > 1 ){ // 目的地2つ // multicity=1 選択した方面・都市だけを周遊するツアー // multicity=2 選択した方面・都市プラスアルファの都市を周遊するツアー if( only ) $form.find('[name="multicity"]').val(1); else $form.find('[name="multicity"]').val(2); } else{ // 目的地1つ if( only ) $form.find('[name="only"]').val(1); } } //
200 ) $btn.addClass('show'); else $btn.removeClass('show'); }); }); return this; }; // -------------------------------------------------------------------- // アンカー // -------------------------------------------------------------------- jQuery.fn.stwAnchor = function(){ this.click(function(){ var top = $($(this).attr('href')).offset().top; if( $('#sp_header').is(':visible') ) top -= $('#sp_header').outerHeight(); //$('body,html').animate({ scrollTop: top }, 700); TweenLite.to(window, 0.7, { scrollTo: top }); return false; }); return this; }; // -------------------------------------------------------------------- // Masonry // -------------------------------------------------------------------- jQuery.fn.stwMasonry = function(){ var $elements = this; var isMobile = function(){ var agent = navigator.userAgent; if ( agent.indexOf('iPhone') > 0 ) return true; if ( agent.indexOf('iPod') > 0 ) return true; if ( agent.indexOf('Android') > 0 && agent.indexOf('Mobile') > 0 ) return true; return false; }; $(window).on('load.masonry', function(){ if( !isMobile() ){ $elements.masonry({ itemSelector: '.sec_box', isAnimated: true, isFitWidth: true }); } }); return this; }; // -------------------------------------------------------------------- // ここがすごい // -------------------------------------------------------------------- jQuery.fn.stwStrengths = function(){ if( $('#sp_header').is(':visible') ){ this.each(function(){ var $this = $(this); $this.bxSlider({ infiniteLoop: false, slideMargin: 10, hideControlOnEnd: true, pager: false }); // 高さ揃え var H = 0; $this.children().each(function(){ H = Math.max(H, $(this).outerHeight()); }).height(H); }); } return this; }; // -------------------------------------------------------------------- // ピックアップ特集スライダー // -------------------------------------------------------------------- jQuery.fn.pickupSlider = function(){ this.each(function(){ var $this = $(this); // 5枚以下だとprev/next出ないので複製を増やす if( $this.children().length < 6 ){ $this.append($this.children().clone()); } $this.slick({ infinite: true, dots: false, slidesToShow: 5, slidesToScroll: 1, responsive: [ { breakpoint: 640, settings: { slidesToShow: 2 } } ] }); }); return this; }; // -------------------------------------------------------------------- // document ready // -------------------------------------------------------------------- $(function(){ // ここがすごい $('#container .strengths ol').stwStrengths(); // ピックアップ特集スライダー $('.pickup_banners ul').pickupSlider(); // Masonry $('#mas_box').stwMasonry(); // 人気・周遊ツアー $('#mas_box > .sec_box.tours').stwPickupTours(); // ツアー検索フォーム $('#mas_box > .sec_box.tour_search form').stwTourSearchForm(); // 天気・現地時間 $('.variety_info').stwVarietyInfo(); // SPページトップ $('.sp_pagetop').stwPageTop(); // アンカー $('.this_menu a[href^="#"]').stwAnchor(); });