https://www.mitsubishifa.co.th/th/shared_so/v0003/js/meganav.js

1/* ヘッダーのメガナビコントロール                         */
2
3function makeMeganav() {
4	// ---------- 定数 ---------- //
5	var SAME_HEIGHT_JS_URL = 'shared_so/v0003/lib/jquery.sameHeight.js';
6	var KEY = {ESC: 27};
7
8	// ---------- 値 ---------- //
9
10	var $window = $(window);
11	var $document = $(document);
12	var $globalNavWrapper = $('#global_nav_meganav');
13
14	// ---------- モジュール ---------- //
15	/**
16	 * ヘッダーグローバルナビ
17	 * @constructor
18	 */
19	function Globalnav() {
20
21		var _$globalNavMenu = $('#gnmain');
22		var _$globalNavMenuTrigger = _$globalNavMenu.find('a.meganav_parent');
23		var _$globalNavMenuContents = _$globalNavMenu.find('div.meganav_inner');
24		var _$expandTrigger = _$globalNavMenu.find('a.expand');
25		var _$expandContents = _$globalNavMenu.find('div.expand_wrapper');
26		var _gnavSameHeightContentArr = [];
27		var _gnavOpenClassName = 'open';
28		var _gnavAnimDuration = 200;
29		var _expandOnClassName = 'on';
30		var _expandOpenFlag = false;
31
32		// コンストラクタ
33		(function(){
34			//メガドロップダウンメニュー初期化
35			_initGnav();
36			//ポップアップ初期化
37			if (_$expandTrigger.length > 0) _initExpand();
38
39		}());
40
41		// ---------- プライベートメソッド ---------- //
42		/**
43		 * メガドロップダウンメニュー初期化
44		 */
45		function _initGnav() {
46			var _currentIndex = null;
47			var _interval = 400;
48			var _timerID;
49			var _triggeOverFlag = false;
50			var _contentOverFlag = false;
51
52			//コンテンツ開閉
53			_$globalNavMenuTrigger.each(function(index) {
54				var $trigger = $(this);
55				var $triggerParent =  $trigger.closest('li');
56				var $content = $triggerParent.children('div.meganav_inner');
57				$trigger.data('index', index);
58				$content.data('openedFlag', false);
59
60				$trigger.bind('mouseover', function() {
61					clearTimeout(_timerID);
62					_triggeOverFlag = true;
63					//0.5秒後に開閉
64					_timerID = setTimeout(function() {
65						//すでに他のコンテンツが開いている場合
66						if (_currentIndex !== null && _currentIndex !== $trigger.data('index')) {
67							var $closeTrigger = _$globalNavMenuTrigger.eq(_currentIndex);
68							var $closeContent = $closeTrigger.closest('li').children('div.meganav_inner');
69							_ganavClose({
70								$trigger: $closeTrigger,
71								$content: $closeContent,
72								animFlag: false
73							});
74
75							_ganavOpen({
76								$trigger: $trigger,
77								$content: $content,
78								animFlag: false
79							});
80							_currentIndex = $trigger.data('index');
81						//トグル開閉
82						} else {
83							_ganavOpen({
84								$trigger: $trigger,
85								$content: $content,
86								animFlag: false
87							});
88							_currentIndex = $trigger.data('index');
89						}
90
91					}, _interval);
92
93				}).bind('mouseout', function() {
94					_triggeOverFlag = false;
95					outAction();
96				});
97
98				// コンテンツホバー時はメガナビを維持
99				$content.bind('mouseover', function() {
100					_contentOverFlag = true;
101				}).bind('mouseout', function() {
102					_contentOverFlag = false;
103					outAction();
104				});
105
106			});
107
108
109			function outAction() {
110				clearTimeout(_timerID);
111				_timerID = setTimeout(function() {
112					if (!_triggeOverFlag && !_contentOverFlag) {
113						_ganavClose({
114							$trigger: _$globalNavMenuTrigger,
115							$content: _$globalNavMenuContents,
116							animFlag: false
117						});
118						_currentIndex = null;
119						if (_$expandTrigger.length > 0) _expandReset();
120					}
121				}, _interval);
122			}
123		}
124
125		/**
126		 * メガドロップダウンメニューを開く
127		 * @param params
128		 */
129		function _ganavOpen(params) {
130			var $trigger = params.$trigger;
131			var $content = params.$content;
132			var animFlag = params.animFlag;
133
134			if (animFlag) {
135				$content.stop(true, true).slideDown(_gnavAnimDuration);
136			} else {
137				$content.css('display', 'block');
138			}
139			$trigger.addClass(_gnavOpenClassName);
140
141			//高さ揃え
142			if ($content.data('openedFlag') === false){
143				$content.data('openedFlag', true);
144				_initGnavSameHeight({
145					index:  $trigger.data('index'),
146					$content: $content
147				});
148			} else {
149				_gnavSameHeightManual({
150					index:  $trigger.data('index'),
151					$content: $content
152				});
153			}
154		}
155
156		/**
157		 * メガドロップダウンメニューを閉じる
158		 * @param params
159		 */
160		function _ganavClose(params) {
161			var $trigger = params.$trigger;
162			var $content = params.$content;
163			var animFlag = params.animFlag;
164

165			if (animFlag) {
166				$content.stop(true, true).slideUp(_gnavAnimDuration);
167			} else {
168				$content.css('display', 'none');
169			}
170			$trigger.removeClass(_gnavOpenClassName);
171		}
172
173		/**
174		 * メガドロップダウンメニューをリセット
175		 */
176		function _ganavReset() {
177			_$globalNavMenuContents.css('display', 'none');
178			_$globalNavMenuTrigger.removeClass(_gnavOpenClassName);
179			_currentIndex = null;
180		}
181
182		/**
183		 * メガドロップダウンメニューの高さ揃え（初期化）
184		 * @param params
185		 */
186		function _initGnavSameHeight(params) {
187			var $content = params.$content;
188			var $columnWrap = $content.find('ul.list_meganav_lv2');
189			var index = params.index;
190			var tempArray = [];
191
192			$columnWrap.each(function() {
193				var _$gnavSameHeightContent = $(this).find('.lv2_inner').parent().sameHeight({fontCeckAppendBox: '#container'});
194				tempArray.push(_$gnavSameHeightContent);
195			});
196			_gnavSameHeightContentArr[index] = tempArray;
197		}
198
199		/**
200		 * メガドロップダウンメニューの高さ揃え（マニュアル実行）
201		 */
202		function _gnavSameHeightManual(params) {
203			var $content = params.$content;
204			var index = params.index;
205			var tempArray = _gnavSameHeightContentArr[index];
206
207			var i = 0, sameHeightLen;
208			for (i = 0, sameHeightLen = tempArray.length; i < sameHeightLen; i++) {
209				var _$gnavSameHeightContent = tempArray[i];
210				_$gnavSameHeightContent.setSameHeightManual();
211			}
212		}
213
214		/**
215		 * ポップアップ初期化
216		 */
217		function _initExpand() {
218			_$expandTrigger.each(function() {
219				var $trigger = $(this);
220				var $content = $trigger.next('div.expand_wrapper');
221				var $closeBtn = $content.find('a.close');
222				var $arrow = $content.find('span.expand_arrow');
223
224				$trigger.click(function (e) {
225					if ($trigger.hasClass(_expandOnClassName)) {
226						_expandClose({
227							$trigger: $trigger,
228							$content: $content
229						});
230					} else {
231						_expandOpen({
232							$trigger: $trigger,
233							$content: $content,
234							$closeBtn: $closeBtn,
235							$arrow: $arrow
236						});
237					}
238					e.preventDefault();
239					return false;
240				});
241
242				$closeBtn.click(function (e) {
243					_expandClose({
244						$trigger: $trigger,
245						$content: $content
246					});
247					e.preventDefault();
248					return false;
249				});
250
251				//ポップアップエリア内、及びトリガー押下では閉じないようにする
252				$trigger.mousedown(function (e) {
253					e.stopPropagation();
254				});
255				$content.mousedown(function (e) {
256					e.stopPropagation();
257				});
258
259			});
260
261			$window.keydown(function (e) {
262				switch(e.keyCode) {
263					case KEY.ESC:
264						e.preventDefault();
265						_expandReset();
266						break;
267
268					default:
269						break;
270				}
271			});
272		}
273
274		/**
275		 * ポップアップを開く
276		 * @param params
277		 */
278		function _expandOpen(params) {
279			var $trigger = params.$trigger;
280			var $content = params.$content;
281			var $closeBtn = params.$closeBtn;
282			var $arrow = params.$arrow;
283			var $wrapper = $trigger.closest('div.meganav_inner');
284			var conLeftClassName = 'left';
285			var conRightClassName = 'right';
286
287			_expandReset();
288			_expandOpenFlag = true;
289			$content.css('display', 'block');
290			$trigger.addClass(_expandOnClassName);
291			$document.mousedown(_expandReset);
292
293			//ポジション設定
294			var wrapperBounds = $wrapper.get(0).getBoundingClientRect();
295			var wrapperRight = wrapperBounds.right + $document.scrollLeft();
296			var triggerBounds = $trigger.get(0).getBoundingClientRect();
297			var triggerRight = triggerBounds.right + $document.scrollLeft();
298			var offsetTop = parseFloat($closeBtn.css('top')) + $closeBtn.outerHeight();
299			var top = Math.floor(($content.outerHeight()- offsetTop - $trigger.outerHeight()) /2);
300			var arrowTop = Math.floor(($content.outerHeight() - offsetTop - $arrow.outerHeight()) /2);
301			top += offsetTop;
302			arrowTop += offsetTop;
303
304			$content.css('top', -top + 'px');
305			$arrow.css('top', arrowTop + 'px');
306
307			if (wrapperRight < (triggerRight + $content.outerWidth())) {
308				$content.addClass(conLeftClassName);
309			} else {
310				$content.addClass(conRightClassName);
311			}
312
313		}
314
315		/**
316		 * ポップアップを閉じる
317		 * @param params
318		 */
319		function _expandClose(params) {
320			var $trigger = params.$trigger;
321			var $content = params.$content;
322
323			_expandOpenFlag = false;

324			$document.unbind('mousedown', _expandReset);
325			$content.css('display', 'none');
326			$trigger.removeClass(_expandOnClassName);
327		}
328
329		/**
330		 * ポップアップをリセット
331		 */
332		function _expandReset() {
333			if (_expandOpenFlag) {
334				_expandOpenFlag = false;
335				$document.unbind('mousedown', _expandReset);
336				_$expandContents.css('display', 'none');
337				_$expandTrigger.removeClass(_expandOnClassName);
338			}
339		}
340
341	}
342
343	// コンストラクタ
344	(function(){
345		//sameHeightプラグインの読み込み
346		if (!$.isFunction($.fn.sameHeight)) {
347			$.getScript(SAME_HEIGHT_JS_URL);
348		}
349		//グローバルナビメニュー初期化
350		if ($globalNavWrapper.length > 0) {
351			$globalNavWrapper.addClass('meganav');
352			Globalnav();
353		}
354
355	}());
356
357}
358
359$(function() {
360	makeMeganav();
361});