javascript.js

/**
 * Cocoon WordPress Theme
 * @author: yhira
 * @link: https://wp-cocoon.com/
 * @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 */
/////////////////////////////////
// JavaScriptコード
/////////////////////////////////

( function ( $ ) {
  /////////////////////////////////
  //TOPへ戻るボタン
  /////////////////////////////////
  var prevScrollTop = -1;
  var $window = $( window );
  $window.scroll( function () {
    //最上部から現在位置までの距離を取得して、変数[scrollTop]に格納
    var scrollTop = $window.scrollTop();
    var threashold = 600;
    var s1 = prevScrollTop > threashold;
    var s2 = scrollTop > threashold;

    // スレッショルドを跨いだ時のみ処理をする
    if ( s1 ^ s2 ) {
      if ( s2 ) {
        // トップへ戻るボタンが見えている時
        $( '.body' ).addClass( 'go-to-top-visible' );

        // //[.go-to-to]をゆっくりフェードインする
        // $('.go-to-top').fadeIn('slow');
      } else {
        //トップへ戻る間だけ追加したクラスを除去
        $( '.go-to-top-common' ).removeClass( 'go-to-top-up' );
        // トップへ戻るボタンが見えていない時
        $( '.body' ).removeClass( 'go-to-top-visible' );

        // //それ以外だったらフェードアウトする
        // $('.go-to-top').fadeOut('slow');
      }
    }

    prevScrollTop = scrollTop;
  } );

  //ボタン(.go-to-top-common)のクリックイベント
  $( '.go-to-top-common' ).click( function () {
    //トップへ戻る間だけクラスを追加
    $( this ).addClass( 'go-to-top-up' );
    //ページトップへ移動する
    $( 'body,html' ).animate(
      {
        scrollTop: 1,
      },
      800
    );
  } );
  //ボタン(.go-to-toc-common)のクリックイベント
  $( '.go-to-toc-common' ).click( function () {
    //目次へ移動する
    $( 'body,html' ).animate(
      {
        scrollTop: $( '.entry-content .toc' ).offset().top,
      },
      800
    );
  } );

  //検索ボタンクリックでフォーカスを入力エリアに移す
  $( '#search-menu-input' ).change( function ( e ) {
    var searchEdit = $( '#search-menu-content .search-edit' ).first();
    if ( e.target.checked ) {
      searchEdit.focus();
    } else {
      searchEdit.blur();
    }
  } );

  //下にスクロールで管理パネルを隠す
  //上にスクロールで管理パネルを表示
  var adminMenu = $( '#admin-panel' );
  var adminHeight = adminMenu.outerHeight();
  var adminStartPos = 0;
  $( window ).scroll( function () {
    var adminCurrentPos = $( this ).scrollTop();
    if ( adminCurrentPos > adminStartPos ) {
      if ( adminCurrentPos >= 200 ) {
        adminMenu.css( 'bottom', '-' + adminHeight + 'px' );
      }
    } else {
      adminMenu.css( 'bottom', 0 );
    }
    adminStartPos = adminCurrentPos;
  } );

  //モバイルボタンが固定じゃない場合
  if ( cocoon_localize_script_options.is_fixed_mobile_buttons_enable != 1 ) {
    //ヘッダーモバイルメニュー
    var headerMenu = $( '.mobile-header-menu-buttons' );
    var headerStartPos = 0;
    $( window ).scroll( function () {
      var headerCurrentPos = $( this ).scrollTop();
      // メニュー名の折り返しで高さが変わるため、隠す直前に都度高さを取得する。
      // box-shadowはouterHeightに含まれないため、影の残り対策として余裕を加える。
      var headerHight = headerMenu.outerHeight() + 5;
      // 画面幅が600px以下の場合は、--wp-admin--admin-bar--heightを考慮しない（WordPressアドミンバーが固定とならないため、ヘッダーメニューの位置を0にする）
      if ( window.innerWidth <= 600 ) {
        if ( headerCurrentPos > headerStartPos ) {
          if ( headerCurrentPos >= 100 ) {
            headerMenu.css( 'top', '-' + headerHight + 'px' );
          }
        } else {
          headerMenu.css( 'top', 0 );
        }
      } else {
        // CSS変数--wp-admin--admin-bar--heightの値を取得
        var adminBarHeight =
          getComputedStyle( document.documentElement )
            .getPropertyValue( '--wp-admin--admin-bar--height' )
            .trim() || '0px';
        if ( headerCurrentPos > headerStartPos ) {
          if ( headerCurrentPos >= 100 ) {
            // 管理バーの高さを考慮してtopを設定
            headerMenu.css(
              'top',
              'calc(' + adminBarHeight + ' - ' + headerHight + 'px)'
            );
          }
        } else {
          // 管理バーの高さを考慮してtopを設定
          headerMenu.css( 'top', 'calc(' + adminBarHeight + ')' );
        }
      }
      headerStartPos = headerCurrentPos;
    } );

    //フッターモバイルメニュー
    var footerMenu = $( '.mobile-footer-menu-buttons' );
    var footerStartPos = 0;
    $( window ).scroll( function () {
      var footerCurrentPos = $( this ).scrollTop();
      // メニュー名の折り返しで高さが変わるため、隠す直前に都度高さを取得する。
      // box-shadowはouterHeightに含まれないため、影の残り対策として余裕を加える。
      var footerHeight = footerMenu.outerHeight() + 5;

      if ( footerCurrentPos > footerStartPos ) {
        if ( footerCurrentPos >= 100 ) {
          footerMenu.css(
            'bottom',
            'calc( -1 * (env(safe-area-inset-bottom) + ' +
              footerHeight +
              'px) )'
          );
        }
      } else if ( footerCurrentPos - footerStartPos < -8 ) {
        footerMenu.css( 'bottom', 0 );
      }

      footerStartPos = footerCurrentPos;
    } );

    var headerButtons = $( '.mobile-header-menu-buttons' );
    var footerButtons = $( '.mobile-footer-menu-buttons' );
    headerButtons.click( function () {
      headerButtons.css( 'z-index', '3' );
      footerButtons.css( 'z-index', '2' );
    } );

    footerButtons.click( function () {
      headerButtons.css( 'z-index', '2' );
      footerButtons.css( 'z-index', '3' );
    } );
  }

  //コメントボタンがクリックされたとき
  const clickEventType = window.ontouchstart !== null ? 'click' : 'touchend';
  $( document ).on(
    clickEventType,
    '#comment-reply-btn, .comment-reply-link',
    function () {
      $( '#comment-reply-btn' ).slideUp();
      const respond = document.getElementById( 'respond' );
      const styles = {
        inset: 'auto',
        position: 'static',
        visibility: 'visible',
      };
      Object.entries( styles ).forEach( ( [ key, value ] ) => {
        respond.style[ key ] = value;
      } );
      $( '#respond' ).slideDown();
    }
  );

  //Google検索ボタン
  $( '.sbtn' ).click( function () {
    var w = $( this ).prev( '.sform' ).text();
    if ( w )
      window.open(
        'https://www.google.co.jp/search?q=' + encodeURIComponent( w ),
        '_blank'
      );
  } );

  //スライドインサイドバーのアーカイブセレクトボックス選択処理
  $( '.sidebar-menu-content .widget_archive select' ).change( function () {
    document.location.href = this.options[ this.selectedIndex ].value;
  } );

  //スライドインサイドバーのカテゴリーセレクトボックス選択処理
  $( '.sidebar-menu-content .widget_categories select' ).change( function () {
    if ( this.options[ this.selectedIndex ].value > 0 ) {
      this.parentNode.submit();
    }
  } );

  function drawerCloser( selecter, checkbox ) {
    $( selecter ).click( function () {
      $( checkbox ).prop( 'checked', false );
      // const href = $(this).attr('href');
      // if (href.match(/#/)) {
      //   $(checkbox).prop('checked', false);
      // }
    } );
  }

  //モバイルメニューをクリックしたら閉じる
  drawerCloser( '.menu-drawer .menu-item a', '#navi-menu-input' );

  //モバイルサイドバーをクリックしたら閉じる
  drawerCloser( '#slide-in-sidebar a', '#sidebar-menu-input' );

  //モバイルヘッダーメニューのロゴ処理
  $( '.mobile-menu-buttons' ).each( function () {
    if ( $( this ).has( '.logo-menu-button' ).length ) {
      $( this ).addClass( 'has-logo-button' );
    }
  } );

  $( window ).on( 'load', function () {
    $( '#carousel' ).addClass( 'loaded' );
  } );

  //FAQボックスのアコーディオン化用
  $( '.is-style-accordion > .faq > .faq-answer' ).hide();
  $( '.is-style-accordion > .faq > .faq-question' ).click( function () {
    $( this ).next( '.is-style-accordion .faq-answer' ).slideToggle();
    $( this ).toggleClass( 'active' );
  } );

  //モバイルサイドバー表示時にサイドバーを移動する・モバイルサイドバーを閉じる時に元の位置に戻す
  $( document ).on( 'change', '#sidebar-menu-input', function () {
    if ( $( this ).prop( 'checked' ) ) {
      $( '#sidebar' ).appendTo( '#sidebar-menu-content' );
      $( '#sidebar' ).attr( 'id', 'slide-in-sidebar' );
      $( '#sidebar' ).addClass( 'slide-in-sidebar' );
      //モバイルサイドバーのリンクをクリックしたら閉じる
      drawerCloser( '#slide-in-sidebar a', '#sidebar-menu-input' );
    } else {
      $( '#sidebar' ).removeClass( 'slide-in-sidebar' );
      $( '#slide-in-sidebar' ).attr( 'id', 'sidebar' );
      $( '#sidebar' ).insertAfter( '#main' );
    }
  } );

  //リサイズした時はサイドバーを元に戻す
  var vw = window.innerWidth;
  $( window ).resize( function () {
    if ( vw != window.innerWidth ) {
      $( '#sidebar-menu-input' ).prop( 'checked', false ).change();
    }
    vw = window.innerWidth;
  } );
} )( jQuery );

