https://namonaki.jp/assets/js/common.js

1/************************************************
2
3@PC - common.js v5.0.0
4
5(c) ULM Co.,Ltd. - https://www.ulm-design.com
6************************************************/
7/*--------------------------
8global
9--------------------------*/
10const WINDOW = $(window);
11const WRAPPER = $('#wrapper');
12const DOCUMENT = $(document);
13var DEF_W = 1024;//ブラウザの横幅の最小px
14var DEF_H = 650;//ブラウザの縦幅の最小px
15
16/*--------------------------
17testモード
18--------------------------*/
19const IS_TEST = false;//TESTモードにする場合はtrueに。
20
21if(IS_TEST) {
22  //stats.js
23  var script2 = document.createElement('script');
24  script2.src = 'https://cdnjs.cloudflare.com/ajax/libs/stats.js/r8/Stats.min.js';
25  document.body.appendChild(script2);
26  script2.onload = (function(){ Common.initStats(); });
27
28}//endif
29
30
31/*******************************************************
32
33@cookie
34
35********************************************************/
36const COOKIE = 'namonaki.jp';
37const COOKIE_VALUE = 'v1';
38
39
40/*******************************************************
41
42movie設定
43
44********************************************************/
45const MOVIE_W = 853;//デフォルトの横幅
46const MOVIE_H = 480;//デフォルトの縦幅
47const MOVIE_MARGIN = 50;//左右のマージン
48const MOVIE_NAVI_BTN_H = 40;//ナビのボタンの高さ
49const MOVIE_NAVI_BTN_LINE = 4;//何列か
50const MOVIE_NAVI_H = MOVIE_NAVI_BTN_H * MOVIE_NAVI_BTN_LINE;//ナビの高さ(デフォルト50)
51const MOVIE_CLOSE_H = 32;//閉じるボタンの高さ
52const MOVIE_URL = 'movie/index.html';
53const MOVIE_ID_ARR = [
54  { name: 'オンライン動画［名も無き目撃者編］', id: 'hMh8vIZKwUY', width: '33%', height: MOVIE_NAVI_BTN_H },
55  { name: 'オンライン動画［感動編］', id: '1kVKfvBTY5M', width: '33%', height: MOVIE_NAVI_BTN_H },
56  { name: 'オンライン動画［究極のバディ編］', id: 'brWXCneHYvQ', width: '34%', height: MOVIE_NAVI_BTN_H },
57  { name: 'オンライン動画［究極の愛編］', id: 'SOAtozSxMB8', width: '33%', height: MOVIE_NAVI_BTN_H },
58  { name: '特番1 映画公開記念「魅力完全公開SP」', id: 'xfpBbr0E5Lc', width: '33%', height: MOVIE_NAVI_BTN_H },
59  { name: '特番2 dTVオリジナルドラマ「配信記念特番」', id: 'tnYjOdelmQ8', width: '34%', height: MOVIE_NAVI_BTN_H },
60  // { name: '舞台挨拶', id: 'DOYyolw6-_Q', width: '50%', height: MOVIE_NAVI_BTN_H },
61  { name: '15秒TVCM［友情編］', id: 'rOwCZQAZ1qQ', width: '33%', height: MOVIE_NAVI_BTN_H },
62  { name: '15秒TVCM［サスペンス編］', id: 'yK-gixjT4XQ', width: '33%', height: MOVIE_NAVI_BTN_H },
63  { name: '15秒TVCM［ドラマ編］', id: '5fIJt5DSQNo', width: '34%', height: MOVIE_NAVI_BTN_H },
64  { name: '予告編', id: 'TOsVU9Mlwbk', width: '33%', height: MOVIE_NAVI_BTN_H },
65  { name: '30秒カットダウン予告', id: 'GUZ43v5ESHY', width: '33%', height: MOVIE_NAVI_BTN_H },
66  { name: '特報', id: 'febsFQfp1eA', width: '34%', height: MOVIE_NAVI_BTN_H },
67];
68
69/*-------------------------------
70@getMovieParams
71--------------------------------*/
72function getMovieParams() {
73
74  var w = (WINDOW.width() - MOVIE_MARGIN) >> 0;
75  var h = MOVIE_H * (w / MOVIE_W) + MOVIE_NAVI_H + MOVIE_CLOSE_H >> 0;
76  var maxH = (WINDOW.height() - MOVIE_MARGIN) >> 0;
77
78  if( h > maxH){
79    h = maxH;//全体の高さ
80    w = MOVIE_W * ((h - MOVIE_NAVI_H - MOVIE_CLOSE_H) / MOVIE_H) >> 0;
81  }
82
83  return {
84    'w' : w,
85    'h' : h,
86    'movieW' : MOVIE_W,
87    'movieH' : MOVIE_H,
88    'closeH' : MOVIE_CLOSE_H,
89    'url' : MOVIE_URL,
90  }
91
92}//getMovieParams
93
94
95/*******************************************************
96
97navi設定
98
99********************************************************/
100const GLOBAL_NAVI_DATA= [
101  { id : 'news', name : 'NEWS', href : 'https://namonaki.jp/news/', target : '_blank', isSmall : false, isComing : false },
102  { id : 'intro', name : 'INTRODUCTION', href : '../#intro', target : '_parent', isSmall : false, isComing : false },
103  { id : 'story', name : 'STORY', href : '../#story', target : '_parent', isSmall : false, isComing : false },
104  { id : 'cast', name : 'CAST', href : '../#cast', target : '_parent', isSmall : false, isComing : false },
105  { id : 'staff', name : 'STAFF', href : '../#staff', target : '_parent', isSmall : false, isComing : false },
106  { id : 'theater', name : 'THEATER', href : 'http://eigakan.org/theaterpage/schedule.php?t=namonaki', target : '_blank', isSmall : false, isComing : false },
107  { id : 'media', name : 'MEDIA', href : 'media.php', target : '_parent', isSmall : false, isComing : false },
108  //{ id : 'dtv', name : 'dTVドラマ', href : 'dtv/', target : '_blank', isSmall : false, isComing : false },
109  // { id : 'twitter', name : '<i class="icon-twitter nav-icon"></i>', href : 'https://twitter.com/namonaki2021', target : '_blank', isSmall : false, isComing : false},
110  // { id : 'instagram', name : '<i class="icon-instagram nav-icon"></i>', href : 'http://instagram.com/namonaki2021', target : '_blank', isSmall : false, isComing : false },
111  // { id : 'comment', name : 'COMMENT', href : '#comment', target : '_parent', isSmall : false, isComing : false },
112  // { id : 'trailer', name : '予告編', href : 'javascript:Main.showMovie(0);', target : '_parent', isSmall : false, isComing : false },
113  // { id : 'about', name : '作品情報', href : 'about.html', target : '_parent', isSmall : false, isComing : false },
114  // { id : 'news', name : '最新情報', href : './news', target : '_blank', isSmall : false, isComing : true },
115  // { id : 'theaters', name : '劇場情報', href : './theaters/', target : '_blank', isSmall : false, isComing : false },
116  // { id : 'facebook', name : '<i class="icon-facebook2 nav-icon"></i>公式Facebook', href : 'https://www.facebook.com/', target : '_blank', isSmall : false, isComing : false },
117  //{ id : 'instagram', name : '<i class="icon-instagram nav-icon"></i>公式Instagram', href : 'https://www.instagram.com/', target : '_blank', isSmall : false, isComing : false },
118  //{ id : 'line', name : '<i class="icon-line nav-icon"></i>公式LINE', href : 'https://line.me/ja/', target : '_blank', isSmall : false, isComing : false },
119];
120
121const GLOBAL_NAVI_IMG_PATH = 'assets/img/common/nav/';
122
123/*******************************************************
124
125navi設定(ドロワー)
126
127********************************************************/
128const DRAWER_NAVI_DATA = GLOBAL_NAVI_DATA;/*[
129  { id : 'about', name : '作品情報', href : 'about.html', target : '_parent', isSmall : false, isComing : false },
130  { id : 'news', name : '最新情報', href : '../news', target : '_blank', isSmall : false, isComing : true },
131  { id : 'theaters', name : '劇場情報', href : '../theaters/', target : '_blank', isSmall : false, isComing : false },
132  { id : 'twitter', name : '<i class="fab fa-twitter nav-icon"></i>公式Twitter', href : 'https://twitter.com/', target : '_blank', isSmall : false, isComing : false},
133  { id : 'facebook', name : '<i class="fab fa-facebook-square nav-icon"></i>公式Facebook', href : 'https://www.facebook.com/', target : '_blank', isSmall : false, isComing : false },
134  { id : 'instagram', name : '<i class="fab fa-instagram nav-icon"></i>公式Instagram', href : 'https://www.instagram.com/', target : '_blank', isSmall : false, isComing : false },
135  { id : 'line', name : '<i class="fab fa-line nav-icon"></i>公式LINE', href : 'https://line.me/ja/', target : '_blank', isSmall : false, isComing : false },
136  { id : 'top', name : 'トップ', href : './', target : '_parent', isSmall : false, isComing : false }
137];*/
138
139const DRAWER_NAVI_IMG_PATH = 'assets/img/common/drawer/';
140
141/*******************************************************
142
143snsボタン設定
144
145********************************************************/
146const SNS_URL = 'https://namonaki.jp';//サイトURL
147
148const SNS_CUSTOM = true;
149
150const tweetTxt = '%E6%98%A0%E7%94%BB%E3%80%8C%20%23%E5%90%8D%E3%82%82%E7%84%A1%E3%81%8D%E4%B8%96%E7%95%8C%E3%81%AE%E3%82%A8%E3%83%B3%E3%83%89%E3%83%AD%E3%83%BC%E3%83%AB%20%E3%80%8D2021%E5%B9%B41%E6%9C%8829%E6%97%A5%EF%BC%88%E9%87%91%EF%BC%89%E5%85%AC%E9%96%8B';

