https://hicbc.com/magazine/content/themes/v03/js/func.js

1/*
2	/magazine/content/themes/v03/js/func.pc.js
3	-----
4	ver. 3.0
5	update: 2024/06/01
6	Copyright: CBC TELEVISION CO.,LTD. All rights Reserved.
7	-----
8	[Revision]
9	ver. 3.0 [2024/06/01]
10*/
11
12// $(function(){
13
14
15// 	$('a[href^="#"]').click(function(){
16// 		let adjust = 50;
17// 		let speed = 400;
18// 		let href= $(this).attr('href');
19// 		let target = $((href == '#' || href == '') ? 'html' : href);
20// 		let pos = target.offset().top - adjust;
21// 		$('body,html').animate({scrollTop:pos}, speed, 'swing');
22// 		return false;
23// 	});
24
25	
26
27// });
28
29
30// ブレイクポイントを定義
31const breakpoints = {
32  mobile: window.matchMedia('(max-width: 767px)'),
33  tablet: window.matchMedia('(min-width: 768px) and (max-width: 1279px)'),
34  desktop: window.matchMedia('(min-width: 1279px)')
35};
36
37// 各ブレイクポイントに対して処理を定義
38function handleBreakpointChange() {
39  smoothScrollToAnchor()
40
41
42  // ランキングのタブ切替処理
43  document.addEventListener('DOMContentLoaded', function() {
44    const tabButtons = document.querySelectorAll('.jsc-rankingTabItem');
45    const tabContents = document.querySelectorAll('.jsc-rankingContent');
46  
47    tabButtons.forEach(button => {
48      button.addEventListener('click', () => {
49        const tabId = button.getAttribute('data-ranking-period');
50  
51        tabButtons.forEach(btn => btn.classList.remove('active'));
52        button.classList.add('active');
53  
54        tabContents.forEach(content => content.classList.remove('active'));
55        document.getElementById(tabId).classList.add('active');
56      });
57    });
58  });
59  
60
61  // ブレイクポイントごとの処理
62  if (breakpoints.mobile.matches) {
63    // console.log("Mobile view");
64  } else if (breakpoints.tablet.matches) {
65    // console.log("Tablet view");
66  } else if (breakpoints.desktop.matches) {
67    // console.log("Desktop view");
68  }
69}
70
71// ブレイクポイントが変わるたびに呼ばれるイベントリスナーを設定
72Object.values(breakpoints).forEach(bp => {
73  bp.addListener(handleBreakpointChange);
74});
75
76// 初期表示のために一度実行
77handleBreakpointChange();
78
79
80
81// アンカーリンクのスムーズスクロールを行う共通関数
82function smoothScrollToAnchor() {
83  const anchorLinks = document.querySelectorAll('a[href^="#"]');
84
85  anchorLinks.forEach(link => {
86    link.addEventListener('click', (event) => {
87      event.preventDefault(); // デフォルトのアンカーリンク動作をキャンセル
88
89      const targetId = link.getAttribute('href');
90      const targetElement = document.querySelector(targetId);
91      console.log(targetId);
92
93      if (targetElement) {
94        smoothScrollTo(targetElement); // カスタムスクロール関数を呼び出し
95      }
96    });
97  });
98}
99
100
101// スムーズスクロールをカスタマイズする関数
102function smoothScrollTo(targetElement) {
103  const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
104  const startPosition = window.pageYOffset;
105  const distance = targetPosition - startPosition;
106  const duration = 1000; // アニメーションの長さ（ミリ秒）
107  let startTime = null;
108
109  // アニメーションの進行を管理するイージング関数
110  function ease(t, b, c, d) {
111    t /= d / 2;
112    if (t < 1) return c / 2 * t * t + b;
113    t--;
114    return -c / 2 * (t * (t - 2) - 1) + b;
115  }
116
117  // スクロールアニメーション
118  function animation(currentTime) {
119    if (startTime === null) startTime = currentTime;
120    const timeElapsed = currentTime - startTime;
121    const run = ease(timeElapsed, startPosition, distance, duration);
122    window.scrollTo(0, run);
123    if (timeElapsed < duration) requestAnimationFrame(animation);
124  }
125
126  // アニメーションを開始
127  requestAnimationFrame(animation);
128}
129
130// Scroll
131// const lenis = new Lenis();
132// function raf(time) {
133//   lenis.raf(time);
134//   requestAnimationFrame(raf);
135// }
136// requestAnimationFrame(raf);
137
138
139// Search for Tag [Vue]
140// ----------
141const app = new Vue({
142  el: '#jsi-tagSearch',
143  data: {
144    loadFlag: false,
145    tag: '',
146    listOrg: [],
147  },
148  computed: {
149    list() {
150      if (this.tag === '') {
151        return [];
152      } else {

153        return this.listOrg.filter(item => item.tag.match(this.tag) !== null)
154      }
155    },
156    formalTag() {
157      return function (tag) {
158        return tag.replace(/^\d+_/g, '')
159      }
160    }
161  },
162  mounted() {
163    fetch('/magazine/assets/tag.list.json')
164      .then( response => response.json())
165      .then(data => {
166        this.listOrg = data;
167        this.loadFlag = true;
168      });
169  },
170})