diff options
Diffstat (limited to 'contexts/data/lib/closure-library/closure/goog/demos/effects.html')
-rw-r--r-- | contexts/data/lib/closure-library/closure/goog/demos/effects.html | 162 |
1 files changed, 0 insertions, 162 deletions
diff --git a/contexts/data/lib/closure-library/closure/goog/demos/effects.html b/contexts/data/lib/closure-library/closure/goog/demos/effects.html deleted file mode 100644 index a9de5fe..0000000 --- a/contexts/data/lib/closure-library/closure/goog/demos/effects.html +++ /dev/null @@ -1,162 +0,0 @@ -<!DOCTYPE html> -<html> -<!-- -Copyright 2010 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. ---> -<head> - <title>goog.fx.dom</title> - <script src="../base.js"></script> - <script> - goog.require('goog.events'); - goog.require('goog.fx'); - goog.require('goog.fx.dom'); - </script> - <link rel="stylesheet" href="css/demo.css"> - <style> - #test1 { - position: absolute; - left: 150px; - top: 100px; - width: 20px; - height: 20px; - background-color: rgb(0,0,0); - } - - button { - font: normal 10px arial; - width: 125px; - } - </style> -</head> -<body> - <h1>goog.fx.dom</h1> - <p><strong>Demonstrations of the goog.fx.dom library</strong></p> - - <p> - <button id="but0" onclick="slide(0, 0);">Slide To 0x0</button><br> - <button id="but1" onclick="slide(400, 40);">Slide To 400x40</button><br> - <button id="but2" onclick="slide(300, 200);">Slide To 300x200</button><br> - <button id="but3" onclick="slide(600, 100);">Slide To 600x100</button> - </p> - - <p> - <button id="but4" onclick="resize(50, 50);">Resize To 50x50</button><br> - <button id="but5" onclick="resize(250, 50);">Resize To 250x50</button><br> - <button id="but6" onclick="resize(5, 5);">Resize To 5x5</button><br> - <button id="but7" onclick="resize(250, 250);">Resize To 250x250</button><br> - <button id="but8" onclick="resize(1250, 1250);">Resize To 1250x1250</button> - </p> - - <p> - <button id="but9" onclick="fadeout();">Fade Out</button><br> - <button id="but10" onclick="fadein();">Fade In</button> - </p> - - <p> - <button id="but11" onclick="color(200, 0, 0);">Transform to red</button><br> - <button id="but12" onclick="color(180, 180, 180);">Transform to grey</button><br> - <button id="but13" onclick="color(0, 0, 0);">Transform to black</button><br> - <button id="but14" onclick="color(100, 100, 255);">Transform to blue</button> - </p> - - <p> - <button id="but15" onclick="toggleRequestAnimationFrame();"></button> - <p> - - - <div id="test1"><!-- This comment is an IE6 hack to fix height:20px --></div> - - <script> - var col = [0, 0, 0]; - var duration = 1000; - - var el = document.getElementById('test1'); - - /** - * Enables all buttons then disposes of the animation. - * @param {!goog.events.Event} e goog.fx.Transition.EventType.END event with - * the goog.fx.Animation object in its target. - */ - function enableButtons(e) { - for (var i = 0; i <= 15; i++) { - document.getElementById('but' + i).disabled = false; - } - e.target.dispose(); - } - - function disableButtons() { - for (var i = 0; i <= 15; i++) { - document.getElementById('but' + i).disabled = true; - } - } - - function slide(a, b) { - var x = el.offsetLeft; - var y = el.offsetTop; - var anim = new goog.fx.dom.Slide(el, [x, y], [a, b], duration, - goog.fx.easing.easeOut); - goog.events.listen(anim, goog.fx.Transition.EventType.BEGIN, - disableButtons); - goog.events.listen(anim, goog.fx.Transition.EventType.END, enableButtons); - anim.play(); - } - - function resize(a, b) { - var w = el.offsetWidth; - var h = el.offsetHeight; - var anim = new goog.fx.dom.Resize(el, [w, h], [a, b], duration, - goog.fx.easing.easeOut); - goog.events.listen(anim, goog.fx.Transition.EventType.BEGIN, - disableButtons); - goog.events.listen(anim, goog.fx.Transition.EventType.END, enableButtons); - anim.play(); - } - - function fadeout() { - var anim = new goog.fx.dom.FadeOutAndHide(el, duration); - goog.events.listen(anim, goog.fx.Transition.EventType.BEGIN, - disableButtons); - goog.events.listen(anim, goog.fx.Transition.EventType.END, enableButtons); - anim.play(); - } - - function fadein() { - var anim = new goog.fx.dom.FadeInAndShow(el, duration); - goog.events.listen(anim, goog.fx.Transition.EventType.BEGIN, - disableButtons); - goog.events.listen(anim, goog.fx.Transition.EventType.END, enableButtons); - anim.play(); - } - - function color(r, g, b) { - var anim = new goog.fx.dom.BgColorTransform(el, col, [r, g, b], duration); - goog.events.listen(anim, goog.fx.Transition.EventType.BEGIN, - disableButtons); - goog.events.listen(anim, goog.fx.Transition.EventType.END, function(e) { - col = [e.x, e.y, e.z]; - enableButtons(); - }); - anim.play(); - } - - function toggleRequestAnimationFrame() { - rafEnabled = !rafEnabled; - goog.fx.Animation.setAnimationWindow(rafEnabled ? window : null); - updateRafButton(); - } - - function updateRafButton() { - goog.dom.setTextContent(goog.dom.getElement('but15'), - rafEnabled ? - 'Disable timing control API' : 'Enable timing control API'); - } - - goog.fx.Animation.setAnimationWindow(window); - var rafEnabled = goog.fx.Animation.animationWindow_; - updateRafButton(); - </script> -</body> -</html> |