https://www.billboard-japan.com/common/js/chart_insight/insight/view/chartView.js?date=202510301000

1'use strict';
2
3// リセット。引数(resets)に項目名があればその項目のみ実行し、なければ全て実行。
4app.resetChart = function (...resets) {
5  const resetAll = resets.length <= 0; // 引数がない場合は全てリセット
6
7  if (resetAll || resets.includes('page')) {
8    app.pageNum = 1; // ページ番号リセット
9  }
10
11  if (resetAll || resets.includes('scroll')) {
12    // スクロール位置のリセット
13    const scrTopMgn = 160;
14    let sctWrapPos = $('.ranking-sct-wrap').offset().top - scrTopMgn;
15    if (app.sp) {
16      sctWrapPos = $('.ranking-sct-wrap').offset().top - $('#header > .inner').height() - scrTopMgn;
17      spScrollPos = $('.ranking-sct').scrollLeft();
18    }
19    $win.scrollTop(sctWrapPos);
20  }
21
22  if (resetAll || resets.includes('refine')) {
23    // 作詞家・作曲家・アーティスト名絞り込みのリセット
24    $('.ranking-refine-select').removeClass('-selected');
25    $refineLyricist.prop('selectedIndex', 0);
26    $refineComposer.prop('selectedIndex', 0);
27    $refineArtist.prop('selectedIndex', 0);
28    $('.ranking-sct-cont > .ranking-list').removeClass('-hide');
29    $('.ranking-ttl-wrap').add('.ranking-sct').removeClass('-hide');
30    $('.ranking-sct-nohit').removeClass('-show');
31    $('.-hit').removeClass('-hit');
32  }
33
34  if (resetAll || resets.includes('inview')) {
35    // inviewトリガーのリセット
36    app.inviewFlag = false; // inviewトリガーフラグリセット
37    if (app.kind === 'heatseekers' || (app.type === 2 && app.kind === 'anime')) {
38      $inviewTarget.removeClass('inview');
39    } else {
40      $inviewTarget.addClass('inview');
41    }
42  }
43
44  if (resetAll || resets.includes('table')) {
45    $('.ranking-sct-cont').empty(); // チャートテーブル内の要素を全削除
46  }
47};
48
49// ジャンル(kind)切り替え。※インサイト限定
50function switchKind(kind) {
51  app.kind = kind; // クリックされたボタンに設定された値を元にジャンル切り替え
52  app.datapoint = kind === 'artist' || kind === 'lyricist' || kind === 'composer' ? 'insight_artist' : 'insight_data'; // データポイント変更
53  $('.main-sct-wrap > .tab li').removeClass('active'); // ジャンルメニューから.activeを除去
54  const $li = $(`.main-sct-wrap > .tab [data-id="${kind}"]`).parent(); // 押されたボタンの親要素のliを取得
55  $li.addClass('active'); // 現在のジャンルメニューに.activeを付与
56  $body.removeClass('hot-albums heatseekers -patternB'); // body要素のジャンル別クラスリセット
57  if (app.kind === 'h100' || app.kind === 'anime' || app.kind === 'heatseekers') {
58    if (app.kind === 'h100') $popupTheaderUgc.text('UGC \n※UGCはHot 100を構成する指標に含まれません'); // ポップアップのUGCテキスト変更
59    $refineSection.show();
60    $tableTitle.text('楽曲情報'); // テーブルタイトル変更
61    $seekButton.text('楽曲を探す');
62    $modalTitle.text('♪ 楽曲を探す');
63    $toggleSongButton.text('楽曲').attr('data-switch-artist-song', 'song');
64  } else if (app.kind === 'albums') {
65    $refineSection.hide();
66    $tableTitle.text('楽曲情報'); // テーブルタイトル変更
67    $seekButton.text('アルバムを探す');
68    $modalTitle.text('♪ アルバムを探す');
69    $toggleSongButton.text('アルバム').attr('data-switch-artist-song', 'album');
70  } else if (app.kind === 'artist') {
71    $refineSection.hide();
72    $tableTitle.text('アーティスト名'); // テーブルタイトル変更
73    $popupTheaderUgc.text('UGC \n※UGCはArtist 100を構成する指標に含まれません'); // ポップアップのUGCテキスト変更
74    $seekButton.text('アーティストを探す');
75    $modalTitle.text('♪ アーティストを探す');
76  } else if (app.kind === 'lyricist') {
77    $refineSection.hide();
78    $tableTitle.text('作詞家'); // テーブルタイトル変更
79    $popupTheaderUgc.text('UGC \n※UGCはHot100  Lyricistsを構成する指標に含まれません'); // ポップアップのUGCテキスト変更
80    $seekButton.text('作詞家を探す');
81    $modalTitle.text('♪ 作詞家を探す');
82  } else if (app.kind === 'composer') {
83    $refineSection.hide();
84    $tableTitle.text('作曲家'); // テーブルタイトル変更
85    $popupTheaderUgc.text('UGC \n※UGCはHot100  Composersを構成する指標に含まれません'); // ポップアップのUGCテキスト変更
86    $seekButton.text('作曲家を探す');
87    $modalTitle.text('♪ 作曲家を探す');
88  }
89  if (app.kind === 'anime') {
90    app.type !== 2 && app.type !== 3 && $('#new-member-num').text('20'); // 最下部の「◯位まで閲覧可能（月額：330円）」テキスト変更
91    $popupTheaderUgc.text('UGC \n※UGCはHot Animationを構成する指標に含まれません'); // ポップアップのUGCテキスト変更
92  } else {
93    app.type !== 2 && app.type !== 3 && $('#new-member-num').text('100'); // 最下部の「◯位まで閲覧可能（月額：330円）」テキスト変更
94  }
95  if (app.kind === 'albums') {
96    $body.addClass('hot-albums');
97  }
98  if (app.kind === 'heatseekers') {
99    $body.addClass('heatseekers');
100    $popupTheaderUgc.text('UGC \n※UGCはHeatseekers Songsを構成する指標に含まれません'); // ポップアップのUGCテキスト変更
101  }
102  if (app.kind === 'artist' || app.kind === 'lyricist' || app.kind === 'composer') {
103    $body.addClass('-patternB');
104  }
105}
106
107// 表示期間絞り込みのプルダウンに値を挿入し、最新週を選択状態にする。
108function initPeriod() {
109  const latestYear = Number(yearArray[yearArray.length - 1]); // 最新年

110  const latestMonth = Number(monthArray[monthArray.length - 1].m); // 最新月
111  const lastWeek = dayArray[dayArray.length - 2] || dayArray[0]; // 前週、なければ最初の週
112  const matchMonths = monthArray.filter(function (ele) {
113    return ele.y === latestYear;
114  });
115  const matchDays = dayArray.filter(function (ele) {
116    return ele.y === latestYear && ele.m === latestMonth;
117  });
118  const lastMonths = monthArray.filter(function (ele) {
119    return ele.y === lastWeek.y;
120  });
121  const lastDays = dayArray.filter(function (ele) {
122    return ele.y === lastWeek.y && ele.m === lastWeek.m;
123  });
124
125  for (let i = 0; i < yearArray.length; i++) {
126    let item = `<option value="${yearArray[i]}">${yearArray[i]}å¹´</option>`;
127    $('.w_year').append(item);
128  }
129  for (let i = 0; i < matchMonths.length; i++) {
130    let item = `<option value="${matchMonths[i].m}">${matchMonths[i].m}月</option>`;
131    $('#period-week-month').append(item);
132    $('#period-to-month').append(item);
133  }
134  for (let i = 0; i < matchDays.length; i++) {
135    let item = `<option value="${matchDays[i].v}">${matchDays[i].d}</option>`;
136    $('#period-week-day').append(item);
137    $('#period-to-day').append(item);
138  }
139  for (let i = 0; i < lastMonths.length; i++) {
140    let itemMonth = `<option value="${lastMonths[i].m}">${lastMonths[i].m}月</option>`;
141    $('#period-from-month').append(itemMonth);
142  }
143  for (let i = 0; i < lastDays.length; i++) {
144    let item = `<option value="${lastDays[i].v}">${lastDays[i].d}</option>`;
145    $('#period-from-day').append(item);
146  }
147
148  $('.w_year').each(function () {
149    $(this)
150      .find('option')
151      .eq(yearArray.length - 1)
152      .prop('selected', true);
153  });
154  $('.w_month').each(function () {
155    $(this)
156      .find('option')
157      .eq(matchMonths.length - 1)
158      .prop('selected', true);
159  });
160  $('.w_week').each(function () {
161    $(this)
162      .find('option')
163      .eq(matchDays.length - 1)
164      .prop('selected', true);
165  });
166  $('#period-from-year').find(`option[value="${lastWeek.y}"]`).prop('selected', true);
167  $('#period-from-month').find(`option[value="${lastWeek.m}"]`).prop('selected', true);
168  $('#period-from-day').find(`option[value="${lastWeek.v}"]`).prop('selected', true);
169}
170
171// 現在の週をdates.json内で検索し、あればその週を選択状態にする。
172function changePeriod() {
173  if (app.period.from && app.period.to && (app.type === 2 || app.type === 3)) {
174    const from = app.formatDate(app.period.from, '/'); // jsonから検索するため/ありに変換
175    const to = app.formatDate(app.period.to, '/'); // jsonから検索するため/ありに変換
176    if (app.datesJson.indexOf(from) !== -1 && app.datesJson.indexOf(to) !== -1) {
177      // dates.jsonにfromとtoがある場合
178      const fromDate = new Date(app.period.from);
179      const toDate = new Date(app.period.to);
180      fromDate.setDate(fromDate.getDate() - 14); // -14日
181      toDate.setDate(toDate.getDate() - 14); // -14日
182      $('#period-from-year').val(String(fromDate.getFullYear())).change();
183      $('#period-from-month')
184        .val(String(fromDate.getMonth() + 1))
185        .change();
186      $('#period-from-day').val(String(fromDate.getDate())).change();
187      $('#period-to-year').val(String(toDate.getFullYear())).change();
188      $('#period-to-month')
189        .val(String(toDate.getMonth() + 1))
190        .change();
191      $('#period-to-day').val(String(toDate.getDate())).change();
192      $('#period_radio_term').prop('checked', true);
193    } else {
194      // dates.jsonにfromとtoがない場合
195      app.period.from = app.formatDate(app.datesJson[app.datesJson.length - 2], '-');
196      app.period.to = app.formatDate(app.datesJson[app.datesJson.length - 1], '-');
197    }
198  } else if (app.period.week) {
199    const week = app.formatDate(app.period.week, '/'); // jsonから検索するため/ありに変換
200    if (app.datesJson.indexOf(week) !== -1) {
201      // dates.jsonにweekがある場合
202      const weekDate = new Date(app.period.week);
203      weekDate.setDate(weekDate.getDate() - 14); // -14日
204      $('#period-week-year').val(String(weekDate.getFullYear())).change();
205      $('#period-week-month')
206        .val(String(weekDate.getMonth() + 1))
207        .change();
208      $('#period-week-day').val(String(weekDate.getDate())).change();
209      $('#period_radio_week').prop('checked', true);
210    } else {

211      // dates.jsonにweekがない場合
212      app.period.week = app.formatDate(app.datesJson[app.datesJson.length - 1], '-');
213    }
214  }
215}
216
217// 表示期間絞り込みの選択されたプルダウンのid(id)の方のラジオボタンを擬似押下。
218function selectTrigger(id) {
219  if (id === 'period-week-year' || id === 'period-week-month' || id === 'period-week-day') {
220    $('#period_radio_week').trigger('click');
221  } else {
222    $('#period_radio_term').trigger('click');
223  }
224}
225
226// 表示期間絞り込みの公開日表記を変更。
227function changeReleased() {
228  if (app.period.from && app.period.to && (app.type === 2 || app.type === 3)) {
229    const from = app.formatDate(app.period.from, '/', false, -5); // -5日
230    const to = app.formatDate(app.period.to, '/', false, -5); // -5日
231    $('#period-released').text(`[ ${from} 公開 〜 ${to} 公開 ]`);
232  } else if (app.period.week) {
233    const week = app.formatDate(app.period.week, '/', false, -5); // -5日
234    $('#period-released').text(`[ ${week} 公開 ]`);
235  }
236}
237
238//
239function createDatesArray(result) {
240  // 各日付を2週間前に変換
241  let newArray = [];
242  for (let n = 0; n < result.length; n++) {
243    let day = new Date(result[n]);
244    day = app.getNowYMD(new Date(day.setDate(day.getDate() - 14)));
245    newArray.push(day);
246  }
247
248  // 配列に
249  for (let i = 0; i < newArray.length; i++) {
250    // year
251    let year = String(newArray[i].split('/', 1));
252    if (yearArray.indexOf(year) === -1) yearArray.push(year);
253
254    // month
255    let month = {
256      y: Number(newArray[i].split('/', 2)[0]),
257      m: Number(newArray[i].split('/', 2)[1]),
258    };
259    if (monthArray.length !== 0) {
260      if (monthArray[monthArray.length - 1].m !== month.m) monthArray.push(month);
261    } else {
262      monthArray.push(month);
263    }
264
265    // day
266    let day = {
267      y: Number(newArray[i].split('/', 3)[0]),
268      m: Number(newArray[i].split('/', 3)[1]),
269      d: Number(newArray[i].split('/', 3)[2]),
270      v: Number(newArray[i].split('/', 3)[2]),
271    };
272    let date = new Date(day.y, day.m - 1, day.d);
273    date.setDate(date.getDate() + 6);
274    day.d = day.d + '日〜' + date.getDate() + '日';
275    dayArray.push(day); // 週日付データを配列に挿入
276  }
277}
278
279// テンプレートのレンダリング
280const theaderTemplate = Handlebars.compile($('#theader-template').html()); // 各指標(国)の最新週順位テンプレート作成
281const kindsOnly = app.sorts.slice(1); // 総合以外の指標(国)の配列
282$('#ranking-list-nav').append(
283  theaderTemplate({
284    kinds: kindsOnly,
285  })
286);
287
288// インスタンス
289const seekView = new SeekView();
290const seekPresenter = new SeekPresenter(seekView);
291const commonView = new CommonView();
292const commonPresenter = new CommonPresenter(commonView);
293
294// DOM
295const $document = $(document);
296const $win = $(window);
297const $body = $('body');
298const $kindTabs = $('.main-sct-wrap > .tab button'); // ジャンルメニュー
299const $updatePeriod = $('#update_btn_period'); // 表示期間絞り込みの「更新」ボタン
300const $selectboxes = $('.ranking-refine-inner select'); // アーティスト類絞り込みプルダウン
301const $refineButton = $('#ranking-refine'); // アーティスト類絞り込みの「絞り込む」ボタン
302const $refineReset = $('#ranking-refine-reset'); // アーティスト類絞り込みの「絞り込み条件をクリア」ボタン
303const $refineLyricist = $('#refine-lyricist');
304const $refineComposer = $('#refine-composer');
305const $refineArtist = $('#refine-artist');
306const $rankingTtl = $('.ranking-ttl-wrap');
307const $rankingNav = $('#ranking-list-nav');
308const $rankNavItemLink = $('#ranking-list-nav a'); // チャートテーブルのヘッダー並び替え
309const $sortRelease = $('#releaseDate'); // 発売日プルダウン
310const $rankSct = $('.ranking-sct');
311const $inviewTarget = $('#load-target');
312const $seekButton = $('#research-songs-label'); // 「楽曲を探す」ボタン
313const $refineSection = $('.ranking-refine'); // アーティスト絞り込みセクション
314const $tableTitle = $('#ranking-ttl-label'); // チャートテーブルタイトル
315const $popupTheaderUgc = $('#js-popup-theader-ugc > span'); // チャートテーブルのヘッダーポップアップ
316const $modalTitle = $('.type3_song_list_modal .other_song_list_ttl h4'); // モーダルタイトル
317const $modalPlaceholder = $('.type3_song_list_modal .other_song_list_body .input_artist_name'); // モーダルの入力フィールドのプレースホルダー
318const $toggleSongButton = $('[data-switch-artist-song="song"]'); // モーダルの「楽曲」ボタン
319
320// 値
321let headerHeight = $('#header > .inner').height(); // ヘッダーの高さ
322let spScrollPos = 0; // SPチャートの横スクロール位置
323let yearArray = []; // 全ての年一覧
324let monthArray = []; // 全ての年・月一覧
325let dayArray = []; // 全ての年・月・週一覧
326
327// position: sticky未対応ブラウザにsticky-state.jsを適用
328const $div = document.createElement('div'); // テスト用divを作成
329$div.style.position = 'sticky';
330const stickySupport = $div.style.position.indexOf('sticky') !== -1; // ブラウザがposition: sticky;

