animatedmodal.jsの不具合を修正した時の話

全画面表示の美しいモーダルが簡単に実装できる「animatedmodal.js」
ただ、これに１つ不具合があったからその修正。

内容

不具合の内容は、「モーダルを閉じてすぐにその閉じたモーダルを開こうとするとバグる」ってもの。
すぐっていうのは1秒以内なんだけど、サイトの構成次第では発生しうる内容だと思う。ってか実際そうなった。

原因

肝心の原因はというと、このanimatedmodalの処理のタイミングだった。
このanimatedmodalの大体87行目とか108行目に、

id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterOpen);

id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterClose);

というものが書いてあるんだけど、これは要するに、アニメーションが終わった後にafterOpen(afterClose)実行するやでっていうもの。
（afterCloseにはz-indexを-にする記述がある）
んで、アニメーションが終了する前にもう１回開始するとmodal全体はafterOpenの状態に、z-indexだけがafterCloseの状態になることでバグる。

対処法

これの回避法はまあ幾つか考えられるんだけど、一番楽な、
「afterCloseの処理が完了してない状態で開始できないようにする」っていう方法で解決した。

やり方としては、72行目あたりを

modal.click(function(event) {  
	if (id.css('z-index') == settings.zIndexOut || id.css('opacity') == '0') {   
		event.preventDefault();
		$('body, html').css({'overflow':'hidden'});
		if (href == idConc) {
			if (id.hasClass(settings.modalTarget+'-off')) {
 				id.removeClass(settings.animatedOut);
				id.removeClass(settings.modalTarget+'-off');
				id.addClass(settings.modalTarget+'-on');
			} 
			if (id.hasClass(settings.modalTarget+'-on')) {
				settings.beforeOpen();
				id.css({'opacity':settings.opacityIn,'z-index':settings.zIndexIn});
				id.addClass(settings.animatedIn);  
				id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterOpen);
			};  
		} 
	}
});

こうしてしまえばいい。２行目のif文を加えただけなんだけど。
要するに、z-indexがafterOpenの処理が終わった後の状態もしくはopacityが0の状態どちらかを満たしているのなら実行するっていう風にした。
opacityの記述がないと、一番最初にモーダルが立ち上がらなくなるから注意。
（animatedmodalのmodalは１回目立ち上げの時はopacityを0から1にすることで表示させていて、２回目以降はz-indexを操作して実行している）

もしここで躓いてる人がいたら、参考にしてみてくーださい。