HiGash.Net ホームページへ戻る

Home [Blog] » 痒いところに手が届くJavaScriptをバンドル化 — bundle.js

痒いところに手が届くJavaScriptをバンドル化 — bundle.js

痒いところに手が届くJavaScriptをバンドル化 — bundle.js

前回のエントリー 「痒いところに手が届くJavaScriptライブラリたち」 でリストアップしたJavaScriptのうち、画像のロールオーバーを自動化する smartRollover.js 、 テキストフィールドのフォーカス時に背景色を変更する colorful.js 、 1行おきにテーブルの背景色を変える Auto-striped table using Javascript 、 ページ内リンクのスムーススクロールを行う smoothscroll.js の4つのJavaScriptを、僕がWebサイトを作る際に(基本的に)必ず読み込むデフォルトのJavaScriptとしてバンドル化することにします。名付けて bundle.js

onloadのイベントハンドラで記述されたJavaScriptを複数読み込む場合、一般的なブラウザでは 一番最後に記述されたonloadイベントが優先されます 。従って、JavaScriptのバンドル化といっても単純にコピー&ペーストで、すべてのJavaScriptのソースをひとつのファイルにまとめればいいというものではありません(参考: 複数のjsライブラリを利用する際にonloadを書き換える方法[to-R] )。

[to-R] さんのエントリーにある通り、addEventListener(attachEvent)を利用してこれらのJavaScriptをバンドル化することにします。


/*
---------------------------------------------------------
	bundle.js ver 1.0 [2008/9/2] 
	*http://higash.net/20080902/bundljs.html
---------------------------------------------------------
*/

/*
---------------------------------------------------------
	smartRollover
	*Modify smartRollover.js
	*http://css-happylife.com/log/javascript/000157.shtml
---------------------------------------------------------
*/
function smartRollover() {
  if(document.getElementsByTagName) {
    var images = document.getElementsByTagName("img");
    var preImages = new Array();
      for(var i=0; i < images.length; i++) {
        if(images[i].getAttribute("src").match("_off.")) {
        var preImage = new Image();
        preImage.src = 
        images[i].getAttribute("src").replace("_off.", "_on.");
        preImages.push(preImage);
        images[i].onmouseover = function() {
          this.setAttribute("src",
          this.getAttribute("src").replace("_off.", "_on."));
        }
        images[i].onmouseout = function() {
          this.setAttribute("src",
          this.getAttribute("src").replace("_on.", "_off."));
        }
      }
    }
  }
}

/*
---------------------------------------------------------
	inputColorInit
	*Modify colorful.js
	*http://espion.just-size.jp/archives/05/231211111.html
---------------------------------------------------------
*/
var colorful = new ColorfulInput;
var inputColorInit = function() {
   colorful.set();
}
function ColorfulInput() {
  // 処理をスキップしたい属性
  this.skip = ['button','checkbox','radio','search','submit'];
  // 処理をスキップしたいid
  this.skip_id = ['#'];
  this.color = { 'blur': '', 'focus': '#dcf7c1' };
  this.set = function() {
    var i;
    for (i = 0; i < document.forms.length; i++) {
      for (var f = 0; f < document.forms[i].length; f++) {
        var elm = document.forms[i][f];
        if(!this._checkSkip(elm)) continue;
        this._setColor(elm, 'focus');
        this._setColor(elm, 'blur');
      }
    }
  };
  this._checkSkip = function(elm) {
    var i;
    for(i in this.skip) {
      if(elm.type == this.skip[i]) return false;
    }
    for(i in this.skip_id) {
      if(elm.id == this.skip_id[i]) return false;
    }
    return true;
  };
  this._setColor = function(elm, type) {
    var i;
    var color = this.color[type];
    var event = function() {
      elm.style.backgroundColor = color;
    };
    if(elm.addEventListener) {
      elm.addEventListener(type, event, false);
    } else if(elm.attachEvent) {
      elm.attachEvent('on'+type, event);
    } else {
      elm['on'+type] = event;
    }
  };
}

/*
---------------------------------------------------------
	Auto-striped table
	*Modify http://www.wellstyled.com/files/css-striped-tables/example02.html
	*http://www.wellstyled.com/css-striped-tables.html
---------------------------------------------------------
*/
function init() {
	stripeAllTables();
//	stripeTableById('#');
	}
function stripeTable(t) {
	var i, odd = true;
	for (i=0; i<t.rows.length; i++) {
		t.rows[i].className += odd ? ' odd' : ' even';
		odd = !odd;
		}
	}
function stripeTableById(id) {
	var t = document.getElementById(id);
	if (t) stripeTable(t);
	}
function stripeAllTables() {
	var t = document.getElementsByTagName('TABLE');
	for (var i=0; i<t.length; i++) stripeTable(t[i])
	}

