https://online.euglena.jp/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').text(0);
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			});
333			jQuery($this).hideBalloon({
334				classname: options.classname,
335				contents: options.tooltip,
336				position: options.position
337			});
338			if (options.diptimeSec) {
339				setTimeout(function () {
340					jQuery($this).hideBalloon();
341				}, 1000 * options.diptimeSec);
342
343			}
344		});
345	};
346
347	_ui.showZipToolTip = function (jQuerySelector, options) {
348		var defaults = { tooltip: '', position: 'top', diptimeSec: 3, classname: 'balloontip zip-exists-error' };
349		var options = jQuery.extend({}, defaults, options);
350
351		jQuery(jQuerySelector).each(function () {
352			var $this = this;
353			jQuery($this).showBalloon({
354				classname: options.classname,
355				contents: options.tooltip,
356				position: options.position
357			});
358			jQuery($this).hideBalloon({
359				classname: options.classname,
360				contents: options.tooltip,
361				position: options.position
362			});
363			if (options.diptimeSec) {
364				setTimeout(function () {
365					jQuery($this).hideBalloon();
366				}, 1000 * options.diptimeSec);
367
368			}
369		});
370	};
371
372	/*!
373	 * ツールチップを非表示にする
374	 */
375	_ui.hideToolTip = function (jQuerySelector) {
376		jQuery(jQuerySelector).hideBalloon();
377	};
378
379	/*!
380	 * コンテキストメニューを表示する
381	 */
382	_ui.showContextMenu = function (jQuerySelector, templateid, options) {
383		var defaults = { offsetY: 0, offsetX: 0, links: {} };
384		var options = jQuery.extend({}, defaults, options);
385		var $template = jQuery(templateid);
386		var gloupId = 'stdui-contextmenu' + getUUID();
387
388		var innerContextMenu = function () {
389			$offset = jQuery(jQuerySelector).offset();
390			$template.find('span').off('click');
391			$template.find('span').on('click', function () {
392				if (jQuery(this).attr('name') && options.links[jQuery(this).attr("name")]) {
393					return options.links[jQuery(this).attr("name")].apply(this, arguments);
394				}
395			});
396
397			if ($template.is(":hidden")) {
398				$template.css('position', 'absolute')
399					.css('top', $offset.top + options.offsetY + jQuery(jQuerySelector).outerHeight())
400					.css('left', $offset.left + options.offsetX)
401					.fadeIn().promise().done(function () {
402						jQuery(document).on('click.' + gloupId + ' touchend.' + gloupId, function () {
403							$template.fadeOut();
404							jQuery(document).off('click.' + gloupId + ' touchend.' + gloupId);
405						});

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

550				}
551			});
552		}
553
554		/* IE <= 10の場合、trueが返却される */
555		function isOldIE() {
556			var userAgent = window.navigator.userAgent.toLowerCase();
557			return userAgent.indexOf('msie') >= 0;
558		}
559
560		/* 非推奨ブラウザか？ */
561		function isDetectBrowser() {
562
563			/* 対象ブラウザ */
564			var isTergetBrowser = function () {
565				var userAgent = window.navigator.userAgent.toLowerCase();
566				if (userAgent.indexOf('msie') >= 0 || userAgent.indexOf('trident') >= 0) {
567					return true;
568				}
569				if (userAgent.indexOf('edge') >= 0) {
570					return true;
571				}
572				if (userAgent.indexOf('firefox') >= 0) {
573					return true;
574				}
575				if (userAgent.indexOf('chrome') >= 0) {
576					return true;
577				}
578				if (userAgent.indexOf('safari') >= 0) {
579					return true;
580				}
581				return false;
582			};
583
584			if (!isTergetBrowser()) { return false; }
585			if (Modernizr.cssgrid || Modernizr.cssgridlegacy) {
586				return false;
587			}
588			/* 非推奨ブラウザ */
589			return true;
590		}
591
592	});
593
594	/*!
595	* パスワード表示切替
596	*/
597	jQuery(document).ready(function () {
598	  jQuery("button.js-TypeSwitching-Button").on("click", function(){
599	    var $input =  jQuery(this).prev();
600	    var type = $input.attr("type");
601	    $input.attr("type", type == "password" ? "text" : "password");
602	    return false;
603	  });
604	});
605
606	/** private method.... */
607
608	/* センタースクリーン取得 */
609	function getCenterScreen($obj) {
610		var x = ((jQuery(window).width() - $obj.outerWidth()) / 2) + jQuery(window).scrollLeft();
611		var y = ((jQuery(window).height() - $obj.outerHeight()) / 2);
612		if (x < 0) x = 0;
613		if (y < 0) y = 0;
614		return {
615			x: x, y: y
616		};
617	}
618
619	/* ユニークIDを取得する */
620	function getUUID() {
621		var randam = Math.floor(Math.random() * 1000);
622		return randam + new Date().getTime().toString();
623	}
624
625	/* 背景を固定する */
626	var _currentScrolltop = 0;
627	function setBackGroundFixed(isFixed) {
628		var $wrapper = jQuery('body').children('.wrapper');
629		if (isFixed) {
630			if ($wrapper.css('position') === 'fixed') { return; }
631			_currentScrolltop = jQuery(window).scrollTop();
632			$wrapper.css('position', 'fixed').css({ 'top': -_currentScrolltop });
633		} else {
634			if ($wrapper.css('position') !== 'fixed') { return; }
635			$wrapper.css('position', '');
636			jQuery('html, body').prop({ scrollTop: _currentScrolltop });
637		}
638	}
639
640})();