src/third_party/closure_library/closure/goog/demos/fx/css3/transition.html - incubator-pagespeed-debian - Git at Google

 <!DOCTYPE html>
 <!--
 Copyright 2011 The Closure Library Authors. All Rights Reserved.

 Use of this source code is governed by the Apache License, Version 2.0.
 See the COPYING file for details.
 -->
 <!--
   Author: chrishenry@google.com (Chris Henry)
 -->
 <html>
 <head>
 <title>Closure: CSS3 Transition Demo</title>
 <script src="../../../base.js"></script>
 <script src="../../../deps.js"></script>
 <link rel="stylesheet" href="../../css/demo.css">
 <style>
 .demo-options {
   float: left;
   padding: 0 0 20px;
   width: 248px;
 }
 .demo-panel {
   margin: 0 0 0 264px;
   padding: 80px 0 0 80px;
   text-align: center;
 }
 label.options {
   padding-left: 35px;
 }
 #demo-animated-box {
   background-color: #000;
   color: white;
   height: 20px;
   padding: 40px 0;
   text-align: center;
   width: 100px;
 }
 #demo-buttons {
   padding: 8px 0 0;
   text-align: center;
 }
 .goog-debug-panel {
   clear: both;
 }
 .goog-debug-panel .logdiv {
   height: 300px;
 }
 </style>

 <script type="text/javascript">
 goog.require('goog.debug.DivConsole');
 goog.require('goog.dispose');
 goog.require('goog.dom');
 goog.require('goog.events');
 goog.require('goog.events.ActionHandler');
 goog.require('goog.events.ActionHandler.EventType');
 goog.require('goog.fx.Transition.EventType');
 goog.require('goog.fx.css3');
 goog.require('goog.log');
 </script>
 </head>
 <body>
 <div class="demo-options">
 <form>
   <fieldset>
     <legend>CSS3 transition choices</legend>
     <label>
       <input type="radio" name="transition" value="FadeIn" checked>Fade In
     </label><br/>
       <label class="options">
         Duration (in s):
         <input type="text" size="3" name="FadeInDuration" value="1">
       </label><br/>
     <label>
       <input type="radio" name="transition" value="FadeOut">Fade Out
     </label><br/>
       <label class="options">
         Duration (in s):
         <input type="text" size="3" name="FadeOutDuration" value="1">
       </label><br/>
     <label>
       <input type="radio" name="transition" value="Fade">Fade
     </label><br/>
       <label class="options">
         Duration (in s):
         <input type="text" size="3" name="FadeDuration" value=".5">
       </label><br/>
       <label class="options">
         CSS3 timing:
         <input type="text" size="7" name="FadeTimingFn" value="ease-in">
       </label><br/>
       <label class="options">
         Starting opacity:
         <input type="text" size="3" name="FadeStartingOpacity" value=".2">
       </label><br/>
       <label class="options">
         Ending opacity:
         <input type="text" size="3" name="FadeEndingOpacity" value=".8">
       </label>
     <div id="demo-buttons">
       <input type="button" id="animate-btn" value="Animate!"></input>
       <input type="button" id="reset-btn" value="Reset"></input>
     </div>
   </fieldset>
 </form>
 </div>
 <div class="demo-panel">
   <div id="demo-animated-box">Hi there!</div>
 </div>

 <!-- Logging panel -->
 <fieldset class="goog-debug-panel">
   <legend>Event log for the transition object</legend>
   <div id="log"></div>
 </fieldset>

 <script>
 // Set up debug console.
 var logger = goog.log.getLogger('Demo');
 new goog.debug.DivConsole(goog.dom.getElement('log')).
     setCapturing(true);
 var eventTypes = goog.object.getValues(goog.fx.Transition.EventType);

 var isPlaying = false;
 var transition;
 var animatedBox = goog.dom.getElement('demo-animated-box');
 var animateButton = goog.dom.getElement('animate-btn');
 var resetButton = goog.dom.getElement('reset-btn');

 function fadeIn() {
   var duration = parseFloat(getValue_('FadeInDuration'));

   transition = goog.fx.css3.fadeIn(animatedBox, duration);
   installListener_(transition);
   transition.play();
 }

 function fadeOut() {
   var duration = parseFloat(getValue_('FadeOutDuration'));

   transition = goog.fx.css3.fadeOut(animatedBox, duration);
   installListener_(transition);
   transition.play();
 }

 function fade() {
   var duration = parseFloat(getValue_('FadeDuration'));
   var timingFn = getValue_('FadeTimingFn');
   var startOpacity = parseFloat(getValue_('FadeStartingOpacity'));
   var endOpacity = parseFloat(getValue_('FadeEndingOpacity'));

   transition = goog.fx.css3.fade(
       animatedBox, duration, timingFn, startOpacity, endOpacity);
   installListener_(transition);
   transition.play();
 }

 function animate() {
   stopOrReset();
   goog.dispose(transition);
   goog.Timer.callOnce(animate_);
 }

 function animate_() {
   isPlaying = true;
   resetButton.value = 'Stop';

   var transitionType = getValue_('transition');
   switch (transitionType) {
     case 'FadeIn': fadeIn(); break;
     case 'FadeOut': fadeOut(); break;
     case 'Fade': fade(); break;
   }

   goog.events.listen(
       transition, goog.fx.Transition.EventType.END, function() {
         isPlaying = false;
         resetButton.value = 'Reset';
       });
 }

 function stopOrReset() {
   if (!transition) return;

   if (isPlaying) {
     isPlaying = false;
     resetButton.value = 'Reset';
     transition.stop();
   } else {
     transition.dispose();
     // Resets all the possible overriding (for now just opacity due to fade).
     animatedBox.style.opacity = '';
   }
 }

 function getValue_(name) {
   var elements = document.forms[0].elements[name];
   if (goog.isArrayLike(elements)) {
     for (var i = 0; i < elements.length; ++i) {
       if (elements[i].checked) return elements[i].value;
     }
   }

   return elements.value;
 }

 function installListener_(transition) {
   goog.events.listen(transition, eventTypes, function(e) {
     goog.log.info(logger, 'Fired event: ' + e.type);
   });
 }

 goog.events.listen(
     new goog.events.ActionHandler(animateButton),
     goog.events.ActionHandler.EventType.ACTION, animate);
 goog.events.listen(
     new goog.events.ActionHandler(resetButton),
     goog.events.ActionHandler.EventType.ACTION, stopOrReset);

 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<!--
	Copyright 2011 The Closure Library Authors. All Rights Reserved.

	Use of this source code is governed by the Apache License, Version 2.0.
	See the COPYING file for details.
	-->
	<!--
	Author: chrishenry@google.com (Chris Henry)
	-->
	<html>
	<head>
	<title>Closure: CSS3 Transition Demo</title>
	<script src="../../../base.js"></script>
	<script src="../../../deps.js"></script>
	<link rel="stylesheet" href="../../css/demo.css">
	<style>
	.demo-options {
	float: left;
	padding: 0 0 20px;
	width: 248px;
	}
	.demo-panel {
	margin: 0 0 0 264px;
	padding: 80px 0 0 80px;
	text-align: center;
	}
	label.options {
	padding-left: 35px;
	}
	#demo-animated-box {
	background-color: #000;
	color: white;
	height: 20px;
	padding: 40px 0;
	text-align: center;
	width: 100px;
	}
	#demo-buttons {
	padding: 8px 0 0;
	text-align: center;
	}
	.goog-debug-panel {
	clear: both;
	}
	.goog-debug-panel .logdiv {
	height: 300px;
	}
	</style>

	<script type="text/javascript">
	goog.require('goog.debug.DivConsole');
	goog.require('goog.dispose');
	goog.require('goog.dom');
	goog.require('goog.events');
	goog.require('goog.events.ActionHandler');
	goog.require('goog.events.ActionHandler.EventType');
	goog.require('goog.fx.Transition.EventType');
	goog.require('goog.fx.css3');
	goog.require('goog.log');
	</script>
	</head>
	<body>
	<div class="demo-options">
	<form>
	<fieldset>
	<legend>CSS3 transition choices</legend>
	<label>
	<input type="radio" name="transition" value="FadeIn" checked>Fade In
	</label><br/>
	<label class="options">
	Duration (in s):
	<input type="text" size="3" name="FadeInDuration" value="1">
	</label><br/>
	<label>
	<input type="radio" name="transition" value="FadeOut">Fade Out
	</label><br/>
	<label class="options">
	Duration (in s):
	<input type="text" size="3" name="FadeOutDuration" value="1">
	</label><br/>
	<label>
	<input type="radio" name="transition" value="Fade">Fade
	</label><br/>
	<label class="options">
	Duration (in s):
	<input type="text" size="3" name="FadeDuration" value=".5">
	</label><br/>
	<label class="options">
	CSS3 timing:
	<input type="text" size="7" name="FadeTimingFn" value="ease-in">
	</label><br/>
	<label class="options">
	Starting opacity:
	<input type="text" size="3" name="FadeStartingOpacity" value=".2">
	</label><br/>
	<label class="options">
	Ending opacity:
	<input type="text" size="3" name="FadeEndingOpacity" value=".8">
	</label>
	<div id="demo-buttons">
	<input type="button" id="animate-btn" value="Animate!"></input>
	<input type="button" id="reset-btn" value="Reset"></input>
	</div>
	</fieldset>
	</form>
	</div>
	<div class="demo-panel">
	<div id="demo-animated-box">Hi there!</div>
	</div>

	<!-- Logging panel -->
	<fieldset class="goog-debug-panel">
	<legend>Event log for the transition object</legend>
	<div id="log"></div>
	</fieldset>

	<script>
	// Set up debug console.
	var logger = goog.log.getLogger('Demo');
	new goog.debug.DivConsole(goog.dom.getElement('log')).
	setCapturing(true);
	var eventTypes = goog.object.getValues(goog.fx.Transition.EventType);

	var isPlaying = false;
	var transition;
	var animatedBox = goog.dom.getElement('demo-animated-box');
	var animateButton = goog.dom.getElement('animate-btn');
	var resetButton = goog.dom.getElement('reset-btn');

	function fadeIn() {
	var duration = parseFloat(getValue_('FadeInDuration'));

	transition = goog.fx.css3.fadeIn(animatedBox, duration);
	installListener_(transition);
	transition.play();
	}

	function fadeOut() {
	var duration = parseFloat(getValue_('FadeOutDuration'));

	transition = goog.fx.css3.fadeOut(animatedBox, duration);
	installListener_(transition);
	transition.play();
	}

	function fade() {
	var duration = parseFloat(getValue_('FadeDuration'));
	var timingFn = getValue_('FadeTimingFn');
	var startOpacity = parseFloat(getValue_('FadeStartingOpacity'));
	var endOpacity = parseFloat(getValue_('FadeEndingOpacity'));

	transition = goog.fx.css3.fade(
	animatedBox, duration, timingFn, startOpacity, endOpacity);
	installListener_(transition);
	transition.play();
	}

	function animate() {
	stopOrReset();
	goog.dispose(transition);
	goog.Timer.callOnce(animate_);
	}

	function animate_() {
	isPlaying = true;
	resetButton.value = 'Stop';

	var transitionType = getValue_('transition');
	switch (transitionType) {
	case 'FadeIn': fadeIn(); break;
	case 'FadeOut': fadeOut(); break;
	case 'Fade': fade(); break;
	}

	goog.events.listen(
	transition, goog.fx.Transition.EventType.END, function() {
	isPlaying = false;
	resetButton.value = 'Reset';
	});
	}

	function stopOrReset() {
	if (!transition) return;

	if (isPlaying) {
	isPlaying = false;
	resetButton.value = 'Reset';
	transition.stop();
	} else {
	transition.dispose();
	// Resets all the possible overriding (for now just opacity due to fade).
	animatedBox.style.opacity = '';
	}
	}

	function getValue_(name) {
	var elements = document.forms[0].elements[name];
	if (goog.isArrayLike(elements)) {
	for (var i = 0; i < elements.length; ++i) {
	if (elements[i].checked) return elements[i].value;
	}
	}

	return elements.value;
	}

	function installListener_(transition) {
	goog.events.listen(transition, eventTypes, function(e) {
	goog.log.info(logger, 'Fired event: ' + e.type);
	});
	}

	goog.events.listen(
	new goog.events.ActionHandler(animateButton),
	goog.events.ActionHandler.EventType.ACTION, animate);
	goog.events.listen(
	new goog.events.ActionHandler(resetButton),
	goog.events.ActionHandler.EventType.ACTION, stopOrReset);

	</script>
	</body>
	</html>