https://www.mitaka.ne.jp/_themes/site/js/site.js

1$(function() {
2  // breadCrumbs
3  if ($("#breadCrumbs ol:nth-child(2)")[0]) {
4    // パンくずリストが複数存在する場合
5    $("#breadCrumbs ol:not(:first-child").wrapAll('<div class="wrap"></div>');
6    $("#breadCrumbs .pieceBody").append('<div class="bc-more"><a href="#">カテゴリを全て表示する</a></div>');
7    $("#breadCrumbs .wrap").hide();
8    $("#breadCrumbs ol").show();
9    $("#breadCrumbs .bc-more a").on("click", function(e) {
10      e.preventDefault();
11      if ($(this).hasClass("active")) {
12        $(this).text("カテゴリを全て表示する");
13      } else {
14        $(this).text("カテゴリを非表示にする");
15      }
16      $(this).toggleClass("active");
17      $("#breadCrumbs .wrap").slideToggle();
18    });
19  }
20
21  // pageTop
22  var pagetop = $("#pageTop a, a[href^=#top]");
23  $(window).on("scroll", function() {
24    if ($(this).scrollTop() > 300) {
25      pagetop.fadeIn();
26    } else {
27      pagetop.fadeOut();
28    }
29  });
30  /*pagetop.on("click", function(e) {
31    e.preventDefault();
32    $("body,html").animate({
33        scrollTop: 0,
34      },
35      500
36    );
37  });*/
38
39  //chatbotLink
40  $("#chatbotLink .close").on("click", function() {
41    $("#chatbotLink").hide();
42    $("#joruri-agent").hide();
43  });
44
45  //chatbot
46  $("#chatbotLink").on("click", function() {
47    $(this).toggleClass("hide");
48    $("#joruri-agent").toggleClass("hide");
49  });
50  $("#joruri-agent").on("click", ".agent-header", function() {
51    $("#chatbotLink").toggleClass("hide");
52    $("#joruri-agent").toggleClass("hide");
53  });
54
55  // menu toggle
56  if ($("#smartMenu")[0]) {
57    // 要素を配列に格納。
58    var btn = [
59      // ボタン要素
60      ".accessibilityTool",
61      ".globalNavi",
62      ".search",
63    ];
64    var tgtAria = [
65      // aria-hiddenを付与する要素
66      "#accessibilityTool",
67      "#globalNavi",
68      "#joruri-search-box",
69    ];
70    var tgtSlide = [
71      // スライドさせる要素
72      "#accessibilityTool .pieceBody",
73      "#globalNavi .pieceBody",
74      "#joruri-search-box .criteriaBox", // カスタム検索の場合は「#customSearch .pieceBody」、検索ピースの場合は「#docsSearchKeyword .pieceBody」
75    ];
76    // PCかスマホか判定し、aria属性を付与する処理を実行
77    function agentCheck() {
78      if (window.innerWidth < 960) {
79        $.each(btn, function(e) {
80          $("#smartMenu " + btn[e])
81            .attr("aria-controls", tgtAria[e].replace("#", ""))
82            .attr("aria-expanded", "false");
83        });
84        $.each(tgtAria, function(e) {
85          $(tgtAria[e]).attr("aria-hidden", "true");
86        });
87      } else {
88        $("#smartMenu").attr("aria-hidden", "true");
89      }
90    }
91    $(window).on("load resize", function() {
92      agentCheck();
93    });
94    // ボタンクリック時の処理
95    $("#smartMenu button").on("click", function() {
96      var self = $(this);
97      var selfNum = "";
98      var otherBtn = [];
99      var otherTgtAria = [];
100      var otherTgtSlide = [];
101      // クリックされた要素が配列の何番目の要素か取得
102      $.each(tgtAria, function(e) {
103        if (self.attr("aria-controls") == tgtAria[e].replace("#", "")) {
104          // クリックされた要素の順番を変数に格納。
105          selfNum = e;
106        } else {
107          // その他の要素を別の配列に格納。
108          otherBtn.push(btn[e]);
109          otherTgtAria.push(tgtAria[e]);
110          otherTgtSlide.push(tgtSlide[e]);
111        }
112      });
113      // aria属性値の変更
114      if ($(tgtAria[selfNum]).attr("aria-hidden") == "true") {
115        $("#smartMenu " + btn[selfNum]).attr("aria-expanded", "true");
116        $(tgtAria[selfNum]).attr("aria-hidden", "false");
117        $.each(otherBtn, function(e) {
118          $(otherBtn[e]).attr("aria-expanded", "false");
119        });
120        $.each(otherTgtAria, function(e) {
121          $(otherTgtAria[e]).attr("aria-hidden", "true");
122        });
123      } else {
124        $("#smartMenu " + btn[selfNum]).attr("aria-expanded", "false");
125        $(tgtAria[selfNum]).attr("aria-hidden", "true");
126      }
127      // スライド処理
128      $(this).toggleClass("active");
129      $("#smartMenu button").not($(this)).removeClass("active");
130      $(tgtSlide[selfNum]).slideToggle();
131      $.each(otherTgtSlide, function(e) {
132        $(otherTgtSlide[e]).hide();
133      });
134    });

135  }
136
137  // main-slider
138  if ($("#mainSlider")[0]) {
139    $("#mainSlider .bannerImages").css("visibility", "visible");
140    // 1回のみ再生
141    /*
142    var $slider = $("#mainSlider .bannerImages");
143    var $slide = $slider.children();
144    var slideLen = $slide.length;
145    $slider.slick({
146      infinite: false, // ループしない
147      autoplay: true, // 自動再生有効
148      autoplaySpeed: 3000, // 自動再生速度
149      speed: 3000, // アニメーション速度
150      arrows: false,
151      fade: true // フェード有効
152    }).on('afterChange', function() {
153      var $self = $(this);
154      if ((slideLen - 1) <= $self.slick('slickCurrentSlide')) {
155        $self.slick('slickSetOption', 'autoplay', false);
156      }
157    });*/
158
159    $("#mainSlider .bannerImages").each(function() {
160      $(this).slick({
161        autoplay: true, // 自動再生有効
162        autoplaySpeed: 2000, // 自動再生速度
163        speed: 3000, // アニメーション速度
164        arrows: false,
165        fade: true // フェード有効
166      });
167    });
168  }
169
170  // pickup-slider
171  if ($("#pickup")[0]) {
172    $("#pickup ul.docs").css("visibility", "visible");
173    $("#pickup ul.docs").slick({
174      autoplay: true, // 自動再生有効
175      autoplaySpeed: 4000, // 自動再生速度
176      speed: 1000, // アニメーション速度
177      slidesToShow: 3,
178      slidesToScroll: 1,
179      pauseOnDotsHover: true, // マウスオーバー時一時停止
180      /*responsive: [{
181          breakpoint: 960,
182          settings: {
183            slidesToShow: 2
184          }
185        },
186        {
187          breakpoint: 480,
188          settings: {
189            slidesToShow: 1
190          }
191        }
192      ]
193    });*/
194      responsive: [{
195        breakpoint: 960,
196        settings: {
197          slidesToShow: 1
198        }
199      }]
200    });
201  }
202
203  // docs-search
204  // init
205  $('div[id$="Search"] .keyword input').wrap("<div></div>");
206  $('div[id$="Search"] .categories fieldset legend').each(function(e) {
207    e = e + 1;
208    $(this)
209      .attr("aria-controls", "categories_panels" + e)
210      .attr("aria-expanded", "false");
211  });
212  $('div[id$="Search"] .categories fieldset .checkboxes').each(function(e) {
213    e = e + 1;
214    $(this)
215      .attr("id", "categories_panels" + e)
216      .attr("aria-hidden", "true");
217  });
218  $('div[id$="Search"] .keyword label').attr("aria-controls", "search_panels").attr("aria-expanded", "false");
219  $('div[id$="Search"] .keyword label').next().attr("id", "search_panels").attr("aria-hidden", "true");
220  // click
221  $('div[id$="Search"] .categories fieldset legend, div[id$="Search"] .keyword label').on("click", function() {
222    if ($(this).hasClass("current")) {
223      $(this).next().slideToggle().attr("aria-hidden", "true");
224      $(this).removeClass("current").attr("aria-expanded", "false");
225    } else {
226      $(this).next().slideToggle().attr("aria-hidden", "false");
227      $(this).addClass("current").attr("aria-expanded", "true");
228    }
229  });
230
231  // docs search placeholder
232  if ($("#criteria_keyword")[0]) {
233    $("#criteria_keyword").attr("placeholder", "キーワードで探す");
234  }
235
236  // gomi search
237  if ($("#gomiSearch")[0]) {
238    $("#gomiSearch .checkboxesContainer label").each(function() {
239      var str = $(this).text().replace("全て", "");
240      $(this).text(str);
241    });
242  }
243
244  // top recentDocsTab
245  if ($("#recentDocsTab")[0]) {
246    // init
247    $("#recentDocsTab .tabs li a").each(function() {
248      var href = $(this).attr("href");
249      href = href.replace("#", "");
250      $(this).attr("aria-controls", href);
251    });
252    $("#recentDocsTab .tabs li:first-child a").attr("aria-expanded", "true");
253    $("#recentDocsTab .tabs li:not(:first-child) a").attr("aria-expanded", "false");
254    $("#recentDocsTab .content ul:first-child, #recentDocsTab .links > div:first-child").attr("aria-hidden", "false");
255    $("#recentDocsTab .content ul:not(:first-child), #recentDocsTab .links > div:not(:first-child)").attr("aria-hidden", "true");
256    // click
257    $("#recentDocsTab .tabs li a").click(function() {
258      var listIndex = $(this).parent("li").index();
259      $("#recentDocsTab .tabs li a").attr("aria-expanded", "false").parent("li").eq(listIndex).find("a").attr("aria-expanded", "true");
260      $("#recentDocsTab .content ul").attr("aria-hidden", "true").eq(listIndex).attr("aria-hidden", "false");
261      $("#recentDocsTab .links > div").attr("aria-hidden", "true").parent(".links").children("div").eq(listIndex).attr("aria-hidden", "false");
262    });

263  }
264
265  // todaysEvent
266  if ($("#todaysEvent")[0]) {
267    // init
268    $("#todaysEvent #simple_tabs li").each(function(e) {
269      e = e + 1;
270      $(this).wrapInner("<a href='#tab_panels" + e + "' aria-controls='tab_panels" + e + "' style='display: block;'>");
271    });
272    $("#todaysEvent #simple_tab_panels > div").each(function(e) {
273      e = e + 1;
274      $(this).attr("id", "tab_panels" + e);
275    });
276    $("#todaysEvent #simple_tabs li:first-child a").attr("aria-expanded", "true");
277    $("#todaysEvent #simple_tabs li:not(:first-child) a").attr("aria-expanded", "false");
278    $("#todaysEvent #simple_tab_panels > div:first-child").attr("aria-hidden", "false");
279    $("#todaysEvent #simple_tab_panels > div:not(:first-child)").attr("aria-hidden", "true");
280    // click
281    $("#todaysEvent #simple_tabs li a").click(function(e) {
282      e.preventDefault();
283      var listIndex = $(this).parent("li").index();
284      $("#todaysEvent #simple_tabs li a").attr("aria-expanded", "false").parent("li").eq(listIndex).find("a").attr("aria-expanded", "true");
285      $("#todaysEvent #simple_tab_panels > div").attr("aria-hidden", "true").parent("#simple_tab_panels").children("div").eq(listIndex).attr("aria-hidden", "false");
286    });
287  }
288
289  // globalNavi
290  if ($("#globalNavi")[0]) {
291    if (window.innerWidth >= 960) {
292      var menuBtn = "";
293
294      function menuOpen(e) {
295        var self = $(e.currentTarget);
296        if (self.hasClass("open")) {
297          self.removeClass("open");
298          self.parents("li").removeClass("current");
299          self.attr("aria-expanded", "false");
300          self.parents("li").find(".subMenu").attr("aria-hidden", "true");
301        } else {
302          self.addClass("open");
303          self.parents("li").addClass("current");
304          self.attr("aria-expanded", "true");
305          self.parents("li").find(".subMenu").attr("aria-hidden", "false");
306        }
307      }
308      $("#globalNavi .subMenu").attr("aria-hidden", "true");
309      $("#globalNavi .subMenu").each(function(e) {
310        e = e + 1;
311        $(this).attr("id", "subMenu" + e);
312      });
313      $("#globalNavi .pieceBody > ul > li > a").focusin(function(e) {
314        $("#globalNavi .pieceBody > ul > li > a").removeClass("focus");
315        $(e.currentTarget).addClass("focus");
316        $("#globalNavi .subMenu").attr("aria-hidden", "true");
317        $("#globalNavi .pieceBody > ul > li").removeClass("current").find("span.btn").remove();
318        var listIndex = $(this).parents("li").index();
319        listIndex = listIndex + 1;
320      });
321      $("#globalNavi ul.mainMenu a").removeClass('active');
322    } else {
323      // sp gnav toggle
324      $("#globalNavi .subMenu").attr("aria-hidden", "true");
325      $("#globalNavi ul.mainMenu>li>a").on("click", function(e) {
326        e.preventDefault();
327        $(this).toggleClass('active');
328        $(this).next("ul").slideToggle();
329      });
330    }
331  }
332
333  // IE
334  const agent = window.navigator.userAgent.toLowerCase();
335  if ((agent.indexOf("msie") != -1) || (agent.indexOf("trident") != -1)) {
336    $("#ie").css("display", "flex");
337  }
338
339  // inputと隣り合うlabelをdivで括る
340  $('.answer_content input[type="radio"], .answer_content input[type="checkbox"]').map(function(index) {
341    $(this).next().addBack().wrapAll('<div class="group"></div>');
342  });
343
344  // タイトル改行（～サブタイトル～）
345  $('#pageTitle h1').each(function() {
346    let title = $(this).html();
347    $(this).html(title.replace(/([　\s]+)(～.+～|　.+)$/, '$1<span class="subtitle">$2</span>'));
348  });
349
350  // 見出しの色を揃える
351  if ($(".body h2.blue")[0] || $(".body h3.blue")[0]) {
352    $(".maps h2, .rels h2, .tags h2, label.acd-label, .acd-content").addClass("blue");
353  }
354  if ($(".body h2.brown")[0] || $(".body h3.brown")[0]) {
355    $(".maps h2, .rels h2, .tags h2, label.acd-label, .acd-content").addClass("brown");
356  }
357
358  $('.surveyForm .questions .question_content label, .surveyForm .questions .question_content span:not(.note)').each(function() {
359    let label = $(this).html();
360    $(this).html(label.replace(/[　]+/g, "<br>"));
361  });
362  // 連絡方法がメールのとき必須

363  $('input[name="question_answers[14951]"]').on('change', function() {
364    let address = $('input[name="question_answers[14951]"]:checked').val();
365    if (address == "メール") {
366      $('label[for="question_answers_14947"],label[for="question_answers_14948"]').after('<span class="note">※必須</span>');
367      $('#question_answers_14947,#question_answers_14948').attr("required", "required");
368    } else {
369      $('label[for="question_answers_14947"],label[for="question_answers_14948"]').next("span.note").remove();
370      $('#question_answers_14947,#question_answers_14948').removeAttr("required");
371    }
372  });
373  $('input[name="question_answers[14982]"]').on('change', function() {
374    let address = $('input[name="question_answers[14982]"]:checked').val();
375    if (address == "メール") {
376      $('label[for="question_answers_14978"],label[for="question_answers_14979"]').after('<span class="note">※必須</span>');
377      $('#question_answers_14978,#question_answers_14979').attr("required", "required");
378    } else {
379      $('label[for="question_answers_14978"],label[for="question_answers_14979"]').next("span.note").remove();
380      $('#question_answers_14978,#question_answers_14979').removeAttr("required");
381    }
382  });
383  // 有効期限内の三鷹市自転車安全講習受講者証を持っていますかがはいのとき必須
384  $('input[name="question_answers[14964]"]').on('change', function() {
385    let course = $('input[name="question_answers[14964]"]:checked').val();
386    if (course == "はい") {
387      $('label[for="question_answers_14965"],label[for="question_answers_14966"]').after('<span class="note">※必須</span>');
388      $('#question_answers_14965,#question_answers_14966').attr("required", "required");
389    } else {
390      $('label[for="question_answers_14965"],label[for="question_answers_14966"]').next("span.note").remove();
391      $('#question_answers_14965,#question_answers_14966').removeAttr("required");
392    }
393  });
394  $('input[name="question_answers[14997]"]').on('change', function() {
395    let course = $('input[name="question_answers[14997]"]:checked').val();
396    if (course == "はい") {
397      $('label[for="question_answers_14998"],label[for="question_answers_14999"]').after('<span class="note">※必須</span>');
398      $('#question_answers_14998,#question_answers_14999').attr("required", "required");
399    } else {
400      $('label[for="question_answers_14998"],label[for="question_answers_14999"]').next("span.note").remove();
401      $('#question_answers_14998,#question_answers_14999').removeAttr("required");
402    }
403  });
404});