https://mizunomori-tokyo.com/wp-content/themes/mizunomori/js/[email protected]?231109

1/*---------------------------------
2
3	0. anchor link
4	1. pagetop
5	2. footer_fixnavi_contact
6
7---------------------------------*/
8
9/*---------------------------------
10
11	0. anchor link
12
13---------------------------------*/
14$('a[href^="#"]:not(.is-modalbtn)').on('click', function() {
15	var speed = 400;
16	var href= $(this).attr("href");
17	var H = $('.header').outerHeight()
18	var target = $(href == "#" || href == "" ? 'html' : href);
19	var position = target.offset().top - H;
20	$('body,html').animate({scrollTop:position}, speed, 'swing');
21	return false;
22});
23$(window).on('load', function () {
24	var url = $(location).attr('href');
25	var H = $('.header').outerHeight()
26	if (url.indexOf("#") != -1) {
27		var anchor = url.split("#");
28		var target = $('#' + anchor[anchor.length - 1]);
29		if (target.length) {
30			var pos = Math.floor(target.offset().top) - H;
31			$("html, body").animate({
32				scrollTop: pos
33			}, 500);
34		}
35	}
36});
37
38/*---------------------------------
39
40	1. pagetop
41
42---------------------------------*/
43$('#btn_gnavi').on('click',function(){
44	$(this).toggleClass('is-open');
45	$('.hamburger').toggleClass('is-open');
46	$('.header').toggleClass('is-open');
47	$('body').toggleClass('is-gnavopen');
48});
49
50/*---------------------------------
51
52	2. footer_fixnavi_contact
53
54---------------------------------*/
55if (window.matchMedia("(max-width: 559px)").matches) { //SP
56	$('.btn_contact').click(function () {
57		$('.footer_fixnavi_contact').stop().slideToggle();
58		$(this).stop().toggleClass('is_open');
59	});
60}
61
62
63/*---------------------------------
64
65	3. common
66
67---------------------------------*/
68// アコーディオンをクリックした時の動作
69$('.content_title').on('click', function() {//タイトル要素をクリックしたら
70  var findElm = $(this).next(".content_box");//直後のアコーディオンを行うエリアを取得し
71  $(findElm).slideToggle();//アコーディオンの上下動作
72	$(this).toggleClass("close")
73});
74
75// クリックした画像をモーダル表示
76$(function () {
77  $(".is-popup").magnificPopup({
78    delegate: "a", //クリックしたらポップアップ表示する子要素のセレクタ
79    type: "image",
80  });
81});
82
83//追加分
84"use strict";
85/* eslint-disable no-unused-vars */
86/******************************************************
87 * グローバル変数
88 ******************************************************/
89/**
90 * @param {number} BREAK_POINT ブレイクポイント
91 */
92const BREAK_POINT = 736;
93const vw = (coef) => window.innerWidth * (coef / 100);
94const vh = (coef) => window.innerHeight * (coef / 100);
95const tsSpeed = 750;
96let isPC = window.matchMedia("(min-width: 897px)").matches;
97const isTouchScreen = "ontouchstart" in window;
98const touchOrClick = isTouchScreen ? "touchstart" : "click";
99/******************************************************
100 * UserAgent
101 ******************************************************/
102function UserAgent() {
103    /**
104     * @param {HTMLElement} BODY body要素
105     */
106    const BODY = document.body;
107    /**
108     * @param {string} ua 閲覧している対象ブラウザのユーザエージェント
109     */
110    const ua = navigator.userAgent.toLowerCase();
111    /**
112     * IE(11以外)
113     */
114    const isMSIE = ua.indexOf("msie") > -1 && ua.indexOf("opera") == -1;
115    /**
116     * IE11
117     */
118    const isIE11 = ua.indexOf("trident/7") > -1;
119    /**
120     * IE
121     */
122    const isIE = isMSIE || isIE11;
123    /**
124     * Edge
125     */
126    const isEdge = ua.indexOf("edge") > -1;
127    /**
128     * GoogleChrome
129     */
130    const isChrome = ua.indexOf("chrome") > -1 && ua.indexOf("edge") == -1;
131    /**
132     * Firefox
133     */
134    const isFirefox = ua.indexOf("firefox") > -1;
135    /**
136     * Safari
137     */
138    const isSafari = ua.indexOf("safari") > -1 && ua.indexOf("chrome") == -1;
139    /**
140     * Opera
141     */
142    const isOpera = ua.indexOf("opera") > -1;
143    if (isOpera) {
144        BODY.classList.add("is-opera");
145    }
146    else if (isIE) {
147        BODY.classList.add("is-ie");
148    }
149    else if (isChrome) {
150        BODY.classList.add("is-chrome");
151    }
152    else if (isSafari) {
153        BODY.classList.add("is-safari");
154    }
155    else if (isEdge) {
156        BODY.classList.add("is-edge");
157    }
158    else if (isFirefox) {
159        BODY.classList.add("is-firefox");
160    }
161    else {
162        return false;
163    }
164    /**
165     * デバイス判定
166     *
167     * @param  {boolean} Tablet 対象のタブレットを判定
168     * @param  {boolean} Mobile 対象のスマホを判定
169     */
170    const _ua = ((u) => {
171        return {
172            Tablet: (u.indexOf("windows") != -1 && u.indexOf("touch") != -1 && u.indexOf("tablet pc") == -1) ||
173                u.indexOf("ipad") != -1 ||
174                (u.indexOf("android") != -1 && u.indexOf("mobile") == -1) ||
175                (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1) ||
176                u.indexOf("kindle") != -1 ||
177                u.indexOf("silk") != -1 ||
178                u.indexOf("playbook") != -1,
179            Mobile: (u.indexOf("windows") != -1 && u.indexOf("phone") != -1) ||
180                u.indexOf("iphone") != -1 ||
181                u.indexOf("ipod") != -1 ||
182                (u.indexOf("android") != -1 && u.indexOf("mobile") != -1) ||
183                (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1) ||
184                u.indexOf("blackberry") != -1,
185        };
186    })(window.navigator.userAgent.toLowerCase());
187    if (_ua.Mobile) {
188        // スマホの判定時にクラスを付与
189        BODY.classList.add("is-mobile");
190    }
191    else if (_ua.Tablet) {
192        // タブレットの判定時にクラスを付与
193        BODY.classList.add("is-tablet");
194    }
195    else {
196        // スマホ・タブレット以外の判定時にクラスを付与
197        BODY.classList.add("is-pc");
198    }
199    if (navigator.platform.indexOf("Win") != -1) {

200        // Windowsの判定時にクラスを付与
201        BODY.classList.add("is-Windows");
202    }
203    else {
204        // Windows以外の判定時にクラスを付与
205        BODY.classList.add("is-notWindows");
206    }
207    if (ua.indexOf("iPhone") > 0) {
208        // iPhoneの判定時にクラスを付与
209        BODY.classList.add("is-iPhone");
210    }
211    else if (ua.indexOf("Android") > 0 && ua.indexOf("Mobile") > 0) {
212        // Andoroidの判定時にクラスを付与
213        BODY.classList.add("is-Android");
214    }
215    else if (ua.indexOf("iPad") > 0) {
216        // iPadの判定時にクラスを付与
217        BODY.classList.add("is-iPad");
218    }
219}
220/** ======================================================
221 * 画像切り替え
222 * ==================================================== */
223function imgSwitch() {
224    const $img = $(".js-img-switch");
225    const sp = "_sp.";
226    const pc = "_pc.";
227    function imgChange() {
228        const WINDOW_WIDTH = window.innerWidth;
229        $img.each((_, elm) => {
230            if (elm.getAttribute("src")) {
231                if (WINDOW_WIDTH < BREAK_POINT) {
232                    elm.setAttribute("src", elm.getAttribute("src").replace(pc, sp));
233                }
234                else {
235                    elm.setAttribute("src", elm.getAttribute("src").replace(sp, pc));
236                }
237            }
238            else if (elm.getAttribute("style", "background-image")) {
239                if (WINDOW_WIDTH < BREAK_POINT) {
240                    elm.setAttribute("style", elm.getAttribute("style", "background-image").replace(pc, sp));
241                }
242                else {
243                    elm.setAttribute("style", elm.getAttribute("style", "background-image").replace(sp, pc));
244                }
245            }
246        });
247    }
248    imgChange();
249    let timer;
250    window.addEventListener("resize", () => {
251        clearTimeout(timer);
252        timer = setTimeout(() => imgChange(), 200);
253    });
254}
255/** ======================================================
256 * アンカーリンク
257 * ==================================================== */
258function anchorScroll() {
259    $("a[href^=\"#\"]:not(a.js-modal):not(.js-modal__close):not(.is-modalbtn)").on("click", function () {
260        const headerHeight = 120;
261        const speed = 400;
262        const href = $(this).attr("href");
263        const target = $(href == "#" || href == "" ? "html" : href);
264        const scrollTop = target.offset().top - headerHeight;
265        console.log(scrollTop);
266        $("body,html").animate({
267            scrollTop,
268        }, speed, "swing");
269    });
270}
271/** ======================================================
272 * 外部リンク処理
273 * ==================================================== */
274function addNoOpener() {
275    var aElement = $("a");
276    let count = 0;
277    let noHrefList = [];
278    aElement.each(function () {
279        if ($(this).attr("href") === "") {
280            $(this).on("click", (e) => {
281                e.preventDefault();
282            });
283            count++;
284            noHrefList.push($(this));
285        }
286        if ($(this).attr("target") === false)
287            return;
288        if ($(this).attr("target") !== "_blank")
289            return;
290        $(this).attr("rel", "noopener noreferrer");
291    });
292    console.log("リンク未設定:", count, "件");
293    console.log({ noHrefList: noHrefList });
294}
295/** ======================================================
296 * アコーディオン
297 * ==================================================== */
298function templateAccordion() {
299    const accordionToggles = document.querySelectorAll(".js-accordion-toggle");
300    const accordionContents = document.querySelectorAll(".js-accordion-content");
301    const accordionIcons = document.querySelectorAll(".js-accordion-icon");
302  
303    accordionToggles.forEach((toggle, index) => {
304      toggle.addEventListener("click", () => {
305        const expanded = toggle.getAttribute("aria-expanded") === "true" || false;
306        toggle.setAttribute("aria-expanded", !expanded);
307        accordionContents[index].setAttribute("aria-hidden", expanded);
308  
309        const content = accordionContents[index];
310        content.style.transition = "height 0.3s";
311  
312        if (expanded) {
313          // 閉じる処理
314          content.style.height = `${content.offsetHeight}px`;
315          setTimeout(() => {
316            content.style.height = "0px";
317            content.style.overflow = "hidden";
318          }, 100);
319        } else {
320          // 開く処理
321          content.style.overflow = "hidden";
322          content.style.height = "0px";
323          const contentHeight = content.scrollHeight;
324          setTimeout(() => {
325            content.style.height = `${contentHeight}px`;
326          }, 100);
327        }
328  
329        accordionIcons[index].classList.toggle("is-active");
330  
331        // アニメーションの完了後に高さとオーバーフローをリセットする
332        setTimeout(() => {
333          content.style.transition = "";
334          if (!expanded) {
335            content.style.height = "auto";
336            content.style.overflow = "";
337          }
338        }, 300);
339      });
340    });

341  }
342/** ======================================================
343 * タブ
344 * ==================================================== */
345function templateTab() {
346    const tabs = document.querySelectorAll(".js-tab");
347    tabs.forEach((tab) => {
348        const tabItems = tab.querySelectorAll(".js-tab-item");
349        const tabContents = tab.querySelectorAll(".js-tab-contents");
350        function toggleTab(event) {
351            const currentTab = event.currentTarget;
352            const index = Array.from(tabItems).indexOf(currentTab);
353            tabItems.forEach((tab) => {
354                tab.setAttribute("aria-selected", tab === currentTab ? "true" : "false");
355            });
356            tabContents.forEach((content) => {
357                content.setAttribute("aria-hidden", "true");
358            });
359            tabContents[index].setAttribute("aria-hidden", "false");
360        }
361        tabItems.forEach((tab) => {
362            tab.addEventListener("click", toggleTab);
363        });
364    });
365}
366
367/** ======================================================
368 * スライダー(Swiper)1枚表示
369 * ==================================================== */
370function createSwiperSlides1() {
371    new Swiper(".swiper--single", {
372      slidesPerView: 1, // 1枚のスライドを表示
373      spaceBetween: 0, // スライド間のスペース
374      loop: true,
375      navigation: {
376        nextEl: ".swiper-button-next",
377        prevEl: ".swiper-button-prev",
378    },
379    pagination: {
380        el: ".swiper-pagination",
381        clickable: true,
382    },
383    });
384}
385
386function createSwiperSlides2() {
387    new Swiper(".liposuction_case-slider", {
388      slidesPerView: 1, // 1枚のスライドを表示
389      spaceBetween: 0, // スライド間のスペース
390        loop: true,
391        navigation: {
392        nextEl: ".swiper-button-next",
393        prevEl: ".swiper-button-prev",
394    },
395    pagination: {
396        el: ".swiper-pagination",
397        clickable: true,
398    },
399    autoplay: {
400        delay: 4000,
401            pauseOnMouseEnter: true,
402            disableOnInteraction: true
403    },
404    });
405}
406
407
408/** ======================================================
409 * スライダー(Swiper)3枚表示
410 * ==================================================== */
411function createSwiperSlides3() {
412    const slides3 = document.querySelectorAll(".swiper");
413    slides3.forEach((slide) => {
414        const slideCount = slide.querySelectorAll(".swiper-slide").length;
415        const slideWrapper = slide.querySelector(".swiper-wrapper");
416        const prevButton = slide.querySelector(".swiper-button-prev");
417        const nextButton = slide.querySelector(".swiper-button-next");
418        if (window.matchMedia("(max-width: 736px)").matches) {
419            if (slideCount <= 2) {
420                handleFewSlides(slideWrapper, prevButton, nextButton);
421                return;
422            }
423        }
424        else {
425            if (slideCount <= 3) {
426                handleFewSlides(slideWrapper, prevButton, nextButton);
427                return;
428            }
429        }
430        initiateSwiper(slide);
431    });
432}
433function handleFewSlides(slideWrapper, prevButton, nextButton) {
434    if (window.matchMedia("(max-width: 736px)").matches) {
435        slideWrapper.style.justifyContent = "space-between";
436        slideWrapper.style.gridGap = "25px";
437    }
438    else {
439        slideWrapper.style.justifyContent = "center";
440        slideWrapper.style.gridGap = "50px";
441    }
442    if (prevButton) {
443        prevButton.style.display = "none";
444    }
445    if (nextButton) {
446        nextButton.style.display = "none";
447    }
448}
449function initiateSwiper(slide) {
450    slide.style.paddingBottom = "35px";
451    const prevArrow = slide.querySelector(".swiper-button-prev");
452    const prevText = document.createElement("span");
453    prevText.innerText = "PREV";
454    prevArrow.appendChild(prevText);
455    const nextArrow = slide.querySelector(".swiper-button-next");
456    const nextText = document.createElement("span");
457    nextText.innerText = "NEXT";
458    nextArrow.appendChild(nextText);
459    new Swiper(slide, {
460        slidesPerView: 2,
461        spaceBetween: 25,
462        loop: false,
463        navigation: {
464            nextEl: ".swiper-button-next",
465            prevEl: ".swiper-button-prev",
466        },
467        breakpoints: {
468            736: {
469                slidesPerView: 3,
470                spaceBetween: 50,
471            },
472        },
473    });

474}
475
476/** ======================================================
477 * モーダルウィンドウ
478 * ==================================================== */
479$(".js-modal").click(function () {
480    const id = $(this).data("id"); // 何番目のキャプション（モーダルウィンドウ）か認識
481    $(`#overlay, .o-x1__modal[data-id="modal${id}"]`).fadeIn();
482});
483// オーバーレイクリックでもモーダルを閉じるように
484$(".js-close , #overlay").click(function () {
485    $("#overlay, .o-x1__modal").fadeOut();
486});
487$(function () {
488    UserAgent();
489    imgSwitch();
490    anchorScroll();
491    addNoOpener();
492    templateAccordion();
493    templateTab();
494    createSwiperSlides1();
495    createSwiperSlides3();
496});
497
498/** ======================================================
499 * 美容皮膚科ターミナル埋め込み動画
500 * ==================================================== */
501/*動画のアスペクト比が16:9以外の時はmovie_reSizeの第二引数で指定してください。*/
502movie_reSize('cover');
503window.onload = function(){
504  movie_reSize('cover');
505};
506window.onresize = function(){
507  movie_reSize('cover');
508}
509/*
510* target  → (string) 合わせる要素のIDを指定
511* size    → (string)動画の比率を指定、初期値'16:9'
512*/
513function movie_reSize(target,size){
514  if(typeof size === 'undefined'){
515    size = '16:9';
516  }
517  sizeArray = size.split(':');
518  sizeArray[0] = Number(sizeArray[0]);
519  sizeArray[1] = Number(sizeArray[1]);
520  if(!target ||  sizeArray[0] == 'NaN' || sizeArray[1] == 'NaN'){
521    console.log('値が正しくありません。');
522    return false;
523  }else{
524  var $cover = document.getElementById(target),
525      $movieContent = document.getElementById('movie'),
526      coverWidth = $cover.getBoundingClientRect().width,
527      coverHeight = $cover.getBoundingClientRect().height,
528      tatehi = coverHeight / sizeArray[1],
529      yokohi = coverWidth / sizeArray[0],ansWidth,ansHeight;
530   
531  if(tatehi>yokohi){
532    ansHeight = coverHeight;
533    ansWidth = tatehi * sizeArray[0];
534  }else{
535    ansWidth = coverWidth;
536    ansHeight = yokohi * sizeArray[1];
537  }
538
539  $movieContent.style.width = ansWidth+'px';
540  $movieContent.style.height = ansHeight+160+'px';//160は投稿者情報などを消すために着けています。表示させたい場合は+160を消去してください。
541  }
542}
543
544var tag = document.createElement('script');
545tag.src = "//www.youtube.com/iframe_api";
546var firstScriptTag = document.getElementsByTagName('script')[0];
547firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
548var player;
549function onYouTubeIframeAPIReady() {
550  var movieId = 'EANzKelNcmE';//youtubeの動画のID。再生したい動画のIDを入力。
551  player = new YT.Player('movie', {
552    /*
553    playerVarsで細かい設定ができます。
554    コメントはどんな設定をしているか書いているだけです。
555    */
556    playerVars:{
557      playsinline: 1,
558      autoplay: 1, // 自動再生
559      loop: 1, // ループ有効
560      listType: 'playlist', //リスト再生（ループ再生に必要）
561      playlist: movieId, // 再生する動画リスト（ループ再生に必要）
562      controls: 0, // コントロールバー非表示
563      enablejsapi: 1, //JavaScript API 有効
564      modestbranding:1,//yutubeロゴの非表示
565      iv_load_policy: 3, //動画アノテーションを表示しない
566      disablekb:1, //キーボード操作OFF
567      showinfo:0, //動画の再生が始まる前に動画のタイトルなどの情報を表示しない
568      rel:0, //再生終了時に関連動画を表示しない
569    },
570    videoId:  movieId,
571    events: {
572      'onReady': onPlayerReady,//動画の準備ができたらonPlayerReadyを実行
573      'onStateChange': onPlayerStateChange,
574    }
575  });
576}
577function onPlayerReady(e) {
578  e.target.mute();//音声ミュート
579  e.target.playVideo();//動画スタート（SP用）
580}
581function onPlayerStateChange(e){
582  if(e.data == 1){
583    document.getElementById('cover').style.opacity = 1;//動画の再生が始まったら表示
584  }
585}