https://iret.media/wp-content/themes/clp_media/js/function.js?ver=20161012_

1jQuery(function ($) {
2    var _menuBtn = $('.btn_menu-toggle');
3    var _menuTrigger = $('.menu-trigger');
4    var _menuFlag = false;
5    var _page__header = $('#page__header');
6    var _search = $('#search');
7    var _clearBtn = $('#clearBtn');
8    var _textForm = document.getElementById('inputKeyword');
9
10    // 検索結果ページ表示時に検索キーワードクリア
11    if (_textForm && _textForm.value) {
12        _textForm.value = '';
13    }
14
15    // 検索メニュー開閉
16    _menuBtn.on('click keydown', function (event) {
17        if (
18            event.type === 'keydown' &&
19            event.key !== 'Enter' &&
20            event.key !== ' '
21        ) {
22            return;
23        }
24
25        event.preventDefault();
26
27        var nextMenuState = !_menuFlag;
28
29        _menuTrigger.toggleClass('active', nextMenuState);
30        _page__header.toggleClass('active', nextMenuState);
31        _search.toggleClass('active', nextMenuState);
32
33        _menuBtn
34            .attr('aria-expanded', nextMenuState ? 'true' : 'false')
35            .attr(
36                'aria-label',
37                nextMenuState
38                    ? '検索メニューを閉じる'
39                    : '検索メニューを開く'
40            );
41
42        fixedMenu(nextMenuState);
43
44        if (nextMenuState && _textForm) {
45            window.setTimeout(function () {
46                _textForm.focus();
47            }, 100);
48        }
49
50        if (!nextMenuState && _textForm) {
51            _textForm.value = '';
52
53            if (_clearBtn.length) {
54                _clearBtn.removeClass('active');
55            }
56        }
57
58        _menuFlag = nextMenuState;
59    });
60
61    // Escapeキーで閉じる
62    $(document).on('keydown', function (event) {
63        if (event.key !== 'Escape' || !_menuFlag) {
64            return;
65        }
66
67        _menuTrigger.removeClass('active');
68        _page__header.removeClass('active');
69        _search.removeClass('active');
70
71        _menuBtn
72            .attr('aria-expanded', 'false')
73            .attr('aria-label', '検索メニューを開く');
74
75        fixedMenu(false);
76
77        _menuFlag = false;
78
79        _menuBtn.filter(':visible').first().focus();
80    });
81
82    // 検索クリア
83    if (_clearBtn.length) {
84        _clearBtn.on('click', function () {
85            if (!_textForm) {
86                return;
87            }
88
89            _textForm.value = '';
90            _clearBtn.removeClass('active');
91            _textForm.focus();
92        });
93    }
94
95    // スクロール時ヘッダー制御
96    var _scrollPosition = $(window).scrollTop();
97    var _body = $('body');
98
99    $(window).on('scroll', function () {
100        _scrollPosition = $(window).scrollTop();
101
102        if (!_body.hasClass('backFixed')) {
103            if (_scrollPosition >= 99) {
104                _body.addClass('overMenu');
105            } else {
106                _body.removeClass('overMenu');
107            }
108        }
109    });
110
111    // iframeレスポンシブ
112    var $iframes = $('iframe');
113
114    $iframes.each(function () {
115        var width = parseFloat($(this).attr('width'));
116        var height = parseFloat($(this).attr('height'));
117
118        if (width > 0 && height > 0) {
119            $(this)
120                .data('ratio', height / width)
121                .removeAttr('width')
122                .removeAttr('height');
123        }
124    });
125
126    $(window)
127        .on('resize', function () {
128            $iframes.each(function () {
129                var ratio = $(this).data('ratio');
130
131                if (!ratio) {
132                    return;
133                }
134
135                var width = $(this).parent().width();
136
137                $(this)
138                    .width(width)
139                    .height(width * ratio);
140            });
141        })
142        .trigger('resize');
143});
144
145// 検索入力
146var _textForm = document.getElementById('inputKeyword');
147var _clearBtn = document.getElementById('clearBtn');
148
149function inputChange() {
150    if (!_textForm || !_clearBtn) {
151        return;
152    }
153
154    if (_textForm.value === '') {
155        _clearBtn.classList.remove('active');
156    } else {
157        _clearBtn.classList.add('active');
158    }
159}
160
161if (_textForm && _clearBtn) {
162    _textForm.addEventListener('input', inputChange);
163}
164
165const fixedMenu = (fixed) => {
166    /**
167     * 表示されているスクロールバーとの差分を計測し、
168     * 背面固定時はその差分だけbody要素へ余白を追加する
169     */
170    const scrollbarWidth = window.innerWidth - document.body.clientWidth;
171    document.body.style.paddingRight = fixed ? `${scrollbarWidth}px` : '';
172
173    const _body = $('body');
174
175    if (fixed) {
176        _body.addClass('backFixed');
177    } else {
178        _body.removeClass('backFixed');
179    }
180
181    /**
182     * スクロール位置取得
183     */
184    const scrollingElement = () => {
185        const browser = window.navigator.userAgent.toLowerCase();
186
187        if ('scrollingElement' in document) {
188            return document.scrollingElement;
189        }
190
191        if (browser.indexOf('webkit') > 0) {
192            return document.body;
193        }
194
195        return document.documentElement;
196    };
197
198    const scrollY = fixed
199        ? scrollingElement().scrollTop
200        : parseInt(document.body.style.top || '0', 10);
201
202    /**
203     * 背景固定
204     */
205    const styles = {
206        height: '100vh',
207        left: '0',
208        overflow: 'hidden',
209        position: 'fixed',
210        top: `${scrollY * -1}px`,
211        width: '100vw',
212    };
213

214    Object.keys(styles).forEach((key) => {
215        document.body.style[key] = fixed ? styles[key] : '';
216    });
217
218    /**
219     * 元の位置へ戻す
220     */
221    if (!fixed) {
222        window.scrollTo(0, scrollY * -1);
223    }
224};