jquery-cookieを使い、初回ログイン時と、１ヶ月以上ログインしなかったユーザーにだけチュートリアルビデオをモーダルで表示する #JavaScript

jquery-cookieを使い、初回ログイン時と、１ヶ月以上ログインしなかったユーザーにだけチュートリアルビデオをモーダルで表示するプログラムを書いた。
jquery-cookieプロジェクトは2016年11月現在js-cookieに移行しているので、こちらを利用したバージョンも追記できれば…。

dashbord.html

<section id="section">
  <p><a id="modal-open" class="button-link">チュートリアル・ビデオをもう一度見る</a></p>
  <div id="modal-content">
    <video src="video/login/tutorial.mp4" autoplay controls></video>
    <a id="modal-close" class="button-link"><span class="is-hidden">閉じる</span></a>
  </div>
</section>

<script
  src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
  integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc="
  crossorigin="anonymous"></script>
<script
  src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
  integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc="
  crossorigin="anonymous"></script>
<script src="/js/jquery.cookie.js"></script>
<script src="/js/function.js"></script>

function.js

$(function() {
      var $X_modal = 0;
      var $Y_modal = 0;
      var $modal_content = $("#modal-content");
      var $modal_overlay = $("#modal-overlay");
      if ($('#dashboard').length) {
        if ($.cookie('tutorialVideo') !== 'on') {
          $(window).on('load', function() {
            overlayCheck();
          });
        }
      }
      $("#modal-open").on('click', function() {
        overlayCheck();
      });

      function overlayCheck() {
        $(this).blur();
        if ($modal_overlay[0]) {
          return false;
        }

        var dElm = document.documentElement,
          dBody = document.body;
        $X_modal = dElm.scrollLeft || dBody.scrollLeft;
        $Y_modal = dElm.scrollTop || dBody.scrollTop;
        $("#main").append('<div id="modal-overlay"></div>');
        $("#modal-overlay").fadeIn();

        centeringModal();

        $modal_content.fadeIn();

        $("#modal-overlay,#modal-close").on('click', function() {

          window.scrollTo($X_modal, $Y_modal);

          $("#modal-content,#modal-overlay").fadeOut(function() {
            $.cookie('tutorialVideo', 'on', { //cookieにtutorialVideoという名前でonという値をセット
              expires: 30, //cookieの有効日数
              path: '/' //有効にするパス
            });
            $modal_overlay.remove();
          });
        });
      }

      $(window).resize(centeringModal);

      function centeringModal() {

        var w = $(window).width();
        var h = $(window).height();

        var cw = $modal_content.outerWidth();
        var ch = $modal_content.outerHeight();

        $modal_content.css({
          "left": (w - cw) / 2 + "px",
          "top": (h - ch) / 2 + "px"
        });
      }
});

所感

Qiitaの仕様変更で「ストック」が「いいね」と「ストック」にわかれたけど前の方が好きだった…。「いいねもせずにストックはマナー違反」とかありそうで怖い。

jquery-cookieを使い、初回ログイン時と、１ヶ月以上ログインしなかったユーザーにだけチュートリアルビデオをモーダルで表示する

所感

参考