https://www.teijin-pharma.co.jp/common/js/external_modal.js

1// external_modal.js
2// 外部リンクならモーダルで遷移の確認を行う
3// 内部リンクまたはホワイトリストに登録したURLはモーダルを出さないよう振り分ける処理
4
5// 絶対パスの調査
6// 内部リンクであればhttp(s)から始まることはないことを前提
7function is_external(href){
8  var target = href;
9  var is_external;
10
11  if (target.indexOf('http') !== -1) {
12
13    // http から始まっているので絶対パス
14    is_external = true;
15
16  } else {
17
18    // 絶対パスではない
19    is_external = false;
20  }
21
22  return is_external;
23}
24
25// ホワイトリスト対象の調査
26function is_whitelist(value){
27  var is_whitelist;
28
29  // ホワイトリストに定義されているものは通常リンク
30  var whitelist = [
31    //以下のドメインにマッチするものはモーダル処理しない
32    //カンマ区切りで複数登録可、ドメインはシングルクォーテーションで囲む
33    //※プロトコルは不要
34    //※サブドメインは判別しないため、複数ある場合は各個指定する
35    'www.teijin-pharma.co.jp',
36    'medical.teijin-pharma.co.jp',
37    'www.teijin-pharma.com',
38  ]
39
40  // クリックしたaタグに指定されているURLのドメインを取得
41  // スラッシュでパースし、3つ目の値をドメインとする
42  // -> ["http:", "", "www.example.com"]
43  //                   ^^^^^^^^^^^^^^^
44  var target = value.split('/', 3);
45
46  if (whitelist.indexOf(target[2]) !== -1) {
47
48    //ホワイトリスト対象だった場合
49    is_whitelist = true;
50
51  } else {
52
53    //ホワイトリスト対象じゃなかった場合
54    is_whitelist = false;
55
56  }
57
58  return is_whitelist;
59}
60
61// モーダル生成
62function modal_generate (href){
63  var modal_markup =
64    '<div class="c_modal_wrapper">' +
65      '<div class="c_modal_bg" data="c_modal_close"></div>' +
66      '<div class="c_modal_body">' +
67        '<div class="c_modal_close" data="c_modal_close">Close</div>' +
68        '<div class="c_modal_title">このページより先は「TEIJIN PHARMA」から離れます。</div>' +
69        '<div class="c_modal_content">' +
70          '<p class="c_modal_message"><span class="c_modal_target"></span> へ移動しますか。</p>' +
71          '<div class="c_modal_buttons">' +
72            '<a target="_blank" class="c_modal_external-link" rel="nofollow">はい</a>' +
73            '<div class="c_modal_external-close" data="c_modal_close">いいえ</div>' +
74          '</div>' +
75        '</div>' +
76      '</div>' +
77    '</div>';
78
79  // モーダルをページ末尾（</body>直前）に追加する
80  $('body').append(modal_markup);
81
82  // 対象URLを代入する
83  $('.c_modal_target').text(href);
84  $('.c_modal_external-link').attr('href', href);
85}
86
87// モーダルを開いた際のスクロール抑止する値設定関数
88function modal_body_pos(position, width, top, duration){
89  if (top > 0){
90    top = top * -1;
91  }
92  setTimeout(function(){
93  $('body').css({
94    "position": position,
95    "width": width,
96    "top": top
97  });
98  },duration);
99}
100
101// モーダル開く
102function modal_launch(href, pos){
103
104  // モーダルを開いている間はbodyのスクロールを抑止する
105  modal_body_pos('fixed', '100%', pos, 300);
106
107  // モーダルを開く
108  $('.c_modal_wrapper').fadeIn(300);
109
110  // モーダルの表示位置補正
111  var c_modal_body = $('.c_modal_body');
112  var c_modal_height = c_modal_body.outerHeight();
113  $(c_modal_body).css('margin-top', c_modal_height * -0.5);
114}
115
116// モーダル閉じる
117function modal_close(delay){
118
119  // モーダルを非表示
120  $('.c_modal_wrapper').fadeOut(delay);
121
122  // モーダルを開いた際にスクロールしたbodyを元に戻す
123  modal_body_pos('', '', '', delay);
124  modal_remove(delay+1);
125}
126
127// モーダル破棄
128function modal_remove(delay){
129
130  setTimeout(function(){
131    $('.c_modal_wrapper').remove();
132  },delay);
133}
134
135$(function(){
136
137  var scroll;
138  var is_production = true;
139
140  // aタグをクリックしたら処理開始
141  // モーダル内のaタグは対象外とする
142  $('a:not(.c_modal_external-link)').on('click', function(e) {
143
144    // 空リンク・#・javascript:voidなどは無視
145    if (!href || href.startsWith('#') || href.startsWith('javascript')) return;
146
147    // リンクの指定先を取得
148    var href = $(this).attr('href');
149    // 現在のスクロール値を取得
150    scroll = $(document).scrollTop();
151
152    // 外部リンクかのチェック
153    is_external(href);
154
155    if(is_external(href) == true){
156
157      // 外部サイトなのでホワイトリストをチェック
158      is_whitelist(href);
159
160      if(is_whitelist(href) == false){
161
162        // 外部リンクであり、ホワイトリスト対象外である
163        // モーダルを出すのでここでリンクさせなくする
164        e.preventDefault();
165
166        // モーダルを生成・表示する
167        modal_generate(href);
168        modal_launch(href, scroll);
169
170        // 処理終了
171        return false;

172
173      } else {
174
175        // 外部リンクであり、ホワイトリスト対象である
176        // 通常通りのリンク処理を実行させる
177
178      }
179    }
180
181  });
182
183  // モーダル閉じる
184  $(document).on('click', '[data="c_modal_close"]', function() {
185
186    var delay = 300;
187
188    modal_close(delay);
189
190    // bodyを固定した値を取得し、モーダルを開いた時のスクロール位置に復元
191    var scroll_locked = scroll;
192    setTimeout(function(){
193      $(window).scrollTop(scroll_locked);
194    },delay);
195  });
196
197  // ウィンドウサイズを変更した場合は即時モーダルを閉じる
198  $(window).resize(function() {
199
200    var delay = 0;
201
202    modal_close(delay);
203
204    // bodyを固定した値を取得し、モーダルを開いた時のスクロール位置に復元
205    var scroll_locked = scroll;
206    setTimeout(function(){
207      $(window).scrollTop(scroll_locked);
208    },delay);
209  });
210
211});