150//テキスト
151const tweetHash = '名も無き,岩田剛典,新田真剣佑';//ハッシュタグ
152
153const fbBtnType = 'button_count';// standard or box_count or button_count or button
154const fbBtnWidth = 80;
155const fbBtnSize = 'small';// small or large
156const fbAppId = '328319031707320';
157const fbAppVer = '2.10';
158const fbAction = 'like';// like or recommend
159const fbShowFace = false;
160const fbShare = false;
161
162const SNS_DATA =[
163  { id: 'twitter', text: tweetTxt, hash: tweetHash },//tweetボタン
164  { id: 'facebook-like', type: fbBtnType, size: fbBtnSize, width: fbBtnWidth, appId: fbAppId, appVer: fbAppVer, action: fbAction, showFace: fbShowFace, share: fbShare },//facebook Likeボタン
165  { id: 'line-share' },//Line シェアボタン
166  //{ id: 'line-like' },//Line いいねボタン
167  //{ id: 'google' , size : 'medium' , isCount:'none' },//google plusoneボタン
168];
169
170
171/*******************************************************
172
173banner設定
174
175********************************************************/
176const BANNER_IMG_PATH = 'assets/img/bnr/';
177const BANNER_DATA = [
178  { src: 'letter.jpg', href: 'letter/', alt: 'ご鑑賞頂いた皆様へ（ネタバレあり）' },
179  { src: 'buzzes.jpg', href: 'https://www.cp.buzzes.jp/movies/namonaki/', alt: '期待感想投稿キャンペーン' },
180  // { src: 'dtv.jpg', href: 'dtv/', alt: 'dtv独占配信' },
181  // { src: '0.jpg', href: 'URLURL', alt: 'バナー1' }
182];
183
184
185
186/**************************************************************************************************************
187
188
189Common
190
191
192***************************************************************************************************************/
193const Common = ( function() {
194
195  /*--------------------------
196  nav
197  --------------------------*/
198  var _scrollPosition;
199  var _isOpenDrawer = false;
200  var drawerContainer = $('#drawer-container');
201
202  /*******************************************************
203
204  @init
205
206  ********************************************************/
207  function init() {
208
209		//右クリック禁止
210		if($('body').hasClass('protect')){
211			$('body').on('contextmenu',function(e){
212        return false;
213    	});
214		}
215
216    // SNS小窓
217    openSnsWindow();
218
219    /*--------------------------
220    nav
221    --------------------------*/
222    navInit();
223
224  }//init
225/*******************************************************
226
227  @navInit
228
229  ********************************************************/
230 function navInit() {
231
232  $('#drawer-btn').on('click', function(){
233    if(!_isOpenDrawer){
234      showDrawer();
235    }else{
236      hideDrawer();
237    }
238  });
239
240  $(window).on('load', function(){
241    //固定メニュー
242    $('#nav-trailer').on('click', function(){
243      watchMovie();
244    });//click
245  });//load
246
247}
248
249/*******************************************************
250
251showDrawer
252
253********************************************************/
254function showDrawer(){
255
256  //アニメーションが終わるまでtouchイベントを禁止する
257  $(window).on('touchmove.noScroll', function(e) {
258    e.preventDefault();
259  });
260
261  //naviを開いたときのスクロール量を取得
262  _scrollPosition = $(window).scrollTop();
263
264  $('.drawer-nav-btn').on('click', function(){
265    hideDrawer();
266    var id = $(this).attr("href");
267    var position = $(id).offset().top;
268    $("html, body"). animate({
269        "scrollTop": position
270    }, 500);
271    return false;
272  });
273
274  //drawer-btnにclassをふってアニメーションさせる
275  $('.drawer-line').addClass('open');
276
277  //drawer全体のアニメーション
278  drawerContainer.css({'display':'block'}).stop().animate({'opacity': 1},600,'easeOutQuart',function() {
279
280    //touchイベント禁止解除
281    $(window).off('.noScroll');
282
283    onShowDrawer();
284
285  });
286
287}//showDrawer
288
289
290function onShowDrawer(){
291  _isOpenDrawer = true;
292}
293
294
295/*******************************************************
296
297hideDrawer
298
299********************************************************/
300function hideDrawer(){
301
302  //アニメーションが終わるまでtouchイベントを禁止する
303  $(window).on('touchmove.noScroll', function(e) {
304    e.preventDefault();
305  });
306
307  //naviを開いたときの場所までスクロール
308  // $(window).scrollTop(_scrollPosition);
309
310  //drawer-btnにclassをふってアニメーションさせる
311  $('.drawer-line').removeClass('open');
312
313  //naviアニメーション
314  drawerContainer.stop().animate({'opacity' : 0},600,'easeOutQuart',function(){
315
316    $(this).css({'display':'none'});
317
318    //touchイベント禁止解除
319    $(window).off('.noScroll');
320
321    onHideDrawer();
322
323  });
324
325}//hideDrawer
326
327function onHideDrawer(){
328
329  _isOpenDrawer = false;

330
331}
332
333/*****************************************
334
335@get Is Top
336
337*****************************************/
338function getIsTop(){
339
340  if($('body').attr('id') == 'top'){
341    return true;
342  }else{
343    return false;
344  }
345
346}//getIsTop
347
348  /*******************************************************
349
350  @openSnsWindow
351
352  ********************************************************/
353  function openSnsWindow() {
354
355    var widthHalf = window.screen.width / 2,
356    heightHalf = window.screen.height / 2,
357    blankWindowWidth = 510,   // 別窓の横幅
358    blankWindowHeight = 510,  // 別窓の縦幅
359    options = { // 後ほど記載する window.open の第３引数で使用する
360      left  : Math.floor(widthHalf - (blankWindowWidth / 2)),   // 別窓の X座標
361      top   : Math.floor(heightHalf - (blankWindowHeight / 2)), // 別窓の Y座標
362      width : blankWindowWidth,
363      height: blankWindowHeight
364    };
365
366    $(document).on('click', '.share-link-btn', function(event) {
367     // if(window.innerWidth < 768) return;
368      event.preventDefault();
369      var thisHref = $(this).attr('href'),
370      arg = 'left=' + options.left
371      + ',top=' + options.top
372      + ',width=' + options.width
373      + ',height=' + options.height;
374
375      window.open(thisHref, 'blankShareWindow', arg);
376    });
377
378  }
379
380  /*---------------------------------------------
381  PRIVATE
382  ---------------------------------------------*/
383  function render(){
384    window.requestAnimationFrame(render);
385    if(_stats){ _stats.update(); }
386  }
387
388
389  /*---------------------------------------------
390  @STATS
391  ---------------------------------------------*/
392  function initStats(){
393    _stats = new Stats();
394    _stats.domElement.style.position = 'fixed';
395    _stats.domElement.style.left = '0px';
396    _stats.domElement.style.top = '0px';
397    document.body.appendChild(_stats.domElement);
398
399		var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
400		window.requestAnimationFrame = requestAnimationFrame;
401
402		render();
403	}
404
405  return{
406    init:init,
407    initStats:initStats,
408    getIsTop:getIsTop
409  }
410
411
412})();
413
414
415/*******************
416@ready
417*******************/
418Common.init();