https://tgsc.tokyo/common/js/top_floor.js

1// ********************************************************************
2// クリッカブルマップに関する処理
3// ********************************************************************
4
5$(function () {
6  // 定数宣言
7  const DEFAULT_IMG_PATH = "/img/home/floor/floor_all.png";
8  const FADEOUT_WAIT = 400;
9
10  // 要素のキャッシュ
11  let $pc_map_img_cont = $("#map_img");
12  let $sp_map_img_cont = $("#js-modal-img");
13  let $sp_modal = $("#floor-modal");
14
15  // モーダルを閉じる処理
16  function modalClose() {
17    $("#floor-modal").removeClass("-visible");
18    setTimeout(function () {
19      $sp_map_img_cont.attr("src", "");
20    }, FADEOUT_WAIT);
21  }
22
23  // ********************************************************************
24  // PCのとき
25  // ********************************************************************
26  $sp_map_img_cont.attr("src", "");
27
28  $('map[name="ImageMap"] area').hover(
29    // マウスが乗った時の処理
30    function () {
31      // ホバー時の画像があるなら差し替える
32      $pc_map_img_cont.attr(
33        "src",
34        "/img/home/floor/room_" + $(this).data("area-name") + ".png"
35      );
36    },
37    // マウスが下りたときの処理
38    function () {
39      $pc_map_img_cont.attr("src", DEFAULT_IMG_PATH);
40    }
41  );
42
43  // ********************************************************************
44  // SPの時
45  // ********************************************************************
46  $('map[name="ImageMap-sp"] area').on("click", function () {
47    if (!$sp_modal.hasClass("-visible")) {
48      const img_path = $(this).attr("data-img-sp");
49      $sp_map_img_cont.attr("src", img_path);
50
51      // 画像が読み込み終わるのを待つ
52      $sp_map_img_cont.bind("load", function () {
53        $($sp_modal).addClass("-visible");
54      });
55    }
56  });
57
58  // モーダル外がタップされたら閉じる
59  $($sp_modal).on("click", function () {
60    if ($(this).hasClass("-visible")) {
61      modalClose();
62    }
63  });
64
65  // モーダル内がタップされた時は閉じない
66  $("#js-modal-panel").on("click", function (e) {
67    e.stopPropagation();
68  });
69
70  // 閉じるボタンがタップされたら閉じる
71  $("#js-modal-close").on("click", function () {
72    modalClose();
73  });
74});