https://www.dadway-onlineshop.com/js/sys/ui.js

1/* 名前空間を定義 */
2var ecblib = ecblib || {};
3ecblib.ui = ecblib.ui || {};
4/*!
5 * UIの表示に関する関数群
6 * 
7 * @requires module:jquery1.11+
8 * @requires module:jquery.cookie.js
9 * @requires module:modernizr-custom.js
10 */
11(function () {
12	/* ローカル用の名前空間 */
13	var _ui = ecblib.ui;
14
15	/*!
16	 * megamenu ui
17	 */
18	jQuery(document).ready(function () {
19		var megamenuForHover = function () {
20			jQuery('.js-animation-megamenu-hover').hover(function () {
21				jQuery(this).children('.js-submenu-hover').stop(true).slideDown(200);
22				jQuery(this).children('a').addClass('active');
23			}, function () {
24				jQuery(this).children('.js-submenu-hover').stop(true).slideUp(200);
25				jQuery(this).children('a').removeClass('active');
26			});
27		}();
28
29		var megamenuForClick = function () {
30			jQuery('.js-animation-megamenu-click').children('a').on('click', function (e) {
31				var $this = jQuery(this);
32				jQuery('.js-animation-megamenu-click').children('a').each(function () {
33					if (!jQuery(this).is($this)) {
34						jQuery(this).siblings('.js-submenu-click').stop(true).slideUp(200);
35						jQuery(this).removeClass('active');
36					}
37				});
38
39				jQuery(this).addClass('active');
40				jQuery(this).siblings('.js-submenu-click').stop(true).slideDown(200);
41				return false;
42			});
43			jQuery(document).on('click touchstart', function (e) {
44				if (!jQuery(e.target).closest('.js-animation-megamenu-click').length) {
45					jQuery('.js-animation-megamenu-click').children('.js-submenu-click').stop(true).slideUp(200);
46					jQuery('.js-animation-megamenu-click').children('a').removeClass('active');
47				}
48			});
49		}();
50	});
51
52	/*!
53	 * 動的なカテゴリを生成するAJAX
54	 */
55	jQuery(document).ready(function () {
56		jQuery('.js-dynamic-category').each(function () {
57			var category = jQuery(this).data('category') != undefined ? jQuery(this).data('category') : '';
58			jQuery(this).load(ecblib.sys.wwwroot + '/shop/js/category.aspx?category=' + category);
59		});
60	});
61
62	/*!
63	 * 動的なジャンルを生成するAJAX
64	 */
65	jQuery(document).ready(function () {
66		jQuery('.js-dynamic-genre').each(function () {
67			var genre = jQuery(this).data('genre') != undefined ? jQuery(this).data('genre') : '';
68			jQuery(this).load(ecblib.sys.wwwroot + '/shop/js/genre.aspx?genre=' + genre);
69		});
70	});
71
72	/*!
73	 * カート内件数のバッジ表示
74	 */
75	jQuery(document).ready(function () {
76		if(!jQuery('.js-cart-count').length) return;
77		jQuery.ajax({
78			url: ecblib.sys.wwwroot + "/shop/js/cart.aspx",
79			cache: false,
80			dataType: "html",
81			success: function (html) {
82				var count = jQuery(html).data('count');
83				if (!count) {
84					jQuery('.js-cart-count').hide();
85				} else {
86					jQuery('.js-cart-count').text(count)
87						.show();
88				}
89			}
90		});
91	});
92
93	/*!
94	 * アラート表示
95	 */
96	_ui.alert = function (title, msg, options) {
97
98		jQuery(document.activeElement).blur();
99
100		var template = ecblib.tmpl.ui.ALERT;
101		template = ecblib.sys.render(template, { Title: title });
102
103		var defaults = { quit: function () { }, ok: function () { }, width: null, height: null };
104		var options = jQuery.extend({}, defaults, options);
105		var gloupId = 'stdui-dialog' + getUUID();
106
107		var $obj = jQuery(template);

108		var $overlay = jQuery('<div class="modal-overlay-alert" />');
109
110		var action = function () {
111			return {
112				close: function () {
113					$overlay.remove();
114					$obj.remove();
115
116					/* 一番最後に開かれたダイアログをアクティブにする */
117					jQuery(document).off('keyup.' + gloupId);
118
119					if (jQuery('.js-modal-alert,.js-modal-dialog').last().length > 0) {
120						jQuery('.js-modal-alert,.js-modal-dialog').last().addClass('js-active');
121					} else {
122						/* 背景固定解除 */
123						setBackGroundFixed(false);
124					}
125				}
126			};
127		}();
128
129		var showDialog = function () {
130			/* 他のダイアログはアクティブを削除する */
131			jQuery('.js-modal-alert,.js-modal-dialog').removeClass('js-active');
132
133			/* 背景を固定にする */
134			setBackGroundFixed(true);
135
136			/* 幅、高さの設定 */
137			if (options.width) {
138				$obj.css('width', options.width);
139			}
140			if (options.height) {
141				$obj.css('height', options.height);
142			}
143
144			$obj.find('.js-modal-body-wrapper').text(msg).html(function () {
145				return jQuery(this).text().replace(/\r?\n/g, '<br>');
146			});
147
148			$overlay.appendTo('body');
149			$obj.appendTo('body');
150
151			var screen = getCenterScreen($obj);
152			$obj.css('position', 'absolute')
153				.css('top', screen.y + 'px')
154				.css('left', screen.x + 'px');
155		};
156
157		/* OKボタン押下 */
158		$obj.find(':button').on('click', function () {
159			options.ok.apply(this, arguments);
160			action.close();
161		});
162
163		/* ×ボタン、オーバーレイ領域、ESC押下 */
164		$obj.find('.js-modal-close').on('click', function () {
165			options.quit.apply(this, arguments);
166			action.close();
167		});
168		$overlay.on('click', function () {
169			options.quit.apply(this, arguments);
170			action.close();
171		});
172		jQuery(document).on('keyup.' + gloupId, function (e) {
173			if ($obj.hasClass("js-active") && e.keyCode === 27) { // etc
174				options.quit.apply(this, arguments);
175				action.close();
176			}
177		});
178
179		showDialog();
180	};
181
182	/*!
183	 * ダイアログ表示
184	 * 
185	 * モーダル表示(引数はIDを指定)
186	 * ecblib.ui.dialog('modal');
187	 */
188	_ui.dialog = function (id, options) {
189
190		jQuery(document.activeElement).blur();
191
192		var template = ecblib.tmpl.ui.MODAL_DIALOG;
193
194		var defaults = { quit: function () { }, buttons: {}, links: {}, width: null, height: null };
195		var options = jQuery.extend({}, defaults, options);
196		var gloupId = 'stdui-dialog' + getUUID();
197		var $obj = jQuery(template);

198		var $overlay = jQuery('<div class="modal-overlay" />');
199		var $contents = jQuery("#" + id);
200
201		var action = function () {
202			return {
203				close: function () {
204					$overlay.remove();
205					$obj.remove();
206
207					/* 一番最後に開かれたダイアログをアクティブにする */
208					jQuery(document).off('keyup.' + gloupId);
209
210					if (jQuery('.js-modal-alert,.js-modal-dialog').last().length > 0) {
211						jQuery('.js-modal-alert,.js-modal-dialog').last().addClass('js-active');
212					} else {
213						/* 背景固定解除 */
214						setBackGroundFixed(false);
215					}
216				}
217			};
218		}();
219
220		var quitEvent = function () {
221			var ret = options.quit.apply(this, [action]);
222			if (ret == undefined || ret) {
223				action.close();
224			}
225		};
226
227		var showDialog = function () {
228			/* 他のダイアログはアクティブを削除する */
229			jQuery('.js-modal-alert,.js-modal-dialog').removeClass('js-active');
230
231			/* 背景を固定にする */
232			setBackGroundFixed(true);
233
234			/* 幅、高さの設定 */
235			if (options.width) {
236				$obj.css('width', options.width);
237			}
238			if (options.height) {
239				$obj.css('height', options.height);
240			}
241
242			$obj.find('.js-modal-title').text($contents.data('title'));
243			$obj.find('.js-modal-content').append($contents.html());
244
245			$overlay.appendTo('body');
246			$obj.appendTo('body');
247
248			var screen = getCenterScreen($obj);
249			$obj.css('position', 'absolute')
250				.css('top', screen.y + 'px')
251				.css('left', screen.x + 'px');
252
253			/* ボタン押下 */
254			$obj.find(':button,:submit,:image').on('click', function () {
255				if (jQuery(this).attr('name') && options.buttons[jQuery(this).attr("name")]) {
256					var ret = options.buttons[jQuery(this).attr("name")].apply(this, [action]);
257					if (jQuery(this).attr('type') == 'submit' && (ret == undefined || ret)) {
258						$obj.find('form').submit();
259					}
260					return ret;
261				}
262			});
263
264			$obj.find('a').on('click', function () {
265				if (jQuery(this).attr('name') && options.links[jQuery(this).attr("name")]) {
266					return options.links[jQuery(this).attr("name")].apply(this, [action]);
267				}
268			});
269
270
271			/* ×ボタン、オーバーレイ領域、ESC押下 */
272			$obj.find('.js-modal-close').on('click', function () {
273				quitEvent.apply(this, arguments);
274			});
275			$overlay.on('click', function () {
276				quitEvent.apply(this, arguments);
277			});
278			jQuery(document).on('keyup.' + gloupId, function (e) {
279				if ($obj.hasClass("js-active") && e.keyCode === 27) {
280					quitEvent.apply(this, arguments);
281				}
282			});
283		};
284
285		showDialog();
286	};
287
288	/*!
289	 * ヘッダー警告表示
290	 */
291	_ui.showHeaderWarning = function (contentsHtml, options) {
292		var template = ecblib.tmpl.ui.WARNING;
293		template = ecblib.sys.render(template, { Contents: contentsHtml });
294
295		var defaults = { quit: function () { } };
296		var options = jQuery.extend({}, defaults, options);
297		var action = function () {
298			return {
299				close: function () {
300					$obj.slideUp(200);
301				}
302			};
303		}();
304
305		var $obj = jQuery(template);
306		$obj.find('.js-header-warning-close').on('click', function () {
307			var ret = options.quit.apply(this, [action]);
308			if (ret == undefined || ret) {
309				action.close();
310			}
311		});
312
313		$obj.hide();
314		$obj.prependTo('body');
315		$obj.slideDown(200);
316
317	};
318
319	/*!
320	 * ツールチップを表示する
321	 */
322	_ui.showToolTip = function (jQuerySelector, options) {
323		var defaults = { tooltip: '', position: 'top', diptimeSec: 3, classname: 'balloontip' };
324		var options = jQuery.extend({}, defaults, options);
325
326		jQuery(jQuerySelector).each(function () {
327			var $this = this;
328			jQuery($this).showBalloon({
329				classname: options.classname,
330				contents: options.tooltip,
331				position: options.position,
332				html: true
333			});
334			if (options.diptimeSec) {
335				setTimeout(function () {
336					jQuery($this).hideBalloon();
337				}, 1000 * options.diptimeSec);
338
339			}
340		});
341	};
342
343	/*!
344	 * ツールチップを非表示にする
345	 */
346	_ui.hideToolTip = function (jQuerySelector) {
347		jQuery(jQuerySelector).hideBalloon();
348	};
349
350	/*!
351	 * コンテキストメニューを表示する
352	 */
353	_ui.showContextMenu = function (jQuerySelector, templateid, options) {
354		var defaults = { offsetY: 0, offsetX: 0, links: {} };
355		var options = jQuery.extend({}, defaults, options);
356		var $template = jQuery(templateid);
357		var gloupId = 'stdui-contextmenu' + getUUID();
358
359		var innerContextMenu = function () {
360			$offset = jQuery(jQuerySelector).offset();
361			$template.find('span').off('click');
362			$template.find('span').on('click', function () {
363				if (jQuery(this).attr('name') && options.links[jQuery(this).attr("name")]) {
364					return options.links[jQuery(this).attr("name")].apply(this, arguments);
365				}
366			});
367
368			if ($template.is(":hidden")) {
369				$template.css('position', 'absolute')
370					.css('top', $offset.top + options.offsetY + jQuery(jQuerySelector).outerHeight())
371					.css('left', $offset.left + options.offsetX)
372					.fadeIn().promise().done(function () {
373						jQuery(document).on('click.' + gloupId + ' touchend.' + gloupId, function () {
374							$template.fadeOut();
375							jQuery(document).off('click.' + gloupId + ' touchend.' + gloupId);
376						});

377					});
378			}
379		};
380
381		jQuery(jQuerySelector).each(function () {
382			innerContextMenu.apply(this, arguments);
383		});
384
385	};
386
387	/*!
388	 * ツールチップUI
389	 */
390	jQuery(document).ready(function () {
391		jQuery.balloon.defaults.css = null;
392		jQuery('[data-tooltip]').each(function () {
393
394			var tooltip = jQuery(this).data('tooltip').replace(/\r?\n/g, '<br>');
395			var position = jQuery(this).data('tooltip-position');
396			if (!position) {
397				position = 'top';
398			}
399
400			jQuery(this).on({
401				'focusin': function () {
402					jQuery(this).hideBalloon()
403						.showBalloon({
404							classname: 'balloontip',
405							contents: tooltip,
406							position: position,
407							html: true
408						});
409				},
410				'focusout': function () {
411					jQuery(this).hideBalloon();
412				}
413			});
414		});
415	});
416
417	/*!
418	 * 郵便番号サジェストUI
419	 */
420	/*  郵便番号検索 */
421	var timerId_lookupzip_ = null;
422	var zipcache_lookupzip_ = '';
423	var timerId_zipcache_ = null;
424	_ui.zipcodeSuggest = function (zip, pref, addr, addr2, cnt, offsetX, offsetY) {
425		var timerOffset = 300;
426		var zip_id = '#' + zip + cnt;
427		var pref_id = '#' + pref + cnt;
428		var addr_id = '#' + addr + cnt;
429		var addr2_id = '#' + addr2 + cnt;
430		var defaultXOffset = 0;
431		var defaultYOffset = jQuery(zip_id).outerHeight();
432		offsetX = offsetX + defaultXOffset;
433		offsetY = offsetY + defaultYOffset;
434		jQuery(zip_id).bind('keyup paste', function () {
435			jQuery('ul.js-ziplist').remove();
436			clearTimeout(timerId_zipcache_);
437			timerId_zipcache_ = setTimeout(function () {
438				if (zipcache_lookupzip_ == jQuery(zip_id).val()) {
439					zipcache_lookupzip_ = jQuery(zip_id).val();
440					return false;
441				}
442				zipcache_lookupzip_ = jQuery(zip_id).val();
443			}, timerOffset);
444			clearTimeout(timerId_lookupzip_);
445			timerId_lookupzip_ = setTimeout(function () {
446				if (!jQuery(zip_id).val().match(/^[0-9]{3}[\-]{0,1}[0-9]{0,4}$/)) {
447					return true;
448				}
449
450				jQuery.get('../search/lookupzipjson.aspx', {
451					zip: jQuery(zip_id).val(),
452					charset: 'UTF-8'
453				}, function (data, status) {
454					var of = jQuery(zip_id).offset();
455					var ul = jQuery('<ul></ul>').addClass('js-ziplist block-ziplist--ziplist-frame dropdown');
456					ul.css('position', "absolute");
457					ul.css('top', of.top + offsetY);
458					ul.css('left', of.left + offsetX);
459					var searchCount = 0;
460					var tempzip, temppref, tempaddr, tempaddr2;
461					jQuery.each(data, function (key, item) {
462						searchCount++;
463						tempzip = item.zip;
464						temppref = item.pref;
465						tempaddr = item.addr;
466						tempaddr2 = item.addr2;
467						var li = jQuery('<li><span>' + key + ' ' + item.pref + ' ' + item.addr + ' ' + item.addr2 + '</span></li>');
468						li.bind('click', function () {
469							jQuery(zip_id).val(item.zip);
470							jQuery(pref_id).val(item.pref);
471							jQuery(addr_id).val(item.addr);
472							jQuery(addr2_id).val(item.addr2);
473							jQuery('ul.js-ziplist').remove();
474							jQuery(zip_id).blur();
475							jQuery(pref_id).change();
476							jQuery(addr_id).focus();
477							jQuery(addr2_id).blur().focus();
478							return false;
479						});
480						ul.append(li);
481					});
482					if ((searchCount == 1) && (zipcache_lookupzip_.replace("-", "").length == 7)) {
483						jQuery(zip_id).blur().focus();
484						//IMEの入力を確定させた後に値を詰めなおし
485						setTimeout(function(){
486							jQuery(zip_id).val(tempzip);
487							jQuery(pref_id).val(temppref);
488							jQuery(addr_id).val(tempaddr);
489							jQuery(addr2_id).val(tempaddr2);
490							jQuery('ul.js-ziplist').remove();
491							jQuery(pref_id).change();
492							jQuery(addr_id).focus();
493							jQuery(addr2_id).focus();
494						}, 0);
495						return false;
496					} else if (searchCount != 0) {
497						jQuery(document.body).append(ul);
498					}
499				}, 'json');
500			}, timerOffset);
501		});
502	};
503
504	/*!
505	 * 非推奨ブラウザ警告表示
506	 * @requires module:jquery.cookie.js
507	 * @requires module:modernizr-custom.js
508	 */
509	jQuery(document).ready(function () {
510
511		/* スマートフォンでは非推奨ブラウザを警告しない */
512		if (ecblib.sys.isModeSmartPhone()) return;
513
514		if (jQuery.cookie("confirmOldbrowserBanner") == "true") {
515			return;
516		}
517
518		if (isOldIE() || isDetectBrowser()) {
519			_ui.showHeaderWarning(ecblib.msg.ui.TOO_OLD_BROWSER, {
520				quit: function (act) {
521					jQuery.cookie("confirmOldbrowserBanner", "true", {
522						expires: 365,
523						path: '/'
524					});

525				}
526			});
527		}
528
529		/* IE <= 10の場合、trueが返却される */
530		function isOldIE() {
531			var userAgent = window.navigator.userAgent.toLowerCase();
532			return userAgent.indexOf('msie') >= 0;
533		}
534
535		/* 非推奨ブラウザか？ */
536		function isDetectBrowser() {
537
538			/* 対象ブラウザ */
539			var isTergetBrowser = function () {
540				var userAgent = window.navigator.userAgent.toLowerCase();
541				if (userAgent.indexOf('msie') >= 0 || userAgent.indexOf('trident') >= 0) {
542					return true;
543				}
544				if (userAgent.indexOf('edge') >= 0) {
545					return true;
546				}
547				if (userAgent.indexOf('firefox') >= 0) {
548					return true;
549				}
550				if (userAgent.indexOf('chrome') >= 0) {
551					return true;
552				}
553				if (userAgent.indexOf('safari') >= 0) {
554					return true;
555				}
556				return false;
557			};
558
559			if (!isTergetBrowser()) { return false; }
560			if (Modernizr.cssgrid || Modernizr.cssgridlegacy) {
561				return false;
562			}
563			/* 非推奨ブラウザ */
564			return true;
565		}
566
567	});
568
569
570	/** private method.... */
571
572	/* センタースクリーン取得 */
573	function getCenterScreen($obj) {
574		var x = ((jQuery(window).width() - $obj.outerWidth()) / 2) + jQuery(window).scrollLeft();
575		var y = ((jQuery(window).height() - $obj.outerHeight()) / 2);
576		if (x < 0) x = 0;
577		if (y < 0) y = 0;
578		return {
579			x: x, y: y
580		};
581	}
582
583	/* ユニークIDを取得する */
584	function getUUID() {
585		var randam = Math.floor(Math.random() * 1000);
586		return randam + new Date().getTime().toString();
587	}
588
589	/* 背景を固定する */
590	var _currentScrolltop = 0;
591	function setBackGroundFixed(isFixed) {
592		var $wrapper = jQuery('body').children('.wrapper');
593		if (isFixed) {
594			if ($wrapper.css('position') === 'fixed') { return; }
595			_currentScrolltop = jQuery(window).scrollTop();
596			$wrapper.css('position', 'fixed').css({ 'top': -_currentScrolltop });
597		} else {
598			if ($wrapper.css('position') !== 'fixed') { return; }
599			$wrapper.css('position', '');
600			jQuery('html, body').prop({ scrollTop: _currentScrolltop });
601		}
602	}
603
604	/*!
605	 * ローディング（読み込み中）イメージ
606	 */
607	_ui.loadingImage = function () {
608		var result = '<div class="block-loading">'
609					+ '<div class="block-loading--balls">'
610					+ '<span class="block-loading--ball block-loading--ball-1"></span>'
611					+ '<span class="block-loading--ball block-loading--ball-2"></span>'
612					+ '<span class="block-loading--ball block-loading--ball-3"></span>'
613					+ '<span class="block-loading--ball block-loading--ball-4"></span>'
614					+ '<span class="block-loading--ball block-loading--ball-5"></span>'
615					+ '<span class="block-loading--ball block-loading--ball-6"></span>'
616					+ '<span class="block-loading--ball block-loading--ball-7"></span>'
617					+ '<span class="block-loading--ball block-loading--ball-8"></span>'
618					+ '</div>' 
619					+ '</div>';
620		return result;
621	};
622
623})();