/*
* Cocoon WordPress Theme incorporates code from "Youtube SpeedLoad" WordPress Plugin, Copyright 2017 Alexufo[http://habrahabr.ru/users/alexufo/]
"Youtube SpeedLoad" WordPress Plugin is distributed under the terms of the GNU GPL v2
*/
( function () {
  var f = document.querySelectorAll( '.video-click' );
  for ( var i = 0; i < f.length; ++i ) {
    f[ i ].onclick = function () {
      var iframe = this.getAttribute( 'data-iframe' );
      this.parentElement.innerHTML = '<div class="video">' + iframe + '</div>';
    };
  }
} )();

// ヘッダーの位置オフセットを更新
( function () {
  function updateHeaderOffset() {
    const header = document.getElementById( 'header-container' );

    let offset = 0;

    if ( header && header.classList.contains( 'fixed-header' ) ) {
      offset = header.offsetHeight;
    }

    // .mobile-header-menu-buttonsのtop・高さを取得して処理
    const mobileHeaderMenuButtons = document.querySelector(
      '.mobile-header-menu-buttons'
    );
    if ( mobileHeaderMenuButtons ) {
      const computedStyle = window.getComputedStyle( mobileHeaderMenuButtons );
      const topValue = parseFloat( computedStyle.top );
      // ボタンの実寸高さ（ラベル折り返し時も実寸）
      const height = mobileHeaderMenuButtons.offsetHeight;

      if ( topValue >= 0 ) {
        // topが0以上（表示中）の場合は、sticky用オフセットに高さを反映
        offset += height;
      }
      // 本文余白用には高さのみを常時設定する。
      // スクロールで隠れている最中（topが負）でも高さは変わらないため、
      // 位置(top)に依存せず余白が安定する。
      document.documentElement.style.setProperty(
        '--cocoon--mobile-header-menu-buttons--height',
        height + 'px'
      );
    }

    document.documentElement.style.setProperty(
      '--cocoon--header-container--position-offset',
      offset + 'px'
    );
  }

  function initHeaderOffset() {
    updateHeaderOffset();

    // モバイルヘッダーボタンのサイズ変化（遅延表示・ラベルの折り返し）を監視する。
    // スクロールに依存しないため、初期表示時に高さが0pxになる問題を解消できる。
    const target = document.querySelector( '.mobile-header-menu-buttons' );
    if ( target && 'ResizeObserver' in window ) {
      new ResizeObserver( updateHeaderOffset ).observe( target );
    }
  }

  if ( document.readyState !== 'loading' ) {
    initHeaderOffset();
  } else {
    document.addEventListener( 'DOMContentLoaded', initHeaderOffset );
  }

  // ブラウザサイズ変更時に更新（リサイズ処理が完了してから実行するため、少し遅延させる）
  let resizeTimer;
  window.addEventListener( 'resize', function () {
    clearTimeout( resizeTimer );
    resizeTimer = setTimeout( function () {
      updateHeaderOffset();
    }, 100 );
  } );

  // スクロール時にも更新（固定ヘッダーの表示切り替えに追従するため）
  window.addEventListener( 'scroll', updateHeaderOffset );
} )();