https://www.ec-store.net/js/sws/sys/ui.js

1/* 名前空間を定義 */
2var ecblib = ecblib || {};
3ecblib.ui = ecblib.ui || {};
4/*!
5 * UIの表示に関する関数群
6 *
7 * @requires module:jquery1.11+
8 * @requires module:js.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.pathroot + '/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.pathroot + '/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.pathroot + "/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	 * ■2021/2/15 [katterada] CS006 お気に入り商品価格変更メール
95	 * お知らせ件数のバッジ表示
96	 */
97	jQuery(document).ready(function () {
98		if(!jQuery('.js-notification-count').length) return;
99		jQuery.ajax({
100			url: ecblib.sys.pathroot + "/js/notification.aspx",
101			cache: false,
102			dataType: "html",
103			success: function (html) {
104					jQuery('.js-notification-count').text(html)
105						.show();
106			}
107		});
108	});
109	
110	/*!
111	 * クーポン件数のバッジ表示
112	 */
113	jQuery(document).ready(function () {
114		if(!jQuery('.js-coupon-count').length) return;
115		jQuery.ajax({
116			url: ecblib.sys.pathroot + "/js/coupon.aspx",
117			cache: false,
118			dataType: "html",
119			success: function (html) {
120				var count = jQuery(html).data('count');
121				if (!count) {
122					jQuery('.js-coupon-count').hide();
123				} else {
124					jQuery('.js-coupon-count').text(count)
125						.show();
126				}
127			}
128		});
129	});
130
131	/*!
132	 * アラート表示
133	 */
134	_ui.alert = function (title, msg, options) {
135
136		jQuery(document.activeElement).blur();
137
138		var template = ecblib.tmpl.ui.ALERT;
139		template = ecblib.sys.render(template, { Title: title });
140
141		var defaults = { quit: function () { }, ok: function () { }, width: null, height: null };
142		var options = jQuery.extend({}, defaults, options);
143		var gloupId = 'stdui-dialog' + getUUID();
144
145		var $obj = jQuery(template);

146		var $overlay = jQuery('<div class="modal-overlay-alert" />');
147
148		var action = function () {
149			return {
150				close: function () {
151					$overlay.remove();
152					$obj.remove();
153
154					/* 一番最後に開かれたダイアログをアクティブにする */
155					jQuery(document).off('keyup.' + gloupId);
156
157					if (jQuery('.js-modal-alert,.js-modal-dialog').last().length > 0) {
158						jQuery('.js-modal-alert,.js-modal-dialog').last().addClass('js-active');
159					} else {
160						/* 背景固定解除 */
161						setBackGroundFixed(false);
162					}
163				}
164			};
165		}();
166
167		var showDialog = function () {
168			/* 他のダイアログはアクティブを削除する */
169			jQuery('.js-modal-alert,.js-modal-dialog').removeClass('js-active');
170
171			/* 背景を固定にする */
172			setBackGroundFixed(true);
173
174			/* 幅、高さの設定 */
175			if (options.width) {
176				$obj.css('width', options.width);
177			}
178			if (options.height) {
179				$obj.css('height', options.height);
180			}
181
182			$obj.find('.js-modal-body-wrapper').text(msg).html(function () {
183				return jQuery(this).text().replace(/\r?\n/g, '<br>');
184			});
185
186			$overlay.appendTo('body');
187			$obj.appendTo('body');
188
189			var screen = getCenterScreen($obj);
190			$obj.css('position', 'absolute')
191				.css('top', screen.y + 'px')
192				.css('left', screen.x + 'px');
193		};
194
195		/* OKボタン押下 */
196		$obj.find(':button').on('click', function () {
197			options.ok.apply(this, arguments);
198			action.close();
199		});
200
201		/* ×ボタン、オーバーレイ領域、ESC押下 */
202		$obj.find('.js-modal-close').on('click', function () {
203			options.quit.apply(this, arguments);
204			action.close();
205		});
206		$overlay.on('click', function () {
207			options.quit.apply(this, arguments);
208			action.close();
209		});
210		jQuery(document).on('keyup.' + gloupId, function (e) {
211			if ($obj.hasClass("js-active") && e.keyCode === 27) { // etc
212				options.quit.apply(this, arguments);
213				action.close();
214			}
215		});
216
217		showDialog();
218	};
219
220	/*!
221	 * ダイアログ表示
222	 *
223	 * モーダル表示(引数はIDを指定)
224	 * ecblib.ui.dialog('modal');
225	 */
226	_ui.dialog = function (id, options) {
227
228		jQuery(document.activeElement).blur();
229
230		var template = ecblib.tmpl.ui.MODAL_DIALOG;
231
232		var defaults = { quit: function () { }, buttons: {}, links: {}, width: null, height: null };
233		var options = jQuery.extend({}, defaults, options);
234		var gloupId = 'stdui-dialog' + getUUID();
235		var $obj = jQuery(template);

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

421					});
422			}
423		};
424
425		jQuery(jQuerySelector).each(function () {
426			innerContextMenu.apply(this, arguments);
427		});
428
429	};
430
431	/*!
432	 * ツールチップUI
433	 */
434	jQuery(document).ready(function () {
435		jQuery.balloon.defaults.css = null;
436		jQuery('[data-tooltip]').each(function () {
437
438			var tooltip = jQuery(this).data('tooltip').replace(/\r?\n/g, '<br>');
439			var position = jQuery(this).data('tooltip-position');
440			if (!position) {
441				position = 'top';
442			}
443
444			jQuery(this).on({
445				'focusin': function () {
446					jQuery(this).hideBalloon()
447						.showBalloon({
448							classname: 'balloontip',
449							contents: tooltip,
450							position: position,
451							html: true
452						});
453				},
454				'focusout': function () {
455					jQuery(this).hideBalloon();
456				}
457			});
458		});
459	});
460
461	/*!
462	 * 郵便番号サジェストUI
463	 */
464	/*  郵便番号検索 */
465	var timerId_lookupzip_ = null;
466	var zipcache_lookupzip_ = '';
467	var timerId_zipcache_ = null;
468	_ui.zipcodeSuggest = function (zip, pref, addr, addr2, cnt, offsetX, offsetY) {
469		var timerOffset = 300;
470		var zip_id = '#' + zip + cnt;
471		var pref_id = '#' + pref + cnt;
472		var addr_id = '#' + addr + cnt;
473		var addr2_id = '#' + addr2 + cnt;
474		var defaultXOffset = 0;
475		var defaultYOffset = jQuery(zip_id).outerHeight();
476		offsetX = offsetX + defaultXOffset;
477		offsetY = offsetY + defaultYOffset;
478		jQuery(zip_id).bind('keyup paste', function () {
479			jQuery('ul.js-ziplist').remove();
480			clearTimeout(timerId_zipcache_);
481			timerId_zipcache_ = setTimeout(function () {
482				if (zipcache_lookupzip_ == jQuery(zip_id).val()) {
483					zipcache_lookupzip_ = jQuery(zip_id).val();
484					return false;
485				}
486				zipcache_lookupzip_ = jQuery(zip_id).val();
487			}, timerOffset);
488			clearTimeout(timerId_lookupzip_);
489			timerId_lookupzip_ = setTimeout(function () {
490				if (!jQuery(zip_id).val().match(/^[0-9]{3}[\-]{0,1}[0-9]{0,4}$/)) {
491					return true;
492				}
493
494				jQuery.get('../search/lookupzipjson.aspx', {
495					zip: jQuery(zip_id).val(),
496					charset: 'UTF-8'
497				}, function (data, status) {
498					var of = jQuery(zip_id).offset();
499					var ul = jQuery('<ul></ul>').addClass('js-ziplist block-ziplist--ziplist-frame dropdown');
500					ul.css('position', "absolute");
501					ul.css('top', of.top + offsetY);
502					ul.css('left', of.left + offsetX);
503					var searchCount = 0;
504					var tempzip, temppref, tempaddr, tempaddr2;
505					jQuery.each(data, function (key, item) {
506						searchCount++;
507						tempzip = item.zip;
508						temppref = item.pref;
509						tempaddr = item.addr;
510						tempaddr2 = item.addr2;
511						var li = jQuery('<li><span>' + key + ' ' + item.pref + ' ' + item.addr + ' ' + item.addr2 + '</span></li>');
512						li.bind('click', function () {
513							jQuery(zip_id).val(item.zip);
514							jQuery(pref_id).val(item.pref);
515							jQuery(addr_id).val(item.addr);
516							jQuery(addr2_id).val(item.addr2);
517							jQuery('ul.js-ziplist').remove();
518							jQuery(zip_id).blur();
519							jQuery(pref_id).change();
520							jQuery(addr_id).focus();
521							jQuery(addr2_id).blur().focus();
522							return false;
523						});
524						ul.append(li);
525					});
526					if ((searchCount == 1) && (zipcache_lookupzip_.replace("-", "").length == 7)) {
527						jQuery(zip_id).blur().focus();
528						//IMEの入力を確定させた後に値を詰めなおし
529						setTimeout(function(){
530							jQuery(zip_id).val(tempzip);
531							jQuery(pref_id).val(temppref);
532							jQuery(addr_id).val(tempaddr);
533							jQuery(addr2_id).val(tempaddr2);
534							jQuery('ul.js-ziplist').remove();
535							jQuery(pref_id).change();
536							jQuery(addr_id).focus();
537							jQuery(addr2_id).focus();
538						}, 0);
539						return false;
540					} else if (searchCount != 0) {
541						jQuery(document.body).append(ul);
542					}
543				}, 'json');
544			}, timerOffset);
545		});
546	};
547
548	/*!
549	 * 非推奨ブラウザ警告表示
550	 * @requires module:js.cookie.js
551	 * @requires module:modernizr-custom.js
552	 */
553	jQuery(document).ready(function () {
554
555		/* スマートフォンでは非推奨ブラウザを警告しない */
556		if (ecblib.sys.isModeSmartPhone()) return;
557
558		if (Cookies.get("confirmOldbrowserBanner") == "true") {
559			return;
560		}
561
562		if (isOldIE() || isDetectBrowser()) {
563			_ui.showHeaderWarning(ecblib.msg.ui.TOO_OLD_BROWSER, {
564				quit: function (act) {
565					Cookies.set("confirmOldbrowserBanner", "true", {
566						expires: 365,
567						path: '/'
568					});

569				}
570			});
571		}
572
573		/* IE <= 10の場合、trueが返却される */
574		function isOldIE() {
575			var userAgent = window.navigator.userAgent.toLowerCase();
576			return userAgent.indexOf('msie') >= 0;
577		}
578
579		/* 非推奨ブラウザか？ */
580		function isDetectBrowser() {
581
582			/* 対象ブラウザ */
583			var isTergetBrowser = function () {
584				var userAgent = window.navigator.userAgent.toLowerCase();
585				if (userAgent.indexOf('msie') >= 0 || userAgent.indexOf('trident') >= 0) {
586					return true;
587				}
588				if (userAgent.indexOf('edge') >= 0) {
589					return true;
590				}
591				if (userAgent.indexOf('firefox') >= 0) {
592					return true;
593				}
594				if (userAgent.indexOf('chrome') >= 0) {
595					return true;
596				}
597				if (userAgent.indexOf('safari') >= 0) {
598					return true;
599				}
600				return false;
601			};
602
603			if (!isTergetBrowser()) { return false; }
604			if (Modernizr.cssgrid || Modernizr.cssgridlegacy) {
605				return false;
606			}
607			/* 非推奨ブラウザ */
608			return true;
609		}
610
611	});
612
613
614	/** private method.... */
615
616	/* センタースクリーン取得 */
617	function getCenterScreen($obj) {
618		var x = ((jQuery(window).width() - $obj.outerWidth()) / 2) + jQuery(window).scrollLeft();
619		var y = ((jQuery(window).height() - $obj.outerHeight()) / 2);
620		if (x < 0) x = 0;
621		if (y < 0) y = 0;
622		return {
623			x: x, y: y
624		};
625	}
626
627	/* ユニークIDを取得する */
628	function getUUID() {
629		var randam = Math.floor(Math.random() * 1000);
630		return randam + new Date().getTime().toString();
631	}
632
633	/* 背景を固定する */
634	var _currentScrolltop = 0;
635	function setBackGroundFixed(isFixed) {
636		var $wrapper = jQuery('body').children('.wrapper');
637		if (isFixed) {
638			if ($wrapper.css('position') === 'fixed') { return; }
639			_currentScrolltop = jQuery(window).scrollTop();
640			$wrapper.css('position', 'fixed').css({ 'top': -_currentScrolltop });
641		} else {
642			if ($wrapper.css('position') !== 'fixed') { return; }
643			$wrapper.css('position', '');
644			jQuery('html, body').prop({ scrollTop: _currentScrolltop });
645		}
646	}
647
648})();