slide.js 5日目 - 惰性で・・・

ちょこちょこ続けてたんだけど、日記更新する余裕がなかった（;´Д｀）

で、過去形だけど進捗を。
過去のことなので、日付詐称。
JavaScript勉強してる人の参考になれば。
ならなかったらただのゴミでけっこう(｀･ω･´)
しかし、ソースが汚い。
でも、この辺から徐々にJavaScriptがわかってきた。
まぁ、ほぼ動く状態になったし。

今回のポイント

cssにdispaly:none（非表示するやつ）があるのを思い出したので
（元々やろうとしてた）「JavaScriptのメモリ上でpageタグ内の情報を持っておいて、
表示したいやつだけHTMLに入れてやる」って方法をやめた。
ってか、こういうのはcssでstyleを動的に変えて方法を使うのが普通なのね。
エフェクトするJavaScriptのライブラリを見て気づいた。
ってか、Webに勉強材料はたくさんあるんだから「最初から実装方法ちゃんと調べておけよ」って話だよなぁ。
firebugの使い方がやっとわかった。
たしかにこれは便利だわ(・∀・)ｲｲｰ

slide.js

あと、modalbox.jsってのでヘルプをつけて遊んでみた。
特に意味はない。やってみたかっただけ。
操作ボタンは放置。
１つ前のページに戻る#prev()を足したけど、バグあり。
あとモード情報（mode）を追加。
あとpage番号を持つDivのid属性を自動で採番。
これでページを移動させるの楽になった。

/*
 * slide.js
 * @version:	2007/05/07
 * @author:		futa23
*/

// Slide class
function Slide() {
    this.initialize.apply(this, arguments);
}

Slide.prototype.initialize = function() {
	this.main;
	this.contents = new Array();	
	this.page = 0;
	//deafult: false(normal mode)
	this.mode = false;
};

Slide.prototype.start = function(){

	//neglect slide mode
	if (this.mode) {
		return;
	}
	
	//change mode
	this.mode = true;
	
	//load slide base element
	this.main = document.getElementById('main');
	
	if (document.getElementById('startBtn')) {
		document.getElementById('startBtn').disabled = true;
	}
	
	var divPages = document.getElementsByTagName('div');
	for (var i=0; i<divPages.length ; i++) {
		if (divPages[i].className == 'page') {
			divPages[i].setAttribute('id', this.contents.length);
			this.contents.push(divPages[i]);
			
			//dispaly: none will be replaced
//			divPages[i].innerHTML = '';
			divPages[i].className = 'hide';
		}
	}
	
	this.loadPage(this.contents[0]);
};

Slide.prototype.next = function() {
	
	if (!this.mode) {
		return;
	}
	
	// count up page
	this.page++;
	
	if (this.page < this.contents.length) {
		
//		alert(this.contents[this.page++]);

		//initialize main pane
		this.initPane();

		//load next page
		this.loadPage(this.contents[this.page]);
		
	}
	//last action
	else if(this.page == this.contents.length) {
		//quit slide show		
		this.quit();
		
		// TODO
		if (document.getElementById('nextBtn')){
			document.getElementById('nextBtn').disabled = true;
		}
	}else {
		// TODO(under 0 and over max)
		this.quit();
	}

}

Slide.prototype.prev = function() {
	
	if (!this.mode) {
		return;
	}
	
	this.page--;

	if (this.page < this.contents.length) {
		
		//initialize main pane
		this.initPane();

		//load next page
		this.loadPage(this.contents[this.page]);		
	}
	//last action
	else if(this.page == this.contents.length) {
		//quit slide show		
		this.quit();
		
		// TODO
		if (document.getElementById('nextBtn')){
			document.getElementById('nextBtn').disabled = true;
		}
	}else {
		// TODO(under 0 and over max)
		this.quit();
	}
}

