https://rm-navi.com/html/template/default/assets/js/search.js

1$(function() {
2    /**
3     * ドキュメントの読み込みが完了したときに実行される処理
4     */
5    $(document).ready(function() {
6        ////////////////////////////////////////////////
7        // DOCUMENT 初期化処理
8        ////////////////////////////////////////////////
9
10        // urlを取得
11        const url = new URL(window.location.href);
12        // URLのGETパラメータを取得
13        const urlParams = url.searchParams;
14
15        /**
16         * GETパラメータを追加するための処理
17         * @param {selector} form
18         * @param {string} name
19         * @param {string|int} value
20         */
21        const addParam = (form, name, value) => {
22            if (value != "" && value != null) {
23                $('<input>').attr({
24                    type: 'hidden',
25                    name: name,
26                    value: value
27                }).appendTo(form);
28            }
29        }
30
31        /**
32         * 配列形式のGETパラメータをオブジェクトに変換する
33         * キー指定のGETパラメータにも対応
34         *
35         * @returns {Object} GETパラメータをオブジェクトに変換したもの
36         */
37        const getArrayParam = () => {
38            const result = {};
39            urlParams.forEach((val, key) => {
40                if (key === 'category[]' || key === 'sale_type[]') {
41                    result[key] = Array.from(urlParams.getAll(key));
42                } else if (matches = key.match(/(category|sale_type)\[(\d*)\]/)) {
43                    const inKey = matches[1] + '[]';
44                    if (!result[inKey]) {
45                        result[inKey] = [];
46                    }
47                    // キー指定にかかわらず、順次に値を追加していく
48                    // 例: category[0]=1&category[1]=2&category[2]=3 => category[]=[1, 2, 3]
49                    result[inKey].push(urlParams.get(key));
50                } else {
51                    result[key] = urlParams.get(key);
52                }
53            })
54
55            return result;
56        }
57
58        const arrayParam = getArrayParam();
59        // GETパラメータからカテゴリの値を取得
60        const categoriesParam = arrayParam['category[]'];
61        // GETパラメータから商品種別の値を取得
62        const saleTypesParam = arrayParam['sale_type[]'];
63        // GETパラメータからフリーワードの値を取得
64        const keywordParam = arrayParam['keyword'];
65
66        /**
67         * ゲットパラメータのkeywordの値がある場合、
68         * フリーワード検索の入力欄にkeywordの値を入れる
69         * keywordの値が100字以上の場合、先頭から100字のみを入れる
70         */
71        if (keywordParam != null && keywordParam != "") {
72            var keyword = keywordParam;
73            if(keywordParam.length > keywordMaxLength) {
74                keyword = keyword.slice(0, keywordMaxLength);
75            }
76            $('.bl_keywordSearch_input').val(keyword);
77        }
78

79        ////////////////////////////////////////////////
80        // DOCUMENT 各種イベントをバインド
81        ////////////////////////////////////////////////
82
83        // サービスメニューボタンは、コンサルティングメニューとデジタルソリューションの二つのパラメータを同時に変更する
84        const serviceMenuBtn = $('input.js_checkbox.digital_solution[type="checkbox"][name="sale_type[]"]').get(0);
85        serviceMenuBtn.addEventListener('change', (event) => {
86            // コンサルティングメニューのチェックボックスを同期
87            $('input.hidden.consulting_menu[type="checkbox"][name="sale_type[]"]').prop('checked', $(event.target).prop('checked'));
88        });
89
90        // カテゴリ選択モーダルで全選択チェックボックスが変更されたときの追加処理
91        $('#searchModal_02').find('.js_selectAll').on('change', function() {
92            $('input.hidden.consulting_menu[type="checkbox"][name="sale_type[]"]').prop('checked', $(this).prop('checked'));
93        });
94
95        /**
96         * 条件検索のモーダルの初期化処理
97         */
98        $('.js_checkboxContainer').each(function(containerIndex) {
99            // モーダルIDの取得
100            const modalId = this.closest('.js_searchModal').id;
101            // パラメータ取得
102            let param;
103            if (modalId === 'searchModal_01') {
104                param = categoriesParam;
105            } else if (modalId === 'searchModal_02') {
106                param = saleTypesParam;
107                // サービスメニューのうち、どちらかのみの場合、両方をチェックする
108                if (param && (param.indexOf('2') !== -1 && param.indexOf('1') == -1) ) {
109                    param.push('1');
110                }
111                if (param && (param.indexOf('2') == -1 && param.indexOf('1') !== -1) ) {
112                    param.push('2');
113                }
114            }
115            // パラメータがない場合は処理をスキップ
116            if (param == undefined) {
117                // continue
118                return true;
119            }
120
121            // 非表示にしているコンサルティングメニューのチェックボックス
122            const $consultingMenuInput = $('input.hidden.consulting_menu[type="checkbox"][name="sale_type[]"]');
123
124            // チェック済みのチェックボックス名を保持する変数
125            var dataTxt = [];
126            // パラメータに一致するチェックボックスをチェック済みにする
127            this.querySelectorAll('.js_checkbox').forEach((checkbox) => {
128                const value = checkbox.value;
129                if (param.indexOf(value) !== -1) {
130                    // 1. モーダルがコンテンツ選択
131                    // 2. 処理中のinput要素の value がデジタルソリューションである
132                    // 3. コンサルティングメニューのチェックボックスが存在する
133                    if (modalId === 'searchModal_02' && value === '2' && $consultingMenuInput) {
134                        // コンサルティングメニューのチェックボックスを同期する
135                        $consultingMenuInput.prop('checked', true);
136                    }
137                    dataTxt.push(checkbox.nextElementSibling.textContent);
138                    $(checkbox).prop('checked', true);
139                }
140            });
141            /**
142             * 選択したカテゴリもしくは商品種別が１個以上の場合
143             * モーダルを開くボタンのラベルを変更する
144             */
145            if(dataTxt.length > 0) {
146                $($('.js_searchParams')[containerIndex]).text(dataTxt.join('、'));
147            }
148
149            // パラメータに一致するチェックボックスが全てチェック済みの場合、全選択チェックボックスをチェック済みにする
150            const isAllChecked = this.querySelectorAll('.js_checkbox:not(:checked').length === 0;
151            var selectAll = $(this).find('.js_selectAll');
152            selectAll.prop('checked', isAllChecked);
153        });
154
155        // 条件検索の決定ボタン押下時の処理
156        $('#js_filterSearch_submit').on("click", function(event) {
157            event.preventDefault();
158            var form = $('#js_filterSearch_form');
159            // 条件検索の場合、tabの値は1
160            addParam(form, 'tab', 1);
161            form.submit();
162        });
163
164        // フリーワード検索の送信時の処理
165        $('.bl_keywordSearch').on("submit", function() {
166            var form = $(this);
167            // フリーワード検索の場合、tabの値は2
168            addParam(form, 'tab', 2);
169        });
170
171        /**
172         * 並び替えのボタン押下時の処理
173         */
174        $('.js_order_btn').each(function() {
175            $(this).on("click", function() {
176                // data-valueの値を取得
177                var order = $(this).data('value');
178                var orderKey = 'order';
179                // 現在のurlのパラメータにorderがなければ追加
180                // あれば値を上書き
181                if(!url.searchParams.get(orderKey)) {
182                    url.searchParams.append(orderKey, order);
183                } else {
184                    url.searchParams.set(orderKey, order);
185                }
186                // 現在のurlのパラメータからpageを削除
187                var pageKey = 'page';
188                if(url.searchParams.get(pageKey)) {
189                    url.searchParams.delete(pageKey);
190                }
191                // 修正したurl先へ遷移
192                location.href = url;
193            });
194        });
195
196        /**
197         * ページのボタン押下時の処理
198         */
199        $('.js_page_btn').each(function() {
200            $(this).on("click", function() {
201                // data-valueの値を取得
202                var page = $(this).data('value');
203                var pageKey = 'page';
204                url.searchParams.set(pageKey, page);
205                // 修正したurl先へ遷移
206                location.href = url;
207            });
208        });
209
210        /**
211         * プルダウンの領域外をクリックしたとき
212         * プルダウンを閉じる
213         */
214        $(document).click(function(e) {
215            if(!$(e.target).closest('.el_pullDownBox').length) {
216                $('.el_pullDownBox').prop('open', false);
217            }
218        });
219
220        /**
221         * モーダルの領域外をクリックしたとき
222         * ×ボタンや決定ボタン押下時と同様の処理を行う
223         */
224        $(document).click(function(e) {
225            // カテゴリ選択モーダル
226            const categoryModal = document.getElementById('searchModal_01');
227            const contentsModal = document.getElementById('searchModal_02');
228
229            if(categoryModal.classList.contains('is_open') || contentsModal.classList.contains('is_open')) {
230                if(!e.target.closest('.bl_searchModalCont_container') &&
231                    !e.target.closest('.bl_filterSearch_conditionBtn') &&
232                    !e.target.closest('.bl_searchModalCont_submit') ||
233                    e.target.closest('.bl_searchModalCont_closeBtn')
234                    ) {
235                        if(categoryModal.classList.contains('is_open')){
236                            $('.category_submit').click();
237                        } else if(contentsModal.classList.contains('is_open')){
238                            $('.contents_submit').click();
239                        }
240                }
241            }
242        })
243
244        $('.js_searchModal_open').hover(
245            function () {
246                // over
247                const searchParams = $(this).find('.js_searchParams');
248                if(searchParams.get(0).offsetWidth < searchParams.get(0).scrollWidth) {
249                    $(this).attr('title', searchParams.text());
250                }
251            },
252            function () {
253                // out
254                $(this).attr('title', '');
255            }
256        );
257    });
258});