330に対応しているかどうか
331if (!stickySupport && ieInit) {
332  new StickyState(document.querySelector('.ranking-ttl-wrap')); // sticy-stateを適用
333}
334
335switchKind(app.kind); // ジャンル切り替え
336app.resetChart('inview'); // リセット
337app.switchOption('artist'); // 検索種別リセット
338
339// dates.jsonのリクエスト
340if (app.datesJqxhr) app.datesJqxhr.abort(); // 二重リクエスト防止
341app.datesJqxhr = app.get(`dates.json${app.requestQuery()}`, function (result) {
342  app.datesJson = result;
343  createDatesArray(result); // dates.jsonの配列作成
344  // グローバル変数初期設定
345  if (!app.query['date'] && !app.query['from'] && !app.query['to']) {
346    app.period.week = app.formatDate(app.datesJson[app.datesJson.length - 1], '-'); // jsonの最新週を設定
347  } else if (app.query['from'] && app.query['to'] && (app.type === 2 || app.type === 3)) {
348    app.period.from = app.formatDate(app.query['from'], '-'); // URLのクエリから設定
349    app.period.to = app.formatDate(app.query['to'], '-'); // URLのクエリから設定
350  } else if (app.query['date']) {
351    app.period.week = app.formatDate(app.query['date'], '-'); // URLのクエリから設定
352  }
353  if (app.query['sort'] === 'buzz' || app.query['sort'] === 'contact' || app.query['sort'] === 'sales') {
354    app.hybrid = app.query['sort']; // URLのsortがハイブリッドの場合、グローバル変数に値を設定
355  }
356  initPeriod(); // プルダウンにデータを挿入し最新週を選択
357  changePeriod(); // プルダウンを擬似選択
358  changeReleased(); // 公開日テキスト変更
359  app.chartRequest(); // chart.jsonのリクエスト
360});
361
362// ジャンルメニュー押下時。 ※インサイト限定
363$kindTabs.on('click', function (e) {
364  if ($('body').hasClass('-loading')) return;
365  yearArray = [];
366  monthArray = [];
367  dayArray = [];
368
369  $('#period_radio_week').click(); // ラジオボタンリセット
370  $('.w_year, .w_month, .w_week').children().remove(); // プルダウンリセット
371
372  switchKind($(e.currentTarget).attr('data-id')); // ジャンル切り替え
373  app.switchOption('artist'); // 検索種別リセット
374
375  // dates.jsonのリクエスト
376  if (app.datesJqxhr) app.datesJqxhr.abort(); // 二重リクエスト防止
377  app.datesJqxhr = app.get(`dates.json${app.requestQuery()}`, function (result) {
378    app.datesJson = result;
379    createDatesArray(result); // dates.jsonの配列作成
380    initPeriod(); // プルダウンにデータを挿入し最新週を選択
381    changePeriod(); // プルダウンを擬似選択
382    changeReleased(); // 公開日テキスト変更
383    app.resetChart();
384    app.chartRequest(); // chart.jsonのリクエスト
385  });
386});
387
388// 「表示期間の変更」の年の変更時。
389$('.w_year').on('change', function () {
390  const $monthTgt = $(this).parents('.period-date').find('.w_month');
391  const $weekTgt = $(this).parents('.period-date').find('.w_week');
392  let year = $(this).val();
393  let month;
394  let matchMonthArray = [];
395  let matchDayArray = [];
396
397  // month
398  matchMonthArray = monthArray.filter(function (ele) {
399    return ele.y === Number(year);
400  });
401
402  $monthTgt.empty();
403
404  for (let i = 0; i < matchMonthArray.length; i++) {
405    let item = `<option value="${matchMonthArray[i].m}">${matchMonthArray[i].m}月</option>`;
406    $monthTgt.append(item);
407  }
408
409  // week
410  month = Number($monthTgt.val());
411  matchDayArray = dayArray.filter(function (ele) {
412    return ele.y === Number(year) && ele.m === Number(month);
413  });
414
415  $weekTgt.empty();
416
417  for (let i = 0; i < matchDayArray.length; i++) {
418    let item = `<option value="${matchDayArray[i].v}">${matchDayArray[i].d}</option>`;
419    $weekTgt.append(item);
420  }
421  selectTrigger($(this).attr('id')); // プルダウンが選択された方のラジオボタンを擬似押下
422});
423
424// 「表示期間の変更」の月の変更時。
425$('.w_month').on('change', function () {
426  const $weekTgt = $(this).parents('.period-date').find('.w_week');
427  let year = $(this).parents('.period-date').find('.w_year').val();
428  let month = $(this).val();
429  let matchDayArray = [];
430
431  matchDayArray = dayArray.filter(function (ele) {
432    return ele.y === Number(year) && ele.m === Number(month);
433  });
434
435  $weekTgt.empty();
436
437  for (let i = 0; i < matchDayArray.length; i++) {
438    let item = `<option value="${matchDayArray[i].v}">${matchDayArray[i].d}</option>`;
439    $weekTgt.append(item);
440  }
441  selectTrigger($(this).attr('id')); // プルダウンが選択された方のラジオボタンを擬似押下
442});
443
444// 「表示期間の変更」の日の変更時。
445$('.w_week').on('change', function () {
446  selectTrigger($(this).attr('id')); // プルダウンが選択された方のラジオボタンを擬似押下
447});
448
449// 「表示期間の変更」の「更新」ボタン押下時。
450$updatePeriod.on('click', function () {
451  // 絞り込みリセット
452  if ($('#period_radio_term').prop('checked') === true && (app.type === 2 || app.type === 3)) {
453    const from = new Date($('#period-from-year').val(), $('#period-from-month').val() - 1, Number($('#period-from-day').val()) + 14); // Dateオブジェクトを生成
454    const to = new Date($('#period-to-year').val(), $('#period-to-month').val() - 1, Number($('#period-to-day').val()) + 14); // Dateオブジェクトを生成
455    app.period.from = app.formatDate(from, '-');
456    app.period.to = app.formatDate(to, '-');
457    app.period.week = '';
458  } else {
459    const week = new Date($('#period-week-year').val(), $('#period-week-month').val() - 1, Number($('#period-week-day').val()) + 14); // Dateオブジェクトを生成
460    app.period.week = app.formatDate(week, '-');
461    app.period.from = '';
462    app.period.to = '';
463  }
464  changeReleased(); // 公開日テキスト変更
465  app.resetChart();

466  app.chartRequest();
467});
468
469// チャートテーブルヘッダーメニュー押下時。
470$rankNavItemLink.on('click', function (e) {
471  e.preventDefault();
472  const $parentLi = $(this).parent();
473  const id = $(this).attr('data-id'); // data-idを取得
474  app.sort = id === 'hybrid' ? app.hybrid : $(this).attr('data-id'); // グローバル変数を更新
475
476  $sortRelease.prop('selectedIndex', 0); // 発売日プルダウンリセット
477  if (!$parentLi.hasClass(app.className.act)) {
478    $('#ranking-list-nav li').removeClass(app.className.act); // テーブルヘッダーのアクティブをリセット
479    $('.ranking-list li').removeClass(app.className.act); // テーブルボディのアクティブをリセット
480
481    app.resetChart();
482    app.chartRequest(); // chart.jsonのリクエスト
483  }
484});
485
486// チャートテーブルヘッダープルダウン押下時。
487$sortRelease.on('change', function () {
488  app.sort = $(this).val(); // グローバル変数を更新
489  if (app.sort === 'chart') {
490    $('#ranking-list-nav .list-rank a').trigger('click');
491  } else {
492    $('#ranking-list-nav li').removeClass(app.className.act); // テーブルヘッダーのアクティブをリセット
493    $('.ranking-list li').removeClass(app.className.act); // テーブルボディのアクティブをリセット
494    app.resetChart();
495    app.chartRequest(); // chart.jsonのリクエスト
496  }
497});
498
499// アーティスト類絞り込みプルダウン変更時。 ※インサイト限定
500$selectboxes.on('change', function () {
501  const $parent = $(this).parents('.ranking-refine-select');
502  $parent.toggleClass('-selected', $(this).val() !== ''); // プレースホルダーの見た目変更クラス付与
503});
504
505// アーティスト類絞り込みの「絞り込む」ボタン押下時。 ※インサイト限定
506$refineButton.on('click', function () {
507  if ($refineLyricist.val() === '' && $refineComposer.val() === '' && $refineArtist.val() === '') return alert('条件を選択してください'); // 空の場合は処理中止
508  $('.ranking-sct-cont').addClass('-loading'); // ローディング付与
509
510  app.resetChart('inview', 'scroll', 'table'); // スクロール位置・チャートテーブルリセット
511  $inviewTarget.removeClass('inview');
512  app.pageNum = ''; // ページ番号を空に
513  app.chartRequest(function () {
514    app.inviewFlag = false; // inviewを追加読み込みさせない
515    $('.ranking-sct-cont').removeClass('-loading'); // ローディング除去
516    const $listBoxInfo = $('.list-ttl-box-name');
517    $listBoxInfo.each(function () {
518      const $listLyricist = $(this).find('.list-ttl-box-name-lyricist');
519      const $listComposer = $(this).find('.list-ttl-box-name-composer');
520      const $listArtist = $(this).find('.list-ttl-box-name-airtist');
521
522      // フラグ
523      let hideLyricist = false;
524      let hideComposer = false;
525      let hideArtist = false;
526
527      if ($refineLyricist.val() !== '') {
528        if ($listLyricist.text() !== $refineLyricist.val()) {
529          hideLyricist = true;
530          $listLyricist.removeClass('-hit');
531        } else {
532          $listLyricist.addClass('-hit');
533        }
534      } else {
535        $listLyricist.removeClass('-hit');
536      }
537
538      if ($refineComposer.val() !== '') {
539        if ($listComposer.text() !== $refineComposer.val()) {
540          hideComposer = true;
541          $listComposer.removeClass('-hit');
542        } else {
543          $listComposer.addClass('-hit');
544        }
545      } else {
546        $listComposer.removeClass('-hit');
547      }
548
549      if ($refineArtist.val() !== '') {
550        if ($listArtist.text() !== $refineArtist.val()) {
551          hideArtist = true;
552          $listArtist.removeClass('-hit');
553        } else {
554          $listArtist.addClass('-hit');
555        }
556      } else {
557        $listArtist.removeClass('-hit');
558      }
559
560      // 絞り込み
561      $(this)
562        .parents('.ranking-list')
563        .toggleClass('-hide', hideLyricist || hideComposer || hideArtist);
564    });
565
566    // 0件の場合
567    if ($('.ranking-list.-hide').length === $('.ranking-sct-cont > .ranking-list').length) {
568      $('.ranking-ttl-wrap').add('.ranking-sct').addClass('-hide');
569      $('.ranking-sct-nohit').addClass('-show');
570    } else {
571      $('.ranking-ttl-wrap').add('.ranking-sct').removeClass('-hide');
572      $('.ranking-sct-nohit').removeClass('-show');
573    }
574  }); // chart.jsonのリクエスト
575});
576
577// 「絞り込み条件をクリア」ボタン押下時。 ※インサイト限定
578$refineReset.on('click', function (e) {
579  app.resetChart();

580  app.chartRequest();
581});
582
583// チャートテーブルの楽曲名下のアーティスト名類を押下時。※インサイト限定
584$document.on('click', '.list-ttl-box-name > button', function () {
585  const refineName = $(this).text(); // 押下した名前を取得
586  const $refineSelect = $(`#${$(this).data('refine')}`); // 押下したボタンからセレクトボックス要素を取得
587
588  if (refineName === $refineSelect.val()) {
589    $refineSelect.prop('selectedIndex', 0); // 対象セレクトボックスでも同じ名前が選択されていたらリセット
590  } else {
591    $refineSelect.find('option').each(function () {
592      if ($(this).attr('value') === refineName) $(this).attr('selected', true); // 対象セレクトボックスの該当オプションにselectedを付与
593    });
594  }
595  $refineSelect.trigger('change'); // 対象セレクトボックスを擬似選択
596  if ($refineLyricist.val() === '' && $refineComposer.val() === '' && $refineArtist.val() === '') {
597    $refineReset.trigger('click'); // セレクトボックスが全て空なら「絞り込み条件をクリア」ボタンを擬似押下
598  } else {
599    $refineButton.trigger('click'); // セレクトボックスが空でなければ「絞り込む」ボタンを擬似押下
600  }
601});
602
603// スクロールしてビューポートに要素を表示時。
604$document.on('inview', '.inview', (event, isInView) => {
605  if (app.type !== 2 && app.type !== 3) return; // Pro, Biz以外は処理終了
606  if (app.inviewFlag && isInView) {
607    // フラグがtrueでトリガー要素がビューポートに入った場合
608    app.pageNum++;
609    if (app.type === 2) {
610      $inviewTarget.removeClass('inview'); // 一度発火させたらトリガーを外す
611    }
612    app.chartRequest();
613  }
614});
615
616// SPチャートテーブルの横スクロール時。
617$rankSct.on('scroll', function () {
618  if (!app.sp) return; // SP以外は処理終了
619  $rankingTtl.scrollLeft($(this).scrollLeft());
620});
621$rankingTtl.on('scroll', function () {
622  if (!app.sp) return; // SP以外は処理終了
623  $rankSct.scrollLeft($(this).scrollLeft());
624});
625
626// SPチャート右上の横スクロール矢印ボタン押下時。
627$('#scroll-back').on('click', () => {
628  if (!app.sp) return; // SP以外は処理終了
629  $rankingTtl.animate({ scrollLeft: 0 }, 250);
630});
631$('#scroll-go').on('click', () => {
632  if (!app.sp) return; // SP以外は処理終了
633  let scrLimit = $rankingNav.width() - $rankingTtl.width();
634  $rankingTtl.animate({ scrollLeft: scrLimit }, 250);
635});
636
637// ウィンドウリサイズ時。SPテーブルヘッダーのSticky位置調整。
638app.sp && $rankingTtl.css('top', `${headerHeight}px`);
639$win.on('resize', () => {
640  if (!app.sp) return; // SP以外は処理終了
641  headerHeight = $('#header > .inner').height();
642  window.innerWidth <= app.breakpoint ? $rankingTtl.css('top', `${headerHeight}px`) : $rankingTtl.css('top', '0');
643});