https://www.city.yame.fukuoka.jp/theme/base/js/common.js

1/**
2 * 全デザインサイト共通JS
3 * @author nagai
4 * @version 1.0
5 */
6// 下スクロールでPCヘッダー固定
7// 上スクロールでSPヘッダー、SPページトップを表示
8var startPos = 0
9  , winScrollTop = 0;
10var isModalOpen = false;
11
12$(function(){
13
14  //スムーズスクロール
15  $("a[href*='#'].scroll").smoothScroll();
16
17  //ファイルリンクは別窓表示
18  //$("a[href*='.*']").fileBlank('*') セレクタで拡張子指定 fileBlankの引数にクラス指定;
19  $("a[href*='.pdf']").fileBlank('pdf');
20  $("a[href*='.doc']").fileBlank('word');
21  $("a[href*='.xls']").fileBlank('excel');
22
23  // ファイルリンクのクリックイベント計測
24  $('.file-link-item a').on('click',function(){
25    var targetUrl = $(this).attr('href');
26    var targetLabel = $(this).text();
27    // ga未定義の場合は実行しない
28    if(typeof ga == 'function'){
29      ga('send', 'event', targetUrl, 'download', targetLabel);
30    }
31    // gtag未定義の場合は実行しない(GA4)
32    if(typeof gtag == 'function'){
33      gtag('event', 'sv_file_link_click', {
34        'event_category': 'file_download_category',
35        'event_label': targetLabel + '：' + targetUrl,
36        'value': 1
37      });
38    }
39  });
40
41  //ロールオーバー画像
42  $("img[src*='_off.']").rollOver({off:'_off.',on:'_on.'});
43
44
45  //tableのalign属性削除
46  $.fn.tableDeleteAlign();
47
48  var location_href = location.href;
49  var now_site_domain;
50
51  if(location_href.indexOf('http://') != -1 || location_href.indexOf('https://') != -1){
52    var replace_site_domain = site_domain + '/';
53    var now_site_domain = replace_site_domain.replace( /http:/g , "" ).replace( /https:/g , "" );
54  }else{
55    now_site_domain = '';
56  }
57
58  //文字サイズ変更（標準 or 大きくする）HTML側は以下のように設定
59  if ($('.scsize').length) {
60    $.fn.styleCatcherUpNormal({btnCls: "scsize",cssID: "scsize",prAry: ['size_default.css', 'size_up.css', 'size_up2.css', 'size_up3.css'],cssPath: now_site_domain + 'theme/base/css/',def: 0});
61  }
62
63  //背景色変更（白、黒、青）HTML側は以下のように設定
64  if ($('.sccolor').length) {
65    $.fn.styleCatcherCommon({btnCls: "sccolor",cssID: "sccolor", cssPath: now_site_domain + 'theme/base/css/',def: 2});
66  }
67
68  // ヘッダーナビのドロップメニュ
69  if (typeof $.fn.dropMenu != 'undefined') {
70    $("#header-nav").dropMenu();
71  }
72
73  // 文字サイズ変更監視
74  $.fn.fontSizeChange({func:function(){
75    //$("#header-nav .list2").eqGroupHeight(3);
76    $("#wrapper").show();
77  }});
78
79
80  //モーダル（検索）
81  $("#btn-sub-search").on('click',function(){
82    $(".drawer-menu").show();
83  });
84  $(".btn-menu-pc").on('click',function(){
85    $(".drawer-menu").hide();
86  });
87
88  //モーダル（メニュー）
89  $('.menu-btn-menu').lightbox_custom({
90    modalBg:$('.modal-menu-bg'),
91    modal:$('.modal-menu'),
92    close:$('.modal-menu-close, .menu-btn-close, .modal-btn-close, bottom-menu-btn-menu, .search-btn-menu'),
93    scrollID:'sWrapper',
94    lightSpot:$('.menu-btn-menu')
95  });
96  //モーダル（ボトムメニュー）
97  $('.bottom-menu-btn-menu').lightbox_custom({
98    modalBg:$('.modal-menu-bg'),
99    modal:$('.modal-menu'),
100    close:$('.modal-menu-close, .menu-btn-close, .modal-btn-close, .search-btn-menu'),
101    scrollID:'sWrapper',
102    lightSpot:$('.menu-btn-menu')
103  });
104  //モーダル（検索）
105  $('.search-btn-menu').lightbox_custom({
106    modalBg:$('.modal-search-bg'),
107    modal:$('.modal-search-menu'),
108    close:$('.modal-menu-close, .menu-btn-close, .modal-btn-close, .bottom-menu-btn-menu, .menu-btn-menu'),
109    scrollID:'sWrapper',
110    lightSpot:$('.search-btn-menu')
111  });
112
113  //メニューモーダル（右上のボタン）
114  $('.menu-btn-menu').on('click', function(){
115    $('html, body').css('overflow', 'hidden');
116    $('.modal-menu .modal-search-box').css('display', 'block');
117    $('.modal-submenu .list').css('display', 'flex');
118    $('.modal-submenu .bottom-list').css('display', 'none');
119  });
120  //閉じるボタン
121  $('.modal-menu-close, .menu-btn-close, .modal-btn-close, .modal-search-bg').on('click', function(){
122    $('html, body').removeAttr('style');
123  });
124  //メニューモーダル（ボトムボタン）

125  $('.bottom-menu-btn-menu').on('click', function(){
126    $('html, body').css('overflow', 'hidden');
127    $('.modal-menu .modal-search-box').css('display', 'none');
128    $('.modal-submenu .list').css('display', 'none');
129    $('.modal-submenu .bottom-list').css('display', 'flex');
130  });
131  //検索モーダル
132  $('.search-btn-menu').on('click', function(){
133    $('html, body').css('overflow', 'hidden');
134  });
135
136  // --- 共通JSファイルの末尾に追記するコード ---
137
138  // 検索ボタンにクリックイベントを追加して、is_openクラスを強制的に削除
139  // 検索ボタンのクラスは複数ある可能性を考慮してセレクタをまとめています
140  $('.search-btn, .search-btn-menu').on('click', function() {
141    // すぐにis_openクラスを削除する
142    $("#sp-header").removeClass("is_open");
143  });
144
145  // モーダルを閉じるボタンがクリックされた時にも念のためis_openを削除
146  $('.modal-menu-close, .menu-btn-close').on('click', function() {
147    $("#sp-header").removeClass("is_open");
148  });
149
150
151  $('.modal-menu .box').svAccordion({
152    classHead:'.title',
153    classBody:'.list',
154    classToggle:'on'
155  });
156
157  // アコーディオン(よくある質問用)
158  $('.faq-block').svAccordion({
159    classHead:'.title',
160    classBody:'.childs',
161    classToggle:'on'
162  });
163
164  //アコーディオン（分野別で探す）
165  $('.joho-tab #tab-6 .in2').svAccordion({
166    classHead:'.title',
167    classBody:'.links',
168    classToggle:'on'
169  });
170
171  //スマホプレビューに対応
172  $('.no-escape').each(function(){
173    $(this).html($(this).text());
174  });
175
176  
177  // -----------------------------------------------------
178  // wysiwygの中にtableがあれば、wrapperクラスを付与する
179  // （100%を超えたときにwrapper内でスクロールさせるため）
180  // -----------------------------------------------------
181  if ($('.wysiwyg table').length){
182    $('.wysiwyg table').wrap('<div class="table-wrapper"></div>');
183  }
184
185  /**
186   IE8,9でXMLHttpRequestの代わりにXDomainRequestを使う
187   このセクションは消さないでください。
188   */
189  if ( window.XDomainRequest ) {
190    jQuery.ajaxTransport(function( s ) {
191      if ( s.crossDomain && s.async ) {
192        if ( s.timeout ) {
193          s.xdrTimeout = s.timeout;
194          delete s.timeout;
195        }
196        var xdr;
197        return {
198          send: function( _, complete ) {
199            function callback( status, statusText, responses, responseHeaders ) {
200                xdr.onload = xdr.onerror = xdr.ontimeout = xdr.onprogress = jQuery.noop;
201                xdr = undefined;
202                complete( status, statusText, responses, responseHeaders );
203            }
204            xdr = new XDomainRequest();
205            xdr.open( s.type, s.url );
206            xdr.onload = function() {
207                callback( 200, "OK", { text: xdr.responseText }, "Content-Type: " + xdr.contentType );
208            };
209            xdr.onerror = function() {
210                callback( 404, "Not Found" );
211            };
212            xdr.onprogress = function() {};
213            if ( s.xdrTimeout ) {
214                xdr.ontimeout = function() {
215                    callback( 0, "timeout" );
216                };
217                xdr.timeout = s.xdrTimeout;
218            }
219            xdr.send( ( s.hasContent && s.data ) || null );
220          },
221          abort: function() {
222            if ( xdr ) {
223                xdr.onerror = jQuery.noop();
224                xdr.abort();
225            }
226          }
227        };
228      }
229    });
230  }
231
232  //PC・スマホ切り替え（レスポンシブ）
233  if( typeof MutualSwitching !== 'undefined') {
234    MutualSwitching.config.setPathSettings({
235      "/": {
236      "pc_width": 1200,
237      "sp_width": 750,
238      "layout_type": 0
239      }
240    });
241    MutualSwitching.run.ready();
242  }
243
244});
245
246
247
248$(window).on('scroll', function() {
249
250  winScrollTop = $(this).scrollTop();
251
252  if (matchMedia('(max-width: 768px)').matches) {
253    if (!isModalOpen){
254      var mheader = $("#sp-header");
255      var mpagetop = $("#sp-pagetop");
256
257      if (winScrollTop <= startPos) {
258        $(mpagetop).addClass('active');
259      } else {
260        $(mpagetop).removeClass('active');
261      }
262      // 上スクロール時のみ：SPヘッダー固定、SPページトップ表示
263      if (winScrollTop >= 70) {
264        $(mheader).addClass('is-fixed');
265      } else {
266        $(mheader).removeClass('is-fixed');
267      }
268      if (winScrollTop <= startPos) {
269        $(mheader).addClass('active');
270      } else {
271        $(mheader).removeClass('active');
272      }

273      // 一番上まで戻ったら非表示
274      if (winScrollTop <= 10) {
275        $(mpagetop).removeClass('active');
276        $(mheader).removeClass('active');
277      }
278    }
279
280  } else {
281    var headerheight = $('#header').height();
282    // PCヘッダー固定  
283    $('#header').toggleClass('is-fixed', winScrollTop > 180);
284    if(winScrollTop > 180) {
285      $('#wrapper-in2').css({paddingTop: headerheight});
286    } else {
287      $('#wrapper-in2').css({paddingTop: 0});
288    }
289  }
290
291  startPos = winScrollTop;
292
293});
294
295/**
296 * スマホ向けライトボックス
297 *
298 * @param object 設定
299 */
300$.fn.lightbox_custom = function(config) {
301  var targetJ = this;
302
303  config = $.extend({
304    modalBg:null,
305    modal:null,
306    close:null,
307    scrollID:'sWrapper',
308    lightSpot:null
309  },config);
310
311  if(config.modalBg == null || config.modal == null) {
312    return;
313  }
314
315  // 簡易スクロール
316  var anchorScroll = function(id){
317    var j = $( "#" + id);
318    if(j.size() == 0) {
319      return;
320    }
321    $('html,body').animate({scrollTop: j.offset().top}, 200, "linear");
322  }
323
324  var applyModal = function(targetJ) {
325
326    var showModal = function() {
327      var docH = $(document).height();
328      config.modalBg.height(docH);
329      config.modalBg.fadeIn(200);
330      config.modal.fadeIn(200);
331      config.lightSpot.css({'z-index': '99'});
332      // $("a",config.close).focus();
333      isModalOpen = true;
334      $("#sp-header").addClass("is_open");
335    };
336
337    var hideModal = function() {
338      config.modalBg.hide();
339      config.modal.hide();
340      anchorScroll(config.scrollID);
341      config.lightSpot.css({'z-index': 'auto'});
342      isModalOpen = false;
343      $("#sp-header").removeClass("is_open");
344    };
345
346
347
348    targetJ.click(function() {
349      showModal();
350      return false;
351    });
352    config.close.click(function() {
353      hideModal();
354      return false;
355    });
356    config.modalBg.click(function() {
357      hideModal();
358      return false;
359    });
360
361
362  }
363
364  applyModal(targetJ);
365};