https://www.tokan-corp.co.jp/js/yuga.js

1/*
2 * yuga.js 0.7.1 - 優雅なWeb制作のためのJS
3 *
4 * Copyright (c) 2009 Kyosuke Nakamura (kyosuke.jp)
5 * Licensed under the MIT License:
6 * http://www.opensource.org/licenses/mit-license.php
7 *
8 * Since:     2006-10-30
9 * Modified:  2009-01-27
10 *
11 * jQuery 1.3.1
12 * ThickBox 3.1
13 */
14
15/*
16 * [使用方法] XHTMLのhead要素内で次のように読み込みます。
17 
18<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
19<script type="text/javascript" src="js/jquery.js"></script>
20<script type="text/javascript" src="js/thickbox.js"></script>
21<script type="text/javascript" src="js/yuga.js" charset="utf-8"></script>
22
23 */
24
25(function($) {
26
27	$(function() {
28		$.yuga.selflink();
29		$.yuga.rollover();
30//		$.yuga.externalLink();
31//		$.yuga.thickbox();
32		$.yuga.scroll();
33		$.yuga.tab();
34		$.yuga.stripe();
35		$.yuga.css3class();
36	});
37
38	//---------------------------------------------------------------------
39
40	$.yuga = {
41		// URIを解析したオブジェクトを返すfunction
42		Uri: function(path){
43			var self = this;
44			this.originalPath = path;
45			//絶対パスを取得
46			this.absolutePath = (function(){
47				var e = document.createElement('span');
48				e.innerHTML = '<a href="' + path + '" />';
49				return e.firstChild.href;
50			})();
51			//絶対パスを分解
52			var fields = {'schema' : 2, 'username' : 5, 'password' : 6, 'host' : 7, 'path' : 9, 'query' : 10, 'fragment' : 11};
53			var r = /^((\w+):)?(\/\/)?((\w+):?(\w+)?@)?([^\/\?:]+):?(\d+)?(\/?[^\?#]+)?\??([^#]+)?#?(\w*)/.exec(this.absolutePath);
54			for (var field in fields) {
55				this[field] = r[fields[field]];
56			}
57			this.querys = {};
58			if(this.query){
59				$.each(self.query.split('&'), function(){
60					var a = this.split('=');
61					if (a.length == 2) self.querys[a[0]] = a[1];
62				});
63			}
64		},
65		//現在のページと親ディレクトリへのリンク
66		selflink: function (options) {
67			var c = $.extend({
68				selfLinkAreaSelector:'.yugaCurrent',
69				selfLinkClass:'current',
70				parentsLinkClass:'parentsLink',
71//				postfix: '_cr',
72				postfix: '',
73				changeImgSelf:true,
74				changeImgParents:true
75			}, options);
76			$(c.selfLinkAreaSelector+((c.selfLinkAreaSelector)?' ':'')+'a[href]').each(function(){
77				var href = new $.yuga.Uri(this.getAttribute('href'));
78				var setImgFlg = false;
79				if ((href.absolutePath == location.href) && !href.fragment) {
80					//同じ文書にリンク
81					$(this).addClass(c.selfLinkClass);
82					setImgFlg = c.changeImgSelf;
83				} else if (0 <= location.href.search(href.absolutePath)) {
84					//親ディレクトリリンク
85					$(this).addClass(c.parentsLinkClass);
86					setImgFlg = c.changeImgParents;
87				}
88				if (setImgFlg){
89					//img要素が含まれていたら現在用画像（_cr）に設定
90					$(this).find('img').each(function(){
91						this.originalSrc = $(this).attr('src');
92						this.currentSrc = this.originalSrc.replace(new RegExp('('+c.postfix+')?(\.gif|\.jpg|\.png)$'), c.postfix+"$2");
93						$(this).attr('src',this.currentSrc);
94					});
95				}
96			});
97		},
98/*		//現在のページと親ディレクトリへのリンク
99		selflink: function (options) {
100			var c = $.extend({
101				selfLinkAreaSelector:'body',
102				selfLinkClass:'current',
103				parentsLinkClass:'parentsLink',
104				postfix: '_cr',
105				changeImgSelf:true,
106				changeImgParents:true
107			}, options);
108			$(c.selfLinkAreaSelector+((c.selfLinkAreaSelector)?' ':'')+'a[href]').each(function(){
109				var href = new $.yuga.Uri(this.getAttribute('href'));
110				var setImgFlg = false;
111				if ((href.absolutePath == location.href) && !href.fragment) {
112					//同じ文書にリンク
113					$(this).addClass(c.selfLinkClass);
114					setImgFlg = c.changeImgSelf;
115				} else if (0 <= location.href.search(href.absolutePath)) {
116					//親ディレクトリリンク
117					$(this).addClass(c.parentsLinkClass);
118					setImgFlg = c.changeImgParents;
119				}
120				if (setImgFlg){
121					//img要素が含まれていたら現在用画像（_cr）に設定
122					$(this).find('img').each(function(){
123						this.originalSrc = $(this).attr('src');
124						this.currentSrc = this.originalSrc.replace(new RegExp('('+c.postfix+')?(\.gif|\.jpg|\.png)$'), c.postfix+"$2");
125						$(this).attr('src',this.currentSrc);
126					});
127				}
128			});
129		},*/
130		//ロールオーバー
131		rollover: function(options) {
132			var c = $.extend({
133				hoverSelector: '.btn, .allbtn img',
134				groupSelector: '.btngroup',
135				postfix: '_on'
136			}, options);
137			//ロールオーバーするノードの初期化
138			var rolloverImgs = $(c.hoverSelector).filter(isNotCurrent);
139			rolloverImgs.each(function(){
140				this.originalSrc = $(this).attr('src');
141				this.rolloverSrc = this.originalSrc.replace(new RegExp('('+c.postfix+')?(\.gif|\.jpg|\.png)$'), c.postfix+"$2");
142				this.rolloverImg = new Image;
143				this.rolloverImg.src = this.rolloverSrc;
144			});
145			//グループ内のimg要素を指定するセレクタ生成
146			var groupingImgs = $(c.groupSelector).find('img').filter(isRolloverImg);
147
148			//通常ロールオーバー
149			rolloverImgs.not(groupingImgs).hover(function(){
150				$(this).attr('src',this.rolloverSrc);
151			},function(){
152				$(this).attr('src',this.originalSrc);
153			});
154			//グループ化されたロールオーバー
155			$(c.groupSelector).hover(function(){
156				$(this).find('img').filter(isRolloverImg).each(function(){
157					$(this).attr('src',this.rolloverSrc);
158				});
159			},function(){
160				$(this).find('img').filter(isRolloverImg).each(function(){
161					$(this).attr('src',this.originalSrc);
162				});
163			});
164			//フィルタ用function
165			function isNotCurrent(i){
166				return Boolean(!this.currentSrc);
167			}
168			function isRolloverImg(i){
169				return Boolean(this.rolloverSrc);
170			}
171
172		},
173		//外部リンクは別ウインドウを設定
174		externalLink: function(options) {
175			var c = $.extend({
176				windowOpen:true,
177				externalClass: 'externalLink',
178				addIconSrc: ''
179			}, options);
180			var uri = new $.yuga.Uri(location.href);
181			var e = $('a[href^="http://"]').not('a[href^="' + uri.schema + '://' + uri.host + '/' + '"]');
182			if (c.windowOpen) {
183				e.click(function(){
184					window.open(this.href, '_blank');
185					return false;

186				});
187			}
188			if (c.addIconSrc) e.not(':has(img)').after($('<img src="'+c.addIconSrc+'" class="externalIcon" />'));
189			e.addClass(c.externalClass);
190		},
191		//画像へ直リンクするとthickboxで表示(thickbox.js利用)
192		thickbox: function() {
193			try {
194				tb_init('a[href$=".jpg"]:not(.thickbox, a[href*="?"]), a[href$=".gif"][href!="?"]:not(.thickbox, a[href*="?"]), a[href$=".png"][href!="?"]:not(.thickbox, a[href*="?"])');
195			} catch(e) {
196			}	
197		},
198		//ページ内リンクはするするスクロール
199		scroll: function(options) {
200			//ドキュメントのスクロールを制御するオブジェクト
201			var scroller = (function() {
202				var c = $.extend({
203					easing:100,
204					step:30,
205					fps:60,
206					fragment:''
207				}, options);
208				c.ms = Math.floor(1000/c.fps);
209				var timerId;
210				var param = {
211					stepCount:0,
212					startY:0,
213					endY:0,
214					lastY:0
215				};
216				//スクロール中に実行されるfunction
217				function move() {
218					if (param.stepCount == c.step) {
219						//スクロール終了時
220						setFragment(param.hrefdata.absolutePath);
221						window.scrollTo(getCurrentX(), param.endY);
222					} else if (param.lastY == getCurrentY()) {
223						//通常スクロール時
224						param.stepCount++;
225						window.scrollTo(getCurrentX(), getEasingY());
226						param.lastY = getEasingY();
227						timerId = setTimeout(move, c.ms); 
228					} else {
229						//キャンセル発生
230						if (getCurrentY()+getViewportHeight() == getDocumentHeight()) {
231							//画面下のためスクロール終了
232							setFragment(param.hrefdata.absolutePath);
233						}
234					}
235				}
236				function setFragment(path){
237					location.href = path
238				}
239				function getCurrentY() {
240					return document.body.scrollTop  || document.documentElement.scrollTop;
241				}
242				function getCurrentX() {
243					return document.body.scrollLeft  || document.documentElement.scrollLeft;
244				}
245				function getDocumentHeight(){
246					return document.documentElement.scrollHeight || document.body.scrollHeight;
247				}
248				function getViewportHeight(){
249					return (!$.browser.safari && !$.browser.opera) ? document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight : window.innerHeight;
250				}
251				function getEasingY() {
252					return Math.floor(getEasing(param.startY, param.endY, param.stepCount, c.step, c.easing));
253				}
254				function getEasing(start, end, stepCount, step, easing) {
255					var s = stepCount / step;
256					return (end - start) * (s + easing / (100 * Math.PI) * Math.sin(Math.PI * s)) + start;
257				}
258				return {
259					set: function(options) {
260						this.stop();
261						if (options.startY == undefined) options.startY = getCurrentY();
262						param = $.extend(param, options);
263						param.lastY = param.startY;
264						timerId = setTimeout(move, c.ms); 
265					},
266					stop: function(){
267						clearTimeout(timerId);
268						param.stepCount = 0;
269					}
270				};
271			})();
272			$('a[href^=#], area[href^=#]').not('a[href=#], area[href=#]').each(function(){
273				this.hrefdata = new $.yuga.Uri(this.getAttribute('href'));
274			}).click(function(){
275				var target = $('#'+this.hrefdata.fragment);
276				if (target.length == 0) target = $('a[name='+this.hrefdata.fragment+']');
277				if (target.length) {
278					scroller.set({
279						endY: target.offset().top,
280						hrefdata: this.hrefdata
281					});
282					return false;
283				}
284			});
285		},
286		//タブ機能
287		tab: function(options) {
288			var c = $.extend({
289				tabNavSelector:'.tabNav',
290				activeTabClass:'active'
291			}, options);
292			$(c.tabNavSelector).each(function(){
293				var tabNavList = $(this).find('a[href^=#], area[href^=#]');
294				var tabBodyList;
295				tabNavList.each(function(){
296					this.hrefdata = new $.yuga.Uri(this.getAttribute('href'));
297					var selecter = '#'+this.hrefdata.fragment;
298					if (tabBodyList) {
299						tabBodyList = tabBodyList.add(selecter);
300					} else {
301						tabBodyList = $(selecter);
302					}
303					$(this).unbind('click');
304					$(this).click(function(){
305						tabNavList.removeClass(c.activeTabClass);
306						$(this).addClass(c.activeTabClass);
307						tabBodyList.hide();
308						$(selecter).show();
309						return false;

310					});
311				});
312				tabBodyList.hide()
313				tabNavList.filter(':first').trigger('click');
314			});
315		},
316		//奇数、偶数を自動追加
317		stripe: function(options) {
318			var c = $.extend({
319				oddClass:'odd',
320				evenClass:'even'
321			}, options);
322			$('ul, ol').each(function(){
323				//JSでは0から数えるのでevenとaddを逆に指定
324				$(this).children('li:odd').addClass(c.evenClass);
325				$(this).children('li:even').addClass(c.oddClass);
326			});
327			$('table, tbody').each(function(){
328				$(this).children('tr:odd').addClass(c.evenClass);
329				$(this).children('tr:even').addClass(c.oddClass);
330			});
331		},
332		//css3のクラスを追加
333		css3class: function() {
334			//:first-child, :last-childをクラスとして追加
335			$('body :first-child').addClass('firstChild');
336			$('body :last-child').addClass('lastChild');
337			//css3の:emptyをクラスとして追加
338			$('body :empty').addClass('empty');
339		}
340	};
341
342
343$(function() {
344	var topBtn = $('#page-top');	
345	topBtn.hide();
346	//スクロールが100に達したらボタン表示
347	$(window).scroll(function () {
348		if ($(this).scrollTop() > 100) {
349			topBtn.fadeIn();
350		} else {
351			topBtn.fadeOut();
352		}
353	});
354	//スクロールしてトップ
355    topBtn.click(function () {
356		$('body,html').animate({
357			scrollTop: 0
358		}, 500);
359		return false;
360    });
361});
362
363})(jQuery);