Slide.prototype.quit = function() {

	if (!this.mode) {
		return;
	}

	this.initPane();
	
	if (typeof(this.main) != 'undefined') {
		for(var i=0; i<this.contents.length; i++) {
			
			this.contents[i].className = 'page';
//			this.loadPage(this.contents[i]);
		}
	}else {
		alert("main undefiened");
	}
	
	this.initialize();		
}

Slide.prototype.initPane = function() {
	// initialize main pane
//	alert("initialize");
	while(this.main.firstChild){
//		alert("remove some tags from main");
		this.main.removeChild(this.main.firstChild);
	}
}

Slide.prototype.loadPage = function(el) {

	if (!this.mode) {
		return;
	}

//	alert("loaded-id:" + el.getAttribute('id'));
	for (var i=0; i<this.contents.length; i++) {
		this.contents[i].className = 'hide';
	}
	if (0 <= this.page && this.page < this.contents.length) {
		el.className = 'current';
	}

//	var tempDiv = document.createElement('div');
//	tempDiv.className = 'page';
//	tempDiv.setAttribute('id', el.getAttribute('id'));
//	
//	while(el.firstChild) {
//		tempDiv.appendChild(el.removeChild(el.firstChild));
//	}
//	this.main.appendChild(tempDiv);
}

//app
var slide = new Slide();

呼び出すHTML側

cssのdispaly:noneがポイント。

<html>
<head>
<title>プレゼンツール</title>

<link rel="stylesheet" href="includes/modalbox.css" type="text/css" media="screen" />
<STYLE TYPE="text/css">
<!--
A:link
  { color:#0ac0ff; text-decoration:none; }
A:visited
  { color:#5080e0; text-decoration:none; }
A:hover
  { color:#2ae0ff; text-decoration:underline;}
.hide { display: none; } 
-->
</STYLE>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">

<!--help-->
<script type="text/javascript" src="includes/prototype.js"></script>
<script type="text/javascript" src="includes/scriptaculous.js"></script>
<script type="text/javascript" src="includes/modalbox.js"></script>

<script type="text/javascript" language="JavaScript" charset="utf-8" src="shortcuts.js"></script>
<script type="text/javascript" language="JavaScript" charset="utf-8" src="slide.js"></script>

<script type="text/javascript">
<!--
	//add keybind
	shortcut('s', function(){slide.start();});
	shortcut('left', function(){slide.prev();});
	shortcut('right', function(){slide.next();});
	shortcut('space', function(){slide.next();});
	shortcut('q', function(){slide.quit();});
	shortcut('h', function(){
						Modalbox.show(
							'slide.js -help-', 
							'slide/help.html', 
							{width: 460, height:400}
							);
						return false;
					}
			);
-->
</script>

</head>

<body id="body" bgcolor="#FFFFFF" text="#003366" link="#3399FF" vlink="#99CCFF" alink="#FF3333">

<input type="button" value="start!" id="startBtn" onclick="slide.start()">
<input type="button" value="next!" id="nextBtn" onclick="slide.next()">

<div id="main" class="main"></div>

<div class="page">
<h3>自己紹介</h3>
<ul>
	<li>名前：futa23
	<li>職業：SEでもプログラマーでもないIT系
	<li>装備：Java（普通に）, PHP（並以下）, Perl（並以下）, Ruby（初心者）
</ul>
</div>

<div class="page">
<h3>slide.js</h3>
スライドショーアプリ。
<ul>
	<li>oopなJavaScriptを書いてみたかった。
	<li>作るなら実用的なもの。
	<li>他のライブラリも使ってエフェクトも掛けたい。
	<li>ショートカット厨なので、ショートカット機能は必須実装機能。
	<li>HTML表示モードとプレゼンモードの切り替えができるように。
</ul>
</div>

<div id="footer" class="footer">
	<a href="#" onClick="javascript:Modalbox.show('slide.js -help-', 'slide/help.html', {width: 460, height:400});return false;">(h)elp</a>
</div>
</body>
</html>

参考

JavaScriptでLightBox風のインストーラ用ウィザード作成ライブラリ「ModalBox」:phpspot開発日誌
ポップアップの中で画像が使えない？