https://www.idol-showtime.com/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
32movie設定
33
34********************************************************/
35const MOVIE_W = 853;//デフォルトの横幅
36const MOVIE_H = 480;//デフォルトの縦幅
37const MOVIE_MARGIN = 50;//左右のマージン
38const MOVIE_NAVI_BTN_H = 40;//ナビのボタンの高さ
39const MOVIE_NAVI_BTN_LINE = 1;//何列か
40const MOVIE_NAVI_H = MOVIE_NAVI_BTN_H * MOVIE_NAVI_BTN_LINE;//ナビの高さ(デフォルト50)
41const MOVIE_CLOSE_H = 32;//閉じるボタンの高さ
42const MOVIE_URL = 'movie/index.html';
43const MOVIE_ID_ARR = [
44  { name: '動画1', id: 'XmjG7W2pRUk', width: '50%', height: MOVIE_NAVI_BTN_H },
45  { name: '動画1', id: 'XmjG7W2pRUk', width: '50%', height: MOVIE_NAVI_BTN_H }
46];
47
48
49
50/*-------------------------------
51@getMovieParams
52--------------------------------*/
53function getMovieParams() {
54
55  var w = (WINDOW.width() - MOVIE_MARGIN) >> 0;
56  var h = MOVIE_H * (w / MOVIE_W) + MOVIE_NAVI_H + MOVIE_CLOSE_H >> 0;
57  var maxH = (WINDOW.height() - MOVIE_MARGIN) >> 0;
58
59  if( h > maxH){
60    h = maxH;//全体の高さ
61    w = MOVIE_W * ((h - MOVIE_NAVI_H - MOVIE_CLOSE_H) / MOVIE_H) >> 0;
62  }
63
64  return {
65    'w' : w,
66    'h' : h,
67    'movieW' : MOVIE_W,
68    'movieH' : MOVIE_H,
69    'closeH' : MOVIE_CLOSE_H,
70    'url' : MOVIE_URL,
71  }
72
73}//getMovieParams
74
75
76/**************************************************************************************************************
77
78
79Common
80
81
82***************************************************************************************************************/
83const Common = ( function() {
84
85  /*--------------------------
86  nav
87  --------------------------*/
88  var _scrollPosition;
89  var _isOpenDrawer = false;
90  var drawerContainer = $('#drawer-container');
91
92  /*******************************************************
93
94  @init
95
96  ********************************************************/
97  function init() {
98
99		//右クリック禁止
100		if($('body').hasClass('protect')){
101			$('body').on('contextmenu',function(e){
102        return false;
103    	});
104		}
105
106    // SNS小窓
107    openSnsWindow();
108
109
110    /*--------------------------
111    nav
112    --------------------------*/
113    navInit();
114
115  }//init
116
117
118  /*******************************************************
119
120  @navInit
121
122  ********************************************************/
123 function navInit() {
124
125  $('#drawer-btn').on('click', function(){
126    if(!_isOpenDrawer){
127      showDrawer();
128    }else{
129      hideDrawer();
130    }
131  });
132
133  $(window).on('load', function(){
134    //固定メニュー
135    $('#nav-trailer').on('click', function(){
136      watchMovie();
137    });//click
138  });//load
139
140}
141
142/*******************************************************
143
144showDrawer
145
146********************************************************/
147function showDrawer(){
148
149  //アニメーションが終わるまでtouchイベントを禁止する
150  $(window).on('touchmove.noScroll', function(e) {
151    e.preventDefault();
152  });
153
154  //naviを開いたときのスクロール量を取得
155  _scrollPosition = $(window).scrollTop();
156
157  //drawer-btnにclassをふってアニメーションさせる
158  $('.drawer-line').addClass('open');
159
160  //各メニュークリックでdrawerを閉じる

161  /*$('.drawer-nav-btn').on('click', function(){
162    hideDrawer();
163  });*/
164
165  //drawer全体のアニメーション
166  drawerContainer.css({'display':'block'}).stop().animate({'opacity': 1},600,'easeOutQuart',function() {
167
168    //touchイベント禁止解除
169    $(window).off('.noScroll');
170
171    onShowDrawer();
172
173  });
174
175}//showDrawer
176
177
178function onShowDrawer(){
179  _isOpenDrawer = true;
180}
181
182
183/*******************************************************
184
185hideDrawer
186
187********************************************************/
188function hideDrawer(){
189
190  //アニメーションが終わるまでtouchイベントを禁止する
191  $(window).on('touchmove.noScroll', function(e) {
192    e.preventDefault();
193  });
194
195  //drawer-btnにclassをふってアニメーションさせる
196  $('.drawer-line').removeClass('open');
197
198  //naviアニメーション
199  drawerContainer.stop().animate({'opacity' : 0},600,'easeOutQuart',function(){
200
201    $(this).css({'display':'none'});
202
203    //touchイベント禁止解除
204    $(window).off('.noScroll');
205
206    onHideDrawer();
207
208  });
209
210}//hideDrawer
211
212function onHideDrawer(){
213
214  _isOpenDrawer = false;
215
216}
217
218/*****************************************
219
220@get Is Top
221
222*****************************************/
223function getIsTop(){
224
225  if($('body').attr('id') == 'top'){
226    return true;
227  }else{
228    return false;
229  }
230
231}//getIsTop
232
233  /*******************************************************
234
235  @openSnsWindow
236
237  ********************************************************/
238  function openSnsWindow() {
239
240    var widthHalf = window.screen.width / 2,
241    heightHalf = window.screen.height / 2,
242    blankWindowWidth = 510,   // 別窓の横幅
243    blankWindowHeight = 510,  // 別窓の縦幅
244    options = { // 後ほど記載する window.open の第３引数で使用する
245      left  : Math.floor(widthHalf - (blankWindowWidth / 2)),   // 別窓の X座標
246      top   : Math.floor(heightHalf - (blankWindowHeight / 2)), // 別窓の Y座標
247      width : blankWindowWidth,
248      height: blankWindowHeight
249    };
250
251    $(document).on('click', '.share-link-btn', function(event) {
252     // if(window.innerWidth < 768) return;
253      event.preventDefault();
254      var thisHref = $(this).attr('href'),
255      arg = 'left=' + options.left
256      + ',top=' + options.top
257      + ',width=' + options.width
258      + ',height=' + options.height;
259
260      window.open(thisHref, 'blankShareWindow', arg);
261    });
262
263  }
264
265  /*---------------------------------------------
266  PRIVATE
267  ---------------------------------------------*/
268  function render(){
269    window.requestAnimationFrame(render);
270    if(_stats){ _stats.update(); }
271  }
272
273
274  /*---------------------------------------------
275  @STATS
276  ---------------------------------------------*/
277  function initStats(){
278    _stats = new Stats();
279    _stats.domElement.style.position = 'fixed';
280    _stats.domElement.style.left = '0px';
281    _stats.domElement.style.top = '0px';
282    document.body.appendChild(_stats.domElement);
283
284		var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
285		window.requestAnimationFrame = requestAnimationFrame;
286
287		render();
288	}
289
290  return{
291    init:init,
292    initStats:initStats
293  }
294
295
296})();
297
298
299/*******************
300@ready
301*******************/
302Common.init();
303/*******************************************************
304
305@getParam
306
307********************************************************/
308function getParam(name, url) {
309  if (!url) url = window.location.href;
310  name = name.replace(/[\[\]]/g, "\\$&");
311  let regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
312      results = regex.exec(url);
313  if (!results) return null;
314  if (!results[2]) return '';
315  return decodeURIComponent(results[2].replace(/\+/g, " "));
316}