https://www2.myjcom.jp/tv/assets/js/tv-common.js

1/**
2 *  @file 共通 設定
3 */
4window.jp = {};
5window.jp.myjcom = {};
6window.jp.myjcom.www2 = {};
7window.jp.myjcom.www2.tv = {};
8window.jp.myjcom.www2.tv.common = {};
9
10// 共通の slick 設定値
11window.jp.myjcom.www2.tv.common.slickOptions = {
12  // ヒーローエリア用
13  hero: {
14    autoplay: true,
15    autoplaySpeed: 4000,
16    speed: 400,
17    dots: true,
18    arrows: true,
19    infinite: true,
20    pauseOnHover: true,
21    // *----両サイドを表示----*/
22    centerMode: true,
23    centerPadding: 0,
24    // *----------------------*/
25    slidesToShow: 1,
26    slidesToScroll: 1,
27    variableWidth: true,
28    responsive: [
29      {
30        breakpoint: 767,
31        settings: {
32          arrows: false,
33          centerMode: false,
34          centerPadding: 0,
35          slidesToShow: 1,
36          slidesToScroll: 1,
37          variableWidth: false,
38        },
39      },
40      {
41        breakpoint: 940,
42        settings: {
43          variableWidth: true,
44        },
45      },
46    ],
47  },
48  fadeHero: {
49    autoplay: true,
50    autoplaySpeed: 4000,
51    arrows: false,
52    dots: false,
53    fade: true,
54    speed: 500,
55  },
56  // PC, TAB レイアウト時のみ Slick を適用
57  slickOnlyPcAndTab: {
58    centerMode: true,
59    infinite: true,
60    pauseOnFocus: false,
61    pauseOnHover: false,
62    variableWidth: true,
63    responsive: [
64      {
65        breakpoint: 767,
66        settings: 'unslick',
67      },
68      {
69        breakpoint: 1119,
70        settings: {
71          arrows: true,
72        },
73      },
74      {
75        breakpoint: 1920,
76        settings: {
77          arrows: true,
78        },
79      },
80    ],
81  },
82  // 通常の slick オプション
83  slickNormal: {
84    arrows: true,
85    autoplay: true,
86    autoplaySpeed: 4000,
87    speed: 400,
88    centerMode: true,
89    dots: false,
90    infinite: true,
91    pauseOnFocus: false,
92    pauseOnHover: false,
93    slidesToShow: 5,
94    variableWidth: true,
95    responsive: [
96      {
97        breakpoint: 767,
98        settings: {
99          arrows: false,
100        },
101      },
102    ],
103  },
104  // キャンペーン用
105  campaign: {
106    centerMode: false,
107    dots: true,
108    infinite: true,
109    initialSlide: 0,
110    pauseOnFocus: false,
111    pauseOnHover: false,
112    slidesToShow: 1,
113    slidesToScroll: 1,
114    variableWidth: true,
115    responsive: [
116      {
117        breakpoint: 767,
118        settings: {
119          arrows: false,
120					centerMode: true,
121					initialSlide: 0,
122        },
123      },
124      {
125        breakpoint: 1119,
126        settings: {
127          arrows: true,
128          centerMode: true,
129          initialSlide: 1,
130        },
131      },
132    ],
133  },
134  // PC, TAB レイアウト時のみ 2枚センター
135  slickOnlySP: {
136    centerMode: true,
137    infinite: false,
138    pauseOnFocus: false,
139    pauseOnHover: false,
140    variableWidth: true,
141    slidesToShow: 2,
142    arrows: false,
143    responsive: [
144      {
145        breakpoint: 767,
146        settings: {
147          arrows: false,
148          infinite: true,
149          slidesToShow: 1,
150        },
151      },
152      {
153        breakpoint: 1119,
154        settings: {
155        },
156      },
157      {
158        breakpoint: 1920,
159        settings: {
160
161        },
162      },
163    ],
164  },
165  // 1枚
166  slickOnlyOne: {
167    centerMode: true,
168    infinite: true,
169    pauseOnFocus: false,
170    pauseOnHover: false,
171    variableWidth: true,
172    slidesToShow: 1,
173  },
174  //
175};
176
177/**
178 * getHeaderHeight
179 * ナビゲーション表示のためにヘッダの高さを返す

180 * sp と tab/pc によって取得する dom が変わる
181 * @return {number} px
182 */
183window.jp.myjcom.www2.tv.common.getHeaderHeight = function() {
184  const isSpLayout = $(window).width() < 768;
185  return isSpLayout
186    ? $('.p-header_main').outerHeight()
187    : $('.p-header').outerHeight();
188};
189
190/**
191 * ua
192 * ua を小文字で返す
193 * @return {string} ua
194 */
195window.jp.myjcom.www2.tv.common.ua = function() {
196  return navigator.userAgent.toLowerCase();
197};
198
199/**
200 * isWebview
201 * 特定の文字列で webview かどうか判定
202 * @return {boolean}
203 */
204window.jp.myjcom.www2.tv.common.isWebview = function() {
205  const ua = window.jp.myjcom.www2.tv.common.ua();
206  return ua.indexOf('jcomappcx') !== -1;
207};
208
209window.jp.myjcom.www2.tv.common.isIphone = function() {
210  const ua = window.jp.myjcom.www2.tv.common.ua();
211  return ua.indexOf('iphone') !== -1 || ua.indexOf('ipod') !== -1;
212};
213
214window.jp.myjcom.www2.tv.common.isAndroidMobile = function() {
215  const ua = window.jp.myjcom.www2.tv.common.ua();
216  return ua.indexOf('android') !== -1 && ua.indexOf('mobile') !== -1;
217}
218
219window.jp.myjcom.www2.tv.common.isSp = function() {
220  return window.jp.myjcom.www2.tv.common.isAndroidMobile()
221    || window.jp.myjcom.www2.tv.common.isIphone();
222};
223
224/**
225 * slickInit
226 * slick のレイアウト崩れを防ぐために slick 実行後に表示
227 * @param {array} $targets slick を適用するターゲットの class の配列
228 */
229window.jp.myjcom.www2.tv.common.slickInit = function($targets) {
230  $targets.forEach(function($target) {
231    $target.on('init', function() {
232      $target.find('.c-card_title').matchHeight();
233      $target.removeClass('is-hidden');
234      $target.parent().removeClass('loading');
235    });
236  });
237};
238
239/**
240 * モーダル開閉
241 */
242$(function() {
243  $('.js-show-modal').on('click', function(e) {
244    const modalId = $(e.target).data('modal-id');
245    $('#' + modalId).attr('aria-hidden', 'false');
246    MicroModal.show(modalId);
247    return false;
248  });
249
250  $('.js-close-modal').on('click', function(e) {
251    const modalId = $(e.target).data('modal-close');
252    $('#' + modalId).attr('aria-hidden', 'true');
253    setTimeout(function() {
254      MicroModal.close(modalId);
255    }, 200);
256    return false;
257  });
258});
259
260/**
261 * ページヘッダーナビゲーション開閉
262 */
263$(function() {
264  $(document).on('click', '.js-show-headerNavigation', function() {
265    if ($('.js-page-header').hasClass('is-fixed')) {
266      // ページヘッダが fixed していたらオリジナルとコピーしたページヘッダの両方を操作
267      $('.js-show-headerNavigation').toggleClass('is-active');
268      $('.p-pageHeader_navigation').toggleClass('is-active');
269    } else {
270      // ページヘッダが通常状態ではオリジナルのページヘッダのみを操作
271      $('.l-main').find('.js-show-headerNavigation').toggleClass('is-active');
272      $('.l-main').find('.p-pageHeader_navigation').toggleClass('is-active');
273    }
274  });
275
276  $(document).on('click', '.js-close-genre', function() {
277    $('.js-show-headerNavigation').removeClass('is-active');
278    $('.p-pageHeader_navigation').removeClass('is-active');
279  });
280});
281
282$(function() {
283  /**
284   * 指定位置までスクロースさせる
285   * @param {Number} position - スクロール位置
286   */
287  function scrollTo(position) {
288    const scrollTop = $(window).scrollTop();
289    let time = Math.abs(scrollTop - position) * 0.7;
290    if (time <= 600) {
291      time = 600;
292    }
293    if (time >= 1300) {
294      time = 1300;
295    }
296    time /= 1000;
297
298    $('body, html').animate({ scrollTop: position }, 500, 'swing');
299  }
300
301  function scrollToHandler() {
302    const $target = $(this);
303    const marker = $target.attr('data-scroll-target');
304    const $marker = marker === '#' ? null : $(marker);
305    let position = marker === '#' ? 0 : $marker.offset().top;
306    let offset1 = 0;
307    let offset2 = 0;
308
309    $($target.attr('data-scroll-offset-target')).each(() => {
310      offset1 += $(this).height();
311    });
312
313    if ($target.attr('data-scroll-offset') !== undefined) {
314      offset2 = parseInt($target.attr('data-scroll-offset'), 10);
315    }
316
317    if ($target.attr('data-scroll-target-bottom') !== undefined) {
318      position += $marker.outerHeight();
319    }
320
321    position = position - offset1 - offset2;
322    scrollTo(position);
323
324    return false;

325  }
326
327  $('.js-scroll').on('click', scrollToHandler);
328});
329
330/*--------------------------------------------------------------
331
332  weska追加
333
334--------------------------------------------------------------*/
335function trace(val){
336 //	console.log(val);
337  //window.alert(val);
338}
339$(function() {
340  // 右クリック禁止
341  $('body').on("contextmenu",function(){
342    return false;
343  });
344  
345  // 外部ページからアンカーリンク遷移のずれ対応
346	if(2<location.hash.length){	// #以降に何かあれば以下を実行
347		setTimeout(function(){
348			moveHashLink();
349		},1000);
350	}
351  
352	//	できることガイドのメニュー読み込み
353	//	詳細は開かないで直接リンクに変更　2023/5/29
354	//loadUsefulGuideMenu(); 
355	
356});
357
358/*--------------------------------------------------------------
359	できることガイドのメニュー読み込み
360--------------------------------------------------------------*/
361function loadUsefulGuideMenu(){
362	trace("できることガイドのメニュー読み込み");
363	
364	// 表示ドメイン
365	var isStage = (location.hostname.match(/stage/)) ? true : false;
366	var isMyjcom = (location.hostname.match(/www2.myjcom.jp/)) ? true : false;
367	var isFunJTop = (location.hostname.match(/www.myjcom.jp/)) ? true : false;
368	
369	trace("isStage "+isStage);
370	trace("isMyjcom "+isMyjcom);
371	trace("isFunJTop "+isFunJTop);
372	
373	var domain = "";
374	if(isFunJTop){
375		 if(isStage){
376			 domain = "https://stage-www2.myjcom.jp";
377		 }else{
378			 domain = "https://www2.myjcom.jp";
379		 }
380	}else{
381		//domain = "http://myjcom:8888";
382	}
383	
384	var file = domain+'/useful-guide/common/include/guide_linklist/guide_linklist.shtml';
385	
386	var contentHTML;
387	$.ajax(file, {
388			timeout : 1000, // 1000 ms
389			datatype:'html'
390	}).then(function(data){
391		contentHTML = $($.parseHTML(data));//parse
392		loadUsefulGuideMenuComplete();
393	},function(jqXHR, textStatus) {
394			if(textStatus!=="success") {
395		//	エラー
396			}
397	});
398	
399	function loadUsefulGuideMenuComplete(){
400		trace("---------- loadUsefulGuideMenuComplete 読み込み完了 ");
401		//trace(contentHTML);
402		
403		var len = contentHTML.find('.box a').length;
404		for(var i=0;i<len;i++){
405			var href = domain+contentHTML.find('.box a:eq('+i+')').attr('href');
406			contentHTML.find('.box a:eq('+i+')').attr('href',href);
407			//trace(href);
408		}//	for
409
410		$('.useful_guide_menu').html(contentHTML);
411	}
412	
413	
414}//	loadUsefulGuideMenu
415/*--------------------------------------------------------------
416
417  スライダーHTML
418
419--------------------------------------------------------------*/
420function htmlTagGenerater(data) {
421    var dom = '<div class="c-slickScrollList_item">';
422		var onclick_tag = ' onclick="s.jcomCustomLinkTrack({\'trackValue\':this.href});"';
423    var deactive_link = "";
424    if (typeof(data.hasNextBroadcast) !== 'undefined') {
425      if(!data.hasNextBroadcast){
426        deactive_link = ' deactive_link';
427      }
428    }
429
430    var target = "";
431    if (typeof(data.target) !== 'undefined') {
432      target = ' target="_blank"';
433    }
434
435    if (typeof(data.linkUrl) !== 'undefined') {
436			if(data.linkUrl == ""){
437				deactive_link = ' deactive_link';
438				onclick_tag = '';
439			}
440			
441      if (data.blank == 'blank') {
442        dom += '<a href="' + data.linkUrl + '" class="c-card'+deactive_link+'"'+target+onclick_tag+' target="_blank">';
443      }else{
444        dom += '<a href="' + data.linkUrl + '" class="c-card'+deactive_link+'"'+target+onclick_tag+'>';
445      }
446      
447    }
448
449    if (typeof(data.imageUrl) !== 'undefined') {
450      dom += '<div class="c-card_imageWrapper"><img class="c-card_image" src="' + data.imageUrl + '" alt="' + data.title + '"></div>';
451    }
452
453    if (typeof(data.ranking) !== 'undefined') {
454      dom += '<p class="ranking"><i class="icon-rank"></i>' + data.ranking + '位</p>';
455    }
456
457    if (typeof(data.type) !== 'undefined') {
458      dom += data.type;
459    }
460
461    dom += '<h3 class="c-card_title">'+ data.title + '</h3>';
462
463    if (typeof(data.date) !== 'undefined') {
464      dom += '<p class="c-card_text">' + data.date + '</p>';
465    }
466		if (typeof(data.deliveryDate) !== 'undefined') {
467      dom += '<p class="c-card_text">' + data.deliveryDate + '</p>';
468    }
469
470    if (typeof(data.label) !== 'undefined') {
471      dom += '<p class="c-card_text"><span class="c-label c-label-gray">' + data.label + '</span></p>';
472    }
473
474    if (typeof(data.linkUrl) !== 'undefined') {
475      dom += '</a>';
476    }
477
478    if (typeof(data.jmagazineUrl) !== 'undefined') {
479      if(data.jmagazineUrl){
480        dom += '<div class="jmagazine_link"><a href="' + data.jmagazineUrl + '" target="_blank">作品をもっと詳しく<i class="icon-blank"></i><br><span class="by">powered by <span class="bold">J:magazine!</span></span></a></div>';
481      }
482    }
483
484    dom += '</div>';
485
486    return dom;
487}
488
489/*--------------------------------------------------------------
490
491  日付けフォーマット
492
493--------------------------------------------------------------*/
494var formatDate = function (date, format) {
495  var weektabl = new Array("日","月","火","水","木","金","土");
496  var week = weektabl[(new Date(date)).getDay()];
497
498  if (!format) format = 'YYYY-MM-DD hh:mm:ss.SSS';
499  format = format.replace(/YYYY/g, date.getFullYear());
500  format = format.replace(/MM/g, ('0' + (date.getMonth() + 1)).slice(-2));
501  format = format.replace(/DD/g, ('0' + date.getDate()).slice(-2));
502  format = format.replace(/hh/g, ('0' + date.getHours()).slice(-2));

503  format = format.replace(/mm/g, ('0' + date.getMinutes()).slice(-2));
504  format = format.replace(/ss/g, ('0' + date.getSeconds()).slice(-2));
505  format = format.replace(/W/g, (week));
506
507  if (format.match(/S/g)) {
508    var milliSeconds = ('00' + date.getMilliseconds()).slice(-3);
509    var length = format.match(/S/g).length;
510  for (var i = 0; i < length; i++) format = format.replace(/S/, milliSeconds.substring(i, i + 1));
511  }
512  return format;
513};
514
515
516function getDatestrSingle(datestr){
517  var month = datestr.split('月')[0];
518  var day = datestr.split('月')[1].split('日')[0];
519
520}
521
522
523/*--------------------------------------------------------------
524  コピーライトに追加
525--------------------------------------------------------------*/
526function addCopyrightSection(copyright){
527  if(copyright){
528    $('.l-footer .p-footer_copyrights').append(copyright+' ');
529  }
530}
531/*--------------------------------------------------------------
532	重複を削除してコピーライト追加
533--------------------------------------------------------------*/
534function setAndAddCopyright(list){
535	var copyrightList = Array.from(new Set(list));
536	var len = copyrightList.length;
537	for(var i=0;i<len;i++){
538		addCopyrightSection(copyrightList[i]);
539	}//	for
540}
541
542
543/*--------------------------------------------------------------
544
545  ログイン
546
547--------------------------------------------------------------*/
548
549var userAreaID_d13n56ac ="";//header以外にも使いたいのでグローバル化。さらに他と被らないように接尾辞追加。
550var userAreaName_d13n56ac;
551
552$(function() {
553
554  //user地域データ取得
555  function userData(){
556
557//    jQuery.cookie("area_id",12);
558//    jQuery.cookie("jcom_name",'国立市');
559//    jQuery.cookie("islogin",false);
560//
561//    $.removeCookie("area_id");
562//    $.removeCookie("jcom_name");
563//    $.removeCookie("islogin");
564
565    var aid = jQuery.cookie("area_id");
566    //var jName = decodeURIComponent(jQuery.cookie("jcom_name")||'J:COM 東京');
567    userAreaName_d13n56ac = decodeURIComponent(jQuery.cookie("jcom_name")||'未設定');
568
569    trace("tv_common userAreaName_d13n56ac "+userAreaName_d13n56ac);
570
571
572    var isLoginCookie = jQuery.cookie("islogin");
573    $('.area_select_link .userArea').text(userAreaName_d13n56ac);
574
575    // trace("area_id "+jQuery.cookie("area_id"));
576    // trace("jcom_name "+jQuery.cookie("jcom_name"));
577    // trace("islogin "+jQuery.cookie("islogin"));
578
579    //isLoginCookie = true;
580    //    trace("isLoginCookie "+isLoginCookie);
581    //    trace("URL "+window.location.href);
582
583    var thisPageURL = encodeURIComponent(window.location.href.split('?')[0]);
584
585    if(isLoginCookie == 'true'){
586      //trace("ログイン時");
587      $('.area_select_link').addClass('deactive_link');
588      //$('div.ps-footer > p > a').attr('href', 'https://c.myjcom.jp/tvguide_logout.html?page='+thisPageURL);
589      $('div.ps-footer > p > a').attr('href', 'https://c.myjcom.jp/logout.html?page='+thisPageURL);
590      $('.js_login_btn').hide();
591      
592      if($('.no_login_page')[0]){
593        $('.js_logout_btn').hide();
594      }else{
595        $('.js_logout_btn').show();
596      }
597    }else{
598      //trace("ログイン前");
599      $('.area_select_link').removeClass('deactive_link');
600
601      //bodyに no_login_page クラスがある場合はログインボタンは非表示　2025/3/6
602      if($('.no_login_page')[0]){
603        $('.js_login_btn').hide();
604        $('.js_logout_btn').hide();
605      }else{
606        //$('.js_login_btn a').attr('href', 'https://c.myjcom.jp/tv_login.html?return_child=1&returnurl='+thisPageURL);
607        $('.js_login_btn a').attr('href', 'https://c.myjcom.jp/login.html?return_child=1&returnurl='+thisPageURL);
608        $('.js_login_btn').show();
609      }
610    }
611    if(!aid){
612      //初期設定していない場合は練馬の108を指定
613      userAreaID_d13n56ac = 108;
614    }else{
615      userAreaID_d13n56ac = aid;
616    }
617
618  }
619
620  userData();
621
622
623  //  loading
624  if($('.c-block_body .is-hidden')[0]){
625    $('.c-block_body .is-hidden').parents('.c-block_body').addClass('loading');
626  }
627
628});
629
630/*--------------------------------------------------------------
631
632	moveHashLink
633
634--------------------------------------------------------------*/
635function moveHashLink(){
636  
637  //console.log('moveHashLink------------------');
638
639	var target_hash = location.hash;
640	var target = $(target_hash);
641  var adjust = $('.fixedHeader').height();
642
643	if (target.length) {
644		var scldurat = 0;
645    //var offH = (isPC) ? 80 : 0;
646    var targetOffset = target.offset().top - adjust;
647    //if(isMobile) targetOffset -= 40;
648    $('html,body').animate({scrollTop: targetOffset}, {duration: scldurat/*, easing: "easeOutExpo"*/});
649
650		return false;

651	}
652
653}