https://bukatsunavi.com/wp-content/themes/bukatsu/js/navi-common.js?ver=20260918184603

1/* Navi共通用 */
2$ = jQuery;
3var naviCommon = {
4    $dialog: null,
5    $dialogInput: null,
6    $dialogHidden: null,
7    // イベント設置・初期設定
8    init: function() {
9        $('#headerUser,#headerFixProfile').on('click', function(){
10            naviCommon.switchPopMenu();
11            return false;
12        });
13        $('#popMenu').on('click', function(){
14            return false;
15        });
16        $('body').on('click', function(){
17            $('#popMenu').hide();
18        });
19
20        activeValidationJ($('#changePasswordForm'));
21
22        // メニュー制御
23        $('#btnMenu').on('click', function() {
24            $('#menuArea').show().animate({'left':'0'}, 250);
25        });
26        $('#btnCloseMenu').on('click', function() {
27            $('#menuArea').animate({'left':'100vw'}, {
28                'duration': 250,
29                'complete': function(){
30                    $(this).hide();
31                }
32            });
33        });
34
35        // 日程ダイアログ用
36        $('#dialogPrevMonth').on('click',function(){
37            naviCommon.prevMonth();
38        });
39        $('#dialogNextMonth').on('click',function(){
40            naviCommon.nextMonth();
41        });
42        $('#dateSelection tbody td').on('click',function(){
43            naviCommon.selectDay($(this));
44        });
45        $('#dialogLinksArea .linkDays').on('click',function(){
46            let days = $(this).attr('data-days');
47            if(days == '1M') {
48                let today = new Date(prjutils.getToday());
49                let end = prjutils.addMonth(today, 1);
50                days = prjutils.getBetweenDays(today, end);
51                days++; // 差分30なら当日含めて31日間とするため
52            } else if(days == 'clear') {
53                days = 0;
54            }
55            naviCommon.setDaysFromToday(days);
56        });
57        
58
59        // ダイアログの枠外をクリックした場合、閉じるボタンを押下したときと同じ処理を呼び出す
60        var common_dialog_closable = false;
61        $('.dialog').on('click', function(e) {
62            if(!common_dialog_closable) {
63                return;
64            }
65            let $target = $(e.target);
66            let $dialogParent = $target.parent('.dialog');
67            if($dialogParent.length) {
68                $dialogParent.find('.button_dialog_close').click();
69            } else if ($target.hasClass('dialog') || $target.hasClass('buttons_inner')) {
70                $target.find('.button_dialog_close').click();
71            }
72        });
73
74        // ダイアログの外枠でマウスを押し始めた時だけ枠外クリックを有効化する
75        $('.dialog').on('mousedown', function(e) {
76            let $target = $(e.target);
77            let $dialogParent = $target.parent('.dialog');
78            if($dialogParent.length ||
79                $target.hasClass('dialog') || $target.hasClass('buttons_inner')
80            ) {
81                common_dialog_closable = true;
82            } else {
83                common_dialog_closable = false;
84            }
85        });
86    },
87
88    // ポップアップメニューをOpen/Closeする
89    switchPopMenu: function() {
90        $('#popMenu').toggle();
91    },
92
93    // ログイン画面に遷移する
94    fowardLogin: function() {
95        let url = new URL(window.location.href);
96        let href = '/navi_login';
97        let club = url.searchParams.get('club');
98        if (url.pathname.indexOf('/navi_login/') >= 0) {
99            // ログイン画面「からログインリンクを押した時はパラメータ不要
100        } else if(club) {
101            href += '/?club=' + encodeURIComponent(club);
102        } else {
103            let page = location.pathname;
104            href += '/?pag=' + encodeURIComponent(page);
105        }
106        window.location.href = href;
107    },
108
109    // 新規登録画面に遷移する
110    fowardRegistration: function() {
111        let url = new URL(window.location.href);
112        let page = location.pathname;
113        let href = '/navi_registration/?pag=' + encodeURIComponent(page);
114        // let id = url.searchParams.get('id');
115        // if(id) {
116        //     href += '/?pid=' + encodeURIComponent(id);
117        // }
118        window.location.href = href;
119    },
120

121    // パスワード変更を送信する
122    changePassword: function(){
123        password_confirm_msg(pwd_modify_caution, function(){
124            let $form = $('#changePasswordForm');
125            let postParam = new FormData($form.get(0));
126            postParam.append('action', 'changeFanPassword');
127            $.ajax({
128                type: 'POST',
129                url: binds['ajaxurl'],
130                data: postParam,
131                contentType : false,
132                processData : false,
133                success: function(res) {
134                    if(res['result'] === true) {
135                        prjutils.putMsgInfo('変更が完了しました。');
136                        naviCommon.closeDialog($form);
137                    } else {
138                        prjutils.putMsg('変更できませんでした。');
139                    }
140                }
141            });
142        });
143    },
144
145    // ログアウトする
146    logout: function() {
147        let postParam = new FormData();
148        postParam.append('action', 'logout_res');
149        $.ajax({
150            type: 'POST',
151            url: binds['ajaxurl'],
152            data: postParam,
153            contentType: false,
154            processData: false,
155            success: function (res) {
156                window.location.reload();
157            }
158        });
159    },
160    // ログイン中か確認
161    isLogin: function() {
162        return !!$('#loginUser').length;
163    },
164    // ダイアログを閉じる
165    closeDialog: function(element) {
166        let $dialog = $(element).closest('.dialog');
167        $dialog.fadeOut('fast');
168    },
169
170    // 日程選択ダイアログ //
171    selectedDates: {},
172    // ダイアログを開く
173    openDateSelection: function($input, $hidden){
174        naviCommon.$dialogInput = $input;
175        naviCommon.$dialogHidden = $hidden;
176        naviCommon.clearDateSelection();
177        // 選択状態反映
178        let csv = naviCommon.$dialogHidden.val();
179        let dateList = csv.split(',');
180        let firstDate = '';
181        for(let date of dateList){
182            if(!date) {
183                continue;
184            }
185            if(!firstDate){
186                firstDate = date;
187            }
188            naviCommon.selectedDates[date] = date;
189        }
190        if(firstDate){
191            let ym = prjutils.toYM(new Date(firstDate));
192            $('#dialogSelectedMonth').val(ym);
193        }
194
195        naviCommon.loadDateSelection();
196        prjutils.showDialog($('#dialogDateSelection'));
197    },
198    // ダイアログを開かずにhidden値を表示名称に反映する
199    resetDateSelection: function($input, $hidden) {
200        naviCommon.$dialogInput = $input;
201        naviCommon.$dialogHidden = $hidden;
202        naviCommon.clearDateSelection();
203        // 選択状態反映
204        let csv = naviCommon.$dialogHidden.val();
205        let dateList = csv.split(',');
206        for(let date of dateList){
207            if(!date) {
208                continue;
209            }
210            naviCommon.selectedDates[date] = date;
211        }
212        naviCommon.loadDateSelection();
213        naviCommon.setDateSelection();
214    },
215    // 現在の状態をダイアログに反映する
216    loadDateSelection: function(){
217        $('#dateSelection').find('.selected').removeClass('selected');
218        $('#dateSelection').find('.old').removeClass('old');
219        $('#dateSelection').find('.current_month').removeClass('current_month');
220
221        let today = new Date(prjutils.getToday());
222        let selectedMonth = new Date($('#dialogSelectedMonth').val() + '-01');
223        let currentMonthIdx = selectedMonth.getMonth();
224        
225        // タイトル設定
226        let yearMonth = selectedMonth.getFullYear() + "年 " + String(selectedMonth.getMonth() + 1) + "月";
227        $('#dialogMonthName').text(yearMonth);
228        // 日付生成
229        let tmpDate = prjutils.getStartOfWeek(selectedMonth);
230        for(let weekIdx = 0; weekIdx < 6; weekIdx++){
231            let $week = $('#week' + weekIdx);
232            for(let dayIdx = 0; dayIdx < 7; dayIdx++){

233                let $day = $week.find('.day' + dayIdx);
234                let ymd = prjutils.toYMD(tmpDate)
235                $day.text(tmpDate.getDate());
236                $day.attr('data-date', prjutils.toYMD(tmpDate));
237                if(tmpDate < today) {
238                    $day.addClass('old');
239                }
240                if(tmpDate.getMonth() == currentMonthIdx) {
241                    $day.addClass('current_month');
242                }
243                if(naviCommon.selectedDates[ymd]) {
244                    $day.addClass('selected');
245                }
246                tmpDate.setDate(tmpDate.getDate() + 1);
247            }
248        }
249        // 選択日付表示
250        let datesCsv = naviCommon.getSelectedLabelCsv();
251        if(!datesCsv) {
252            datesCsv = 'すべての開催日';
253        }
254        datesCsv = '<span class="date_label">' + datesCsv.replaceAll('、', '</span><span class="date_label">') + '</span>';
255        $('#dialogSelectedDateList').html(datesCsv);
256    },
257    // 選択済み日程の表示文字列を取得
258    getSelectedLabelCsv: function(){
259        let strDates = '';
260        let sortedEntries = Object.entries(naviCommon.selectedDates).sort((a, b) => a[0].localeCompare(b[0]));
261        for (let [key, value] of sortedEntries) {
262            let tmpDate = new Date(naviCommon.selectedDates[key]);
263            if(strDates){
264                strDates += '、';
265            }
266            strDates += prjutils.formatMonthDate(tmpDate);
267        }
268        return strDates;
269    },
270    // 選択済み日程の表示文字列を取得
271    getSelectedDatesCsv: function(){
272        let strDates = '';
273        let sortedEntries = Object.entries(naviCommon.selectedDates).sort((a, b) => a[0].localeCompare(b[0]));
274        for (let [key, value] of sortedEntries) {
275            let tmpDate = new Date(naviCommon.selectedDates[key]);
276            if(strDates){
277                strDates += ',';
278            }
279            strDates += prjutils.toYMD(tmpDate);
280        }
281        return strDates;
282    },
283    // 選択を親画面に反映する
284    setDateSelection: function(){
285        naviCommon.$dialogInput.val(naviCommon.getSelectedLabelCsv());
286        naviCommon.$dialogHidden.val(naviCommon.getSelectedDatesCsv());
287        prjutils.hideDialog($('#dialogDateSelection'));
288    },
289    // 選択をクリア
290    clearDateSelection: function() {
291        naviCommon.selectedDates = [];
292        $('#dialogSelectedMonth').val(prjutils.getThisMonth());
293        naviCommon.loadDateSelection();
294    },
295    // 前月へ
296    prevMonth: function() {
297        let selectedMonth = new Date($('#dialogSelectedMonth').val() + '-01');
298        selectedMonth.setMonth(selectedMonth.getMonth() - 1);
299        let ym = prjutils.toYM(selectedMonth);
300        $('#dialogSelectedMonth').val(ym);
301        naviCommon.loadDateSelection();
302    },
303    // 翌月へ
304    nextMonth: function() {
305        let selectedMonth = new Date($('#dialogSelectedMonth').val() + '-01');
306        selectedMonth.setMonth(selectedMonth.getMonth() + 1);
307        let ym = prjutils.toYM(selectedMonth);
308        $('#dialogSelectedMonth').val(ym);
309        naviCommon.loadDateSelection();
310    },
311    // 本日から指定日数選択する
312    setDaysFromToday: function(days){
313        naviCommon.selectedDates = [];
314        $('#dialogSelectedMonth').val(prjutils.getThisMonth());
315        let tmpDate = new Date(prjutils.getToday());
316        for(let i = 0; i < days; i++) {
317            let strDate = prjutils.toYMD(tmpDate);
318            naviCommon.selectedDates[strDate] = strDate;
319            tmpDate.setDate(tmpDate.getDate() + 1);
320        }
321        naviCommon.loadDateSelection();
322    },
323    // 日程選択状況の変更
324    selectDay: function($day) {
325        if($day.is('.old')) {
326            // 無効日付
327            return;
328        }
329        let selectedDay = $day.attr('data-date');
330        if ($day.is('.selected')) {
331            delete naviCommon.selectedDates[selectedDay];
332        } else {
333            naviCommon.selectedDates[selectedDay] = selectedDay;
334        }
335        naviCommon.loadDateSelection();
336    },
337
338    // 部活選択ダイアログ //
339    // ダイアログを開く
340    openClubSelection: function($input, $hidden){
341        naviCommon.$dialogInput = $input;
342        naviCommon.$dialogHidden = $hidden;
343        naviCommon.loadClubSelection();
344        prjutils.showDialog($('#dialogClubSelection'));
345    },
346    // 現在の状態をダイアログに反映する
347    loadClubSelection: function(){
348        naviCommon.clearClubSelection();
349        let csv = naviCommon.$dialogHidden.val();
350        let clubList = csv.split(',');
351        for(let clubCd of clubList){
352            let $clubBox = $('#dialogClubSelection').find('[data-club="' + clubCd + '"]');
353            $clubBox.addClass('selected');
354        }
355    },
356    // 選択を親画面に反映する
357    setClubSelection: function(){
358        let cdCsv = "";
359        let names = "";
360        $('#dialogClubSelection').find('.club-box.selected').each(function(){
361            let $clubBox = $(this);
362            if(cdCsv) {
363                cdCsv += ',';
364                names += '、';
365            }
366            cdCsv += $clubBox.attr('data-club');
367            names += $clubBox.text().trim();
368        });
369        naviCommon.$dialogInput.val(names);
370        naviCommon.$dialogHidden.val(cdCsv);
371        prjutils.hideDialog($('#dialogClubSelection'));
372    },
373    // 選択をクリア
374    clearClubSelection: function() {
375        $('#dialogClubSelection').find('.club-box.selected').removeClass('selected');
376    },
377
378    // エリア選択ダイアログ //
379    // ダイアログを開く
380    openAreaSelection: function($input, $hidden){
381        naviCommon.$dialogInput = $input;
382        naviCommon.$dialogHidden = $hidden;
383        naviCommon.loadAreaSelection();
384        prjutils.showDialog($('#dialogAreaSelection'));
385    },
386    // 現在の状態をダイアログに反映する
387    loadAreaSelection: function(){
388        naviCommon.clearAreaSelection();
389        let csv = naviCommon.$dialogHidden.val();
390        let prefectureList = csv.split(',');
391        for(let prefectureCd of prefectureList){
392            let $prefecture = $('#prefectureArea').find('[data-prefecture="' + prefectureCd + '"]');
393            $prefecture.addClass('selected');
394        }
395    },
396    // 選択を親画面に反映する
397    setAreaSelection: function(){
398        let cdCsv = "";
399        let names = "";
400        $('#prefectureArea').find('.selected').each(function(){
401            let $prefecture = $(this);
402            if(cdCsv) {
403                cdCsv += ',';
404                names += '、';
405            }
406            cdCsv += $prefecture.attr('data-prefecture');
407            names += $prefecture.text().trim();
408        });
409        naviCommon.$dialogInput.val(names);
410        naviCommon.$dialogHidden.val(cdCsv);
411        prjutils.hideDialog($('#dialogAreaSelection'));
412    },
413    // 選択をクリア
414    clearAreaSelection: function() {
415        $('#prefectureArea').find('.selected').removeClass('selected');
416    },
417}; // naviCommon
418
419naviCommon.init();