mitsuru793/01_variable_about_slide.js

## 01_variable_about_slide.js
/*
下記のindex.htmlのようにスライドを設定した時の変数の中身です。
impress.jsでは、各スライドの要素は、stepsとstepsDataという配列で管理されています。

stepsは、stepクラスを持つDOM要素の配列です。
stepsから、stepsDataを作ります。
*/

// steps 各スライドのDOM要素を管理
[div#step-1.step.slide.future.active, div#step-2.step.slide.future, div#step-3.step.slide.future]

// stepsData 各スライドの設定情報を管理
Object {impress-step-1: Object, impress-step-2: Object, impress-step-3: Object}

// stepsData[0]
{
  impress-step-1: Object
  el: div#step-1.step.slide.future.active, // steps[0]のDOM要素
  rotate: {
    x: 0
    y: 0
    z: 0
  },
  scale: 1,
  translate: {
    x: 0
    y: -1500
    z: 0
  }
}


/*
 * stepsとstepsDataが作られる場所
 */

// el（DOM)のdata属性を、stepsDataに入れて管理します。
// elにstyleの適用もします。
var initStep = function ( el, idx ) {
    // datasetはHTML5のdata属性を取得できるオブジェクトです。
    var data = el.dataset,
        step = {
            translate: {
                x: toNumber(data.x),
                y: toNumber(data.y),
                z: toNumber(data.z)
            },
            rotate: {
                x: toNumber(data.rotateX),
                y: toNumber(data.rotateY),
                z: toNumber(data.rotateZ || data.rotate)
            },
            scale: toNumber(data.scale, 1),
            el: el
        };

    // idが設定されていない場合はは、デフォルト値を設定します。
    if ( !el.id ) {
        el.id = "step-" + (idx + 1);
    }

    stepsData["impress-" + el.id] = step;

    // el(DOM要素)にstyleを設定します。
    css(el, {
        position: "absolute",
        transform: "translate(-50%,-50%)" +    // 上下左右の中央に配置させるのにtranslateを使います
                   translate(step.translate) + // translate3dを設定します。
                   rotate(step.rotate) +
                   scale(step.scale),
        transformStyle: "preserve-3d"
    });
};

// initStepが使われる場所を見てみます。
var init = function () {
    // 省略

    // root(DOM要素)から、stepクラスを持つ要素を取得します。
    steps = $$(".step", root);

    // stepクラスを持つ要素全てに、initStep関数を実行します。
    steps.forEach( initStep );

    // 省略

    // root要素に"impress:init"イベントを発行します。
    triggerEvent(root, "impress:init", { api: roots[ "impress-root-" + rootId ] });
};

## 02_index.html
<!doctype html>
<html lang="en">
  <head>
      <!-- 省略 -->
  </head>
  <body class="impress-not-supported">
    <div class="fallback-message">
        <p>未対応ブラウザへのメッセージ</p>
    </div>

    <!-- スライドの内容 -->
    <div id="impress">
        <div class="step slide" data-x="0" data-y="-1500">
          <h2>スライド1</h2>
          <p>スライドの内容</p>
        </div>
        <div class="step slide" data-x="-1000" data-y="-2500" data-rotate="90" data-scale="6">
          <h2>スライド2</h2>
        </div>
        <div class="step slide" data-x="-2000" data-y="-3500">
          <h2>スライド3</h2>
        </div>
    </div>

    <div class="hint">
        <p>Use a spacebar or arrow keys to navigate</p>
    </div>

    <!-- 初期化処理 -->
    <script>
    if ("ontouchstart" in document.documentElement) {
        document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
    }
    </script>
    <script src="js/impress.js"></script>
    <script>impress().init();</script>
  </body>
</html>
	/*
	下記のindex.htmlのようにスライドを設定した時の変数の中身です。
	impress.jsでは、各スライドの要素は、stepsとstepsDataという配列で管理されています。

	stepsは、stepクラスを持つDOM要素の配列です。
	stepsから、stepsDataを作ります。
	*/

	// steps 各スライドのDOM要素を管理
	[div#step-1.step.slide.future.active, div#step-2.step.slide.future, div#step-3.step.slide.future]

	// stepsData 各スライドの設定情報を管理
	Object {impress-step-1: Object, impress-step-2: Object, impress-step-3: Object}

	// stepsData[0]
	{
	impress-step-1: Object
	el: div#step-1.step.slide.future.active, // steps[0]のDOM要素
	rotate: {
	x: 0
	y: 0
	z: 0
	},
	scale: 1,
	translate: {
	x: 0
	y: -1500
	z: 0
	}
	}


	/*
	* stepsとstepsDataが作られる場所
	*/

	// el（DOM)のdata属性を、stepsDataに入れて管理します。
	// elにstyleの適用もします。
	var initStep = function ( el, idx ) {
	// datasetはHTML5のdata属性を取得できるオブジェクトです。
	var data = el.dataset,
	step = {
	translate: {
	x: toNumber(data.x),
	y: toNumber(data.y),
	z: toNumber(data.z)
	},
	rotate: {
	x: toNumber(data.rotateX),
	y: toNumber(data.rotateY),
	z: toNumber(data.rotateZ \|\| data.rotate)
	},
	scale: toNumber(data.scale, 1),
	el: el
	};

	// idが設定されていない場合はは、デフォルト値を設定します。
	if ( !el.id ) {
	el.id = "step-" + (idx + 1);
	}

	stepsData["impress-" + el.id] = step;

	// el(DOM要素)にstyleを設定します。
	css(el, {
	position: "absolute",
	transform: "translate(-50%,-50%)" + // 上下左右の中央に配置させるのにtranslateを使います
	translate(step.translate) + // translate3dを設定します。
	rotate(step.rotate) +
	scale(step.scale),
	transformStyle: "preserve-3d"
	});
	};

	// initStepが使われる場所を見てみます。
	var init = function () {
	// 省略

	// root(DOM要素)から、stepクラスを持つ要素を取得します。
	steps = $$(".step", root);

	// stepクラスを持つ要素全てに、initStep関数を実行します。
	steps.forEach( initStep );

	// 省略

	// root要素に"impress:init"イベントを発行します。
	triggerEvent(root, "impress:init", { api: roots[ "impress-root-" + rootId ] });
	};
	<!doctype html>
	<html lang="en">
	<head>
	<!-- 省略 -->
	</head>
	<body class="impress-not-supported">
	<div class="fallback-message">
	<p>未対応ブラウザへのメッセージ</p>
	</div>

	<!-- スライドの内容 -->
	<div id="impress">
	<div class="step slide" data-x="0" data-y="-1500">
	<h2>スライド1</h2>
	<p>スライドの内容</p>
	</div>
	<div class="step slide" data-x="-1000" data-y="-2500" data-rotate="90" data-scale="6">
	<h2>スライド2</h2>
	</div>
	<div class="step slide" data-x="-2000" data-y="-3500">
	<h2>スライド3</h2>
	</div>
	</div>

	<div class="hint">
	<p>Use a spacebar or arrow keys to navigate</p>
	</div>

	<!-- 初期化処理 -->
	<script>
	if ("ontouchstart" in document.documentElement) {
	document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
	}
	</script>
	<script src="js/impress.js"></script>
	<script>impress().init();</script>
	</body>
	</html>