https://smavoice.jp/files/4/sma03/assets/js/top.blog.js

1"use strict";
2
3(function () {
4  var blogLoaded = false;
5  var ongoing = false;
6  var jsonLoading = false; //json読み込み中はtrueに
7  // カレンダーモジュール
8
9  var CM;
10  $(function () {
11    if ($('.top_calender').length) {
12      setCalender();
13    }
14
15    if ($('.blog_more').length) {
16      var num = parseInt($('.blog_list').attr('data-item'));
17      getLatestBlog(num);
18    }
19  }); // カレンダーjson読み込み
20
21  function setCalender() {
22    // prev nextボタン
23    var $weekPrevBtn = $('#calender .calendarHeader .week_prev');
24    var $weekNextBtn = $('#calender .calendarHeader .week_next'); // period
25
26    var $weekStart = $('#calender .weekStart');
27    var $weekEnd = $('#calender .weekEnd'); // 現在のカテゴリ
28
29    var current_cat = 'c_Weekly'; // 読み込みが完了したかどうか
30
31    var loadFlg = false;
32    var calenderBaseUrl = 'https://smavoice.jp/s/sma03/api/list/top_cal_list?dy='; // https://smavoice.jp/s/sma03/api/list/top_cal_list?dy=202007 のような形で年月を後ろで指定
33    // 現在の年月を取得
34
35    var now = new Date();
36    var nowYear = now.getFullYear();
37    var nowMonth = now.getMonth() + 1;
38    var nowDate = now.getDate();
39    var prevMonth = nowMonth - 1; // 翌月
40
41    var nextMonth = nowMonth + 1; // 前月
42
43    var nextYear = nowYear; // 翌年
44
45    var prevYear = nowYear; // 前年
46    // 1月だった場合
47
48    if (nowMonth == 1) {
49      prevMonth = 12;
50      prevYear = nowYear - 1;
51    } // 12月だった場合
52
53
54    if (nowMonth == 12) {
55      nextMonth = 1;
56      nextYear = nowYear + 1;
57    } // 桁数が合わなかった場合、0をつけて揃える
58
59
60    var nowMonth_str = zeroPadding(nowMonth);
61    var prevMonth_str = zeroPadding(prevMonth);
62    var nextMonth_str = zeroPadding(nextMonth); // 読み込んだjsonの年月リストを作成
63
64    var lodedList = [];
65    lodedList.push(nowYear + nowMonth_str, prevYear + prevMonth_str, nextYear + nextMonth_str); // MULTI_DATA_MODULEに渡すjsonの配列を作成
66
67    var urlList = [{
68      // 現在のカレンダーjsonURL
69      url: calenderBaseUrl + nowYear + nowMonth_str,
70      hierarchy: 'list',
71      customFunction: function customFunction(data) {
72        for (var i = 0; i < data.length; i++) {
73          if (data[i].category_name == 'コンテンツ') {
74            data[i].category_name = 'コンテンツ更新';
75          }
76
77          data[i].id = data[i].code + data[i].date.split('/').join('');
78        }
79
80        return data;
81      }
82    }, {
83      // 前月のカレンダーjsonURL
84      url: calenderBaseUrl + prevYear + prevMonth_str,
85      hierarchy: 'list',
86      customFunction: function customFunction(data) {
87        for (var i = 0; i < data.length; i++) {
88          if (data[i].category_name == 'コンテンツ') {
89            data[i].category_name = 'コンテンツ更新';
90          }
91
92          data[i].id = data[i].code + data[i].date.split('/').join('');
93        }
94
95        return data;
96      }
97    }, {
98      // 翌月のカレンダーjsonURL
99      url: calenderBaseUrl + nextYear + nextMonth_str,
100      hierarchy: 'list',
101      customFunction: function customFunction(data) {
102        for (var i = 0; i < data.length; i++) {
103          if (data[i].category_name == 'コンテンツ') {
104            data[i].category_name = 'コンテンツ更新';
105          }
106
107          data[i].id = data[i].code + data[i].date.split('/').join('');
108        }
109
110        return data;
111      }
112    }];
113    var week = new Vue({
114      el: '#weeklyCalendar',
115      data: {
116        current: {
117          year: now.getFullYear(),
118          month: now.getMonth(),
119          day: now.getDate()
120        },
121        date: {
122          prev: null,
123          next: null
124        },
125        next_count: 0,
126        dataList: [],
127        html: null
128      },
129      updated: function updated() {
130        noInfo('.weeklyCalendar'); // console.log(this.dataList);
131
132        var startDay = this.dataList[0];
133        var endDay = this.dataList[this.dataList.length - 1];
134        $weekStart.find('.year').text(startDay.year);
135        $weekStart.find('.month').text(startDay.month_str);
136        $weekStart.find('.date').text(startDay.date_str);
137        $weekEnd.find('.year').text(endDay.year);
138        $weekEnd.find('.month').text(endDay.month_str);
139        $weekEnd.find('.date').text(endDay.date_str); // $('.calender_wrap').css({'height':$('.weeklyCalendar').outerHeight()});
140
141        this.updateHeight($('.weeklyCalendar').outerHeight(true));
142      },
143      watch: {
144        next_count: function next_count() {
145          // 5回先まで進んだらnextボタン削除
146          if (this.next_count >= 5) {
147            $('.week_next').hide();
148          } else {
149            $('.week_next').show();
150          }
151        }
152      },
153      methods: {
154        init: function init(_year, _month, _date, _count) {
155          var _data = CM.CreateCalendarData({
156            year: _year,

157            month_id: _month,
158            day: _date,
159            count: _count,
160            countType: 'day'
161          });
162
163          this.set(_data);
164        },
165        prev: function prev() {
166          this.next_count--;
167
168          var _data = CM.CreateCalendarData({
169            year: this.date.prev.year,
170            month_id: this.date.prev.month_id,
171            day: this.date.prev.day,
172            count: 7,
173            countType: 'day'
174          });
175
176          this.set(_data); // 現在地から2か月前の年月を取得
177
178          var prevArray = [];
179
180          for (var i = 0; i < 2; i++) {
181            var _d = getAddMonthDate(this.current.year, this.current.month, -(i + 1));
182
183            prevArray.push(_d.getFullYear() + zeroPadding(_d.getMonth() + 1));
184          } // 2か月前までのjsonが読み込み済か確認
185
186
187          var _array = [];
188
189          for (var _i = 0; _i < prevArray.length; _i++) {
190            if (lodedList.indexOf(prevArray[_i]) != -1) {} else {
191              // 読み込み済でない年月を抽出
192              _array.push(prevArray[_i]);
193            }
194          } // 読み込み先jsonリストを作成
195
196
197          if (_array.length) {
198            jsonLoading = true;
199            var _urlList = [];
200
201            for (var _i2 = 0; _i2 < _array.length; _i2++) {
202              _urlList.push({
203                url: calenderBaseUrl + _array[_i2],
204                hierarchy: 'list',
205                customFunction: function customFunction(data) {
206                  for (var j = 0; j < data.length; j++) {
207                    if (data[j].category_name == 'コンテンツ') {
208                      data[j].category_name = 'コンテンツ更新';
209                    }
210
211                    data[j].id = data[j].code + data[j].date.split('/').join('');
212                  }
213
214                  return data;
215                }
216              });
217            }
218
219            this.getMoreData(_urlList);
220          }
221        },
222        next: function next() {
223          this.next_count++;
224
225          var _data = CM.CreateCalendarData({
226            year: this.date.next.year,
227            month_id: this.date.next.month_id,
228            day: this.date.next.day,
229            count: 7,
230            countType: 'day'
231          });
232
233          this.set(_data); // 現在地から2か月先の年月を取得
234
235          var nextArray = [];
236
237          for (var i = 0; i < 2; i++) {
238            var _d = getAddMonthDate(this.current.year, this.current.month, i + 1);
239
240            nextArray.push(_d.getFullYear() + zeroPadding(_d.getMonth() + 1));
241          } // console.log('nextArray', nextArray);
242          // 2か月先までのjsonが読み込み済か確認
243
244
245          var _array = [];
246
247          for (var _i3 = 0; _i3 < nextArray.length; _i3++) {
248            if (lodedList.indexOf(nextArray[_i3]) != -1) {} else {
249              // 読み込み済でない年月を抽出
250              _array.push(nextArray[_i3]);
251            }
252          } //  console.log('_array', _array);
253          // 読み込み先jsonリストを作成
254
255
256          if (_array.length) {
257            jsonLoading = true;
258            var _urlList = [];
259
260            for (var _i4 = 0; _i4 < _array.length; _i4++) {
261              _urlList.push({
262                url: calenderBaseUrl + _array[_i4],
263                hierarchy: 'list',
264                customFunction: function customFunction(data) {
265                  for (var j = 0; j < data.length; j++) {
266                    if (data[j].category_name == 'コンテンツ') {
267                      data[j].category_name = 'コンテンツ更新';
268                    }
269
270                    data[j].id = data[j].code + data[j].date.split('/').join('');
271                  }
272
273                  return data;
274                }
275              });
276            } // console.log('urlList', _urlList);
277
278
279            this.getMoreData(_urlList);
280          }
281        },
282        set: function set(_data) {
283          this.date.prev = _data.prev_data;
284          this.date.next = _data.next_data;
285          this.dataList = _data.result;
286          var _current = _data.result[0]; // console.log('現在地', _data.result[0]);
287          // console.log('_data', _data);
288          // 現在地を更新
289
290          this.current.year = _data.result[0].year;

291          this.current.month = _data.result[0].month_id;
292          this.current.day = _data.result[0].date;
293          this.watch_month = _data.result[0].month_id;
294        },
295        getMoreData: function getMoreData(url) {
296          jsonLoading = true;
297          var CALENDER = new MULTI_DATA_MODULE({
298            data_type: 'jsonp',
299            jsonpCallback: 'callback',
300            data_list: url,
301            on: {
302              Complete: function Complete(data, list) {
303                // 追加で読み込んだデータをカレンダーモジュールにつ追加
304                CM.AddData(data); // console.log('loadedcalenderdata',data);
305
306                for (var i = 0; i < url.length; i++) {
307                  // 読み込み済みリストを更新
308                  lodedList.push(url[i].url.split('?dy=')[1]);
309                } // 読み込み完了
310
311
312                jsonLoading = false;
313              }
314            }
315          });
316        },
317        updateHeight: function updateHeight(height) {
318          $('.calender_wrap').css({
319            'height': height
320          });
321        },
322        hide: function hide() {
323          $('.weeklyCalendar').removeClass('is-show');
324          $('.calendarBody').addClass('is-show');
325          $('.calendarHead').removeClass('is-week-show');
326          this.updateHeight($('.calendarBody').outerHeight(true));
327        },
328        show: function show() {
329          $('.weeklyCalendar').addClass('is-show');
330          $('.calendarBody').removeClass('is-show');
331          $('.calendarHead').addClass('is-week-show');
332          noInfo('.weeklyCalendar');
333          this.updateHeight($('.weeklyCalendar').outerHeight(true));
334        }
335      }
336    });
337    $weekPrevBtn.on('click', function () {
338      if (blogLoaded == false || jsonLoading == true || ongoing == true) return false;
339      week.prev();
340    });
341    $weekNextBtn.on('click', function () {
342      if (blogLoaded == false || jsonLoading == true || ongoing == true) return false;
343      week.next();
344    }); // nか月後を取得
345
346    function getAddMonthDate(year, month, addMonth) {
347      var date = new Date(year, month);
348      date.setMonth(date.getMonth() + addMonth);
349      return date;
350    }
351
352    function zeroPadding(num) {
353      return ('00' + num).slice(-2);
354    } // get json
355
356
357    jsonLoading = true;
358    var MDM = new MULTI_DATA_MODULE({
359      data_type: 'jsonp',
360      jsonpCallback: 'callback',
361      data_list: urlList,
362      on: {
363        Complete: function Complete(data, list) {
364          jsonLoading = false; // カレンダーの読み込みが終了次第blogのjson読み込み開å

364§‹
365
366          getLatestBlog(4);
367          var template_title = '<span class="year">{{year}}</span>.<span class="month">{{month_str}}</span>';
368          var template_title_week = '<p>{{week}}</p>';
369          var template_date = "\n      <div class=\"cell {{class_name}}\" data-dayofweek=\"{{day_of_week}}\">\n      <p class=\"date\">{{date_str}}<span class=\"day\">{{day_of_week}}</span></p>\n          {{date_data}}\n          </div>";
370          var template_date_data = "\n        <div class=\"infoBlock c_{{category}}\">\n        <div class=\"infoBlock_inner\">\n        <div class=\"infoBlock_head\">\n        <span class=\"artist_name\">{{artist_name}}</span><span class=\"cate\">{{category_name}}</span>\n        </div>\n              <p class=\"article\">{{title}}</p>\n              <a href=\"{{links}}\"></a>\n              </a>\n          </div>\n          </div>";
371          CM = new CALENDAR_MODULE({
372            monday_start: false,
373            schedule_data: data,
374            template: {
375              title: template_title,
376              title_week: template_title_week,
377              date: template_date,
378              date_data: template_date_data
379            },
380            on: {
381              Load: function Load(a, b, cm) {
382                // console.log('CAM a', a);
383                // console.log('CAM b', b);
384                setTimeout(function () {
385                  $('body').addClass('calender-loaded');
386                  week.init(week.current.year, week.current.month, week.current.day, 7);
387                  $('.js-loading').fadeOut(300);
388                  loadFlg = true;
389                }, 200);
390              },
391              Change: function Change(date) {}
392            }
393          });
394        }
395      }
396    }); // pcでカテゴリ選択ボタンクリック時
397
398    var $pcCateBtn = $('.categoryList > li');
399    $pcCateBtn.on('click', function () {
400      if (!loadFlg) return false; // カレンダーの絞り込み
401
402      var $_elm = $(this).find('.tab_cat');
403
404      var _cat = $_elm.attr('class');
405
406      _cat = _cat.match(/c_([^\s]*)/)[0];
407      current_cat = _cat; // activeクラスを付け替え
408
409      $('.categoryList > li .tab_cat').removeClass('is-selected');
410      $_elm.addClass('is-selected');
411
412      if (current_cat == 'c_Weekly') {
413        week.show();
414      } else {
415        week.hide();
416        filterCate();
417      }
418    }); // SPでカテゴリ選択ボタンクリック時
419
420    var $select = $('#categoryList');
421    $select.on('change', function () {
422      if (!loadFlg) return false;
423      current_cat = $(this).val();
424
425      if (current_cat == 'c_Weekly') {
426        week.show();
427      } else {
428        week.hide();
429        filterCate();
430      }
431    }); // カテゴリーに応じた要素の切り替え
432
433    function filterCate() {
434      $('.calendarBody .u-has-eventdata').each(function (index, val) {
435        var $_cell = $(val).find('.infoBlock');
436
437        if (current_cat == 'c_All') {
438          // 全て表示
439          $(val).show();
440          $_cell.each(function (i, cell) {
441            $(cell).show();
442          });
443        } else {
444          var showFlg = false; // 選択カテゴリと同じclass名がついているcellのみ表示
445
446          $_cell.each(function (i, cell) {
447            if ($(cell).hasClass(current_cat)) {
448              $(cell).show(); // 一つでも表示できるデータがあれば表示フラグをtrueに
449
450              showFlg = true;
451            } else {
452              $(cell).hide();
453            }
454          }); // 一つも表示されるデータがなければ日付ごと非表示
455
456          if (showFlg) {
457            $(val).show();
458          } else {
459            $(val).hide();
460          }
461
462          week.updateHeight($('.calendarBody').outerHeight(true));
463        }
464      });
465      noInfo('.calendarBody');
466    } // 情報がなかった場合、「表示できるデータがありません」を表示
467
468
469    function noInfo(parents) {
470      var noInfoFlg = true; // 一つでも表示されている要素があればflgをfalseに
471
472      $(parents).find('.u-has-eventdata').each(function (index, val) {
473        if ($(val).css('display') == 'block') {
474          noInfoFlg = false;
475        }
476      }); // 既に noinfo要素がある場合、cssで表示/非表示を切り替え
477
478      if ($('.noinfo').length) {
479        if (noInfoFlg) {
480          $('.noinfo').show();
481        } else {
482          $('.noinfo').hide();
483        }
484      } else {
485        // noinfo要素がなく、カレンダー要素一つもない場合は要素を追加
486        if (noInfoFlg) {
487          $('.calender_wrap').prepend('<p class="noinfo">表示できるデータがありません</p>');
488        }
489      }
490    }
491  } // ブログ最新4件を表示
492
493
494  function getLatestBlog(blogItem) {
495    // 読み込むjsonを配列に格納
496    var urlList = [];
497
498    for (var i = 0; i < blogJsonList.length; i++) {
499      urlList.push({
500        url: blogJsonList[i],
501        hierarchy: 'kijilist'
502      });
503    }
504
505    var blogData = [];
506    jsonLoading = true; // get json
507
508    var MDM = new MULTI_DATA_MODULE({
509      data_type: 'jsonp',
510      jsonpCallback: 'callback',
511      data_list: urlList,
512      on: {
513        Complete: function Complete(data, list) {
514          blogLoaded = true;
515          jsonLoading = false; // 日付順にソート
516
517          data.sort(function (a, b) {
518            return a.date < b.date ? 1 : -1;
519          });
520          blogData = data; // 表示したい件数だけdataListsに渡す
521
522          blog.dataLists = blogData.slice(0, blogItem);
523          blog.item_count = blogData.length;
524        }
525      }
526    });

527    var blog = new Vue({
528      el: '#blog',
529      data: {
530        dataLists: [],
531        item: 0,
532        // 現在の表示個数
533        item_count: 0,
534        // 残り個数
535        noItemFlg: false // 残りデータがあるかどうか
536
537      },
538      created: function created() {},
539      mounted: function mounted() {},
540      updated: function updated() {
541        $('#blog').addClass('is-load'); // 表示個数を更新
542
543        this.item = blog.dataLists.length; // 残り個数を更新
544
545        this.item_count = blogData.length - this.item; // 残り個数が0になったらnoItemFlgをtrueに
546
547        if (this.item_count <= 0) {
548          this.noItemFlg = true;
549        }
550      },
551      methods: {
552        addItems: function addItems(num) {
553          if (blogLoaded === false) return false;
554          this.item += parseInt(num);
555          blog.dataLists = blogData.slice(0, this.item);
556        }
557      },
558      watch: {
559        noItemFlg: function noItemFlg(newData, oldData) {
560          if (newData === true) {
561            $('.more_load').hide();
562          }
563        }
564      }
565    });
566  }
567})();