/*
---------------------------------------------------------
	Smooth scrolling
	*Changes links that link to other parts
	of this page to scroll
	*smoothly to those links
	rather than jump to them directly, which
	*can be a little disorienting.
	
	*sil, http://www.kryogenix.org/
	
	*v1.0 2003-11-11
	*v1.1 2005-06-16 wrap it up in an object
---------------------------------------------------------
*/
var ss = {
  fixAllLinks: function() {
    // Get a list of all links in the page
    var allLinks = document.getElementsByTagName('a');
    // Walk through the list
    for (var i=0;i<allLinks.length;i++) {
      var lnk = allLinks[i];
      if ((lnk.href && lnk.href.indexOf('#') != -1) && 
          ( (lnk.pathname == location.pathname) ||
	    ('/'+lnk.pathname == location.pathname) ) && 
          (lnk.search == location.search)) {
        // If the link is internal to the page (begins in #)
        // then attach the smoothScroll function as an onclick
        // event handler
        ss.addEvent(lnk,'click',ss.smoothScroll);
      }
    }
  },
  smoothScroll: function(e) {
    // This is an event handler; get the clicked on element,
    // in a cross-browser fashion
    if (window.event) {
      target = window.event.srcElement;
    } else if (e) {
      target = e.target;
    } else return;
    // Make sure that the target is an element, not a text node
    // within an element
    if (target.nodeName.toLowerCase() != 'a') {
      target = target.parentNode;
    }
    // Paranoia; check this is an A tag
    if (target.nodeName.toLowerCase() != 'a') return;
    // Find the <a name> tag corresponding to this href
    // First strip off the hash (first character)
    anchor = target.hash.substr(1);
    // Now loop all A tags until we find one with that name
    var allLinks = document.getElementsByTagName('a');
    var destinationLink = null;
    for (var i=0;i<allLinks.length;i++) {
      var lnk = allLinks[i];
      if (lnk.name && (lnk.name == anchor)) {
        destinationLink = lnk;
        break;
      }
    }
    if (!destinationLink) destinationLink =
    document.getElementById(anchor);
    // If we didn't find a destination,
    give up and let the browser do
    // its thing
    if (!destinationLink) return true;
    // Find the destination's position
    var destx = destinationLink.offsetLeft; 
    var desty = destinationLink.offsetTop;
    var thisNode = destinationLink;
    while (thisNode.offsetParent && 
          (thisNode.offsetParent != document.body)) {
      thisNode = thisNode.offsetParent;
      destx += thisNode.offsetLeft;
      desty += thisNode.offsetTop;
    }
    // Stop any current scrolling
    clearInterval(ss.INTERVAL);
    cypos = ss.getCurrentYPos();
    ss_stepsize = parseInt((desty-cypos)/ss.STEPS);
    ss.INTERVAL =
setInterval('ss.scrollWindow('+ss_stepsize+', '+desty+',"'+anchor+'")',10);
    // And stop the actual click happening
    if (window.event) {
      window.event.cancelBubble = true;
      window.event.returnValue = false;
    }
    if (e && e.preventDefault && e.stopPropagation) {
      e.preventDefault();
      e.stopPropagation();
    }
  },
  scrollWindow: function(scramount,dest,anchor) {
    wascypos = ss.getCurrentYPos();
    isAbove = (wascypos < dest);
    window.scrollTo(0,wascypos + scramount);
    iscypos = ss.getCurrentYPos();
    isAboveNow = (iscypos < dest);
    if ((isAbove != isAboveNow) || (wascypos == iscypos)) {
      // if we've just scrolled past the destination, or
      // we haven't moved from the last scroll
      // (i.e., we're at the bottom of the page) 
      // then scroll exactly to the link
      window.scrollTo(0,dest);
      // cancel the repeating timer
      clearInterval(ss.INTERVAL);
      // and jump to the link directly so the URL's right
      location.hash = anchor;
    }
  },
  getCurrentYPos: function() {
    if (document.body && document.body.scrollTop)
      return document.body.scrollTop;
    if (document.documentElement &&
    document.documentElement.scrollTop)
      return document.documentElement.scrollTop;
    if (window.pageYOffset)
      return window.pageYOffset;
    return 0;
  },
  addEvent: function(elm, evType, fn, useCapture) {
    // addEvent and removeEvent
    // cross-browser event handling for IE5+,  NS6 and Mozilla
    // By Scott Andrew
    if (elm.addEventListener){
      elm.addEventListener(evType, fn, useCapture);
      return true;
    } else if (elm.attachEvent){
      var r = elm.attachEvent("on"+evType, fn);
      return r;
    } else {
      alert("Handler could not be removed");
    }
  } 
}
ss.STEPS = 25;

/*
---------------------------------------------------------
	addLoadEvent
---------------------------------------------------------
*/
function addOnLoadEvent(func) {
	if (window.attachEvent){
		window.attachEvent('onload', func);
	}
	else {
		window.addEventListener('load', func, false);
	}
}
addOnLoadEvent(smartRollover);
addOnLoadEvent(inputColorInit);
addOnLoadEvent(stripeAllTables);
addOnLoadEvent(ss.fixAllLinks);

bundle.jsについてまとめたHTML(bundle.js — HiGash.Net)を http://higash.net/bundlejs/ にアップしました。この bundle.js — HiGash.Net のファイル一式は下記リンクよりダウンロードしてご覧ください。

Download

bundle.js — HiGash.Net(Zip圧縮・12.5KB)

Share & Bookmark
このエントリをFacebookでシェアする
このエントリをTwitterでつぶやく
このエントリをはてなブックマークに追加
Delicious
livedoorクリップ
Yahoo!ブックマーク
Buzzurl

コメント/トラックバック

このページへのコメント/トラックバックはありません・・・。

ぜひこのエントリーに対するコメントをお聞かせください。

以下のURLでトラックバックも受付けています。

http://higash.net/20080902/bundlejs.html/trackback/

Preview

トラックバック
http://higash.net/20080902/bundlejs.html/trackback/

Page Top